Backbone

Backbone.js
How to write a well structured multi page
web application
Thursday, September 12, 13

About
• Ynon Perek
• ynon@ynonperek.com
• Find and download slides from:
http://ynonperek.com

Unstructured JS
• Developer Starts
writing JS code
• App gets big,
developer gets
angry

What We Want
• Build apps like lego
• Everything has a
place

JS Solution
• Separate Logic from View
• Use a framework

MV* Frameworks
Model
View
*

Available JS MV*
• And a lot more...
• Nice comparison: http://todomvc.com/

Backbone.js
• Created by Jeremy
Ashkenas
• Goal: Keep your
code AWAY from
the DOM

Reasons Why
• Well tested and proven
• Strong community
• Simple: Almost no magic

Who’s Using Backbone ?
Big list: http://backbonejs.org

Backbone (MV*)
Concepts

Application Structure
• Each “page” is just a
div
• “Page” can be a full
page or partial
<body>
<div class="page">
<h1>About Page</h1>
</div>
<div class="page">
<h1>Main Page</h1>
</div>
<div class="page">
<h1>Item Info</h1>
</div>

</body>

• Navigating in the app is just calling a
route function
• Route function slides divs in-and-out
help: function() {
alert('What can I help you with ?');
}

• Implementing Client-side logic
• Models “know”
• Views “show”

Model View DOM
Store Data Renders Data

Models
• Models store your data
• Models have no visual representation
• Functionality for managing changes

Views
• A View provides the visual representation
of a model
Task Model

Collections
• Models are usually grouped in collections
* Task Model
* Task Model
* Task Model
Daily
Tasks
Walk the dog
Water the plans

Backbone Beneﬁts
• Good separation of
concerns
• Best for large client-
side applications

What Backbone Is Not
• It’s not a framework
• So it’s ok to use only parts of it

• It’s not for small apps that just
“show data”
• Backbone assumes client-side logic

• It will never get in your way :)

Coding Time

Todo App
• Model for each task
• View for each task
• Main application view

Task Model
(function(global) {

    global.models.Task = Backbone.Model.extend({
        defaults: {
            completed: false,
            text: ''
        }
    });

}(this));

Task Model
(function(global) {

        defaults: {
            completed: false,
            text: ''
        }
    });

}(this));
Deﬁne a new model

Task Model
(function(global) {

        defaults: {
            completed: false,
            text: ''
        }
    });

}(this));
Set default values

Task View
    global.views.TaskView = Backbone.View.extend({
        tagName: "div",
        className: "task",
        events: {
            "click" : "handle_click"
        },
Deﬁne a new View

Task View
        tagName: "div",
        className: "task",
        events: {
        },
Specify HTML element

Task View
        tagName: "div",
        className: "task",
        events: {
        },
Deﬁne Event Handlers
name of a method that will be
called when the view is clicked

View Rendering
• render() method of a view is used to
render it to HTML
• Usually implemented with client side
template engine

Task View
        render: function() {
            this.$el.html( this.template( this.model.toJSON()));
            return this;
        },
        template: Handlebars.compile($('#task-template').html())
Deﬁne Render Function

Task View
            return this;
        },
Paint The View onto HTML

Task View
            return this;
        },
Handlebars is used as a template engine

Task View
        initialize: function(opts) {
            this.model.on('change', this.render, this );
        },
        handle_click: function() {
            if ( this.model.get('completed') ) {
                this.model.set('completed', false);
            } else {
                this.model.set('completed', true);
            }
        },
initialize is called from a view’s constructor

Task View
        },
            } else {
            }
        },
We use it to bind event handlers on the model

Task View
        },
            } else {
            }
        },
Implementing the clicks handler

Main App View
    global.views.AppView = Backbone.View.extend({
        el: $('body'),
        events: {
            "click .add-btn": "add_task"
        },
        add_task: function() {
            var task_description = this.$el.find('input').val();
            var tm = new global.models.Task({ text: task_description });
            var tv = new global.views.TaskView({model: tm});
            this.$el.find('ul').append(tv.render().el);
            this.$el.find('input').val('');
        }
    });

Take Aways
• Models keep data
• Views show data
• Views listen for model changes using on
• Views listen for DOM changes using
events

Lab
• Add a “Priority” ﬁeld to a task
• Render high priority tasks in red, medium
priority tasks in yellow and normal in
green

Backbone Router
• A Router connects URL with application
state
• This allows internal bookmarking and
history management

Hello Router
• You only
need
one
• Deﬁnes
routes
and
handlers
var router = new (Backbone.Router.extend({
routes: {
'' : 'home',
'help' : 'help'
},

home: function() {
alert('WElcome home');
},

help: function() {
alert('What can I help you with ?');
}
}))();

Backbone.history.start({ pushState: true } );

Changing State
• Use router.navigate( url ) to
change state
• Pass { trigger: true } if you need to
also trigger the route

Demo
• Let’s add a View Task page
• Shows a speciﬁc task in details
• Then connect the pages using a router

Server Side
Models
How to get server data using
Backbone Models

Models & The Server
• Set the urlRoot property of a model to
allow it to sync with your server

Models & The Server
Model Id
Model
Method
HTTP Method Url
id == 1 .fetch() GET /todos/1
id == 1 .save() PUT /todos/1
no id .fetch() GET /todos
no id .save() POST /todos

Server Events
• request event is triggered when sync
starts
• change event is triggered when an
attribute value has changed
• sync event is triggered when save is
completed (i.e. data is saved on server)

Server URLs
• POST /items => return a new item
• GET /items/id => return an existing
item by its id
• PUT /items/id => change existing
item by its id

Demo:
https://github.com/ynonp/mobileweb-
examples/tree/master/ajax/Backbone

Q & A

Collections

Collections
• Groups of models
• Add/Remove events
• Sync from server

Collections
Feed The Zombie
Plant The Brainz
Do The Zombie Walk
Todos Collection
Todo Models

Collection Actions
• col.length : number of models in
the collection
• col.add(m) : add a model
• col.remove(m) : remove a model

Collection Actions
• col.at( index ) : get a model at a
speciﬁc index
• col.get( id ) : get a model by its id

Collection Actions
• reset( array_of_models ) : sets the
collection’s data

Collections Demo
• Add a Tasks collection
• Add a Counter view
• Show active tasks count

Collections
    global.models.TasksGroup = Backbone.Collection.extend({
        model: global.models.Task
    })
Deﬁne a new collection
A collection needs to create objects, so we must
provide the type as a class

Collection Views
• It’s ok to create a view for a collection
• Just pass in the collection to the view’s
new method
• Render delegates its job to subviews
• Demo: Create a collection view for
TasksGroup

Collection Views
var $el = this.$el;

$el.html('');

this.collection.forEach(function(model) {
var v = new app.views.Task( { model: model } );
$el.append( v.render() );
});

return $el;
},

Collection Views
var $el = this.$el;

$el.html('');

this.collection.forEach(function(model) {
var v = new app.views.Task( { model: model } );
$el.append( v.render() );
});

return $el;
},
Pop Quiz:
What can go wrong ?

Managing Subviews
• If subviews also listen for model events,
you will need to stop listening before
removing the container view
• Solution: keep a list of subviews in
container

More Collection Views
• Same data, different views
• Let’s create a counter view
• Show total number of tasks

Collections
       initialize: function() {
            var cv = new global.views.CounterView(
{ tasks: this.tasks }).render();
            this.$el.append( cv.el );
            this.tasks.on('add', cv.render, cv );
            this.tasks.on('remove', cv.render, cv);
        },
In appview.js
Collections trigger events when models are
added or removed

Collections
   global.views.CounterView = Backbone.View.extend({
        tagName: 'div',
        className: 'counter',
            this.tasks = opts.tasks;
        },
            console.dir(this.el);
            this.$el.html( this.template(
{ count: this.tasks.length }));
            return this;
        },
        template: Handlebars.compile( $('#counter-template').html() )
    });

Lab
• Modify CounterView so it will also display
the number of unﬁnished tasks

Other Collection Methods
• forEach (function(item) { ... } )
• find
• filter
• include
• toArray

Collection and Server
• Retrieve a collection from the server
using fetch()
• url is a property of collection
• change event is triggered if server state is
different

Collections Server URLs
• GET /items => returns all items

Collection Events
• reset event is triggered after fetch() or
reset()
• add() event is triggered when a model
is added to a collection
• remove() event is triggered when a
model is removed from a collection

Extending Backbone
• Nested Collections
• Pagination
• Data Binding
• Forms

Extending Backbone
• Backbone is easy to extend:
• You can add functions to the
Backbone namespace
• You can override Backbone’s methods

Try This
• Add function toggle() to Backbone.Model
to toggle bool values (true / false)

Try This
• Create a TemplateView that acts like a
Backbone.View with a simple template
rendering functionality built-in

Backbone Extensions
• JS Libs that extend Backbone
• Really long list at:
https://github.com/jashkenas/backbone/
wiki/Extensions,-Plugins,-Resources

Nested Collections
• A collection that
“has” another
collection
• Example: Inbox and
Messages

Nested Approach
Inbox
Sent
Drafts
Models
Mail Collection

Nested Approach
Inbox
Sent
Drafts
Models
msg1
msg2
msg3
Models

Let’s Code This
• Models:
• Mailbox model
• Message model
• Collections:
• Mailbox collection (for messages)
• Folders collection (for mailboxes)

This works. But...
• Given a message item, can you tell in
which mailbox it is ?
• How do you move a message from one
inbox to another ?

Backbone-Relational
• A plugin for managing relations between
collections
• Adds RelationalModel
• http://backbonerelational.org/

Pagination
• How would you implement pagination ?

Pagination
• Collection only stores partial data
• Add methods to collection:
• goToNextPage()
• goToPreviousPage()
• goToPage()

Pagination
• Need to override Backbone.sync to allow
sending custom parameters to the server

Backbone.Sync
• sync(method, model, [options])
• method: create / read / update / delete
• model: model or collection
• options: success and error callbacks

Backbone.Sync options
• Use a global Backbone.sync to enable
application wide overriding
• Use a model/collection speciﬁc sync to
have only that collection use your sync

Backbone.Sync Demo
• Let’s write a cacheable model that adds
two methods:
• cache()
• invalidate()
• After cache(), all read requests should
return the cached copy

Lab: Fill in the missing parts
Backbone.CachedModel = Backbone.Model.extend({
cache: function() {
},

invalidate: function() {
},

sync: function(method, model, opts) {
}
});

Take Aways
• Backbone.sync allows full control on the
syncing process
• If you just need to add functionality,
consider listening for sync events

Pagination
• Use a custom (paginated) collection
• Add a sync method so it’ll send your
pagination params to the server
• AND Someone already did it :)

The Backbone Way
• A special collection is added using the
Paginator plugin
• Backbone.Paginator.requestPager

Other Params
• Paginated Collection needs:
• paginator_core: an object describing
how to interact with the server
• paginator_ui: an object describing
how to display the info
• server_api: an object describing the
parameters to send
• Code: https://github.com/backbone-
paginator/backbone.paginator

Demo
• https://github.com/backbone-paginator/
backbone.paginator/tree/master/
examples/request-paging

Other Plugins
• Backbone.localStorage will let you store
your models locally
https://github.com/jeromegn/
Backbone.localStorage

Other Plugins
• Backbone Forms will automatically
create form controls for you
• Also adds validation code
• https://github.com/powmedia/
backbone-forms

Other Plugins
• Backbone Stickit will let you have two-
ways data binding for your views
• http://nytimes.github.io/backbone.stickit/

Extending Backbone
• Extending Backbone is easy
• Just create more models, views or
controllers
• Sometimes you’ll need to override
Backbone methods

Beneﬁts
• Lifts big apps
• Scalable and very
stable
• No magic
• Extensible

Dark Side
• Not suitable for
small apps
• Can be confusing
for new developers
• Can sometimes add
clutter

Thank You
• Ynon Perek
• me@ynonperek.com
• ynonperek.com

Backbone

Backbone

Recommended

More Related Content

What's hot

What's hot(20)

Similar to Backbone

Similar to Backbone(20)

More from Ynon Perek

More from Ynon Perek(20)

Recently uploaded

Recently uploaded(20)

Backbone