Component-based Front-End Architecture

Artyom Trityak

Real app?

Done!

Real app

Real app

Scalability? Oops…

No panic!

Hierarchical MVC

Component Folder

• Data Layer (models, collections, services)

• Views (Views, Directives)

• Public API (Controller)*

Component structure

*At AngularJS app Services provides component Public API

• Views, Models creation

• Public API, Listening events

• Configuring initial state of component

• Business logic

Controller

• Backbone.Controller

• Marionette.Controller

• Angular.js Controller

Controller implementation

• Fetching / saving data (ajax, jsonp etc)

• Storing data and state

• Data operations (sorting, filtering, processing)

Data Layer

• Backbone.Model

• Backbone.Collection

• Angular.js Service

Data Layer examples

• Rendering templates

• DOM events binding (clicks, hovers etc)

• Data Layer DOM binding (1-2 way)

• No logic. NO LOGIC =>

• Triggering actions events to controller

Views

• Backbone.View

• Angular.js Directive

Views examples

What next? Components communication

Publish user:get

Listen user :get

Component Users

Component CV

Server

Get CV for User X

Deferred / Promises

jQuery.deferred Q

Deferred / Promises

Deferred / PromisesApp Users

App

Server

get data

Components communicationPublish user:get

Listen user :get

Component Users

Component CV

Server

Get CV for User X

deferred

resolve…

…

Deferred / Promises

Deferred / Promises

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

Menu