Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Built to Last


Published on

Design on a scalable, state-based, front-end application architecture to manage business logic and control flow. We'll synthesize a number of programming patterns to help you decouple not only views and data, but also navigation paradigms and transitions between states to keep your product agile and moving forward without having to refactor.

Published in: Technology

Built to Last

  1. 1. Built to LastBuilding scalable front-end application architectureswith business logic.
  2. 2. Dan LynchEngineer & Artist questions/thoughts? @skatalynch
  3. 3. The Web
  4. 4. Building Things 1999, AutoCAD 10
  5. 5. I like helping other peoplebuildSideFXcity builder interface2006
  6. 6. Building things that buildthingsVim3Dvim interface to building 3D
  7. 7. famo.usour biz dev built thisapp on the first famo.usframework
  8. 8. interface for buildinginteractive textbooks mathapedia
  9. 9. building tools for people
  10. 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. 11. Modularity top down • odules m • xtensions e large-scale rapid development Abstraction • outing r • ages p bottom up • ata/APIs d11
  12. 12. Why Modularity?
  13. 13. Adding New CodeMost time you spend is maintainingcode, not writing new code
  14. 14. IntuitiveCo-workers depend on your code tomake sense
  15. 15. ExtendabilityIf features change, it’seasy to extend or swapparts
  16. 16. Debug/TestIt’s easy to test individual modules
  17. 17. The Mythical Man MonthFrederick Brooks Jr.“Men and months are interchangeable commodi-ties only when a task can be partitioned among manyworkers with no communication among them”
  18. 18. Complex Communication
  19. 19. Spaghetti Code• specific to application• not reusable• the app is the testing framework
  20. 20. Perfectly Partitionable
  21. 21. Modules• interdependent• little knowledge about the application• it is the sum of the modules that makes up the application
  22. 22. Module: Each of a set of standardized partsor independent units that can be used to con-struct a more complex structure (google definition)
  23. 23. Various Module Definitions +Terminolgies• JS module pattern• AMD modules• Web application modules
  24. 24. JavaScript Module Patternprivate and public encapsulation using closures
  25. 25. AMD Modules
  26. 26. Web Application Modules HTML + CSS + JS (components)
  27. 27. Application Modules model view controller
  28. 28. Application Framework“An Application Framework is like a playground for your code” - Nicholas Zakas
  29. 29. Application Frameworkmodule module modulemodule sandbox moduleextension extension coreextension extension
  30. 30. Where to startbackbone boilerplate modular + build for productionaura modular + widgets + message passing
  31. 31. Sandboxfacade“The programmer is most effective if shieldedfrom, rather than exposed to the details ofconstruction of system parts other than hisown“-Frederick Brooks Jr.
  32. 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. 33. each module has a sandbox
  34. 34. sandbox exposes functionality module module module sandbox core
  35. 35. sandbox exposes functionality
  36. 36. application coremodule module modulemodule sandbox moduleextension extension coreextension extension
  37. 37. module registration, lifecycle,and intercommunication
  38. 38. application core is responsible for:message passingmodule life-cycle
  39. 39. application core - the mediator• communication hub & centralized controller• intermediary between interdependent modules
  40. 40. application core - the mediator only N channels! module module mediator modulemodules use transitive communication through mediator
  41. 41. publishphoto gallery module
  42. 42. publish “get-fb-photos”Gallery Module
  43. 43. “get-fb-photos”mediator
  44. 44. subscribe“get-fb-photos” FB Integration Module
  45. 45. subscribefb integration module
  46. 46. photo gallery module
  47. 47. module life-cycle
  48. 48. build forextension
  49. 49. extending the coremodule module modulemodule sandbox moduleextension extension coreextension extension
  50. 50. Where is my layout?Where do my routes go?Where does my data live?
  51. 51. Decouple Your Web AppNavigation URLs/routes/controllersData data/models/collectionsPages layouts/views/templates
  52. 52. layout extensionenable abstraction of navigation paradigms
  53. 53. route:booksrouter route:booksmodule mediator render:books render:bookslayout
  54. 54. controller
  55. 55. layout
  56. 56. module group extensionIf a group of modulesrepresents anapplication, what if wecan manage groups torun multiple applicationsor portals within a singlepage app?
  57. 57. module group extension
  58. 58. no change group v route yesroute group? controller
  59. 59. module group extension
  60. 60. change group swap layout afterRender() start modules $.when.apply($, promises).done
  61. 61. Protecting Resources/Modules
  62. 62. typical backend flow yesroute middleware controller no middleware can protect resources
  63. 63. can the front-end JS function like the backend? route controller (typical Backbone routing with no FSM)
  64. 64. Finite State Machine• events• states• transitions• actions
  65. 65. fail() v no route yes route fsm controllerBackbone routing with FSM
  66. 66. v swap layout fail() no no start modules yesroute FSM group? yes enter() controller resetRoutes()
  67. 67. router extension• manage routes, delegate route callbacks to FSMmodule groups extension• modify core to handle groups with async/dfdlayout extension• render views using message passingfsm extension• manage state (group)• if routes pass, send allow controllers to callbackdata extension• manage model/collection cache
  68. 68. what we covered how to take core components of aweb 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!
  69. 69. node.js tech to use and checkout end-to-end JS!backbone boilerplate great for build + gettings startedaura widgets and module lifecyclebackbone layout manager views/layoutsasync.js asyncronous flow controlgrunt.js buildrequire.js module loadingr.js optimizer
  70. 70. props, credit, and people to checkout Tim Branyen Addy Osmoni Nicholas Zakas
  71. 71. Thank You! @skatalynch