Your SlideShare is downloading. ×
0
Backbone intro
Backbone intro
Backbone intro
Backbone intro
Backbone intro
Backbone intro
Backbone intro
Backbone intro
Backbone intro
Backbone intro
Backbone intro
Backbone intro
Backbone intro
Backbone intro
Backbone intro
Backbone intro
Backbone intro
Backbone intro
Backbone intro
Backbone intro
Backbone intro
Backbone intro
Backbone intro
Backbone intro
Backbone intro
Backbone intro
Backbone intro
Backbone intro
Backbone intro
Backbone intro
Backbone intro
Backbone intro
Backbone intro
Backbone intro
Backbone intro
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,358

Published on

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

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

    ×