webcamp: developer day: Архитектура приложений на основе...
DESCRIPTION
Архитектура приложений на основе компонентов Артем Тритяк Как создать большое приложение и не умереть? Как сделать приложение расширяемым и легко поддерживаемым? Как покрыть его тестами?TRANSCRIPT
![Page 1: WebCamp: Developer Day: Архитектура приложений на основе компонентов - Артем Тритяк](https://reader033.vdocument.in/reader033/viewer/2022052622/5591d4cc1a28abc4658b47bd/html5/thumbnails/1.jpg)
Component-based Front-End Architecture
Artyom Trityak
![Page 2: WebCamp: Developer Day: Архитектура приложений на основе компонентов - Артем Тритяк](https://reader033.vdocument.in/reader033/viewer/2022052622/5591d4cc1a28abc4658b47bd/html5/thumbnails/2.jpg)
Real app?
![Page 3: WebCamp: Developer Day: Архитектура приложений на основе компонентов - Артем Тритяк](https://reader033.vdocument.in/reader033/viewer/2022052622/5591d4cc1a28abc4658b47bd/html5/thumbnails/3.jpg)
Done!
![Page 4: WebCamp: Developer Day: Архитектура приложений на основе компонентов - Артем Тритяк](https://reader033.vdocument.in/reader033/viewer/2022052622/5591d4cc1a28abc4658b47bd/html5/thumbnails/4.jpg)
Real app
![Page 5: WebCamp: Developer Day: Архитектура приложений на основе компонентов - Артем Тритяк](https://reader033.vdocument.in/reader033/viewer/2022052622/5591d4cc1a28abc4658b47bd/html5/thumbnails/5.jpg)
Real app
![Page 6: WebCamp: Developer Day: Архитектура приложений на основе компонентов - Артем Тритяк](https://reader033.vdocument.in/reader033/viewer/2022052622/5591d4cc1a28abc4658b47bd/html5/thumbnails/6.jpg)
![Page 7: WebCamp: Developer Day: Архитектура приложений на основе компонентов - Артем Тритяк](https://reader033.vdocument.in/reader033/viewer/2022052622/5591d4cc1a28abc4658b47bd/html5/thumbnails/7.jpg)
Scalability? Oops…
![Page 8: WebCamp: Developer Day: Архитектура приложений на основе компонентов - Артем Тритяк](https://reader033.vdocument.in/reader033/viewer/2022052622/5591d4cc1a28abc4658b47bd/html5/thumbnails/8.jpg)
No panic!
![Page 9: WebCamp: Developer Day: Архитектура приложений на основе компонентов - Артем Тритяк](https://reader033.vdocument.in/reader033/viewer/2022052622/5591d4cc1a28abc4658b47bd/html5/thumbnails/9.jpg)
Component-based app
![Page 10: WebCamp: Developer Day: Архитектура приложений на основе компонентов - Артем Тритяк](https://reader033.vdocument.in/reader033/viewer/2022052622/5591d4cc1a28abc4658b47bd/html5/thumbnails/10.jpg)
Component Folder
• Data Layer (models, collections, services)
• Views (Views, Directives)
• Public API (Controller)
Component structure
![Page 11: WebCamp: Developer Day: Архитектура приложений на основе компонентов - Артем Тритяк](https://reader033.vdocument.in/reader033/viewer/2022052622/5591d4cc1a28abc4658b47bd/html5/thumbnails/11.jpg)
• Views, Models creation
• Listening public and local events
• Configuring component
• Business logic
• Public API
Component: Controller
![Page 12: WebCamp: Developer Day: Архитектура приложений на основе компонентов - Артем Тритяк](https://reader033.vdocument.in/reader033/viewer/2022052622/5591d4cc1a28abc4658b47bd/html5/thumbnails/12.jpg)
• Backbone.Controller
• Marionette.Controller
• Chaplin Controller
• Angular.js Controller
Controller implementation
![Page 13: WebCamp: Developer Day: Архитектура приложений на основе компонентов - Артем Тритяк](https://reader033.vdocument.in/reader033/viewer/2022052622/5591d4cc1a28abc4658b47bd/html5/thumbnails/13.jpg)
• Fetching / saving data (ajax, jsonp etc)
• Storing data and state (data object)
• Data operations (sorting, filtering, processing)
• Data logic
Component: Data Layer
![Page 14: WebCamp: Developer Day: Архитектура приложений на основе компонентов - Артем Тритяк](https://reader033.vdocument.in/reader033/viewer/2022052622/5591d4cc1a28abc4658b47bd/html5/thumbnails/14.jpg)
• Backbone.Model
• Backbone.Collection
• Angular.js Service
Data Layer implementation
![Page 15: WebCamp: Developer Day: Архитектура приложений на основе компонентов - Артем Тритяк](https://reader033.vdocument.in/reader033/viewer/2022052622/5591d4cc1a28abc4658b47bd/html5/thumbnails/15.jpg)
• 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
![Page 16: WebCamp: Developer Day: Архитектура приложений на основе компонентов - Артем Тритяк](https://reader033.vdocument.in/reader033/viewer/2022052622/5591d4cc1a28abc4658b47bd/html5/thumbnails/16.jpg)
• Backbone.View
• Angular.js Directive
Views implementation
![Page 17: WebCamp: Developer Day: Архитектура приложений на основе компонентов - Артем Тритяк](https://reader033.vdocument.in/reader033/viewer/2022052622/5591d4cc1a28abc4658b47bd/html5/thumbnails/17.jpg)
What next? Components communication
Publish user:get
Listen user :get
Component Users
Component CV
Server
Get CV for User X
![Page 18: WebCamp: Developer Day: Архитектура приложений на основе компонентов - Артем Тритяк](https://reader033.vdocument.in/reader033/viewer/2022052622/5591d4cc1a28abc4658b47bd/html5/thumbnails/18.jpg)
Promises
jQuery.deferred Q promise
![Page 19: WebCamp: Developer Day: Архитектура приложений на основе компонентов - Артем Тритяк](https://reader033.vdocument.in/reader033/viewer/2022052622/5591d4cc1a28abc4658b47bd/html5/thumbnails/19.jpg)
Promises
![Page 20: WebCamp: Developer Day: Архитектура приложений на основе компонентов - Артем Тритяк](https://reader033.vdocument.in/reader033/viewer/2022052622/5591d4cc1a28abc4658b47bd/html5/thumbnails/20.jpg)
Promises
![Page 21: WebCamp: Developer Day: Архитектура приложений на основе компонентов - Артем Тритяк](https://reader033.vdocument.in/reader033/viewer/2022052622/5591d4cc1a28abc4658b47bd/html5/thumbnails/21.jpg)
What next? Components communication
Publish user:get
Listen user :get
Component Users
Component CV
Server
Get CV for User X
promise
resolve
![Page 22: WebCamp: Developer Day: Архитектура приложений на основе компонентов - Артем Тритяк](https://reader033.vdocument.in/reader033/viewer/2022052622/5591d4cc1a28abc4658b47bd/html5/thumbnails/22.jpg)
Global events: namingProject prefix:Module name:Event name
!
EC:USERS:GET EC:INVENTORY:RESET
EC:INVENTORY:LOADED
![Page 23: WebCamp: Developer Day: Архитектура приложений на основе компонентов - Артем Тритяк](https://reader033.vdocument.in/reader033/viewer/2022052622/5591d4cc1a28abc4658b47bd/html5/thumbnails/23.jpg)
ScreensUsers
Zoom
Steps
Steps Screen
User details Screen
…
…
• Initialize components • Define screen routes • Define screen logic
EVENTS
![Page 24: WebCamp: Developer Day: Архитектура приложений на основе компонентов - Артем Тритяк](https://reader033.vdocument.in/reader033/viewer/2022052622/5591d4cc1a28abc4658b47bd/html5/thumbnails/24.jpg)