Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Backbone Rocks - Large Scale Single Page App Done Right

Jeremy Lu
October 22, 2013

Backbone Rocks - Large Scale Single Page App Done Right

This was the talk I gave on Oct. 22 for #HTML5devconf held in Moscone Center North, SF.

Backbone.rocks is a set of best practices and guidelines to help you build robust large-scale single page application fast and confidently. This is free ebook I'm currently working on, which comes with fully documented sourced code, it will be available online soon. Below is a brief on what it is about and the core benefits it provides.

Jeremy Lu

October 22, 2013

More Decks by Jeremy Lu

Other Decks in Technology


  1. BACKBONE.ROCKS Large Scale Single Page Application Done Right Jeremy Lu

    // jeremy@pubulous.com // Html5DevConf 2013

  3. What’s in the talk ? 1. Key concepts for successful

    large scale web development 2. Backbone.rocks feature highlights
  4. Key concepts for successful large scale web development

  5. MV* Model-driven approach Modular design Dependency Injection (DI) Inter module

    communication Automated building process Testing House rules for quality control Deep understanding of Javascript
  6. MV*

  7. MVC, MVP, MVVM... You’ve heard all the buzz words

  8. Clear separation of concerns is the key here

  9. Backbone, Angularjs, Emberjs will all do the tricks

  10. If, and only if, done right - which is the

  11. Pick one, and make sure every team member totally understands

    how it works
  12. Model-driven approach

  13. "Single source of truth" principle

  14. Model is the single source of truth

  15. Views observe model changes and refresh themselves accordingly

  16. Always trigger view changes via model manipulation

  17. App/UI states always maintained in model

  18. Easier for debugging and testing

  19. Modular design

  20. Modular in the sense of
 concept and tooling

  21. Concept

  22. Organize application into smaller self-contained units

  23. Unit is fully encapsulated and absolutely decoupled from each other

    and the system
  24. Easier for teams to simultaneously work on multiple parts without

    interfering or depending on each other
  25. A simple page like this

  26. 1 2 3 4 Is actually composed of four sub-units

  27. Each unit can be switched or removed and it won’t

    affect the system at all
  28. Tooling

  29. Module loading and management using “Requirejs”

  30. Requirejs makes module loading and dependency management much easier for

    both development and production
  31. <script data-main="app" src="js/require.js"></script>

  32. One line of code gets all dependencies loaded in correct

    sequence r.js helps to combine and minify multiple files
  33. Plus, requirejs works well with most testing frameworks, like Karma

    & Testem
  34. Dependency Injection (DI)

  35. Inversion of Control 
 - the key concept behind

  36. Instead of hardcoding dependencies in code, Inject them at runtime

    when needed, For max flexibility
  37. Helps to make each part of the app highly decoupled

  38. DI goes hand in hand with modular design approach

  39. Modules are highly encapsulated Everything it needs will be passed

    in or better yet, injected That’s where DI comes into play
  40. // hardcoded dependencies function fooModule( bar, baz ){ var r

    = new bar(); var z = new baz(); } ! // dependencies injected at run time function fooModule(){ var r = new bar(); var z = new baz(); }
  41. Results in easily maintainable and testable code

  42. Using “Medic-Injector-JS” A lightweight DI library with easy to use

  43. Inter module communication

  44. A. Global event bus with namespaced event

  45. bus.dispatch( “loginView:submit” );

  46. Looks good initially, until it grows out of control...

  47. Events transmitted and caught all over the place, who’s doing

    what ?
  48. Anyone can listen to and dispatch events, extremely hard to

    control and debug
  49. B. Application model as signal bus

  50. Create an AppModel as global signal bus Which also persists

    application states
  51. Trigger events via getter and setter exposed by AppModel

  52. AppModel.set( ‘login’, {name:‘john’} ); bus.dispatch( “loginView:submit” );

  53. AppModel.on( ‘login’, handleLogin );

  54. Easier to track who’s changing the application state and triggering

  55. With added benefit of having all app states persisted in

    one place
  56. Automated build system

  57. Compile, combine, minify, watch for changes and more ...

  58. For Sass, Coffeescript, Javascript...

  59. Huge time saver for development, staging and production

  60. Use Node.js / Grunt

  61. Testing

  62. BDD + TDD

  63. Karma / Mocha / Chai / Sinon

  64. Continuous Integration and Deploy system

  65. Strider CD Travis CI Circle CI Jenkins CI

  66. House rules for quality control

  67. Use Git 
 github, bitbucket, self-hosted

  68. Everyone works in own feature branch

  69. When feature completed, send “Pull Request” for code review and

  70. Use rebase and merge wisely

  71. Gitflow is a nice to have

  72. Deep understanding of Javascript

  73. The Good Parts
 Effective JavaScript
 Secrets Of The

    JavaScript Ninja

  74. Closure
 Generic Object Oriented concept
 Universal Module Definition

 Function as first class citizen
  75. RECAP key concepts for successful large scale web development

  76. MV* Model-driven approach Modular design Dependency Injection (DI) Inter module

    communication Automated building process Testing House rules for quality control Deep understanding of Javascript
  77. Entering Backbone

  78. It’s a MVC meta-library Not a full fledged all-in-one framework

    Easy to use, but often times mis- used
  79. Because of it’s minimal design Lack of explicit guidelines for

    how to do things certain way Developers got “creative” and shoot themselves in the foot
  80. Backbone.rocks feature highlight

  81. * Backbone.rocks implemented the gist of aforementioned key concepts on

    top of backbone
  82. * It’s an add-on to Backbone

  83. * It’s a development showcase for large scale web application

  84. * It’s also a free ebook available on github

  85. Demo ! https://github.com/devmatters/ backbone.rocks

  86. None
  87. None
  88. None
  89. Model

  90. • Declarative one-to-many property and handler • Declarative validators for

    each property • Declarative default value setting and re-setting
  91. oneToMany: { reports: {type: 'js/models/ReportCollection', lazy: true} },

  92. validators: { firstName: 'validateName', lastName: 'validateName' }, validateName: function( value,

    field, options ){ if( value === “” ) return {field: field, msg: 'can not be empty'}; },
  93. defaults:{ blog: "", phone: "", city: "", department: "", email:

    "", firstName: "", id: null },
  94. View

  95. • Declarative model event handler • Cascaded sub-views handling •

    Automated view disposal to prevent memory leakage
  96. modelEvents: { "reset reportCollection" : "resetHandler" }, ! resetHandler: function(){

    this.redraw(); },
  97. • Form validation and error handler • Works with any

    client-side template technology • Full RWD interface using Bootstrap
  98. Examples on using various rich UI components

  99. Pagination of large collection using “backbone.paginator” with bootstrap ui control

  100. Form editing using “X-Editables” component

  101. Better dropdown menus and lists using “Select2” component

  102. Infinite scroll with paginated collection

  103. Misc.

  104. • Full OO approach (class inheritance using prototype) • Examples

    on how to override model/collection Sync • Controller example
  105. • Customized Routing • i18n/L10n support with LangManager using “polyglot”

    from Airbnb • Drop-in library which provides many convenient utilities to make development easier
  106. A few words on Angularjs

  107. • It has most of the niceties of backbone.rocks built

    in • Highly efficient and actively developed • Comes with full testing support, including UI test based on Selenium/WebDriver • Very steep learning curve, lack of training materials
  108. • For new project, especially CRUD kind, go with angularjs

    • For existing project, or DOM/UI heavy project, go with backbone.rocks • We love angularjs, currently working on "Angularjs.rocks" book, will port the app too
  109. About Us

  110. • Jeremy Lu, founder of visual-marks.com

  111. • Riaworks Consulting - professional training and consulting services •

    中⽂文, ⽇日本語 OK • jeremy@pubulous.com
  112. Q&A