Marionette
Getting the most out Backbone.js
@th3hunt
Slide 2
Slide 2 text
Backbone.js
• models with key-value
binding and custom events
• collections with a rich API of
enumerable functions
• views with declarative event
handling
• connects to your existing API
over a RESTful JSON
interface.
Slide 3
Slide 3 text
Backbone Rocks
but is NOT a complete framework
Slide 4
Slide 4 text
it works on a Micro Level
Slide 5
Slide 5 text
Let’s see why
Slide 6
Slide 6 text
View
• el //div.character
• ‘click .kill’: ‘kill’
• kill: function () {…}
Model
{
name: Ned
surname: Stark
}
• urlRoot: ‘/characters’
Template
{{name}} {{surname}}kill
~ part of a Collection
Slide 7
Slide 7 text
1 collection
of 3 models
behind 3 views
Component
Level
Slide 8
Slide 8 text
But what about…
Slide 9
Slide 9 text
Component B
Component C Component D
Sub Component A
Sub Component A
Sub Component A
Component A
Slide 10
Slide 10 text
Coarse grained
Views?
Slide 11
Slide 11 text
Then we did nothing
View’s EL becomes our new DOM root
Slide 12
Slide 12 text
Each component also
a View?
Slide 13
Slide 13 text
30,000 feet view
Slide 14
Slide 14 text
– Me :)
“It would be like a town with beautiful
apartments and terrible street planning”
Slide 15
Slide 15 text
and there is more to it
Slide 16
Slide 16 text
bootstrapping a new project
you find yourself in front of a blank slate