Backbone.js - A brief introduction
Upcoming SlideShare
Loading in...5
×
 

Backbone.js - A brief introduction

on

  • 29,585 views

Download the demo-code here: http://t.co/RKxGlMs

Download the demo-code here: http://t.co/RKxGlMs

Statistics

Views

Total Views
29,585
Views on SlideShare
12,519
Embed Views
17,066

Actions

Likes
26
Downloads
208
Comments
1

25 Embeds 17,066

http://makoto-tanaka.com 7733
http://kurapov.name 6400
http://dannycroft.co.uk 2124
http://tenman.info 469
http://localhost 70
http://www.serrynaimo.com 59
http://localhost:16207 53
http://webcache.googleusercontent.com 44
http://francescoagati.posterous.com 42
http://surfingbird.ru 28
http://gasparbelandria.com 9
http://wiki.onakasuita.org 9
http://chat.systemex.net 4
https://www.google.co.jp 4
http://paper.li 4
http://dannycroft.eu01.aws.af.cm 2
http://dannycroft.ghost.io 2
https://www.serrynaimo.com 2
http://translate.googleusercontent.com 2
https://twitter.com 1
http://www.google.co.uk 1
http://hghltd.yandex.net 1
http://surfingbird.com 1
http://www.google.co.jp 1
http://cache.yahoofs.jp 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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…
  • compact and efficient, thanks
    this tutorial can be also helpful:
    http://www.ibm.com/developerworks/web/library/wa-backbonejs/index.html
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Backbone.js - A brief introduction Backbone.js - A brief introduction Presentation Transcript

  • CLIENT-SIDE MVC A brief introduction by Thomas GorissenFreitag, 11. März 2011
  • ME? 1996 • <blink>Hello World</blink> • “WebMaster” • JS/PHP 1999 • Starcraft http://thomasgorissen.com • C# .NET / Forms 2005 • Ruby • ASP MVC 2010 • JSFreitag, 11. März 2011
  • is • Model/View/Controller • Structure provider Javascript Framework • RESTful JSON Connector • Released 13th Oct 2010 • Hash-Routing Engine • @DocumentCloud project • Event-driven • MIT licensed and on GitHub • Lightweight (6.9kb)Freitag, 11. März 2011
  • is not • DOM Accessor • Animation toolkit • Control suite • All in wonder packageFreitag, 11. März 2011
  • WHAT IS IT FOR? All Client-Side Rendered ApplicationsFreitag, 11. März 2011
  • AHA, HOW IS THAT? • If you do a lot of JavaScript, things tend to Model Controller get messy! • Backbone provides a way to organize your code, by View using the MVC pattern • Only the View accesses the DOM (e.g. with DOM jQuery, Zepto, ...)Freitag, 11. März 2011
  • ALTHOUGH... outi neng- R Controller ngi Model • ... it’s a bit wrongly labeled + Collection E •I call it a “dirty” MVC ConViewoller tr iew VDOMFreitag, 11. März 2011
  • THE MODEL var Tweet = Backbone.Model.extend({ ! // Overrides ! initialize: function(params) { ! ! if(params.id && !params.text) ! ! ! this.fetch(); ! }, ! ! url: function() { ! ! return "http://twitter.com/statuses/show/" + this.id +".json"; ! }, ! ! defaults: {! ! ! highlighted: false ! }, ! ! // Custom function ! highlight: function() { ! ! this.set({ ! ! ! highlighted: !this.get("highlighted") ! ! }); ! } });Freitag, 11. März 2011
  • THE MODEL Functions/Params • Easy to auto generate • • – extend – constructor / initialize • – get • – escape • – set • Holds data better then the • • – unset – clear DOM • • • – id – cid – attributes • – defaults • - toJSON • Throws change events • • – fetch – save • – destroy • – validate • – url • Can connect to a URL to • • – parse – clone populate from or persist to • – isNew • – change • – hasChanged the server • • – changedAttributes – previous • – previousAttributesFreitag, 11. März 2011
  • THE COLLECTION var UserTweets = Backbone.Collection.extend({ ! // Overrides ! model: Tweet, ! ! url: function() { ! ! return "http://twitter.com/statuses/user_timeline/" + this.user + ".json?count=10"; ! }, ! ! // Custom function ! highlighted: function() { ! return this.filter(function(tweet) { ! ! return tweet.get(highlighted); ! }); } });Freitag, 11. März 2011
  • THE COLLECTION • Easy to auto generate, as well Functions/Params • – extend ◦ forEach (each) • – model ◦ map • ◦ reduce (foldl, inject) • For bulk handling model – constructor / initialize • – models ◦ reduceRight (foldr) • – toJSON ◦ find (detect) objects • • – Underscore Methods (25) – add ◦ ◦ filter (select) reject • – remove ◦ every (all) • – get ◦ some (any) • – getByCid include • Throws change events ◦ • – at ◦ invoke • – length ◦ max • – comparator ◦ min • – sort ◦ sortBy • • Can connect to a URL to – pluck ◦ sortedIndex • – url ◦ toArray • – parse populate from the server ◦ size • – fetch • – refresh ◦ first • – create ◦ rest ◦ last ◦ without • Tons of query functions ◦ ◦ indexOf lastIndexOf ◦ isEmpty ◦ chainFreitag, 11. März 2011
  • THE VIEW or th e cont roller var TweetView = Backbone.View.extend({ ! ! initialize: function() { ! ! _.bindAll(this, "render"); ! ! this.model.bind("change", this.render); ! }, ! ! ! events: { ! ! "click": "highlight" ! }, ! ! render: function() { ! ! this.el = this.make("li", { ! ! ! className: this.model.get("highlighted") ? "highlighted" : "normal" ! ! }, this.model.get("text")); ! ! return this; ! }, ! ! highlight: function() { ! ! this.model.highlight(); ! } ! });Freitag, 11. März 2011
  • THE VIEWe cont or th roller • Changes the DOM Functions/Params • • Delegates DOM events – extend • – constructor / initialize • – el • – $ (jQuery or Zepto) • – render • Subscribes Model/Collection • – remove • – make • – delegateEvents change eventsFreitag, 11. März 2011
  • THE CONTROLLER ngine e rou t i n g- e or t h var Workspace = Backbone.Controller.extend({ ! routes: { ! ! "help":! ! ! ! ! "help",! ! // #help ! ! "search/:name":! ! ! "search",! ! // #search/serrynaimo ! "search/:name/t:tweet":! "search"!! // #search/serrynaimo/t36732 ! }, ! ! help: function() { ! ! ... ! }, ! search: function(name, tweet) { ! ! ... ! } }); new Workspace(); Backbone.history.start(); ! ! ! ! ! ! // Start url-change listenerFreitag, 11. März 2011
  • THE CONTROLLER ngine e rou t i n g- e or t h • Useful to initiate application states like window.location.hash = "help"; Functions/Params • - extend • • Enables go back/forward – routes • – constructor / initialize • – route browser functionality • – saveLocation • Makes application states bookmarkableFreitag, 11. März 2011
  • DEMO Download files hereFreitag, 11. März 2011
  • WHAT ELSE? • Make many small JavaScript files for big dev teams • Comment your code (e.g. yDoc compatible) • Works absolutely great with html5boilerplate.comFreitag, 11. März 2011
  • WE’RE HIRING! Mail me: thomas@adzcentral.com @SERRYNAIMO for JavaScript related fuzzinessFreitag, 11. März 2011