• Like
Backbone intro
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Published

 

Published in Lifestyle , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,313
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
94
Comments
0
Likes
12

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

  • 1. get a backbonean intro to the javascript mvc framework
  • 2. outline• why you need an mvc framework• what backbone is• how we use it in workday
  • 3. catopiathe webapp
  • 4. persist on server, access via restful api RESTful requestserv er response
  • 5. /rest/kittens
  • 6. json object { “kittens”: [ { “id”: “1”, “name”: “Max”, "plaything": "catnip" }, { “id”: “2”, "name": "Orhan", "plaything": "sofa legs" } ] }
  • 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. catopia max catniporhan sofa legs
  • 9. catopiamax catniporhan sofa legs
  • 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. <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. 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. 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. i haz a sadmy data is tightly coupled to my DOM
  • 15. just imagine
  • 16. if my data wasn’tcoupled to the DOM?
  • 17. if my kittens couldupdate themselves!
  • 18. javascript mvc frameworks backbone.js spine.js javascriptMVC is different tocappucinosencha widgetssproutcore UI elements
  • 19. backbone.jslightweight ~4kbone hard dependency: underscore.jscompatible with jQuery or Zeptoused by foursquare, trello, khan academy
  • 20. modelscollections views
  • 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. modelsinstantiating a modelvar max = new Kitten();max.play();
  • 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. 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. collections populating collectionsvar Kittens = Backbone.Collection.extend({ model: Kitten url: ‘/rest/kittens’}var kittens = new Kittens;kittens.fetch();
  • 26. collections syncing with the servervar Kittens = Backbone.Collection.extend({ model: Kitten url: ‘/rest/kittens’}var kittens = new Kittens;kittens.fetch();
  • 27. models syncing with the servervar Kitten = Backbone.Model.extend({ url: ‘/rest/kittens’}
  • 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. 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. 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. 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. 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. workdaymodels viewsnotifications notification viewstarred items starred item viewcollectionsnotifications appviewstarred items
  • 34. moarbackbone.js & underscore.js docsbackbone demo: todos // small well-commented appjavascript web applications // an o’reilly book