SlideShare a Scribd company logo
1 of 101
Download to read offline
Backbone.js
AND FRIENDS
“Programs must be written for people to
read and only incidentally for machines
to execute.”
-H. Abelson and G. Sussman in “The Structure and Interpretation of Computer Programs”
Javascript Essentials

JavaScript does not have classes.
Javascript Essentials

    JavaScript is an Object Oriented
language where almost everything is an
    object, a set of key-value pairs.
Javascript Essentials
 This lack of Classes makes it easy to
follow one of the Gang of Four’s rules;
 Prefer object composition over class
             inheritance.
Javascript Essentials
   JavaScript is now being used to create
complex applications. A little bit of thought,
  and a well planned architecture can help
 solve all sorts of problems down the line.
Javascript Essentials
“The secret to building large apps is
to never build large apps. Break your
application into small pieces. Then
assemble those testable, bite-sized
pieces into your application.”

-Justin Meyer
Javascript Essentials
Software bugs are costly to fix, and the
 longer that you wait to fix them, the
      more costly they become.
Javascript Essentials
Break the monstrous code up into small,
interchangeable modules that can easily
             be re-used.
jQuery

  jQuery plays a much smaller role in
large JavaScript applications than most
          developers realize.
Problems from jQuery
 jQuery is only part of the solution:




     it does not provide any
recommendations on how to structure
             your code.
I learned to love the Pattern

         Patterns are proven solutions
         Patterns can be easily reused
          Patterns can be expressive
        Patterns are not exact solutions
Callback Functions
var shine = function() {
    // some action
},
rise = function(callback) {
     // .. do something
     callback();
     // .. do something else
}

rise(shine);
Immediate Functions
(function foo() {
    alert('Watch Out!!');
}());




   This is great, but there’s no privacy.
Immediate Functions
var greeting = (function ( name ) {
    var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri',
'Sat'],
        today = new Date(),
        msg = 'Hello, ' + name + ' Today is ' +
days[today.getDay()] + ', ' + today.getDate();
    return msg;
}('Aaron')); // 'Hello Aaron, Today is Sat, 17'
Observer
“A way of notifying change to a
  number of classes to ensure
 consistency between classes.”
Module Pattern
var yetiModule = (function() {
  var lunch = ‘noms’;
  return{
    eat: function(){
       // om nom nom
    },
    sleep: function(){
       // ZZzzzzz
    }
  }
});
Revealing Module Pattern
var yetiModule = (function() {
  var lunch = ‘noms’,
        eat = function(){ // om nom nom };
      sleep = function(){ // ZZzzzzz };
  return{
    ‘eat’: eat,
    ‘sleep’: sleep
  }
});
Namespace Pattern
var VAMPIRE = VAMPIRE || {};

VAMPIRE.bite() = function ( food ) {
   // something groovy
};

VAMPIRE.sleep() = function ( ) {
   // Shhhhhh
};
Importing Globals
var Module = (function(app, $) {
    // Code...
})(MYAPP, jQuery);
Application Core

Manages the module lifecycle, It reacts
  to events passed to it and starts,
  stops, or restarts modules when
             necessary.
Modules.
 If specific parts of your app fail, can it still function?

How much do modules depend on others in the system?

        How much of this is instantly reusable?

       Can single modules exist on their own?

    Can single modules be tested independently?

          Is your application tightly coupled?
“The more tied components are to
each other, the less reusable they will
be, and the more difficult it becomes
to make changes to one without
accidentally affecting another”

-Rebecca Murphey
MVC for JavaScript

Luckily there are lots of solutions to
         providing structure.
MV* for JavaScript

But let’s not worry about pedantics.

 Architecture Patterns help define
   structure for an application
MVC Models
-Represent Knowledge and Data
-Can be grouped in Collections
-Isolated from views and controller
-Responds to questions about state
MVC Views

In most cases Views are consider the UI


 Multiple Views can exist for a single
                model
MVC Controllers
Sits between Views and Models
    Performs business logic
MV* for JavaScript
All JavaScript libraries interpret MVC a
            little differently.

Just make sure that you’re aware of it.
Introducing Backbone
-Flexible conventions for structuring
applications
-Event-driven communication between views
and models
-Supports data bindings through manual
events
Introducing Backbone
Models: Domain-level data
Views: Extended User Interface Objects
Collections: Groups of Models
Routers: Map URLs to functions
Backbone Model
var User = Backbone.Model.extend({
    initialize: function(name){
        this.set({name: name});
    }
});

var user = new User("Aaron Maturen");
console.log(user.get('name')); //Aaron Maturen
Backbone Model: Defaults

var User = Backbone.Model.extend({
    defaults: {
        suave: true,
        human: true
    }
});
Backbone Model: Validate

var User = Backbone.Model.extend({
    validate: function(atts){
        if(!atts.email || atts.email.length < 3) {
            return "email must be at least 3 characters";
        }
    }
});
Backbone Collection
var Users = Backbone.Collection.extend({
    model: User
});

users.bind("change", function(user){
    console.log("I feel a disturbance in the force.");
});

var user = users.get('some-id');
var user = users.getByCid('some-cid');
Backbone Collection: Compare

var Users = Backbone.Collection.extend({
    model: User,
    comparator: function(user){
        return user.get('name');
    }
});
Backbone View
var UserView = Backbone.View.extend({
    model: "User",
    tagName: "span",
    className: "users",
    initialize: function() {
        //...
    },
    render: function() {
        //...
    }
});
Backbone View : el

var UserView = Backbone.View.extend({
    el: $("#users")
});
Backbone View: Templates
<script type="text/template" class="template" id="user-
template">
    <h2>Hello <%= name %>,</h2>
    <p>It's nice to see you again.</p>
</script>

var UserView = Backbone.View.extend({
    template: _.template($("#user-template").html());

    render: function(){
        $
(this.el).html(this.template(this.model.toJSON()));
        return this;
    }
});
Backbone View: Events
var UserView = Backbone.View.extend({
    events:{
        "change input[type=checkbox]" : "toggleActive",
        "click .destroy"              : "deleteUser"
    },

      toggleActive: function(e) {
          // …
      },

      deleteUser: function(e) {
          // …
      }
});
Backbone View: Context
var UserView = Backbone.View.extend({
    initialize: function(){
        _.bindAll(this, 'render', 'remove');
        this.model.bind('change', this.render);
        this.model.bind('delete', this.remove);
    },

      remove: function(){
          $(this.el).remove();
      }
});
Backbone History

Backbone.history.start();


Backbone.history.saveLocation("/page/" + this.model.id);
Backbone Controller
var PageController = Backbone.Controller.extend({
    routes:{
        "":                     "index",
        "search/:query":        "search",
        "search/:query/p:page": "search",
        "file/*path":           "file"
    },
    index: function(){ //... },
    help: function(){ //... },
    search: function(){ //... }
});
Backbone Controller: Regex

var PageController = Backbone.Controller.extend({
    initialize: function(){
        this.route(/pages/(d+)/, 'id', function(pageId){
            // ...
        });
    }
});
Backbone Benefits
Easier to maintain, when updates are
needed, it’s clear whether the changes are
data-centric, or visual.

Decoupling models and views makes it
easier to right unit tests for business logic.

Modularity allows developer teams to work
on logic and user interfaces simultaneously.
Backbone Server Verbs
var User = Backbone.model.extend({
  url: '/users'
});




               Verb                  Action
      create                  POST /collection
      read                    GET /collection[/
      update                  id] /collection/id
                              PUT
      delete                  DELETE /
                              collection/id
Backbone Server
var user = new User();
user.set({name: "Phillip"});

user.bind('error', function(e){
    //the server returns an error
}

user.save(null, {
    success: function() {
        // user saved successfully
    },
    failure: function() {
        // user save failed
    }
});
Backbone Model : Refresh


var user = Users.get(1);
user.fetch();
Backbone Collection: Populate

var Users = Backbone.Collection.extend({
    model: User,
    url: '/users'
});

Users.fetch();
Custom Behavior

Backbone.sync = function(method, model, options){
    console.log( method, model, options);
    options.success(model);
}


       https://github.com/jeromegn/
           Backbone.localStorage
Always Be Ringo




           aaron.maturen@gmail.com
           github.com/aaronmaturen
                        @atmaturen

More Related Content

Backbone and friends

  • 1.
  • 3. “Programs must be written for people to read and only incidentally for machines to execute.” -H. Abelson and G. Sussman in “The Structure and Interpretation of Computer Programs”
  • 4.
  • 6.
  • 7. Javascript Essentials JavaScript is an Object Oriented language where almost everything is an object, a set of key-value pairs.
  • 8.
  • 9. Javascript Essentials This lack of Classes makes it easy to follow one of the Gang of Four’s rules; Prefer object composition over class inheritance.
  • 10.
  • 11. Javascript Essentials JavaScript is now being used to create complex applications. A little bit of thought, and a well planned architecture can help solve all sorts of problems down the line.
  • 12.
  • 13. Javascript Essentials “The secret to building large apps is to never build large apps. Break your application into small pieces. Then assemble those testable, bite-sized pieces into your application.” -Justin Meyer
  • 14.
  • 15. Javascript Essentials Software bugs are costly to fix, and the longer that you wait to fix them, the more costly they become.
  • 16.
  • 17. Javascript Essentials Break the monstrous code up into small, interchangeable modules that can easily be re-used.
  • 18.
  • 19. jQuery jQuery plays a much smaller role in large JavaScript applications than most developers realize.
  • 20.
  • 21. Problems from jQuery jQuery is only part of the solution: it does not provide any recommendations on how to structure your code.
  • 22.
  • 23. I learned to love the Pattern Patterns are proven solutions Patterns can be easily reused Patterns can be expressive Patterns are not exact solutions
  • 24.
  • 25. Callback Functions var shine = function() { // some action }, rise = function(callback) { // .. do something callback(); // .. do something else } rise(shine);
  • 26.
  • 27. Immediate Functions (function foo() { alert('Watch Out!!'); }()); This is great, but there’s no privacy.
  • 28.
  • 29. Immediate Functions var greeting = (function ( name ) { var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], today = new Date(), msg = 'Hello, ' + name + ' Today is ' + days[today.getDay()] + ', ' + today.getDate(); return msg; }('Aaron')); // 'Hello Aaron, Today is Sat, 17'
  • 30.
  • 31. Observer “A way of notifying change to a number of classes to ensure consistency between classes.”
  • 32.
  • 33. Module Pattern var yetiModule = (function() { var lunch = ‘noms’; return{ eat: function(){ // om nom nom }, sleep: function(){ // ZZzzzzz } } });
  • 34.
  • 35. Revealing Module Pattern var yetiModule = (function() { var lunch = ‘noms’, eat = function(){ // om nom nom }; sleep = function(){ // ZZzzzzz }; return{ ‘eat’: eat, ‘sleep’: sleep } });
  • 36.
  • 37. Namespace Pattern var VAMPIRE = VAMPIRE || {}; VAMPIRE.bite() = function ( food ) { // something groovy }; VAMPIRE.sleep() = function ( ) { // Shhhhhh };
  • 38.
  • 39. Importing Globals var Module = (function(app, $) { // Code... })(MYAPP, jQuery);
  • 40.
  • 41. Application Core Manages the module lifecycle, It reacts to events passed to it and starts, stops, or restarts modules when necessary.
  • 42.
  • 43. Modules. If specific parts of your app fail, can it still function? How much do modules depend on others in the system? How much of this is instantly reusable? Can single modules exist on their own? Can single modules be tested independently? Is your application tightly coupled?
  • 44.
  • 45. “The more tied components are to each other, the less reusable they will be, and the more difficult it becomes to make changes to one without accidentally affecting another” -Rebecca Murphey
  • 46.
  • 47. MVC for JavaScript Luckily there are lots of solutions to providing structure.
  • 48.
  • 49. MV* for JavaScript But let’s not worry about pedantics. Architecture Patterns help define structure for an application
  • 50.
  • 51. MVC Models -Represent Knowledge and Data -Can be grouped in Collections -Isolated from views and controller -Responds to questions about state
  • 52.
  • 53. MVC Views In most cases Views are consider the UI Multiple Views can exist for a single model
  • 54.
  • 55. MVC Controllers Sits between Views and Models Performs business logic
  • 56.
  • 57. MV* for JavaScript All JavaScript libraries interpret MVC a little differently. Just make sure that you’re aware of it.
  • 58.
  • 59. Introducing Backbone -Flexible conventions for structuring applications -Event-driven communication between views and models -Supports data bindings through manual events
  • 60.
  • 61. Introducing Backbone Models: Domain-level data Views: Extended User Interface Objects Collections: Groups of Models Routers: Map URLs to functions
  • 62.
  • 63. Backbone Model var User = Backbone.Model.extend({ initialize: function(name){ this.set({name: name}); } }); var user = new User("Aaron Maturen"); console.log(user.get('name')); //Aaron Maturen
  • 64.
  • 65. Backbone Model: Defaults var User = Backbone.Model.extend({ defaults: { suave: true, human: true } });
  • 66.
  • 67. Backbone Model: Validate var User = Backbone.Model.extend({ validate: function(atts){ if(!atts.email || atts.email.length < 3) { return "email must be at least 3 characters"; } } });
  • 68.
  • 69. Backbone Collection var Users = Backbone.Collection.extend({ model: User }); users.bind("change", function(user){ console.log("I feel a disturbance in the force."); }); var user = users.get('some-id'); var user = users.getByCid('some-cid');
  • 70.
  • 71. Backbone Collection: Compare var Users = Backbone.Collection.extend({ model: User, comparator: function(user){ return user.get('name'); } });
  • 72.
  • 73. Backbone View var UserView = Backbone.View.extend({ model: "User", tagName: "span", className: "users", initialize: function() { //... }, render: function() { //... } });
  • 74.
  • 75. Backbone View : el var UserView = Backbone.View.extend({ el: $("#users") });
  • 76.
  • 77. Backbone View: Templates <script type="text/template" class="template" id="user- template"> <h2>Hello <%= name %>,</h2> <p>It's nice to see you again.</p> </script> var UserView = Backbone.View.extend({ template: _.template($("#user-template").html()); render: function(){ $ (this.el).html(this.template(this.model.toJSON())); return this; } });
  • 78.
  • 79. Backbone View: Events var UserView = Backbone.View.extend({ events:{ "change input[type=checkbox]" : "toggleActive", "click .destroy" : "deleteUser" }, toggleActive: function(e) { // … }, deleteUser: function(e) { // … } });
  • 80.
  • 81. Backbone View: Context var UserView = Backbone.View.extend({ initialize: function(){ _.bindAll(this, 'render', 'remove'); this.model.bind('change', this.render); this.model.bind('delete', this.remove); }, remove: function(){ $(this.el).remove(); } });
  • 82.
  • 84.
  • 85. Backbone Controller var PageController = Backbone.Controller.extend({ routes:{ "": "index", "search/:query": "search", "search/:query/p:page": "search", "file/*path": "file" }, index: function(){ //... }, help: function(){ //... }, search: function(){ //... } });
  • 86.
  • 87. Backbone Controller: Regex var PageController = Backbone.Controller.extend({ initialize: function(){ this.route(/pages/(d+)/, 'id', function(pageId){ // ... }); } });
  • 88.
  • 89. Backbone Benefits Easier to maintain, when updates are needed, it’s clear whether the changes are data-centric, or visual. Decoupling models and views makes it easier to right unit tests for business logic. Modularity allows developer teams to work on logic and user interfaces simultaneously.
  • 90.
  • 91. Backbone Server Verbs var User = Backbone.model.extend({ url: '/users' }); Verb Action create POST /collection read GET /collection[/ update id] /collection/id PUT delete DELETE / collection/id
  • 92.
  • 93. Backbone Server var user = new User(); user.set({name: "Phillip"}); user.bind('error', function(e){ //the server returns an error } user.save(null, { success: function() { // user saved successfully }, failure: function() { // user save failed } });
  • 94.
  • 95. Backbone Model : Refresh var user = Users.get(1); user.fetch();
  • 96.
  • 97. Backbone Collection: Populate var Users = Backbone.Collection.extend({ model: User, url: '/users' }); Users.fetch();
  • 98.
  • 99. Custom Behavior Backbone.sync = function(method, model, options){ console.log( method, model, options); options.success(model); } https://github.com/jeromegn/ Backbone.localStorage
  • 100.
  • 101. Always Be Ringo aaron.maturen@gmail.com github.com/aaronmaturen @atmaturen

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. \n
  59. \n
  60. \n
  61. \n
  62. \n
  63. \n
  64. \n
  65. \n
  66. \n
  67. \n
  68. \n
  69. \n
  70. \n
  71. \n
  72. \n
  73. \n
  74. \n
  75. \n
  76. \n
  77. \n
  78. \n
  79. \n
  80. \n
  81. \n
  82. \n
  83. \n
  84. \n
  85. \n
  86. \n
  87. \n
  88. \n
  89. \n
  90. \n
  91. \n
  92. \n
  93. \n
  94. \n
  95. \n
  96. \n
  97. \n
  98. \n
  99. \n
  100. \n
  101. \n
  102. \n
  103. \n
  104. \n
  105. \n
  106. \n
  107. \n
  108. \n
  109. \n
  110. \n
  111. \n
  112. \n
  113. \n
  114. \n
  115. \n
  116. \n
  117. \n
  118. \n
  119. \n
  120. \n
  121. \n
  122. \n
  123. \n
  124. \n
  125. \n
  126. \n
  127. \n
  128. \n
  129. \n
  130. \n
  131. \n