Built to Last
5 likes9,984 views
The document discusses building scalable front-end application architectures using a modular approach, emphasizing the importance of modularity and abstraction for maintainability, extendability, and testing. It also outlines various module definitions, application frameworks, and techniques to manage communication and lifecycle within modules, including the mediator pattern. Additionally, it highlights the use of tools like Node.js, Backbone, and Require.js for efficient development and management of web applications.
Built to Last
- 1. Built to Last Building scalable front-end application architectures with business logic.
- 2. Dan Lynch Engineer & Artist questions/thoughts? @skatalynch
- 3. The Web
- 4. Building Things 1999, AutoCAD 10
- 5. I like helping other people build SideFX city builder interface 2006
- 6. Building things that build things Vim3D vim interface to building 3D
- 7. famo.us our biz dev built this app on the first famo.us framework
- 8. interface for building interactive textbooks mathapedia
- 9. building tools for people
- 10. Modularity is the degree to which top down a system’s components may be separated and recombined. (wikipedia) ? Abstraction is the process of formulating generalized ideas or concepts by extracting common qualities from specific examples bottom up (the free dictionaty) 10
- 11. Modularity top down • odules m • xtensions e large-scale rapid development Abstraction • outing r • ages p bottom up • ata/APIs d 11
- 12. Why Modularity?
- 13. Adding New Code Most time you spend is maintaining code, not writing new code
- 14. Intuitive Co-workers depend on your code to make sense
- 15. Extendability If features change, it’s easy to extend or swap parts
- 16. Debug/Test It’s easy to test individual modules
- 17. The Mythical Man Month Frederick Brooks Jr. “Men and months are interchangeable commodi- ties only when a task can be partitioned among many workers with no communication among them”
- 19. Spaghetti Code • specific to application • not reusable • the app is the testing framework
- 21. Modules • interdependent • little knowledge about the application • it is the sum of the modules that makes up the application
- 22. Module: Each of a set of standardized parts or independent units that can be used to con- struct a more complex structure (google definition)
- 23. Various Module Definitions + Terminolgies • JS module pattern • AMD modules • Web application modules
- 24. JavaScript Module Pattern private and public encapsulation using closures
- 25. AMD Modules
- 26. Web Application Modules HTML + CSS + JS (components)
- 27. Application Modules model view controller
- 28. Application Framework “An Application Framework is like a playground for your code” - Nicholas Zakas
- 29. Application Framework module module module module sandbox module extension extension core extension extension
- 30. Where to start backbone boilerplate modular + build for production aura modular + widgets + message passing
- 31. Sandbox facade “The programmer is most effective if shielded from, rather than exposed to the details of construction of system parts other than his own“ -Frederick Brooks Jr.
- 32. each module has a sandbox module module module module sandbox module extension extension core extension extension This promotes loose coupling so you can change modules without affecting others
- 33. each module has a sandbox
- 34. sandbox exposes functionality module module module sandbox core
- 36. application core module module module module sandbox module extension extension core extension extension
- 37. module registration, lifecycle, and intercommunication
- 38. application core is responsible for: message passing module life-cycle
- 39. application core - the mediator • communication hub & centralized controller • intermediary between interdependent modules
- 40. application core - the mediator only N channels! module module mediator module modules use transitive communication through mediator
- 42. publish “get-fb-photos” Gallery Module
- 44. subscribe “get-fb-photos” FB Integration Module
- 49. extending the core module module module module sandbox module extension extension core extension extension
- 50. Where is my layout? Where do my routes go? Where does my data live?
- 51. Decouple Your Web App Navigation URLs/routes/controllers Data data/models/collections Pages layouts/views/templates
- 53. layout extension enable abstraction of navigation paradigms
- 54. route:books router route:books module mediator render:books render:books layout
- 55. controller
- 56. layout
- 57. module group extension If a group of modules represents an application, what if we can manage groups to run multiple applications or portals within a single page app?
- 59. no change group v route yes route group? controller
- 61. change group swap layout afterRender() start modules $.when.apply($, promises).done
- 63. typical backend flow yes route middleware controller no middleware can protect resources
- 64. can the front-end JS function like the backend? route controller (typical Backbone routing with no FSM)
- 65. Finite State Machine • events • states • transitions • actions
- 67. fail() v no route yes route fsm controller Backbone routing with FSM
- 68. v swap layout fail() no no start modules yes route FSM group? yes enter() controller resetRoutes()
- 71. router extension • manage routes, delegate route callbacks to FSM module groups extension • modify core to handle groups with async/dfd layout extension • render views using message passing fsm extension • manage state (group) • if routes pass, send allow controllers to callback data extension • manage model/collection cache
- 72. what we covered how to take core components of a web application (routes, navigation, layouts, etc) and divy them up into modules/extensions so that the application can grow efficiently; without the need to refactor. bottom up + top down!
- 73. node.js tech to use and checkout end-to-end JS! backbone boilerplate great for build + gettings started aura widgets and module lifecycle backbone layout manager views/layouts async.js asyncronous flow control grunt.js build require.js module loading r.js optimizer
- 74. props, credit, and people to checkout Tim Branyen Addy Osmoni Nicholas Zakas
- 77. Thank You! @skatalynch