Backbone.js - A brief introduction

35,559 views

Published on

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

Published in: Technology
1 Comment
29 Likes
Statistics
Notes
No Downloads
Views
Total views
35,559
On SlideShare
0
From Embeds
0
Number of Embeds
21,096
Actions
Shares
0
Downloads
281
Comments
1
Likes
29
Embeds 0
No embeds

No notes for slide

Backbone.js - A brief introduction

  1. 1. CLIENT-SIDE MVC A brief introduction by Thomas GorissenFreitag, 11. März 2011
  2. 2. 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
  3. 3. 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
  4. 4. is not • DOM Accessor • Animation toolkit • Control suite • All in wonder packageFreitag, 11. März 2011
  5. 5. WHAT IS IT FOR? All Client-Side Rendered ApplicationsFreitag, 11. März 2011
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. DEMO Download files hereFreitag, 11. März 2011
  17. 17. 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
  18. 18. WE’RE HIRING! Mail me: thomas@adzcentral.com @SERRYNAIMO for JavaScript related fuzzinessFreitag, 11. März 2011

×