Your SlideShare is downloading. ×
Backbone intro
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Backbone intro

3,350

Published on

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

No Downloads
Views
Total Views
3,350
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
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

    ×