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.

Transcript

1. BACKBONE.ROCKS Large Scale Single Page Application Done Right Jeremy Lu // jeremy@pubulous.com // Html5DevConf 2013
2. HI, MY NAME IS JEREMY LU
 FOUNDER, BUILDER, DEVELOPER
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 problem
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 APIs
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 events
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 discussion
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
 Eventing
 Variable scopes
 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
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
 pubulous.com
 lovelyreader.com
111. • Riaworks Consulting - professional training and consulting services • 中⽂文, ⽇日本語 OK • jeremy@pubulous.com
112. Q&A