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

Backbone Rocks - Large Scale Single Page App Do...

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
Tweet

More Decks by Jeremy Lu

Other Decks in Technology

Transcript

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

    large scale web development 2. Backbone.rocks feature highlights
  2. 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
  3. MV*

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

    sequence r.js helps to combine and minify multiple files
  5. Modules are highly encapsulated Everything it needs will be passed

    in or better yet, injected That’s where DI comes into play
  6. // 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(); }
  7. 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
  8. 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
  9. • Declarative one-to-many property and handler • Declarative validators for

    each property • Declarative default value setting and re-setting
  10. validators: { firstName: 'validateName', lastName: 'validateName' }, validateName: function( value,

    field, options ){ if( value === “” ) return {field: field, msg: 'can not be empty'}; },
  11. • Declarative model event handler • Cascaded sub-views handling •

    Automated view disposal to prevent memory leakage
  12. • Form validation and error handler • Works with any

    client-side template technology • Full RWD interface using Bootstrap
  13. • Full OO approach (class inheritance using prototype) • Examples

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

    from Airbnb • Drop-in library which provides many convenient utilities to make development easier
  15. • 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
  16. • 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
  17. Q&A