Component-based Front-End Architecture

Artyom Trityak

Real app?

Done!

Real app

Real app

Scalability? Oops…

No panic!

Component-based app

Component Folder

• Data Layer (models, collections, services)

• Views (Views, Directives)

• Public API (Controller)

Component structure

• Views, Models creation

• Listening public and local events

• Configuring component

• Business logic

• Public API

Component: Controller

• Backbone.Controller

• Marionette.Controller

• Chaplin Controller

• Angular.js Controller

Controller implementation

• Fetching / saving data (ajax, jsonp etc)

• Storing data and state (data object)

• Data operations (sorting, filtering, processing)

• Data logic

Component: Data Layer

• Backbone.Model

• Backbone.Collection

• Angular.js Service

Data Layer implementation

• Rendering templates

• DOM events binding (clicks, hovers etc)

• Data Layer DOM binding (1-2 way)

• Triggering actions events to controller

• No logic. NO LOGIC.

Component: Views

• Backbone.View

• Angular.js Directive

Views implementation

What next? Components communication

Publish user:get

Listen user :get

Component Users

Component CV

Server

Get CV for User X

Promises

jQuery.deferred Q promise

Promises

Promises

What next? Components communication

Publish user:get

Listen user :get

Component Users

Component CV

Server

Get CV for User X

promise

resolve

Global events: namingProject prefix:Module name:Event name

!

EC:USERS:GET EC:INVENTORY:RESET

EC:INVENTORY:LOADED

ScreensUsers

Zoom

Steps

Steps Screen

User details Screen

…

…

• Initialize components • Define screen routes • Define screen logic

EVENTS