Architecture patterns for front-end apps

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