Backbone

Ynon Perek
Ynon PerekTeaching online courses at ToCode.co.il
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
Thursday, September 12, 13
Unstructured JS
• Developer Starts
writing JS code
• App gets big,
developer gets
angry
Thursday, September 12, 13
What We Want
• Build apps like lego
• Everything has a
place
Thursday, September 12, 13
JS Solution
• Separate Logic from View
• Use a framework
Thursday, September 12, 13
MV* Frameworks
Model
View
*
Thursday, September 12, 13
Available JS MV*
• And a lot more...
• Nice comparison: http://todomvc.com/
Thursday, September 12, 13
Backbone.js
• Created by Jeremy
Ashkenas
• Goal: Keep your
code AWAY from
the DOM
Thursday, September 12, 13
Reasons Why
• Well tested and proven
• Strong community
• Simple: Almost no magic
Thursday, September 12, 13
Who’s Using Backbone ?
Big list: http://backbonejs.org
Thursday, September 12, 13
Backbone (MV*)
Concepts
Thursday, September 12, 13
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>
Thursday, September 12, 13
Application Structure
• 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 ?');
}
Thursday, September 12, 13
Application Structure
• Implementing Client-side logic
• Models “know”
• Views “show”
Thursday, September 12, 13
Application Structure
Model View DOM
Store Data Renders Data
Thursday, September 12, 13
Models
• Models store your data
• Models have no visual representation
• Functionality for managing changes
Thursday, September 12, 13
Views
• A View provides the visual representation
of a model
Task Model
Thursday, September 12, 13
Collections
• Models are usually grouped in collections
* Task Model
* Task Model
* Task Model
Daily
Tasks
Walk the dog
Water the plans
Thursday, September 12, 13
Backbone Benefits
• Good separation of
concerns
• Best for large client-
side applications
Thursday, September 12, 13
What Backbone Is Not
• It’s not a framework
• So it’s ok to use only parts of it
Thursday, September 12, 13
What Backbone Is Not
• It’s not for small apps that just
“show data”
• Backbone assumes client-side logic
Thursday, September 12, 13
What Backbone Is Not
• It will never get in your way :)
Thursday, September 12, 13
Coding Time
Thursday, September 12, 13
Todo App
• Model for each task
• View for each task
• Main application view
Thursday, September 12, 13
Task Model
(function(global) {
 
    global.models.Task = Backbone.Model.extend({
        defaults: {
            completed: false,
            text: ''
        }
    });
 
}(this));
Thursday, September 12, 13
Task Model
(function(global) {
 
    global.models.Task = Backbone.Model.extend({
        defaults: {
            completed: false,
            text: ''
        }
    });
 
}(this));
Define a new model
Thursday, September 12, 13
Task Model
(function(global) {
 
    global.models.Task = Backbone.Model.extend({
        defaults: {
            completed: false,
            text: ''
        }
    });
 
}(this));
Set default values
Thursday, September 12, 13
Task View
    global.views.TaskView = Backbone.View.extend({
        tagName: "div",
        className: "task",
        events: {
            "click" : "handle_click"
        },
Define a new View
Thursday, September 12, 13
Task View
    global.views.TaskView = Backbone.View.extend({
        tagName: "div",
        className: "task",
        events: {
            "click" : "handle_click"
        },
Specify HTML element
Thursday, September 12, 13
Task View
    global.views.TaskView = Backbone.View.extend({
        tagName: "div",
        className: "task",
        events: {
            "click" : "handle_click"
        },
Define Event Handlers
name of a method that will be
called when the view is clicked
Thursday, September 12, 13
View Rendering
• render() method of a view is used to
render it to HTML
• Usually implemented with client side
template engine
Thursday, September 12, 13
Task View
        render: function() {
            this.$el.html( this.template( this.model.toJSON()));
            return this;
        },
        template: Handlebars.compile($('#task-template').html())
Define Render Function
Thursday, September 12, 13
Task View
        render: function() {
            this.$el.html( this.template( this.model.toJSON()));
            return this;
        },
        template: Handlebars.compile($('#task-template').html())
Paint The View onto HTML
Thursday, September 12, 13
Task View
        render: function() {
            this.$el.html( this.template( this.model.toJSON()));
            return this;
        },
        template: Handlebars.compile($('#task-template').html())
Handlebars is used as a template engine
Thursday, September 12, 13
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
Thursday, September 12, 13
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);
            }
        },
We use it to bind event handlers on the model
Thursday, September 12, 13
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);
            }
        },
Implementing the clicks handler
Thursday, September 12, 13
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('');
        }
    });
Thursday, September 12, 13
Take Aways
• Models keep data
• Views show data
• Views listen for model changes using on
• Views listen for DOM changes using
events
Thursday, September 12, 13
Lab
• Add a “Priority” field to a task
• Render high priority tasks in red, medium
priority tasks in yellow and normal in
green
Thursday, September 12, 13
Backbone Router
• A Router connects URL with application
state
• This allows internal bookmarking and
history management
Thursday, September 12, 13
Hello Router
• You only
need
one
• Defines
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 } );
Thursday, September 12, 13
Changing State
• Use router.navigate( url ) to
change state
• Pass { trigger: true } if you need to
also trigger the route
Thursday, September 12, 13
Demo
• Let’s add a View Task page
• Shows a specific task in details
• Then connect the pages using a router
Thursday, September 12, 13
Server Side
Models
How to get server data using
Backbone Models
Thursday, September 12, 13
Models & The Server
• Set the urlRoot property of a model to
allow it to sync with your server
Thursday, September 12, 13
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
Thursday, September 12, 13
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)
Thursday, September 12, 13
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
Thursday, September 12, 13
Demo:
https://github.com/ynonp/mobileweb-
examples/tree/master/ajax/Backbone
Thursday, September 12, 13
Q & A
Thursday, September 12, 13
Collections
Thursday, September 12, 13
Collections
• Groups of models
• Add/Remove events
• Sync from server
Thursday, September 12, 13
Collections
Feed The Zombie
Plant The Brainz
Do The Zombie Walk
Todos Collection
Todo Models
Thursday, September 12, 13
Collection Actions
• col.length : number of models in
the collection
• col.add(m) : add a model
• col.remove(m) : remove a model
Thursday, September 12, 13
Collection Actions
• col.at( index ) : get a model at a
specific index
• col.get( id ) : get a model by its id
Thursday, September 12, 13
Collection Actions
• reset( array_of_models ) : sets the
collection’s data
Thursday, September 12, 13
Collections Demo
• Add a Tasks collection
• Add a Counter view
• Show active tasks count
Thursday, September 12, 13
Collections
    global.models.TasksGroup = Backbone.Collection.extend({
        model: global.models.Task
    })
Define a new collection
A collection needs to create objects, so we must
provide the type as a class
Thursday, September 12, 13
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
Thursday, September 12, 13
Collection Views
render: function() {
  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;
},
Thursday, September 12, 13
Collection Views
render: function() {
  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 ?
Thursday, September 12, 13
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
Thursday, September 12, 13
More Collection Views
• Same data, different views
• Let’s create a counter view
• Show total number of tasks
Thursday, September 12, 13
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
Thursday, September 12, 13
Collections
   global.views.CounterView = Backbone.View.extend({
        tagName: 'div',
        className: 'counter',
        initialize: function(opts) {
            this.tasks = opts.tasks;
        },
        render: function() {
            console.dir(this.el);
            this.$el.html( this.template(
{ count: this.tasks.length }));
            return this;
        },
        template: Handlebars.compile( $('#counter-template').html() )
    });
Thursday, September 12, 13
Lab
• Modify CounterView so it will also display
the number of unfinished tasks
Thursday, September 12, 13
Other Collection Methods
• forEach (function(item) { ... } )
• find
• filter
• include
• toArray
Thursday, September 12, 13
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
Thursday, September 12, 13
Collections Server URLs
• GET /items => returns all items
Thursday, September 12, 13
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
Thursday, September 12, 13
Q & A
Thursday, September 12, 13
Extending Backbone
• Nested Collections
• Pagination
• Data Binding
• Forms
Thursday, September 12, 13
Extending Backbone
• Backbone is easy to extend:
• You can add functions to the
Backbone namespace
• You can override Backbone’s methods
Thursday, September 12, 13
Try This
• Add function toggle() to Backbone.Model
to toggle bool values (true / false)
Thursday, September 12, 13
Try This
• Create a TemplateView that acts like a
Backbone.View with a simple template
rendering functionality built-in
Thursday, September 12, 13
Backbone Extensions
• JS Libs that extend Backbone
• Really long list at:
https://github.com/jashkenas/backbone/
wiki/Extensions,-Plugins,-Resources
Thursday, September 12, 13
Nested Collections
• A collection that
“has” another
collection
• Example: Inbox and
Messages
Thursday, September 12, 13
Nested Approach
Inbox
Sent
Drafts
Models
Mail Collection
Thursday, September 12, 13
Nested Approach
Inbox
Sent
Drafts
Models
msg1
msg2
msg3
Models
Thursday, September 12, 13
Let’s Code This
• Models:
• Mailbox model
• Message model
• Collections:
• Mailbox collection (for messages)
• Folders collection (for mailboxes)
Thursday, September 12, 13
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 ?
Thursday, September 12, 13
Backbone-Relational
• A plugin for managing relations between
collections
• Adds RelationalModel
• http://backbonerelational.org/
Thursday, September 12, 13
Q & A
Thursday, September 12, 13
Pagination
• How would you implement pagination ?
Thursday, September 12, 13
Pagination
• Collection only stores partial data
• Add methods to collection:
• goToNextPage()
• goToPreviousPage()
• goToPage()
Thursday, September 12, 13
Pagination
• Need to override Backbone.sync to allow
sending custom parameters to the server
Thursday, September 12, 13
Backbone.Sync
• sync(method, model, [options])
• method: create / read / update / delete
• model: model or collection
• options: success and error callbacks
Thursday, September 12, 13
Backbone.Sync options
• Use a global Backbone.sync to enable
application wide overriding
• Use a model/collection specific sync to
have only that collection use your sync
Thursday, September 12, 13
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
Thursday, September 12, 13
Lab: Fill in the missing parts
Backbone.CachedModel = Backbone.Model.extend({
  cache: function() {
  },
 
  invalidate: function() {
  },
 
  sync: function(method, model, opts) {
  }
});
Thursday, September 12, 13
Take Aways
• Backbone.sync allows full control on the
syncing process
• If you just need to add functionality,
consider listening for sync events
Thursday, September 12, 13
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 :)
Thursday, September 12, 13
The Backbone Way
• A special collection is added using the
Paginator plugin
• Backbone.Paginator.requestPager
Thursday, September 12, 13
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
Thursday, September 12, 13
Demo
• https://github.com/backbone-paginator/
backbone.paginator/tree/master/
examples/request-paging
Thursday, September 12, 13
Q & A
Thursday, September 12, 13
Other Plugins
• Backbone.localStorage will let you store
your models locally
https://github.com/jeromegn/
Backbone.localStorage
Thursday, September 12, 13
Other Plugins
• Backbone Forms will automatically
create form controls for you
• Also adds validation code
• https://github.com/powmedia/
backbone-forms
Thursday, September 12, 13
Other Plugins
• Backbone Stickit will let you have two-
ways data binding for your views
• http://nytimes.github.io/backbone.stickit/
Thursday, September 12, 13
Extending Backbone
• Extending Backbone is easy
• Just create more models, views or
controllers
• Sometimes you’ll need to override
Backbone methods
Thursday, September 12, 13
Benefits
• Lifts big apps
• Scalable and very
stable
• No magic
• Extensible
Thursday, September 12, 13
Dark Side
• Not suitable for
small apps
• Can be confusing
for new developers
• Can sometimes add
clutter
Thursday, September 12, 13
Thank You
• Ynon Perek
• me@ynonperek.com
• ynonperek.com
Thursday, September 12, 13
1 of 104

Recommended

08 ajax by
08 ajax08 ajax
08 ajaxYnon Perek
2.1K views61 slides
Scalable JavaScript by
Scalable JavaScriptScalable JavaScript
Scalable JavaScriptYnon Perek
2.9K views83 slides
Frontend Engineer Toolbox by
Frontend Engineer ToolboxFrontend Engineer Toolbox
Frontend Engineer ToolboxYnon Perek
3.3K views81 slides
Writing Reusable Web Components with jQuery and jQuery UI by
Writing Reusable Web Components with jQuery and jQuery UIWriting Reusable Web Components with jQuery and jQuery UI
Writing Reusable Web Components with jQuery and jQuery UIYnon Perek
20.2K views70 slides
jQuery and_drupal by
jQuery and_drupaljQuery and_drupal
jQuery and_drupalBlackCatWeb
352 views29 slides
Create responsive websites with Django, REST and AngularJS by
Create responsive websites with Django, REST and AngularJSCreate responsive websites with Django, REST and AngularJS
Create responsive websites with Django, REST and AngularJSHannes Hapke
47.3K views50 slides

More Related Content

What's hot

jQuery in 15 minutes by
jQuery in 15 minutesjQuery in 15 minutes
jQuery in 15 minutesSimon Willison
41.5K views14 slides
Getting the Most Out of jQuery Widgets by
Getting the Most Out of jQuery WidgetsGetting the Most Out of jQuery Widgets
Getting the Most Out of jQuery Widgetsvelveeta_512
5K views51 slides
Hybrid Web Applications by
Hybrid Web ApplicationsHybrid Web Applications
Hybrid Web ApplicationsJames Da Costa
6K views81 slides
jQuery introduction by
jQuery introductionjQuery introduction
jQuery introductionTomi Juhola
32.3K views28 slides
jQuery Presentation by
jQuery PresentationjQuery Presentation
jQuery PresentationRod Johnson
4.7K views30 slides
Django a whirlwind tour by
Django   a whirlwind tourDjango   a whirlwind tour
Django a whirlwind tourBrad Montgomery
1.6K views61 slides

What's hot(20)

Getting the Most Out of jQuery Widgets by velveeta_512
Getting the Most Out of jQuery WidgetsGetting the Most Out of jQuery Widgets
Getting the Most Out of jQuery Widgets
velveeta_5125K views
jQuery introduction by Tomi Juhola
jQuery introductionjQuery introduction
jQuery introduction
Tomi Juhola32.3K views
jQuery Presentation by Rod Johnson
jQuery PresentationjQuery Presentation
jQuery Presentation
Rod Johnson4.7K views
jQuery Loves Developers - Oredev 2009 by Remy Sharp
jQuery Loves Developers - Oredev 2009jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009
Remy Sharp3.5K views
jQuery in the [Aol.] Enterprise by Dave Artz
jQuery in the [Aol.] EnterprisejQuery in the [Aol.] Enterprise
jQuery in the [Aol.] Enterprise
Dave Artz6K views
High Performance Ajax Applications by Julien Lecomte
High Performance Ajax ApplicationsHigh Performance Ajax Applications
High Performance Ajax Applications
Julien Lecomte56.7K views
The DOM is a Mess @ Yahoo by jeresig
The DOM is a Mess @ YahooThe DOM is a Mess @ Yahoo
The DOM is a Mess @ Yahoo
jeresig50.6K views
Single Page Web Applications with CoffeeScript, Backbone and Jasmine by Paulo Ragonha
Single Page Web Applications with CoffeeScript, Backbone and JasmineSingle Page Web Applications with CoffeeScript, Backbone and Jasmine
Single Page Web Applications with CoffeeScript, Backbone and Jasmine
Paulo Ragonha24.6K views
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K by Thomas Fuchs
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2KZepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Thomas Fuchs13.6K views
High Performance Ajax Applications by Siarhei Barysiuk
High Performance Ajax ApplicationsHigh Performance Ajax Applications
High Performance Ajax Applications
Siarhei Barysiuk2.1K views
Everything is Awesome - Cutting the Corners off the Web by James Rakich
Everything is Awesome - Cutting the Corners off the WebEverything is Awesome - Cutting the Corners off the Web
Everything is Awesome - Cutting the Corners off the Web
James Rakich544 views
HTML5: where flash isn't needed anymore by Remy Sharp
HTML5: where flash isn't needed anymoreHTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
Remy Sharp2.5K views
Introduction to jQuery by Gunjan Kumar
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
Gunjan Kumar2.8K views

Similar to Backbone

Ruby meetup 7_years_in_testing by
Ruby meetup 7_years_in_testingRuby meetup 7_years_in_testing
Ruby meetup 7_years_in_testingDigital Natives
620 views43 slides
Dependency Injection @ AngularJS by
Dependency Injection @ AngularJSDependency Injection @ AngularJS
Dependency Injection @ AngularJSRan Mizrahi
4.3K views32 slides
Building a Startup Stack with AngularJS by
Building a Startup Stack with AngularJSBuilding a Startup Stack with AngularJS
Building a Startup Stack with AngularJSFITC
32K views60 slides
Intro to Ember.js by
Intro to Ember.jsIntro to Ember.js
Intro to Ember.jsJay Phelps
4.3K views28 slides
Choosing a Javascript Framework by
Choosing a Javascript FrameworkChoosing a Javascript Framework
Choosing a Javascript FrameworkAll Things Open
1K views101 slides
JavaScript DOM Manipulations by
JavaScript DOM ManipulationsJavaScript DOM Manipulations
JavaScript DOM ManipulationsYnon Perek
3.9K views63 slides

Similar to Backbone(20)

Dependency Injection @ AngularJS by Ran Mizrahi
Dependency Injection @ AngularJSDependency Injection @ AngularJS
Dependency Injection @ AngularJS
Ran Mizrahi4.3K views
Building a Startup Stack with AngularJS by FITC
Building a Startup Stack with AngularJSBuilding a Startup Stack with AngularJS
Building a Startup Stack with AngularJS
FITC32K views
Intro to Ember.js by Jay Phelps
Intro to Ember.jsIntro to Ember.js
Intro to Ember.js
Jay Phelps4.3K views
JavaScript DOM Manipulations by Ynon Perek
JavaScript DOM ManipulationsJavaScript DOM Manipulations
JavaScript DOM Manipulations
Ynon Perek3.9K views
Tek 2013 - Building Web Apps from a New Angle with AngularJS by Pablo Godel
Tek 2013 - Building Web Apps from a New Angle with AngularJSTek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJS
Pablo Godel13.5K views
MongoTalk/Voyage by ESUG
MongoTalk/VoyageMongoTalk/Voyage
MongoTalk/Voyage
ESUG1.8K views
jQuery Mobile Deep Dive by Troy Miles
jQuery Mobile Deep DivejQuery Mobile Deep Dive
jQuery Mobile Deep Dive
Troy Miles2.9K views
An introduction to Ember.js by codeofficer
An introduction to Ember.jsAn introduction to Ember.js
An introduction to Ember.js
codeofficer8.5K views
RailsAdmin - Overview and Best practices by Benoit Bénézech
RailsAdmin - Overview and Best practicesRailsAdmin - Overview and Best practices
RailsAdmin - Overview and Best practices
Benoit Bénézech65.2K views
Integrate Spring MVC with RequireJS & Backbone.js & Spring Data JPA by Cheng Ta Yeh
Integrate Spring MVC with RequireJS & Backbone.js & Spring Data JPAIntegrate Spring MVC with RequireJS & Backbone.js & Spring Data JPA
Integrate Spring MVC with RequireJS & Backbone.js & Spring Data JPA
Cheng Ta Yeh12.1K views
Bundling Client Side Assets by Timothy Oxley
Bundling Client Side AssetsBundling Client Side Assets
Bundling Client Side Assets
Timothy Oxley1K views
OpenDolphin: Enterprise Apps for collaboration on Desktop, Web, and Mobile by Dierk König
OpenDolphin: Enterprise Apps for collaboration on Desktop, Web, and MobileOpenDolphin: Enterprise Apps for collaboration on Desktop, Web, and Mobile
OpenDolphin: Enterprise Apps for collaboration on Desktop, Web, and Mobile
Dierk König1.1K views
Pragmatic JavaScript by John Hann
Pragmatic JavaScriptPragmatic JavaScript
Pragmatic JavaScript
John Hann3.9K views
JBUG 11 - Django-The Web Framework For Perfectionists With Deadlines by Tikal Knowledge
JBUG 11 - Django-The Web Framework For Perfectionists With DeadlinesJBUG 11 - Django-The Web Framework For Perfectionists With Deadlines
JBUG 11 - Django-The Web Framework For Perfectionists With Deadlines
Tikal Knowledge4.7K views

More from Ynon Perek

Regexp by
RegexpRegexp
RegexpYnon Perek
1.7K views30 slides
Html5 intro by
Html5 introHtml5 intro
Html5 introYnon Perek
5.2K views9 slides
09 performance by
09 performance09 performance
09 performanceYnon Perek
578 views8 slides
Mobile Web Intro by
Mobile Web IntroMobile Web Intro
Mobile Web IntroYnon Perek
1.3K views8 slides
Qt multi threads by
Qt multi threadsQt multi threads
Qt multi threadsYnon Perek
13.9K views56 slides
Vimperl by
VimperlVimperl
VimperlYnon Perek
853 views25 slides

More from Ynon Perek(20)

Html5 intro by Ynon Perek
Html5 introHtml5 intro
Html5 intro
Ynon Perek5.2K views
09 performance by Ynon Perek
09 performance09 performance
09 performance
Ynon Perek578 views
Mobile Web Intro by Ynon Perek
Mobile Web IntroMobile Web Intro
Mobile Web Intro
Ynon Perek1.3K views
Qt multi threads by Ynon Perek
Qt multi threadsQt multi threads
Qt multi threads
Ynon Perek13.9K views
Mobile Devices by Ynon Perek
Mobile DevicesMobile Devices
Mobile Devices
Ynon Perek759 views
Architecture app by Ynon Perek
Architecture appArchitecture app
Architecture app
Ynon Perek2.1K views
Cryptography by Ynon Perek
CryptographyCryptography
Cryptography
Ynon Perek2.9K views
Unit Testing JavaScript Applications by Ynon Perek
Unit Testing JavaScript ApplicationsUnit Testing JavaScript Applications
Unit Testing JavaScript Applications
Ynon Perek2.4K views
How to write easy-to-test JavaScript by Ynon Perek
How to write easy-to-test JavaScriptHow to write easy-to-test JavaScript
How to write easy-to-test JavaScript
Ynon Perek1.3K views
Introduction to Selenium and Ruby by Ynon Perek
Introduction to Selenium and RubyIntroduction to Selenium and Ruby
Introduction to Selenium and Ruby
Ynon Perek17.1K views
Introduction To Web Application Testing by Ynon Perek
Introduction To Web Application TestingIntroduction To Web Application Testing
Introduction To Web Application Testing
Ynon Perek3.3K views
Accessibility by Ynon Perek
AccessibilityAccessibility
Accessibility
Ynon Perek579 views
Angularjs by Ynon Perek
AngularjsAngularjs
Angularjs
Ynon Perek3.2K views
Js memory by Ynon Perek
Js memoryJs memory
Js memory
Ynon Perek2.6K views
Qt Design Patterns by Ynon Perek
Qt Design PatternsQt Design Patterns
Qt Design Patterns
Ynon Perek8.4K views
Web Application Security by Ynon Perek
Web Application SecurityWeb Application Security
Web Application Security
Ynon Perek1.9K views

Recently uploaded

Data Integrity for Banking and Financial Services by
Data Integrity for Banking and Financial ServicesData Integrity for Banking and Financial Services
Data Integrity for Banking and Financial ServicesPrecisely
29 views26 slides
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava... by
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...ShapeBlue
28 views17 slides
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue by
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlueWhat’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlueShapeBlue
89 views23 slides
Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ... by
Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ...Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ...
Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ...ShapeBlue
55 views12 slides
Keynote Talk: Open Source is Not Dead - Charles Schulz - Vates by
Keynote Talk: Open Source is Not Dead - Charles Schulz - VatesKeynote Talk: Open Source is Not Dead - Charles Schulz - Vates
Keynote Talk: Open Source is Not Dead - Charles Schulz - VatesShapeBlue
84 views15 slides
Business Analyst Series 2023 - Week 4 Session 7 by
Business Analyst Series 2023 -  Week 4 Session 7Business Analyst Series 2023 -  Week 4 Session 7
Business Analyst Series 2023 - Week 4 Session 7DianaGray10
42 views31 slides

Recently uploaded(20)

Data Integrity for Banking and Financial Services by Precisely
Data Integrity for Banking and Financial ServicesData Integrity for Banking and Financial Services
Data Integrity for Banking and Financial Services
Precisely29 views
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava... by ShapeBlue
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...
ShapeBlue28 views
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue by ShapeBlue
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlueWhat’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue
ShapeBlue89 views
Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ... by ShapeBlue
Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ...Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ...
Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ...
ShapeBlue55 views
Keynote Talk: Open Source is Not Dead - Charles Schulz - Vates by ShapeBlue
Keynote Talk: Open Source is Not Dead - Charles Schulz - VatesKeynote Talk: Open Source is Not Dead - Charles Schulz - Vates
Keynote Talk: Open Source is Not Dead - Charles Schulz - Vates
ShapeBlue84 views
Business Analyst Series 2023 - Week 4 Session 7 by DianaGray10
Business Analyst Series 2023 -  Week 4 Session 7Business Analyst Series 2023 -  Week 4 Session 7
Business Analyst Series 2023 - Week 4 Session 7
DianaGray1042 views
VNF Integration and Support in CloudStack - Wei Zhou - ShapeBlue by ShapeBlue
VNF Integration and Support in CloudStack - Wei Zhou - ShapeBlueVNF Integration and Support in CloudStack - Wei Zhou - ShapeBlue
VNF Integration and Support in CloudStack - Wei Zhou - ShapeBlue
ShapeBlue62 views
KVM Security Groups Under the Hood - Wido den Hollander - Your.Online by ShapeBlue
KVM Security Groups Under the Hood - Wido den Hollander - Your.OnlineKVM Security Groups Under the Hood - Wido den Hollander - Your.Online
KVM Security Groups Under the Hood - Wido den Hollander - Your.Online
ShapeBlue75 views
Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ... by ShapeBlue
Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ...Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ...
Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ...
ShapeBlue61 views
Why and How CloudStack at weSystems - Stephan Bienek - weSystems by ShapeBlue
Why and How CloudStack at weSystems - Stephan Bienek - weSystemsWhy and How CloudStack at weSystems - Stephan Bienek - weSystems
Why and How CloudStack at weSystems - Stephan Bienek - weSystems
ShapeBlue81 views
Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit... by ShapeBlue
Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...
Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...
ShapeBlue40 views
Igniting Next Level Productivity with AI-Infused Data Integration Workflows by Safe Software
Igniting Next Level Productivity with AI-Infused Data Integration Workflows Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Safe Software317 views
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive by Network Automation Forum
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLiveAutomating a World-Class Technology Conference; Behind the Scenes of CiscoLive
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive
Updates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBIT by ShapeBlue
Updates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBITUpdates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBIT
Updates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBIT
ShapeBlue66 views
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or... by ShapeBlue
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...
ShapeBlue64 views
DRBD Deep Dive - Philipp Reisner - LINBIT by ShapeBlue
DRBD Deep Dive - Philipp Reisner - LINBITDRBD Deep Dive - Philipp Reisner - LINBIT
DRBD Deep Dive - Philipp Reisner - LINBIT
ShapeBlue44 views

Backbone

  • 1. Backbone.js How to write a well structured multi page web application Thursday, September 12, 13
  • 2. About • Ynon Perek • ynon@ynonperek.com • Find and download slides from: http://ynonperek.com Thursday, September 12, 13
  • 3. Unstructured JS • Developer Starts writing JS code • App gets big, developer gets angry Thursday, September 12, 13
  • 4. What We Want • Build apps like lego • Everything has a place Thursday, September 12, 13
  • 5. JS Solution • Separate Logic from View • Use a framework Thursday, September 12, 13
  • 7. Available JS MV* • And a lot more... • Nice comparison: http://todomvc.com/ Thursday, September 12, 13
  • 8. Backbone.js • Created by Jeremy Ashkenas • Goal: Keep your code AWAY from the DOM Thursday, September 12, 13
  • 9. Reasons Why • Well tested and proven • Strong community • Simple: Almost no magic Thursday, September 12, 13
  • 10. Who’s Using Backbone ? Big list: http://backbonejs.org Thursday, September 12, 13
  • 12. 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> Thursday, September 12, 13
  • 13. Application Structure • 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 ?'); } Thursday, September 12, 13
  • 14. Application Structure • Implementing Client-side logic • Models “know” • Views “show” Thursday, September 12, 13
  • 15. Application Structure Model View DOM Store Data Renders Data Thursday, September 12, 13
  • 16. Models • Models store your data • Models have no visual representation • Functionality for managing changes Thursday, September 12, 13
  • 17. Views • A View provides the visual representation of a model Task Model Thursday, September 12, 13
  • 18. Collections • Models are usually grouped in collections * Task Model * Task Model * Task Model Daily Tasks Walk the dog Water the plans Thursday, September 12, 13
  • 19. Backbone Benefits • Good separation of concerns • Best for large client- side applications Thursday, September 12, 13
  • 20. What Backbone Is Not • It’s not a framework • So it’s ok to use only parts of it Thursday, September 12, 13
  • 21. What Backbone Is Not • It’s not for small apps that just “show data” • Backbone assumes client-side logic Thursday, September 12, 13
  • 22. What Backbone Is Not • It will never get in your way :) Thursday, September 12, 13
  • 24. Todo App • Model for each task • View for each task • Main application view Thursday, September 12, 13
  • 25. Task Model (function(global) {       global.models.Task = Backbone.Model.extend({         defaults: {             completed: false,             text: ''         }     });   }(this)); Thursday, September 12, 13
  • 26. Task Model (function(global) {       global.models.Task = Backbone.Model.extend({         defaults: {             completed: false,             text: ''         }     });   }(this)); Define a new model Thursday, September 12, 13
  • 27. Task Model (function(global) {       global.models.Task = Backbone.Model.extend({         defaults: {             completed: false,             text: ''         }     });   }(this)); Set default values Thursday, September 12, 13
  • 28. Task View     global.views.TaskView = Backbone.View.extend({         tagName: "div",         className: "task",         events: {             "click" : "handle_click"         }, Define a new View Thursday, September 12, 13
  • 29. Task View     global.views.TaskView = Backbone.View.extend({         tagName: "div",         className: "task",         events: {             "click" : "handle_click"         }, Specify HTML element Thursday, September 12, 13
  • 30. Task View     global.views.TaskView = Backbone.View.extend({         tagName: "div",         className: "task",         events: {             "click" : "handle_click"         }, Define Event Handlers name of a method that will be called when the view is clicked Thursday, September 12, 13
  • 31. View Rendering • render() method of a view is used to render it to HTML • Usually implemented with client side template engine Thursday, September 12, 13
  • 32. Task View         render: function() {             this.$el.html( this.template( this.model.toJSON()));             return this;         },         template: Handlebars.compile($('#task-template').html()) Define Render Function Thursday, September 12, 13
  • 33. Task View         render: function() {             this.$el.html( this.template( this.model.toJSON()));             return this;         },         template: Handlebars.compile($('#task-template').html()) Paint The View onto HTML Thursday, September 12, 13
  • 34. Task View         render: function() {             this.$el.html( this.template( this.model.toJSON()));             return this;         },         template: Handlebars.compile($('#task-template').html()) Handlebars is used as a template engine Thursday, September 12, 13
  • 35. 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 Thursday, September 12, 13
  • 36. 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);             }         }, We use it to bind event handlers on the model Thursday, September 12, 13
  • 37. 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);             }         }, Implementing the clicks handler Thursday, September 12, 13
  • 38. 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('');         }     }); Thursday, September 12, 13
  • 39. Take Aways • Models keep data • Views show data • Views listen for model changes using on • Views listen for DOM changes using events Thursday, September 12, 13
  • 40. Lab • Add a “Priority” field to a task • Render high priority tasks in red, medium priority tasks in yellow and normal in green Thursday, September 12, 13
  • 41. Backbone Router • A Router connects URL with application state • This allows internal bookmarking and history management Thursday, September 12, 13
  • 42. Hello Router • You only need one • Defines 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 } ); Thursday, September 12, 13
  • 43. Changing State • Use router.navigate( url ) to change state • Pass { trigger: true } if you need to also trigger the route Thursday, September 12, 13
  • 44. Demo • Let’s add a View Task page • Shows a specific task in details • Then connect the pages using a router Thursday, September 12, 13
  • 45. Server Side Models How to get server data using Backbone Models Thursday, September 12, 13
  • 46. Models & The Server • Set the urlRoot property of a model to allow it to sync with your server Thursday, September 12, 13
  • 47. 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 Thursday, September 12, 13
  • 48. 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) Thursday, September 12, 13
  • 49. 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 Thursday, September 12, 13
  • 51. Q & A Thursday, September 12, 13
  • 53. Collections • Groups of models • Add/Remove events • Sync from server Thursday, September 12, 13
  • 54. Collections Feed The Zombie Plant The Brainz Do The Zombie Walk Todos Collection Todo Models Thursday, September 12, 13
  • 55. Collection Actions • col.length : number of models in the collection • col.add(m) : add a model • col.remove(m) : remove a model Thursday, September 12, 13
  • 56. Collection Actions • col.at( index ) : get a model at a specific index • col.get( id ) : get a model by its id Thursday, September 12, 13
  • 57. Collection Actions • reset( array_of_models ) : sets the collection’s data Thursday, September 12, 13
  • 58. Collections Demo • Add a Tasks collection • Add a Counter view • Show active tasks count Thursday, September 12, 13
  • 59. Collections     global.models.TasksGroup = Backbone.Collection.extend({         model: global.models.Task     }) Define a new collection A collection needs to create objects, so we must provide the type as a class Thursday, September 12, 13
  • 60. 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 Thursday, September 12, 13
  • 61. Collection Views render: function() {   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; }, Thursday, September 12, 13
  • 62. Collection Views render: function() {   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 ? Thursday, September 12, 13
  • 63. 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 Thursday, September 12, 13
  • 64. More Collection Views • Same data, different views • Let’s create a counter view • Show total number of tasks Thursday, September 12, 13
  • 65. 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 Thursday, September 12, 13
  • 66. Collections    global.views.CounterView = Backbone.View.extend({         tagName: 'div',         className: 'counter',         initialize: function(opts) {             this.tasks = opts.tasks;         },         render: function() {             console.dir(this.el);             this.$el.html( this.template( { count: this.tasks.length }));             return this;         },         template: Handlebars.compile( $('#counter-template').html() )     }); Thursday, September 12, 13
  • 67. Lab • Modify CounterView so it will also display the number of unfinished tasks Thursday, September 12, 13
  • 68. Other Collection Methods • forEach (function(item) { ... } ) • find • filter • include • toArray Thursday, September 12, 13
  • 69. 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 Thursday, September 12, 13
  • 70. Collections Server URLs • GET /items => returns all items Thursday, September 12, 13
  • 71. 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 Thursday, September 12, 13
  • 72. Q & A Thursday, September 12, 13
  • 73. Extending Backbone • Nested Collections • Pagination • Data Binding • Forms Thursday, September 12, 13
  • 74. Extending Backbone • Backbone is easy to extend: • You can add functions to the Backbone namespace • You can override Backbone’s methods Thursday, September 12, 13
  • 75. Try This • Add function toggle() to Backbone.Model to toggle bool values (true / false) Thursday, September 12, 13
  • 76. Try This • Create a TemplateView that acts like a Backbone.View with a simple template rendering functionality built-in Thursday, September 12, 13
  • 77. Backbone Extensions • JS Libs that extend Backbone • Really long list at: https://github.com/jashkenas/backbone/ wiki/Extensions,-Plugins,-Resources Thursday, September 12, 13
  • 78. Nested Collections • A collection that “has” another collection • Example: Inbox and Messages Thursday, September 12, 13
  • 81. Let’s Code This • Models: • Mailbox model • Message model • Collections: • Mailbox collection (for messages) • Folders collection (for mailboxes) Thursday, September 12, 13
  • 82. 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 ? Thursday, September 12, 13
  • 83. Backbone-Relational • A plugin for managing relations between collections • Adds RelationalModel • http://backbonerelational.org/ Thursday, September 12, 13
  • 84. Q & A Thursday, September 12, 13
  • 85. Pagination • How would you implement pagination ? Thursday, September 12, 13
  • 86. Pagination • Collection only stores partial data • Add methods to collection: • goToNextPage() • goToPreviousPage() • goToPage() Thursday, September 12, 13
  • 87. Pagination • Need to override Backbone.sync to allow sending custom parameters to the server Thursday, September 12, 13
  • 88. Backbone.Sync • sync(method, model, [options]) • method: create / read / update / delete • model: model or collection • options: success and error callbacks Thursday, September 12, 13
  • 89. Backbone.Sync options • Use a global Backbone.sync to enable application wide overriding • Use a model/collection specific sync to have only that collection use your sync Thursday, September 12, 13
  • 90. 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 Thursday, September 12, 13
  • 91. Lab: Fill in the missing parts Backbone.CachedModel = Backbone.Model.extend({   cache: function() {   },     invalidate: function() {   },     sync: function(method, model, opts) {   } }); Thursday, September 12, 13
  • 92. Take Aways • Backbone.sync allows full control on the syncing process • If you just need to add functionality, consider listening for sync events Thursday, September 12, 13
  • 93. 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 :) Thursday, September 12, 13
  • 94. The Backbone Way • A special collection is added using the Paginator plugin • Backbone.Paginator.requestPager Thursday, September 12, 13
  • 95. 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 Thursday, September 12, 13
  • 97. Q & A Thursday, September 12, 13
  • 98. Other Plugins • Backbone.localStorage will let you store your models locally https://github.com/jeromegn/ Backbone.localStorage Thursday, September 12, 13
  • 99. Other Plugins • Backbone Forms will automatically create form controls for you • Also adds validation code • https://github.com/powmedia/ backbone-forms Thursday, September 12, 13
  • 100. Other Plugins • Backbone Stickit will let you have two- ways data binding for your views • http://nytimes.github.io/backbone.stickit/ Thursday, September 12, 13
  • 101. Extending Backbone • Extending Backbone is easy • Just create more models, views or controllers • Sometimes you’ll need to override Backbone methods Thursday, September 12, 13
  • 102. Benefits • Lifts big apps • Scalable and very stable • No magic • Extensible Thursday, September 12, 13
  • 103. Dark Side • Not suitable for small apps • Can be confusing for new developers • Can sometimes add clutter Thursday, September 12, 13
  • 104. Thank You • Ynon Perek • me@ynonperek.com • ynonperek.com Thursday, September 12, 13