Backbone.js Intro

A presentation given at MadJS (http://madjs.com/) in February 2012

Transcript

1. Backbone.js   Max  Lynch   h*p://documentcloud.github.com/backbone/  
2. Why  Backbone.js   •  Structure   •  Cut  down  on  AJAX  “boilerplate”   •  Backbone.View  (chunk  of  UI)   •  Backbone.Router  (client  side  URL  rouBng)  
3. MVC  Framework   •  Models  (your  data)   •  Views  (chunks  of  UI)   •  Controller  (vague;  events  originaBng  from   UI)  
4. Core  Features   •  Backbone.Model  (your  data)   •  Backbone.Collection  (groups  of  models)   •  Backbone.View  (chunk  of  UI)   •  Backbone.Router  (client  side  URL  rouBng)  
5. Backbone.Model   var  UserApp  =  Backbone.Model.extend({      urlRoot:  '/api/v1/user/app'   });   Creating:   var  app  =  new  UserApp();   app.set({‘name’:  ‘MadJS’});   app.save();        #  POST  /api/v1/user/app     Loading:   var  app  =  new  UserApp();   app.id  =  54;   app.fetch();      #  GET  /api/v1/user/app/54     Updating:   app.set({‘name’:  ‘Madison  Javascript’});   app.save();        #  PUT  /api/v1/user/app/54     Deleting:   app.destroy();  #  DELETE  /api/v1/user/app/54    
6. Model  JSON          {              "name":  "MadJS",              "created_at":  1329102759,                "tree":  "..."          }  
7. Backbone.Collections   var  UserApps  =  Backbone.Collection.extend({      model:  UserApp,      url:  '/api/v1/user/apps',      parse:  function(response)  {          return  response.apps;      }   });   REST  API  JSON  Response:   {        "apps":  [          {              "name":  "MadJS",              "id":  54,              "created_at":  1329102759,                "tree":  "..."          }      ]   }   Loading:   var  app  =  new  UserApps();   app.fetch();    #  GET  /api/v1/user/apps  
8. Backbone.View   var  AppView  =  Backbone.View.extend({      template:  _.template($('#app-­‐template').html()),      initialize:  function()  {      },      render:  function()  {          $(this.el).html(this.template(this.model.toJSON()));      }   });     var  Dash  =  Backbone.View.extend({      initialize:  function()  {          //UserApps.bind('add',  this.addApp,  this);          var  self  =  this;            var  apps  =  new  UserApps();          apps.bind('reset',  this.renderApps);          apps.fetch();      },      renderApps:  function(apps)  {          apps.each(function(app)  {              var  appView  =  new  AppView({  model:  app  });              appView.render();              $('#apps').append(appView.el);          });      }   });  
9. Wrapping  it  Up   <!DOCTYPE  html>   <html>      <head>          <title>Example  Dashboard</title>      </head>      <body>          <h1>Your  Apps</h1>          <ul  id="apps"></ul>            <script  type="text/template"  id="app-­‐template">              <li>                  <h4><a  href="#"><%=  name  %></h2></li>              </li>          </script>            <script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/ jquery.min.js"></script>          <script  src="/static/js/ext/underscore.js"></script>          <script  src="/static/js/ext/backbone.js"></script>          <script  src="/static/js/app/models.js"></script>          <script  src="/static/js/dashboard/test.js"></script>      </body>   </html>