Backbone intro
Upcoming SlideShare
Loading in...5
×
 

Backbone intro

on

  • 3,709 views

 

Statistics

Views

Total Views
3,709
Views on SlideShare
3,461
Embed Views
248

Actions

Likes
12
Downloads
93
Comments
0

5 Embeds 248

http://share-wis.dev 242
http://tweetedtimes.com 3
http://vrindavijayan.blogspot.in 1
https://twitter.com 1
https://si0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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

Backbone intro Backbone intro Presentation Transcript

  • 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”, "plaything": "catnip" }, { “id”: “2”, "name": "Orhan", "plaything": "sofa legs" } ] }
  • $.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); }) }});
  • 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> <td class=”kitten-plaything”>catnip</td> <td class=”kitten-delete”><img src=”delete.jpg”></td></tr> max catnip
  • <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
  • 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” });
  • 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(); } });
  • 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 widgetssproutcore UI elements
  • backbone.jslightweight ~4kbone hard dependency: underscore.jscompatible with jQuery or Zeptoused by foursquare, trello, khan academy
  • modelscollections views
  • 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")); }}
  • modelsinstantiating a modelvar max = new Kitten();max.play();
  • 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"});
  • 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”)); }
  • collections populating collectionsvar Kittens = Backbone.Collection.extend({ model: Kitten url: ‘/rest/kittens’}var kittens = new Kittens;kittens.fetch();
  • collections syncing with the servervar Kittens = Backbone.Collection.extend({ model: Kitten url: ‘/rest/kittens’}var kittens = new Kittens;kittens.fetch();
  • 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   /collection ◦ read → GET   /collection[/id] ◦ update → PUT   /collection/id ◦ delete → DELETE   /collection/id
  • 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
  • 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});
  • 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
  • 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; }});
  • workdaymodels viewsnotifications notification viewstarred items starred item viewcollectionsnotifications appviewstarred items
  • moarbackbone.js & underscore.js docsbackbone demo: todos // small well-commented appjavascript web applications // an o’reilly book