Архитектура приложений на основе компонентов Артем Тритяк Как создать большое приложение и не умереть? Как сделать приложение расширяемым и легко поддерживаемым? Как покрыть его тестами?

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. Component-based app

10. Component structure
Component Folder
• Data Layer (models, collections, services)
• Views (Views, Directives)
• Public API (Controller)

11. Component: Controller
• Views, Models creation
• Listening public and local events
• Configuring component
• Business logic
• Public API

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

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

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

15. Component: Views
• Rendering templates
• DOM events binding (clicks, hovers etc)
• Data Layer DOM binding (1-2 way)
• Triggering actions events to controller
• No logic. NO LOGIC.

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

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

18. Promises
jQuery.deferred Q promise

19. Promises

20. Promises

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

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

23. Screens
Users
Steps
Zoom
Steps Screen
…
User details
Screen
…
• Initialize components
• Define screen routes
• Define screen logic
EVENTS