BACKBONE.ROCKS
Large Scale Single Page Application Done Right
Jeremy Lu // [email protected] // Html5DevConf 2013
Slide 2
Slide 2 text
HI, MY NAME IS JEREMY LU
FOUNDER, BUILDER, DEVELOPER
Slide 3
Slide 3 text
What’s in the talk ?
1. Key concepts for successful large scale
web development
2. Backbone.rocks feature highlights
Slide 4
Slide 4 text
Key concepts for successful large
scale web development
Slide 5
Slide 5 text
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
Slide 6
Slide 6 text
MV*
Slide 7
Slide 7 text
MVC, MVP, MVVM...
You’ve heard all the buzz words
Slide 8
Slide 8 text
Clear separation of concerns is
the key here
Slide 9
Slide 9 text
Backbone, Angularjs, Emberjs will
all do the tricks
Slide 10
Slide 10 text
If, and only if, done right - which is
the problem
Slide 11
Slide 11 text
Pick one, and make sure every
team member totally understands
how it works
Slide 12
Slide 12 text
Model-driven approach
Slide 13
Slide 13 text
"Single source of truth" principle
Slide 14
Slide 14 text
Model is the single source of truth
Slide 15
Slide 15 text
Views observe model changes and
refresh themselves accordingly
Slide 16
Slide 16 text
Always trigger view changes via
model manipulation
Slide 17
Slide 17 text
App/UI states always maintained in
model
Slide 18
Slide 18 text
Easier for debugging and testing
Slide 19
Slide 19 text
Modular design
Slide 20
Slide 20 text
Modular in the sense of
concept and tooling
Slide 21
Slide 21 text
Concept
Slide 22
Slide 22 text
Organize application into smaller
self-contained units
Slide 23
Slide 23 text
Unit is fully encapsulated and
absolutely decoupled from each
other and the system
Slide 24
Slide 24 text
Easier for teams to simultaneously
work on multiple parts without
interfering or depending on each
other
Slide 25
Slide 25 text
A simple page like this
Slide 26
Slide 26 text
1 2
3 4
Is actually composed of four sub-units
Slide 27
Slide 27 text
Each unit can be switched or
removed and it won’t affect the
system at all
Slide 28
Slide 28 text
Tooling
Slide 29
Slide 29 text
Module loading and management
using “Requirejs”
Slide 30
Slide 30 text
Requirejs makes module loading
and dependency management
much easier for both development
and production
Slide 31
Slide 31 text
Slide 32
Slide 32 text
One line of code gets all
dependencies loaded in correct
sequence
r.js helps to combine and minify
multiple files
Slide 33
Slide 33 text
Plus, requirejs works well with
most testing frameworks, like
Karma & Testem
Slide 34
Slide 34 text
Dependency Injection (DI)
Slide 35
Slide 35 text
Inversion of Control
- the key concept behind
Slide 36
Slide 36 text
Instead of hardcoding
dependencies in code,
Inject them at runtime when
needed,
For max flexibility
Slide 37
Slide 37 text
Helps to make each part of the
app highly decoupled
Slide 38
Slide 38 text
DI goes hand in hand with
modular design approach
Slide 39
Slide 39 text
Modules are highly encapsulated
Everything it needs will be passed
in or better yet, injected
That’s where DI comes into play
Slide 40
Slide 40 text
// 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();
}
Slide 41
Slide 41 text
Results in easily maintainable and
testable code
Slide 42
Slide 42 text
Using “Medic-Injector-JS”
A lightweight DI library with easy
to use APIs
Slide 43
Slide 43 text
Inter module communication
Slide 44
Slide 44 text
A. Global event bus with
namespaced event
Slide 45
Slide 45 text
bus.dispatch( “loginView:submit” );
Slide 46
Slide 46 text
Looks good initially, until it grows
out of control...
Slide 47
Slide 47 text
Events transmitted and caught all
over the place, who’s doing what ?
Slide 48
Slide 48 text
Anyone can listen to and dispatch
events, extremely hard to control
and debug
Slide 49
Slide 49 text
B. Application model as signal bus
Slide 50
Slide 50 text
Create an AppModel as global
signal bus
Which also persists application
states
Slide 51
Slide 51 text
Trigger events via getter and setter
exposed by AppModel
Easier to track who’s changing the
application state and triggering
events
Slide 55
Slide 55 text
With added benefit of having all
app states persisted in one place
Slide 56
Slide 56 text
Automated build system
Slide 57
Slide 57 text
Compile, combine, minify, watch
for changes and more ...
Slide 58
Slide 58 text
For Sass, Coffeescript, Javascript...
Slide 59
Slide 59 text
Huge time saver for development,
staging and production
Slide 60
Slide 60 text
Use Node.js / Grunt
Slide 61
Slide 61 text
Testing
Slide 62
Slide 62 text
BDD + TDD
Slide 63
Slide 63 text
Karma / Mocha / Chai / Sinon
Slide 64
Slide 64 text
Continuous Integration and
Deploy system
Slide 65
Slide 65 text
Strider CD
Travis CI
Circle CI
Jenkins CI
Slide 66
Slide 66 text
House rules for quality control
Slide 67
Slide 67 text
Use Git
github, bitbucket, self-hosted
Slide 68
Slide 68 text
Everyone works in own feature
branch
Slide 69
Slide 69 text
When feature completed, send
“Pull Request” for code review
and discussion
Slide 70
Slide 70 text
Use rebase and merge wisely
Slide 71
Slide 71 text
Gitflow is a nice to have
Slide 72
Slide 72 text
Deep understanding of Javascript
Slide 73
Slide 73 text
The Good Parts
Effective JavaScript
Secrets Of The JavaScript Ninja
Slide 74
Slide 74 text
Closure
Generic Object Oriented concept
Universal Module Definition
Eventing
Variable scopes
Function as first class citizen
Slide 75
Slide 75 text
RECAP
key concepts for successful large
scale web development
Slide 76
Slide 76 text
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
Slide 77
Slide 77 text
Entering Backbone
Slide 78
Slide 78 text
It’s a MVC meta-library
Not a full fledged all-in-one
framework
Easy to use, but often times mis-
used
Slide 79
Slide 79 text
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
Slide 80
Slide 80 text
Backbone.rocks feature highlight
Slide 81
Slide 81 text
* Backbone.rocks implemented
the gist of aforementioned key
concepts on top of backbone
Slide 82
Slide 82 text
* It’s an add-on to Backbone
Slide 83
Slide 83 text
* It’s a development showcase for
large scale web application
• Form validation and error handler
• Works with any client-side
template technology
• Full RWD interface using
Bootstrap
Slide 98
Slide 98 text
Examples on using various rich UI
components
Slide 99
Slide 99 text
Pagination of large collection using
“backbone.paginator” with
bootstrap ui control
Slide 100
Slide 100 text
Form editing using “X-Editables”
component
Slide 101
Slide 101 text
Better dropdown menus and lists
using “Select2” component
Slide 102
Slide 102 text
Infinite scroll with paginated
collection
Slide 103
Slide 103 text
Misc.
Slide 104
Slide 104 text
• Full OO approach (class
inheritance using prototype)
• Examples on how to override
model/collection Sync
• Controller example
Slide 105
Slide 105 text
• Customized Routing
• i18n/L10n support with
LangManager using “polyglot” from
Airbnb
• Drop-in library which provides
many convenient utilities to make
development easier
Slide 106
Slide 106 text
A few words on Angularjs
Slide 107
Slide 107 text
• 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
Slide 108
Slide 108 text
• 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
Slide 109
Slide 109 text
About Us
Slide 110
Slide 110 text
• Jeremy Lu, founder of
visual-marks.com
pubulous.com
lovelyreader.com
Slide 111
Slide 111 text
• Riaworks Consulting - professional
training and consulting services
• 中⽂文, ⽇日本語 OK
• [email protected]