Backbone.js - A brief introduction

CLIENT-SIDE MVC
A brief introduction by Thomas Gorissen

Freitag, 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 • JS


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)


is not

• DOM Accessor

• Animation toolkit

• Control suite

• All in wonder package


WHAT IS IT FOR?

All Client-Side
Rendered Applications


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, ...)


ALTHOUGH...

outi neng-
R Controller
ngi
Model
• ... it’s a bit wrongly labeled
+ Collection
E

•I call it a “dirty” MVC ConViewoller
tr

iew
VDOM


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")
! ! });
! }

});


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
• – previousAttributes


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.ﬁlter(function(tweet) {
! ! return tweet.get('highlighted');
! });
}

});


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
◦ chain


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();
! }
!
});


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 events


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 listener


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
bookmarkable


DEMO

Download ﬁles here


WHAT ELSE?

• Make many small JavaScript ﬁles for big dev teams

• Comment your code (e.g. yDoc compatible)

• Works absolutely great with html5boilerplate.com


WE’RE HIRING!
Mail me: thomas@adzcentral.com

@SERRYNAIMO
for JavaScript related fuzziness


Backbone.js - A brief introduction

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

Backbone.js - A brief introduction