Your SlideShare is downloading. ×
0
get a backbonean intro to the javascript mvc framework
outline• why you need an mvc framework• what backbone is• how we use it in workday
catopiathe webapp
persist on server,          access via restful api               RESTful requestserv er                  response
/rest/kittens
json object  {          “kittens”:          [          {             “id”: “1”,             “name”: “Max”,             "pl...
$.ajax({   url: /rest/kittens   success: function(response) {          _.each(response.kittens, function(kitten) {        ...
catopia max     catniporhan   sofa legs
catopiamax      catniporhan   sofa legs
<tr class=”kitten-row” kitten-id=”1”>  <td class=”kitten-photo”><img src=”max.jpg”></td>  <td class=”kitten-name”>max</td>...
<tr class=”kitten-row” kitten-id=”1”>  <td class=”kitten-photo”><img src=”max.jpg”></td>  <td class=”kitten-name”>max</td>...
max        catnip$(“.kitten-delete”).click(function () { // Find the ID of the kitten var id = $(this).closest(“.kitten-ro...
max        catnip$(“.kitten-delete”).click(function () { // Find the ID of the kitten var kittenRow = $(this).closest(“.ki...
i haz a sadmy data is tightly coupled to my DOM
just imagine
if my data wasn’tcoupled to the DOM?
if my kittens couldupdate themselves!
javascript mvc  frameworks      backbone.js      spine.js      javascriptMVC       is different tocappucinosencha         ...
backbone.jslightweight ~4kbone hard dependency: underscore.jscompatible with jQuery or Zeptoused by foursquare, trello, kh...
modelscollections  views
models              where we keep our data                + utility functions// Create a Kitten model by extending Backbon...
modelsinstantiating a modelvar max = new Kitten();max.play();
models                access data via set and get                 can validate data easily// Create a Kitten model by exte...
collections              arrays of model instances// Create a collection of kittens!var Kittens = Backbone.Collection.exte...
collections                populating collectionsvar Kittens = Backbone.Collection.extend({    model: Kitten    url: ‘/res...
collections               syncing with the servervar Kittens = Backbone.Collection.extend({    model: Kitten    url: ‘/res...
models          syncing with the servervar Kitten = Backbone.Model.extend({    url: ‘/rest/kittens’}
collections                  backbone.syncThe default sync handler maps CRUD to REST like so: ◦ create → POST   /collectio...
each model has an associated view         max has a         model         view                              both models ar...
views          let’s create views for our kittens// Getting Max out of our kitten collection, he had an ID of 1var max = k...
viewsvar KittenView = Backbone.View.extend({  tagName: “tr”,  className: “kitten-row”,  template: _.template($(“#kitten-te...
views          let’s do some add in that featurevar KittenView = Backbone.View.extend({  tagName: “tr”,  className: “kitte...
workdaymodels          viewsnotifications    notification viewstarred items   starred item viewcollectionsnotifications      ...
moarbackbone.js & underscore.js docsbackbone demo: todos // small well-commented appjavascript web applications // an o’re...
Backbone intro
Backbone intro
Upcoming SlideShare
Loading in...5
×

Backbone intro

3,376

Published on

Published in: Lifestyle, Technology
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,376
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
95
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "Backbone intro"

    1. 1. get a backbonean intro to the javascript mvc framework
    2. 2. outline• why you need an mvc framework• what backbone is• how we use it in workday
    3. 3. catopiathe webapp
    4. 4. persist on server, access via restful api RESTful requestserv er response
    5. 5. /rest/kittens
    6. 6. json object { “kittens”: [ { “id”: “1”, “name”: “Max”, "plaything": "catnip" }, { “id”: “2”, "name": "Orhan", "plaything": "sofa legs" } ] }
    7. 7. $.ajax({ url: /rest/kittens success: function(response) { _.each(response.kittens, function(kitten) { var kittenTemplate = ...//some template // Go make all the table rows. $("#cat-container").append(kittenTemplate); }) }});
    8. 8. catopia max catniporhan sofa legs
    9. 9. catopiamax catniporhan sofa legs
    10. 10. <tr class=”kitten-row” kitten-id=”1”> <td class=”kitten-photo”><img src=”max.jpg”></td> <td class=”kitten-name”>max</td> <td class=”kitten-plaything”>catnip</td> <td class=”kitten-delete”><img src=”delete.jpg”></td></tr> max catnip
    11. 11. <tr class=”kitten-row” kitten-id=”1”> <td class=”kitten-photo”><img src=”max.jpg”></td> <td class=”kitten-name”>max</td> <td class=”kitten-plaything”>catnip</td> <td class=”kitten-delete”><img src=”delete.jpg”></td></tr> max catnip
    12. 12. max catnip$(“.kitten-delete”).click(function () { // Find the ID of the kitten var id = $(this).closest(“.kitten-row”).attr(“kitten-id”); // Do the delete request $.ajax( url: “/rest/kittens/1”, type: “DELETE” });
    13. 13. max catnip$(“.kitten-delete”).click(function () { // Find the ID of the kitten var kittenRow = $(this).closest(“.kitten-row”); var id = kittenRow.attr(“kitten-id”); // Do the delete request $.ajax( url: “/rest/kittens/1”, type: “DELETE”, success: function () { kittenRow.remove(); } });
    14. 14. i haz a sadmy data is tightly coupled to my DOM
    15. 15. just imagine
    16. 16. if my data wasn’tcoupled to the DOM?
    17. 17. if my kittens couldupdate themselves!
    18. 18. javascript mvc frameworks backbone.js spine.js javascriptMVC is different tocappucinosencha widgetssproutcore UI elements
    19. 19. backbone.jslightweight ~4kbone hard dependency: underscore.jscompatible with jQuery or Zeptoused by foursquare, trello, khan academy
    20. 20. modelscollections views
    21. 21. models where we keep our data + utility functions// Create a Kitten model by extending Backbone.Modelvar Kitten = Backbone.Model.extend({ // something we want all kittens to do play: function () { console.log("Playing with " + this.model.get("plaything")); }}
    22. 22. modelsinstantiating a modelvar max = new Kitten();max.play();
    23. 23. models access data via set and get can validate data easily// Create a Kitten model by extending Backbone.Modelvar Kitten = Backbone.Model.extend({ // validate our data by overriding the method // in Backbone.Model validate: function(attrs) { if (attrs.plaything == “dog”) { // error return “You haven’t watched enough Hanna-Barbera cartoons.” } }}// Instantiate a kitten.var max = new Kitten();max.set({plaything: "twine"});
    24. 24. collections arrays of model instances// Create a collection of kittens!var Kittens = Backbone.Collection.extend({ model: Kitten // default model}var kittens = new Kittens;kittens.add({name: “Max”}); whenever you add a new item,kittens.add({name: “Orhan”}); an add event is fired. useful! e.g. kittens.bind(add, function(kitten) { alert(“Hi “ + kitten.get(“name”)); }
    25. 25. collections populating collectionsvar Kittens = Backbone.Collection.extend({ model: Kitten url: ‘/rest/kittens’}var kittens = new Kittens;kittens.fetch();
    26. 26. collections syncing with the servervar Kittens = Backbone.Collection.extend({ model: Kitten url: ‘/rest/kittens’}var kittens = new Kittens;kittens.fetch();
    27. 27. models syncing with the servervar Kitten = Backbone.Model.extend({ url: ‘/rest/kittens’}
    28. 28. collections backbone.syncThe default sync handler maps CRUD to REST like so: ◦ create → POST   /collection ◦ read → GET   /collection[/id] ◦ update → PUT   /collection/id ◦ delete → DELETE   /collection/id
    29. 29. each model has an associated view max has a model view both models are in a Kittens collection (they could be in others too! like a CuteThings collection. doesn’t have orhan has a to be a 1-1 mapping) model view
    30. 30. views let’s create views for our kittens// Getting Max out of our kitten collection, he had an ID of 1var max = kittens.get(1);// We’ll look at the view in detail nextnew KittenView({model: max});
    31. 31. viewsvar KittenView = Backbone.View.extend({ tagName: “tr”, className: “kitten-row”, template: _.template($(“#kitten-template”).html()), render: function() { $(this.el).html(this.template(this.model.toJSON()))); return this; }}); this will return some HTML all views have an associated element
    32. 32. views let’s do some add in that featurevar KittenView = Backbone.View.extend({ tagName: “tr”, className: “kitten-row”, template: _.template($(“#kitten-template”).html()), events: { “keypress .delete-icon”: “destroyKitten” } destroyKitten: function() { this.model.destroy(); } render: function() { $(this.el).html(this.template(this.model.toJSON()))); return this; }});
    33. 33. workdaymodels viewsnotifications notification viewstarred items starred item viewcollectionsnotifications appviewstarred items
    34. 34. moarbackbone.js & underscore.js docsbackbone demo: todos // small well-commented appjavascript web applications // an o’reilly book
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×