Download as PDF, PPTX
Uploaded byDan Lynch
Built to Last
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.
More Related Content
![Java Web Programming [7/9] : Struts2 Basics](https://cdn.slidesharecdn.com/ss_thumbnails/javaweb-module7-130106070851-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Built to Last
- 1. Built to Last Buildingscalable front-end application architectures with business logic.
- 2. Dan Lynch Engineer &Artist questions/thoughts? @skatalynch
- 3.
- 4. Building Things 1999, AutoCAD 10
- 5. I like helpingother people build SideFX city builder interface 2006
- 6. Building things thatbuild things Vim3D vim interface to building 3D
- 7. famo.us our biz devbuilt this app on the first famo.us framework
- 8. interface for building interactivetextbooks mathapedia
- 9. building tools forpeople
- 10. Modularity is thedegree 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.
- 13. Adding New Code Mosttime you spend is maintaining code, not writing new code
- 14. Intuitive Co-workers depend onyour code to make sense
- 15. Extendability If features change,it’s easy to extend or swap parts
- 16. Debug/Test It’s easy totest individual modules
- 17. The Mythical ManMonth 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”
- 18.
- 19. Spaghetti Code • specificto application • not reusable • the app is the testing framework
- 20.
- 21. Modules • interdependent • little knowledge aboutthe application • it is the sum of the modules that makes up the application
- 22. Module: Each ofa 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 privateand public encapsulation using closures
- 25.
- 26. Web Application Modules HTML + CSS + JS (components)
- 27. Application Modules model view controller
- 28. Application Framework “An ApplicationFramework 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 backboneboilerplate modular + build for production aura modular + widgets + message passing
- 31. Sandbox facade “The programmer ismost 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 hasa 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 hasa sandbox
- 34. sandbox exposes functionality module module module sandbox core
- 35.
- 36. application core module module module module sandbox module extension extension core extension extension
- 37. module registration, lifecycle, andintercommunication
- 38. application core isresponsible 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
- 41.
- 42. publish “get-fb-photos” Gallery Module
- 43.
- 44. subscribe “get-fb-photos” FB Integration Module
- 45.
- 46.
- 47.
- 48.
- 49. extending the core module module module module sandbox module extension extension core extension extension
- 50. Where is mylayout? Where do my routes go? Where does my data live?
- 51. Decouple Your WebApp Navigation URLs/routes/controllers Data data/models/collections Pages layouts/views/templates
- 53. layout extension enable abstractionof navigation paradigms
- 54. route:books router route:books module mediator render:books render:books layout
- 55.
- 56.
- 57. module group extension Ifa group of modules represents an application, what if we can manage groups to run multiple applications or portals within a single page app?
- 58.
- 59. no change group v route yes route group? controller
- 60.
- 61. change group swap layout afterRender() start modules $.when.apply($, promises).done
- 62.
- 63. typical backend flow yes route middleware controller no middleware can protect resources
- 64. can the front-endJS 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, andpeople to checkout Tim Branyen Addy Osmoni Nicholas Zakas
- 77. Thank You! @skatalynch