This document discusses component-based front-end architecture. It recommends organizing components into folders for the data layer (models, collections, services), views (views, directives), and public API (controller). The controller implements business logic, stores data/state, and handles data operations. Views render templates, bind to DOM events and the data layer, and trigger actions to the controller with no logic. The data layer examples include Backbone and Angular models/collections/services. Components communicate through publishing and listening to global events with a naming convention. Deferred/promises are used to handle asynchronous operations between components. Screens initialize components and define routes and screen logic.

1. Component-based Front-End
Architecture
Artyom Trityak

2. Real app?

3. Done!

4. Real app

5. Real app

7. Scalability? Oops…

8. No panic!

9. Hierarchical MVC

10. Component Folder
• Data Layer (models, collections, services)
• Views (Views, Directives)
• Public API (Controller)*
Component structure
*At AngularJS app Services provides component Public API

11. • Views, Models creation
• Public API, Listening events
• Configuring initial state of component
• Business logic
Controller

12. • Backbone.Controller
• Marionette.Controller
• Angular.js Controller
Controller implementation

13. • Fetching / saving data (ajax, jsonp etc)
• Storing data and state
• Data operations (sorting, filtering, processing)
Data Layer

14. • Backbone.Model
• Backbone.Collection
• Angular.js Service
Data Layer examples

15. • 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

16. • Backbone.View
• Angular.js Directive
Views examples

17. What next?
Components communication
Publish
user:get
Listen
user:get
Component
Users
Component
CV
Server
Get CV for User X

18. Deferred / Promises
jQuery.deferred Q

19. Deferred / Promises

20. Deferred / Promises
App Users
App
Server
get data

21. Components communication
Publish
user:get
Listen
user:get
Component
Users
Component
CV
Server
Get CV for User X
deferred
resolve
…
…

22. Deferred / Promises

23. Deferred / Promises

24. Global events: naming
Project prefix:Module name:Event name
!
EC:USERS:GET
EC:INVENTORY:RESET
EC:INVENTORY:LOADED

25. Screens
Users
Zoom
Steps
Steps Screen
User details
Screen
…
…
• Initialize components
• Define screen routes
• Define screen logic
E
V
E
N
T
S
Menu