SlideShare a Scribd company logo

Client-side MVC with Backbone.js

iloveigloo, profile picture
iloveigloo

The document discusses client-side MVC with Backbone.js. It begins with an overview of Backbone.js and why it provides a useful structure for web applications. It then covers the main aspects of the Backbone architecture including models, collections, views, templates, and routers. Examples are provided for each component and how they work together. Real-world applications using Backbone, including for invoicing and social media analytics, are briefly described.

Technology
1 of 99
Downloaded 1,013 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
Client-side MVC with Backbone.js
Client-side MVC with Backbone.js
igloo igloolab.com michele.berto.li @iloveigloo @MicheleBertoli
Lago di Garda
Lago di Garda jQuery HTML5 UPLOADER JOBBERONE igloolab.com/jquery-html5-uploader jobberone.com SHARP SQUARE igloolab.com/sharpsquare KOALA POMODORO WEBAPP koooala.com pomodorowebapp.com
Agenda
Why Backbone.js 06:00 min Architecture 14:00 min Real World 05:00 min Tips & Tricks 06:00 min Extras 04:00 min Questions 05:00 min
Why Backbone.js
Why Backbone.js From server-side to client-side
Why Backbone.js From server-side to client-side We need efficient tools
Why Backbone.js jQuery is cool but…
Why Backbone.js jQuery is cool but… We have to store object informations into the DOM var list = ""; $.each(data, function (index, value) { list += "<li id="item-" + value.Id + "">" + value.Name + "</li>"; }); $("ul").append(list);
Why Backbone.js jQuery is cool but… We have to store object informations into the DOM var list = ""; $.each(data, function (index, value) { list += "<li id="item-" + value.Id + "">" + value.Name + "</li>"; }); $("ul").append(list);
Why Backbone.js jQuery is cool but… jQuery callback hell $.getJSON("/Items", function (data) { var list = ""; $.each(data, function (index, value) { list += "<li id="item-" + value.Id + "">" + value.Name + "</li>"; }); $("ul").append(list); $("li").click(function () { var $this = $(this); var id = $this.attr("id").replace("item-", ""); $.post("/Items", { id: id }, function () { $this.fadeOut(function () { $this.remove(); }); }); }); });
Why Backbone.js jQuery is cool but… jQuery callback hell $.getJSON("/Items", function (data) { var list = ""; $.each(data, function (index, value) { list += "<li id="item-" + value.Id + "">" + value.Name + "</li>"; }); $("ul").append(list); $("li").click(function () { var $this = $(this); var id = $this.attr("id").replace("item-", ""); $.post("/Items", { id: id }, function () { $this.fadeOut(function () { $this.remove(); }); }); }); });
Why Backbone.js “It's all too easy to create JavaScript applications that end up as tangled piles of jQuery selectors and callbacks.”
Why Backbone.js So, what do we need? • Abstraction. • Decoupling UI from Data. • No more callbacks.
Why Backbone.js So, what do we need? (More practically) • A RESTful service based data layer. • Events (to keep UI and data up-to-date). • A template engine. • A solid routing system. • All the above things wrapped into a lightweight JavaScript framework.
Why Backbone.js It exists and it’s called: Backbone.js
Architecture
Architecture Oct 13th, 2010 Jeremy Ashkenas
Architecture http://documentcloud.github.com/backbone https://github.com/documentcloud/backbone @documentcloud #documentcloud on IRC https://groups.google.com/forum/#!forum/backbonejs
Architecture Backbone.js gives structure to web applications by providing models with key- value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
Architecture Backbone.js gives structure to web applications by providing models with key- value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
Architecture Backbone.js gives structure to web applications by providing models with key- value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
Architecture Backbone.js gives structure to web applications by providing models with key- value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
Architecture Backbone.js gives structure to web applications by providing models with key- value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
Architecture Backbone.js gives structure to web applications by providing models with key- value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
Architecture Dependencies: • jQuery or Zepto • Underscore.js • Json2.js
Architecture MVC Model / Collection Template (View) View (Controller) Router
Architecture MVC Model / Collection Template (View) View (Controller) Router
Architecture MVC Model / Collection Template (View) View (Controller) Router
Architecture MVC Model / Collection Template (View) View (Controller) Router
Architecture MVC Model / Collection Template (View) View (Controller) Router
Model • Representing data (auto-generated). • Handling persistence. • Throws events. • Reusable.
Architecture Model / Collection - View - Template - Router - Utilities Model • Fetch HTTP GET /url • Save (new) HTTP POST /url • Save HTTP PUT /url/id • Destroy HTTP DELETE /url/id
Architecture Model / Collection - View - Template - Router - Utilities var Item = Backbone.Model.extend({ idAttribute: “Id”, urlRoot: “/Items” });
Architecture Model / Collection - View - Template - Router - Utilities var item = new Item(); item.set({ Name: “Igloo” }); // trigger change item.save(); // trigger sync
Architecture Model / Collection - View - Template - Router - Utilities Model • extend • toJSON • changedAttributes • constructor / initialize • fetch • previous • get • save • previousAttributes • set • destroy • escape • validate • has • isValid • unset • url • clear • urlRoot • id • parse • idAttribute • clone • cid • isNew • attributes • change • defaults • hasChanged
Collection • A list of models. • Underscore methods.
Architecture Model / Collection - View - Template - Router - Utilities var Items = Backbone.Collection.extend({ model: Item, url: "/Items" });
Architecture Model / Collection - View - Template - Router - Utilities var items = new Items(); items.fetch(); // trigger reset
Architecture Model / Collection - View - Template - Router - Utilities items.comparator = function(item) { return item.get("Name"); };
Architecture Model / Collection - View - Template - Router - Utilities Collection • extend • getByCid • etch • model • at • eset • constructor / initialize • length • create • models • comparator • toJSON • sort • add • pluck • remove • url • get • parse
Architecture Model / Collection - View - Template - Router - Utilities Collection • sortBy • groupBy • forEach (each) • sortedIndex • map • shuffle • reduce (foldl, inject) • toArray • reduceRight (foldr) • size • find (detect) • first • filter (select) • initial • reject • rest • every (all) • last • some (any) • without • include • indexOf • invoke • lastIndexOf • max • isEmpty • min • chain
View • Manipulates the DOM. • Delegates DOM events. • Has a Model / Collection.
Architecture Model / Collection - View - Template - Router - Utilities View View (Collection) View (Model)
Architecture Model / Collection - View - Template - Router - Utilities var ListView = Backbone.View.extend({ el: $("ul"), initialize: function () { this.collection.bind("reset", this.render, this); }, render: function () { this.collection.each(this.addItem, this); return this; }, addItem: function (item) { var itemView = new ItemView({ var ItemView = Backbone.View.extend({ model: item tagName: "li", }); render: function () { this.$el.append(itemView.el); this.$el.text(this.model.get("Name")); itemView.render(); return this; } } }); });
Architecture Model / Collection - View - Template - Router - Utilities var ListView = Backbone.View.extend({ el: $("ul"), initialize: function () { this.collection.bind("reset", this.render, this); }, render: function () { this.collection.each(this.addItem, this); return this; }, addItem: function (item) { var itemView = new ItemView({ var ItemView = Backbone.View.extend({ model: item tagName: "li", }); render: function () { this.$el.append(itemView.el); this.$el.text(this.model.get("Name")); itemView.render(); return this; } } }); });
Architecture Model / Collection - View - Template - Router - Utilities var ListView = Backbone.View.extend({ el: $("ul"), initialize: function () { this.collection.bind("reset", this.render, this); }, render: function () { this.collection.each(this.addItem, this); return this; }, addItem: function (item) { var itemView = new ItemView({ var ItemView = Backbone.View.extend({ model: item tagName: "li", }); render: function () { this.$el.append(itemView.el); this.$el.text(this.model.get("Name")); itemView.render(); return this; } } }); });
Architecture Model / Collection - View - Template - Router - Utilities var ListView = Backbone.View.extend({ el: $("ul"), initialize: function () { this.collection.bind("reset", this.render, this); }, render: function () { this.collection.each(this.addItem, this); return this; }, addItem: function (item) { var itemView = new ItemView({ var ItemView = Backbone.View.extend({ model: item tagName: "li", }); render: function () { this.$el.append(itemView.el); this.$el.text(this.model.get("Name")); itemView.render(); return this; } } }); });
Architecture Model / Collection - View - Template - Router - Utilities var ListView = Backbone.View.extend({ el: $("ul"), initialize: function () { this.collection.bind("reset", this.render, this); }, render: function () { this.collection.each(this.addItem, this); return this; }, addItem: function (item) { var itemView = new ItemView({ var ItemView = Backbone.View.extend({ model: item tagName: "li", }); render: function () { this.$el.append(itemView.el); this.$el.text(this.model.get("Name")); itemView.render(); return this; } } }); });
Architecture Model / Collection - View - Template - Router - Utilities var ListView = Backbone.View.extend({ el: $("ul"), initialize: function () { this.collection.bind("reset", this.render, this); }, render: function () { this.collection.each(this.addItem, this); return this; }, addItem: function (item) { var itemView = new ItemView({ var ItemView = Backbone.View.extend({ model: item tagName: "li", }); render: function () { this.$el.append(itemView.el); this.$el.text(this.model.get("Name")); itemView.render(); return this; } } }); });
Architecture Model / Collection - View - Template - Router - Utilities var items = new Items(); var listView = new ListView({ collection: items }); items.fetch();
Architecture Model / Collection - View - Template - Router - Utilities View • $ (jQuery or Zepto) • extend • render • constructor / initialize • remove • el • make • $el • delegateEvents • setElement • undelegateEvents • attributes
Template (Underscore.js) Compiles JavaScript templates into functions that can be evaluated for rendering. • Mustache • jQuery-tmpl
Architecture Model / Collection - View - Template - Router - Utilities <script type="text/template" id="item-template"> <li> <%= Name %> </li> </script>
Architecture Model / Collection - View - Template - Router - Utilities var ItemView = Backbone.View.extend({ … template: _.template($("#item-template").html()), ... render: function () { this.$el.html(this.template(this.model.toJSON())); return this; } … });
Router • Maps urls to function. • Enable history / bookmarking.
Architecture Model / Collection - View - Template - Router - Utilities var AppRouter = Backbone.Router.extend({ routes: { "": "initialize“ }, initialize: function () { … } });
Architecture Model / Collection - View - Template - Router - Utilities window.AppRouter = Backbone.Router.extend({ routes: { "": "loadInvoices", "/add": "addInvoice", "/show/:id": "showInvoice", "/edit/:id": "editInvoice“ }, loadInvoices: function () { … }, addInvoice: function () { … }, showInvoice: function (id) { … }, editInvoice: function (id) { … } });
Architecture Model / Collection - View - Template - Router - Utilities Router • extend • routes • constructor / initialize • route • navigate
Utilities • History • Sync • Utility
Architecture Model /Collection Data Router View Source Template
Real World
Real World Polar management • Smart invoicing web application Technologies • .NET RESTful Web Services / MS SQL • Backbone.js
Real World Polar management
Real World
Real World
Real World Polar management window.AppRouter = Backbone.Router.extend({ routes: { … "/modifica/:id": "editInvoice“ }, editInvoice: function (id) { … } });
Real World Polar management window.AppRouter = Backbone.Router.extend({ routes: { … "/modifica/:id": "editInvoice“ }, editInvoice: function (id) { … } });
Real World Koala • Social media analytics Technologies • NET RESTful Web Services / RavenDB • Backbone.js • Highcharts.js
Real World
Real World
Real World Koala window.Logs = Backbone.Collection.extend({ model: Log, url: "/Data", comparator: function (log) { return log.get("Date"); }, sum: function (field) { return this.reduce(function (memo, log) { return memo + log.get(field); }, 0); } });
Real World Koala window.Logs = Backbone.Collection.extend({ model: Log, url: "/Data", comparator: function (log) { return log.get("Date"); }, sum: function (field) { return this.reduce(function (memo, log) { return memo + log.get(field); }, 0); } });
Real World Koala window.Logs = Backbone.Collection.extend({ model: Log, url: "/Data", comparator: function (log) { return log.get("Date"); }, sum: function (field) { return this.reduce(function (memo, log) { return memo + log.get(field); }, 0); } });
Real World Linkedin
Real World FourSquare
Real World WunderKit
Real World Groupon
Real World Basecamp
3 Tips & Tricks
Tips & Tricks idAttribute idAttribute: “id” // CouchDB idAttribute: “_id” // .NET idAttribute: “Id”
Tips & Tricks Related Models
Tips & Tricks Related Models var Invoice = Backbone.Model.extend({ idAttribute: “Id” }); var Invoices = Backbone.Collection.extend({ model: Invoice, url: "/Invoices" });
Tips & Tricks Related Models
Tips & Tricks Related Models
Tips & Tricks Related Models var InvoiceDetail = Backbone.Model.extend({ idAttribute: “Id” }); var InvoiceDetails = Backbone.Collection.extend({ model: InvoiceDetail, url: "/InvoiceDetails“ });
Tips & Tricks Related Models var Invoice = Backbone.Model.extend({ idAttribute: "Id", initialize: function () { this.setInvoiceDetails(); }, setInvoiceDetails: function () { this.set({ InvoiceDetails: new InvoiceDetails(this.get("InvoiceDetails")) }); } });
Tips & Tricks Related Models
Tips & Tricks Related Models
Tips & Tricks Related Models var Invoice = Backbone.Model.extend({ idAttribute: "Id", initialize: function () { this.setInvoiceDetails(); this.bind("sync", this.setInvoiceDetails); }, setInvoiceDetails: function () { this.set({ InvoiceDetails: new InvoiceDetails(this.get("InvoiceDetails")) }); } });
Extras
Extras Plugins • Backbone-Nested • Backbone.Memento • Backbone.Validations • Backbone.localStorage • backbone.couchdb.js • … https://github.com/documentcloud/backbone/wiki/Extensions%2C- Plugins%2C-Resources
Extras • http://sproutcore.com (Apple/iCloud) • http://knockoutjs.com • http://emberjs.com • http://batmanjs.org (Shopify)
Extras Cheat Sheet • http://www.igloolab.com/downloads/backbone-cheatsheet.pdf
Backbone.js + • Lightweight • Powerful • Code is clean (and maintainable) - • Too verbose (for small applications)
3 Lago di Garda Questions ? Grazie www.igloolab.com @iloveigloo

More Related Content

PDF
Client-side MVC with Backbone.js (reloaded)
iloveigloo
 
PDF
JavaScript for Flex Devs
Aaronius
 
PPTX
MV* presentation frameworks in Javascript: en garde, pret, allez!
Roberto Messora
 
PDF
WebApps e Frameworks Javascript
meet2Brains
 
PPTX
Taming that client side mess with Backbone.js
Jarod Ferguson
 
PDF
Intro to BackboneJS + Intermediate Javascript
Andrew Lovett-Barron
 
PDF
Viking academy backbone.js
Bert Wijnants
 
PDF
jQuery Introduction
Arwid Bancewicz
 
Client-side MVC with Backbone.js (reloaded)
iloveigloo
 
JavaScript for Flex Devs
Aaronius
 
MV* presentation frameworks in Javascript: en garde, pret, allez!
Roberto Messora
 
WebApps e Frameworks Javascript
meet2Brains
 
Taming that client side mess with Backbone.js
Jarod Ferguson
 
Intro to BackboneJS + Intermediate Javascript
Andrew Lovett-Barron
 
Viking academy backbone.js
Bert Wijnants
 
jQuery Introduction
Arwid Bancewicz
 

What's hot (20)

PPT
Backbone js
husnara mohammad
 
KEY
Building Single Page Apps with Backbone.js, Coffeescript and Rails 3.1
Vagmi Mudumbai
 
PDF
Dependency Management with RequireJS
Aaronius
 
PDF
Bootstrap과 UI-Bootstrap
WebFrameworks
 
PDF
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Jeado Ko
 
PDF
Ember.js - A JavaScript framework for creating ambitious web applications
Juliana Lucena
 
PDF
7주 JavaScript 실습
지수 윤
 
PDF
jQuery Loves Developers - Oredev 2009
Remy Sharp
 
PPTX
JavaScript!
RTigger
 
PPTX
Mongoose and MongoDB 101
Will Button
 
PDF
jQuery: Nuts, Bolts and Bling
Doug Neiner
 
PDF
龍華大學前端技術分享 Part2
Jia-Long Yeh
 
KEY
An in-depth look at jQuery UI
Paul Bakaus
 
PPT
Javascript and jQuery intro
waw325
 
PPTX
Backbone.js and friends
Good Robot
 
KEY
Backbone.js Simple Tutorial
추근 문
 
KEY
Week 4 - jQuery + Ajax
baygross
 
PDF
D3.js and SVG
Karol Depka Pradzinski
 
PDF
Mongoose: MongoDB object modelling for Node.js
Yuriy Bogomolov
 
PDF
JavaScript Library Overview (Ajax Exp West 2007)
jeresig
 
Backbone js
husnara mohammad
 
Building Single Page Apps with Backbone.js, Coffeescript and Rails 3.1
Vagmi Mudumbai
 
Dependency Management with RequireJS
Aaronius
 
Bootstrap과 UI-Bootstrap
WebFrameworks
 
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Jeado Ko
 
Ember.js - A JavaScript framework for creating ambitious web applications
Juliana Lucena
 
7주 JavaScript 실습
지수 윤
 
jQuery Loves Developers - Oredev 2009
Remy Sharp
 
JavaScript!
RTigger
 
Mongoose and MongoDB 101
Will Button
 
jQuery: Nuts, Bolts and Bling
Doug Neiner
 
龍華大學前端技術分享 Part2
Jia-Long Yeh
 
An in-depth look at jQuery UI
Paul Bakaus
 
Javascript and jQuery intro
waw325
 
Backbone.js and friends
Good Robot
 
Backbone.js Simple Tutorial
추근 문
 
Week 4 - jQuery + Ajax
baygross
 
D3.js and SVG
Karol Depka Pradzinski
 
Mongoose: MongoDB object modelling for Node.js
Yuriy Bogomolov
 
JavaScript Library Overview (Ajax Exp West 2007)
jeresig
 
Ad

Viewers also liked (20)

PDF
いまさら聞けない！？Backbone.js 超入門
Kohei Kadowaki
 
PDF
BACKBONE.JSによるWebアプリケーション開発について
Toshio Ehara
 
PDF
はじめよう Backbone.js
Hiroki Toyokawa
 
PDF
最強オブジェクト指向言語 JavaScript 再入門！
Yuji Nojima
 
PDF
5分でわかる？Backbone.js ことはじめ
Kohei Kadowaki
 
PDF
Backbone.js
daisuke shimizu
 
PDF
BDD by Jasmine (jscafe 13)
Ryuma Tsukano
 
PDF
Parse.comと始めるBackbone.js入門(jscafe7)
Ryuma Tsukano
 
PDF
Aiming study#6pdf
Koutaro Chikuba
 
PDF
BACKBONE.JSでMVC始めませんか？
Toshio Ehara
 
PDF
re:Titanium 今ここでもう一度、はじめての Titanium #2
Ryutaro Miyashita
 
PDF
Rendr入門: サーバサイドで(も)動かす、Backbone.js
Masahiko Tachizono
 
PDF
Backbone.js入門
AdvancedTechNight
 
PPTX
ASP.NET MVC 3.0 Validation
Eyal Vardi
 
PDF
AngularJS vs. Ember.js vs. Backbone.js
Mark
 
PDF
Introduction à Marionette
Raphaël Lemaire
 
PPTX
Backbone And Marionette : Take Over The World
harshit040591
 
PDF
Intro to Backbone.js by Azat Mardanov for General Assembly
Azat Mardanov
 
PDF
Introduction to Backbone.js
Jonathan Weiss
 
PDF
Introduction to Backbone.js
Roman Kalyakin
 
いまさら聞けない！？Backbone.js 超入門
Kohei Kadowaki
 
BACKBONE.JSによるWebアプリケーション開発について
Toshio Ehara
 
はじめよう Backbone.js
Hiroki Toyokawa
 
最強オブジェクト指向言語 JavaScript 再入門！
Yuji Nojima
 
5分でわかる？Backbone.js ことはじめ
Kohei Kadowaki
 
Backbone.js
daisuke shimizu
 
BDD by Jasmine (jscafe 13)
Ryuma Tsukano
 
Parse.comと始めるBackbone.js入門(jscafe7)
Ryuma Tsukano
 
Aiming study#6pdf
Koutaro Chikuba
 
BACKBONE.JSでMVC始めませんか？
Toshio Ehara
 
re:Titanium 今ここでもう一度、はじめての Titanium #2
Ryutaro Miyashita
 
Rendr入門: サーバサイドで(も)動かす、Backbone.js
Masahiko Tachizono
 
Backbone.js入門
AdvancedTechNight
 
ASP.NET MVC 3.0 Validation
Eyal Vardi
 
AngularJS vs. Ember.js vs. Backbone.js
Mark
 
Introduction à Marionette
Raphaël Lemaire
 
Backbone And Marionette : Take Over The World
harshit040591
 
Intro to Backbone.js by Azat Mardanov for General Assembly
Azat Mardanov
 
Introduction to Backbone.js
Jonathan Weiss
 
Introduction to Backbone.js
Roman Kalyakin
 
Ad

Similar to Client-side MVC with Backbone.js (20)

PDF
初心者向けGAE/Java説明資料
Shinichi Ogawa
 
PDF
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
Doris Chen
 
PPTX
Backbonejs for beginners
Divakar Gu
 
PDF
前端MVC之BackboneJS
Zhang Xiaoxue
 
PDF
Gaej For Beginners
Shinichi Ogawa
 
PPTX
SharePoint and jQuery Essentials
Mark Rackley
 
PDF
DevLOVE Beautiful Development - 第一幕 陽の巻
都元ダイスケ Miyamoto
 
KEY
User Interface Development with jQuery
colinbdclark
 
PDF
Django introduction @ UGent
kevinvw
 
PDF
Play Framework and Activator
Kevin Webber
 
PDF
Understanding backbonejs
Nick Lee
 
PPTX
Getting started with jQuery
Gill Cleeren
 
PDF
CUST-1 Share Document Library Extension Points
Alfresco Software
 
PDF
fuser interface-development-using-jquery
Kostas Mavridis
 
PPTX
JS Essence
Uladzimir Piatryka
 
PDF
State of search | drupalcamp ghent
Joris Vercammen
 
PDF
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Sean Burgess
 
PDF
State of search | drupal dinner
Joris Vercammen
 
PDF
Python & Django TTT
kevinvw
 
PDF
Awesome html with ujs, jQuery and coffeescript
Amir Barylko
 
初心者向けGAE/Java説明資料
Shinichi Ogawa
 
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
Doris Chen
 
Backbonejs for beginners
Divakar Gu
 
前端MVC之BackboneJS
Zhang Xiaoxue
 
Gaej For Beginners
Shinichi Ogawa
 
SharePoint and jQuery Essentials
Mark Rackley
 
DevLOVE Beautiful Development - 第一幕 陽の巻
都元ダイスケ Miyamoto
 
User Interface Development with jQuery
colinbdclark
 
Django introduction @ UGent
kevinvw
 
Play Framework and Activator
Kevin Webber
 
Understanding backbonejs
Nick Lee
 
Getting started with jQuery
Gill Cleeren
 
CUST-1 Share Document Library Extension Points
Alfresco Software
 
fuser interface-development-using-jquery
Kostas Mavridis
 
JS Essence
Uladzimir Piatryka
 
State of search | drupalcamp ghent
Joris Vercammen
 
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Sean Burgess
 
State of search | drupal dinner
Joris Vercammen
 
Python & Django TTT
kevinvw
 
Awesome html with ujs, jQuery and coffeescript
Amir Barylko
 

More from iloveigloo (9)

PDF
#7 - Client-side web apps, MVC and jQuery
iloveigloo
 
PDF
#6 - Template Engine: Mustache.js
iloveigloo
 
PDF
#5 - CSS3 Gradients and Backgrounds
iloveigloo
 
PDF
#4 - CSS Selectors, CSS3 and Web typography
iloveigloo
 
PDF
$$$ SOLDI $$$
iloveigloo
 
PDF
#3 - Sectioning content and outline view
iloveigloo
 
PDF
#2 - CSS Layouts Overview
iloveigloo
 
PDF
#1 - HTML5 Overview
iloveigloo
 
PDF
Shoppingsquare
iloveigloo
 
#7 - Client-side web apps, MVC and jQuery
iloveigloo
 
#6 - Template Engine: Mustache.js
iloveigloo
 
#5 - CSS3 Gradients and Backgrounds
iloveigloo
 
#4 - CSS Selectors, CSS3 and Web typography
iloveigloo
 
$$$ SOLDI $$$
iloveigloo
 
#3 - Sectioning content and outline view
iloveigloo
 
#2 - CSS Layouts Overview
iloveigloo
 
#1 - HTML5 Overview
iloveigloo
 
Shoppingsquare
iloveigloo
 

Recently uploaded (20)

PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Peter Tan
 
PPTX
Group 1 Presentation -Planning and Decision Making .pptx
MatthewLewis227954
 
PDF
Network Security Unit 5.pdf for BCA BBA.
Serpent6
 
PPT
Teaching material agriculture food technology
LiaRayya
 
PDF
MIND Revenue Release Quarter 2 2025 Press Release
MIND CTI
 
PPTX
SOPHOS-XG Firewall Administrator PPT.pptx
AgnesMunisi
 
PDF
Approach and Philosophy of On baking technology
30anthuong17
 
PDF
Encapsulation theory and applications.pdf
gurumoop
 
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
Dropbox
 
PPTX
Tartificialntelligence_presentation.pptx
ry7r52mzb4
 
PDF
Video forgery: An extensive analysis of inter-and intra-frame manipulation al...
IAESIJAI
 
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
IAESIJAI
 
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
SandeepSingh286037
 
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
Mark Billinghurst
 
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
muhammadmuneebnaeem7
 
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
SOFTTECHHUB
 
PDF
A comparative analysis of optical character recognition models for extracting...
IAESIJAI
 
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
ZubinRadhakrishnan
 
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
3G4G
 
PDF
Electronic commerce courselecture one. Pdf
OmerMohamed64
 
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Peter Tan
 
Group 1 Presentation -Planning and Decision Making .pptx
MatthewLewis227954
 
Network Security Unit 5.pdf for BCA BBA.
Serpent6
 
Teaching material agriculture food technology
LiaRayya
 
MIND Revenue Release Quarter 2 2025 Press Release
MIND CTI
 
SOPHOS-XG Firewall Administrator PPT.pptx
AgnesMunisi
 
Approach and Philosophy of On baking technology
30anthuong17
 
Encapsulation theory and applications.pdf
gurumoop
 
Dropbox Q2 2025 Financial Results & Investor Presentation
Dropbox
 
Tartificialntelligence_presentation.pptx
ry7r52mzb4
 
Video forgery: An extensive analysis of inter-and intra-frame manipulation al...
IAESIJAI
 
Diabetes mellitus diagnosis method based random forest with bat algorithm
IAESIJAI
 
Agricultural_Statistics_at_a_Glance_2022_0.pdf
SandeepSingh286037
 
Reach Out and Touch Someone: Haptics and Empathic Computing
Mark Billinghurst
 
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
muhammadmuneebnaeem7
 
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
SOFTTECHHUB
 
A comparative analysis of optical character recognition models for extracting...
IAESIJAI
 
“AI and Expert System Decision Support & Business Intelligence Systems”
ZubinRadhakrishnan
 
The Rise and Fall of 3GPP – Time for a Sabbatical?
3G4G
 
Electronic commerce courselecture one. Pdf
OmerMohamed64
 

Client-side MVC with Backbone.js

  • 3. igloo igloolab.com michele.berto.li @iloveigloo @MicheleBertoli
  • 5. Lago di Garda jQuery HTML5 UPLOADER JOBBERONE igloolab.com/jquery-html5-uploader jobberone.com SHARP SQUARE igloolab.com/sharpsquare KOALA POMODORO WEBAPP koooala.com pomodorowebapp.com
  • 7. Why Backbone.js 06:00 min Architecture 14:00 min Real World 05:00 min Tips & Tricks 06:00 min Extras 04:00 min Questions 05:00 min
  • 10. Why Backbone.js From server-side to client-side We need efficient tools
  • 12. Why Backbone.js jQuery is cool but… We have to store object informations into the DOM var list = ""; $.each(data, function (index, value) { list += "<li id="item-" + value.Id + "">" + value.Name + "</li>"; }); $("ul").append(list);
  • 13. Why Backbone.js jQuery is cool but… We have to store object informations into the DOM var list = ""; $.each(data, function (index, value) { list += "<li id="item-" + value.Id + "">" + value.Name + "</li>"; }); $("ul").append(list);
  • 14. Why Backbone.js jQuery is cool but… jQuery callback hell $.getJSON("/Items", function (data) { var list = ""; $.each(data, function (index, value) { list += "<li id="item-" + value.Id + "">" + value.Name + "</li>"; }); $("ul").append(list); $("li").click(function () { var $this = $(this); var id = $this.attr("id").replace("item-", ""); $.post("/Items", { id: id }, function () { $this.fadeOut(function () { $this.remove(); }); }); }); });
  • 15. Why Backbone.js jQuery is cool but… jQuery callback hell $.getJSON("/Items", function (data) { var list = ""; $.each(data, function (index, value) { list += "<li id="item-" + value.Id + "">" + value.Name + "</li>"; }); $("ul").append(list); $("li").click(function () { var $this = $(this); var id = $this.attr("id").replace("item-", ""); $.post("/Items", { id: id }, function () { $this.fadeOut(function () { $this.remove(); }); }); }); });
  • 16. Why Backbone.js “It's all too easy to create JavaScript applications that end up as tangled piles of jQuery selectors and callbacks.”
  • 17. Why Backbone.js So, what do we need? • Abstraction. • Decoupling UI from Data. • No more callbacks.
  • 18. Why Backbone.js So, what do we need? (More practically) • A RESTful service based data layer. • Events (to keep UI and data up-to-date). • A template engine. • A solid routing system. • All the above things wrapped into a lightweight JavaScript framework.
  • 19. Why Backbone.js It exists and it’s called: Backbone.js
  • 21. Architecture Oct 13th, 2010 Jeremy Ashkenas
  • 23. Architecture Backbone.js gives structure to web applications by providing models with key- value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
  • 24. Architecture Backbone.js gives structure to web applications by providing models with key- value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
  • 25. Architecture Backbone.js gives structure to web applications by providing models with key- value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
  • 26. Architecture Backbone.js gives structure to web applications by providing models with key- value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
  • 27. Architecture Backbone.js gives structure to web applications by providing models with key- value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
  • 28. Architecture Backbone.js gives structure to web applications by providing models with key- value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
  • 29. Architecture Dependencies: • jQuery or Zepto • Underscore.js • Json2.js
  • 30. Architecture MVC Model / Collection Template (View) View (Controller) Router
  • 31. Architecture MVC Model / Collection Template (View) View (Controller) Router
  • 32. Architecture MVC Model / Collection Template (View) View (Controller) Router
  • 33. Architecture MVC Model / Collection Template (View) View (Controller) Router
  • 34. Architecture MVC Model / Collection Template (View) View (Controller) Router
  • 35. Model • Representing data (auto-generated). • Handling persistence. • Throws events. • Reusable.
  • 36. Architecture Model / Collection - View - Template - Router - Utilities Model • Fetch HTTP GET /url • Save (new) HTTP POST /url • Save HTTP PUT /url/id • Destroy HTTP DELETE /url/id
  • 37. Architecture Model / Collection - View - Template - Router - Utilities var Item = Backbone.Model.extend({ idAttribute: “Id”, urlRoot: “/Items” });
  • 38. Architecture Model / Collection - View - Template - Router - Utilities var item = new Item(); item.set({ Name: “Igloo” }); // trigger change item.save(); // trigger sync
  • 39. Architecture Model / Collection - View - Template - Router - Utilities Model • extend • toJSON • changedAttributes • constructor / initialize • fetch • previous • get • save • previousAttributes • set • destroy • escape • validate • has • isValid • unset • url • clear • urlRoot • id • parse • idAttribute • clone • cid • isNew • attributes • change • defaults • hasChanged
  • 40. Collection • A list of models. • Underscore methods.
  • 41. Architecture Model / Collection - View - Template - Router - Utilities var Items = Backbone.Collection.extend({ model: Item, url: "/Items" });
  • 42. Architecture Model / Collection - View - Template - Router - Utilities var items = new Items(); items.fetch(); // trigger reset
  • 43. Architecture Model / Collection - View - Template - Router - Utilities items.comparator = function(item) { return item.get("Name"); };
  • 44. Architecture Model / Collection - View - Template - Router - Utilities Collection • extend • getByCid • etch • model • at • eset • constructor / initialize • length • create • models • comparator • toJSON • sort • add • pluck • remove • url • get • parse
  • 45. Architecture Model / Collection - View - Template - Router - Utilities Collection • sortBy • groupBy • forEach (each) • sortedIndex • map • shuffle • reduce (foldl, inject) • toArray • reduceRight (foldr) • size • find (detect) • first • filter (select) • initial • reject • rest • every (all) • last • some (any) • without • include • indexOf • invoke • lastIndexOf • max • isEmpty • min • chain
  • 46. View • Manipulates the DOM. • Delegates DOM events. • Has a Model / Collection.
  • 47. Architecture Model / Collection - View - Template - Router - Utilities View View (Collection) View (Model)
  • 48. Architecture Model / Collection - View - Template - Router - Utilities var ListView = Backbone.View.extend({ el: $("ul"), initialize: function () { this.collection.bind("reset", this.render, this); }, render: function () { this.collection.each(this.addItem, this); return this; }, addItem: function (item) { var itemView = new ItemView({ var ItemView = Backbone.View.extend({ model: item tagName: "li", }); render: function () { this.$el.append(itemView.el); this.$el.text(this.model.get("Name")); itemView.render(); return this; } } }); });
  • 49. Architecture Model / Collection - View - Template - Router - Utilities var ListView = Backbone.View.extend({ el: $("ul"), initialize: function () { this.collection.bind("reset", this.render, this); }, render: function () { this.collection.each(this.addItem, this); return this; }, addItem: function (item) { var itemView = new ItemView({ var ItemView = Backbone.View.extend({ model: item tagName: "li", }); render: function () { this.$el.append(itemView.el); this.$el.text(this.model.get("Name")); itemView.render(); return this; } } }); });
  • 50. Architecture Model / Collection - View - Template - Router - Utilities var ListView = Backbone.View.extend({ el: $("ul"), initialize: function () { this.collection.bind("reset", this.render, this); }, render: function () { this.collection.each(this.addItem, this); return this; }, addItem: function (item) { var itemView = new ItemView({ var ItemView = Backbone.View.extend({ model: item tagName: "li", }); render: function () { this.$el.append(itemView.el); this.$el.text(this.model.get("Name")); itemView.render(); return this; } } }); });
  • 51. Architecture Model / Collection - View - Template - Router - Utilities var ListView = Backbone.View.extend({ el: $("ul"), initialize: function () { this.collection.bind("reset", this.render, this); }, render: function () { this.collection.each(this.addItem, this); return this; }, addItem: function (item) { var itemView = new ItemView({ var ItemView = Backbone.View.extend({ model: item tagName: "li", }); render: function () { this.$el.append(itemView.el); this.$el.text(this.model.get("Name")); itemView.render(); return this; } } }); });
  • 52. Architecture Model / Collection - View - Template - Router - Utilities var ListView = Backbone.View.extend({ el: $("ul"), initialize: function () { this.collection.bind("reset", this.render, this); }, render: function () { this.collection.each(this.addItem, this); return this; }, addItem: function (item) { var itemView = new ItemView({ var ItemView = Backbone.View.extend({ model: item tagName: "li", }); render: function () { this.$el.append(itemView.el); this.$el.text(this.model.get("Name")); itemView.render(); return this; } } }); });
  • 53. Architecture Model / Collection - View - Template - Router - Utilities var ListView = Backbone.View.extend({ el: $("ul"), initialize: function () { this.collection.bind("reset", this.render, this); }, render: function () { this.collection.each(this.addItem, this); return this; }, addItem: function (item) { var itemView = new ItemView({ var ItemView = Backbone.View.extend({ model: item tagName: "li", }); render: function () { this.$el.append(itemView.el); this.$el.text(this.model.get("Name")); itemView.render(); return this; } } }); });
  • 54. Architecture Model / Collection - View - Template - Router - Utilities var items = new Items(); var listView = new ListView({ collection: items }); items.fetch();
  • 55. Architecture Model / Collection - View - Template - Router - Utilities View • $ (jQuery or Zepto) • extend • render • constructor / initialize • remove • el • make • $el • delegateEvents • setElement • undelegateEvents • attributes
  • 56. Template (Underscore.js) Compiles JavaScript templates into functions that can be evaluated for rendering. • Mustache • jQuery-tmpl
  • 57. Architecture Model / Collection - View - Template - Router - Utilities <script type="text/template" id="item-template"> <li> <%= Name %> </li> </script>
  • 58. Architecture Model / Collection - View - Template - Router - Utilities var ItemView = Backbone.View.extend({ … template: _.template($("#item-template").html()), ... render: function () { this.$el.html(this.template(this.model.toJSON())); return this; } … });
  • 59. Router • Maps urls to function. • Enable history / bookmarking.
  • 60. Architecture Model / Collection - View - Template - Router - Utilities var AppRouter = Backbone.Router.extend({ routes: { "": "initialize“ }, initialize: function () { … } });
  • 61. Architecture Model / Collection - View - Template - Router - Utilities window.AppRouter = Backbone.Router.extend({ routes: { "": "loadInvoices", "/add": "addInvoice", "/show/:id": "showInvoice", "/edit/:id": "editInvoice“ }, loadInvoices: function () { … }, addInvoice: function () { … }, showInvoice: function (id) { … }, editInvoice: function (id) { … } });
  • 62. Architecture Model / Collection - View - Template - Router - Utilities Router • extend • routes • constructor / initialize • route • navigate
  • 63. Utilities • History • Sync • Utility
  • 64. Architecture Model /Collection Data Router View Source Template
  • 66. Real World Polar management • Smart invoicing web application Technologies • .NET RESTful Web Services / MS SQL • Backbone.js
  • 67. Real World Polar management
  • 70. Real World Polar management window.AppRouter = Backbone.Router.extend({ routes: { … "/modifica/:id": "editInvoice“ }, editInvoice: function (id) { … } });
  • 71. Real World Polar management window.AppRouter = Backbone.Router.extend({ routes: { … "/modifica/:id": "editInvoice“ }, editInvoice: function (id) { … } });
  • 72. Real World Koala • Social media analytics Technologies • NET RESTful Web Services / RavenDB • Backbone.js • Highcharts.js
  • 75. Real World Koala window.Logs = Backbone.Collection.extend({ model: Log, url: "/Data", comparator: function (log) { return log.get("Date"); }, sum: function (field) { return this.reduce(function (memo, log) { return memo + log.get(field); }, 0); } });
  • 76. Real World Koala window.Logs = Backbone.Collection.extend({ model: Log, url: "/Data", comparator: function (log) { return log.get("Date"); }, sum: function (field) { return this.reduce(function (memo, log) { return memo + log.get(field); }, 0); } });
  • 77. Real World Koala window.Logs = Backbone.Collection.extend({ model: Log, url: "/Data", comparator: function (log) { return log.get("Date"); }, sum: function (field) { return this.reduce(function (memo, log) { return memo + log.get(field); }, 0); } });
  • 78. Real World Linkedin
  • 79. Real World FourSquare
  • 80. Real World WunderKit
  • 81. Real World Groupon
  • 82. Real World Basecamp
  • 84. Tips & Tricks idAttribute idAttribute: “id” // CouchDB idAttribute: “_id” // .NET idAttribute: “Id”
  • 85. Tips & Tricks Related Models
  • 86. Tips & Tricks Related Models var Invoice = Backbone.Model.extend({ idAttribute: “Id” }); var Invoices = Backbone.Collection.extend({ model: Invoice, url: "/Invoices" });
  • 87. Tips & Tricks Related Models
  • 88. Tips & Tricks Related Models
  • 89. Tips & Tricks Related Models var InvoiceDetail = Backbone.Model.extend({ idAttribute: “Id” }); var InvoiceDetails = Backbone.Collection.extend({ model: InvoiceDetail, url: "/InvoiceDetails“ });
  • 90. Tips & Tricks Related Models var Invoice = Backbone.Model.extend({ idAttribute: "Id", initialize: function () { this.setInvoiceDetails(); }, setInvoiceDetails: function () { this.set({ InvoiceDetails: new InvoiceDetails(this.get("InvoiceDetails")) }); } });
  • 91. Tips & Tricks Related Models
  • 92. Tips & Tricks Related Models
  • 93. Tips & Tricks Related Models var Invoice = Backbone.Model.extend({ idAttribute: "Id", initialize: function () { this.setInvoiceDetails(); this.bind("sync", this.setInvoiceDetails); }, setInvoiceDetails: function () { this.set({ InvoiceDetails: new InvoiceDetails(this.get("InvoiceDetails")) }); } });
  • 95. Extras Plugins • Backbone-Nested • Backbone.Memento • Backbone.Validations • Backbone.localStorage • backbone.couchdb.js • … https://github.com/documentcloud/backbone/wiki/Extensions%2C- Plugins%2C-Resources
  • 96. Extras • http://sproutcore.com (Apple/iCloud) • http://knockoutjs.com • http://emberjs.com • http://batmanjs.org (Shopify)
  • 98. Backbone.js + • Lightweight • Powerful • Code is clean (and maintainable) - • Too verbose (for small applications)
  • 99. 3 Lago di Garda Questions ? Grazie www.igloolab.com @iloveigloo