1 / 49

Scalable JavaScript Application Architecture

Scalable JavaScript Application Architecture. SoftServe. Ability. Agility. Advantage. “May you live in interesting times.”. –Traditional Chinese Curse. “I will think about UI architecture tomorrow … maybe …”. –Unemployed Architect. we will do that. We are professionals.

orlando-butler
Download Presentation

Scalable JavaScript Application Architecture

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Scalable JavaScript Application Architecture • SoftServe • Ability. • Agility. • Advantage.

  2. “May you live in interesting times.” • –Traditional Chinese Curse

  3. “I will think about UI architecture tomorrow … maybe …” • –Unemployed Architect

  4. we will do that We are professionals

  5. how to avoid such?

  6. solid (Single responsibility, Open-closed, Liskov substitution, Interface segregation and Dependency inversion)

  7. Gof design patterns Richard Helm, Erich Gamma, Ralph Johnson, and John Vlissides

  8. GoF Patterns in JavaScript https://github.com/kbuzyk/GoF-patterns-in-JavaScript/blob/master/GoF_patterns_in_JavaScript.js

  9. separation of concerns savvy?

  10. N-tier architecture - MV* | mvW MVC | MCP | MVVM

  11. Three-tier application

  12. layer • layer • layer Three-tier application

  13. USER • VIEW • CONTROLLER • MODEL • application data, • business rules, • logic, • functions • manipulates • updates • sees • uses • accepts input • and converts it to • commands for • the model or view • output representation of information; • listens user's events MVC

  14. accepts input • and converts it to • commands for • the model or view; • business rules, • logic, • functions; • contains UI business logic for the view • USER • PRESENTER • VIEW • MODEL • passes calls to • manipulates • updates • notifies • uses • sees • output representation of information • application data MVP

  15. accepts input • and converts it to • commands for • the model or view; • business rules, • logic, • functions; • contains UI business logic for the view • USER • ADAPTER • VIEW • MODEL • passes calls to • manipulates • updates • notifies • uses • sees • output representation of information • application data MVA

  16. USER • ADAPTER • VIEW • MODEL • ADAPTER • ADAPTER • passes calls to • manipulates • updates • notifies • uses • sees MVA

  17. application data, • business rules, • logic, • functions • USER • MODEL • VIEW • VIEWMODEL • listens • updates • serves in • mediating • between the • view and the • model • updates • listens • output • representation • of information; • listens user's • events • uses • sees MVVM

  18. application data, • business rules, • logic, • functions • USER • MODEL • VIEW • BINDER • listens • updates • serves in • mediating • between the • view and the • model • updates • listens • output • representation • of information; • listens user's • events • uses • sees MVB

  19. separation of concerns again, doh?…

  20. In software design, modularity refers to a logical partitioning of the "software design" that allows complex software to be manageable for the purpose of implementation and maintenance. The logic of partitioning may be based on related functions, implementation considerations, data links, or other criteria. Modularity as Wikipedia says

  21. Modularity in UI

  22. Modularity in Life

  23. Base Library • Extension • Extension Scalable JS Application

  24. Application Core • Base Library • Extension • Extension • Extension • Extension Scalable JS Application

  25. Sandbox • Application Core • Base Library • Extension • Extension • Extension • Extension Scalable JS Application

  26. Sandbox • Application Core • Base Library • Module • Module • Module • Module • Module • Extension • Extension • Extension • Extension Scalable JS Application

  27. CONTROLLER • MODEL • VIEW • Triada (Agent) • Module Scalable JS Application

  28. Application Core • Level 3 • Module • Level 2 • Module • Module • Module • Level 1 • Module • Module Scalable JS Application

  29. Application Core • Level 3 • Module • Level 2 • Module • Module • Module • Level 1 • Module • Module Scalable JS Application

  30. Sandbox • Level 3 • Module • Level 2 • Module • Module • Module • Level 1 • Module • Module Scalable JS Application

  31. Sandbox • Level 3 • Module • Level 2 • Module • Module • Module • Level 1 • Module • Module Scalable JS Application

  32. backbone library, not a framework

  33. provides • Model (and Collection of models) • View • Routing • Events (can be used as ViewModel) • Else do as you wish

  34. ember A framework for creating ambitious web

  35. provides • Model • View • Routing • Controller • Bindings • Else do as you wish

  36. knockout just implements Two-Way Data Binding

  37. provides • ViewModel • Model (as simple JS Object) • View (as HTML) • Else do as you wish

  38. kendo • Kendo UI Everything you need to build modern sites and apps with HTML5/JS

  39. Kendo UI • provides • ViewModel • Model (as simple JS Object) • View (as HTML) • Build-in Widgets • Else do as you wish

  40. canjs with modern features like custom tags and 2-way binding

  41. provides • Model • View • Routing • ViewModel • Else do as you wish

  42. extjs JavaScript framework with an MVC/MVVM architecture and modern UI widgets

  43. provides • View • Model (as Models and Stores) • Controller • ViewModel • Routing (via Controllers) • ViewController • Build-in Widgets • Else do as you wish

  44. angular superheroic JavaScript MVW framework

  45. provides • View (as HTML and Directives) • Controller (witch plays role of Presenter and ViewModel) • Routing • Model (as JS object or Service) • Modularity • More interesting, huh?

  46. pros and cons • understandability • performance • scalability • maintainability • testability • extensibility • flexibility • modifiability • reusability • understandability • … • etc.

  47. questions?

More Related