client-side mvc with backbone.js (reloaded)

Client-side MVC with Backbone.js

igloolab.com@iloveigloo

michele.berto.li@MicheleBertoli

igloo

Moniga Del Garda

Lago di Garda

jQueryHTML5 UPLOADER

igloolab.com/jquery-html5-uploader

KOALAkoooala.com POMODORO WEBAPP

pomodorowebapp.com

JOBBERONEjobberone.com

SHARP SQUAREigloolab.com/sharpsquare

Agenda

Questions

Why Backbone.js

Architecture

Real World

Tips & Tricks

Extras

14:00 min

05:00 min

06:00 min

04:00 min

NaN

06: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


We have to store object informations intothe DOM

var list = ""; $.each(data, function (index, value) { list += "<li id=\"item-" + value.Id + "\">" + value.Name + "</li>"; }); $("ul").append(list);

Why Backbone.js

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

});


jQuery callback hell

Why Backbone.js


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

• 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.

So, what do we need? (More practically)

Why Backbone.js

It exists and it’s called: Backbone.js

Architecture

Architecture

Jeremy Ashkenas

Oct 13th, 2010

Architecture

http://documentcloud.github.com/backbone

https://github.com/documentcloud/backbone

@documentcloud

#documentcloud on IRC

https://groups.google.com/forum/#!forum/backbonejs



https://github.com/documentcloud/backbone/

https://github.com/documentcloud/backbone/



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

MVC

Model / Collection

Template (View)

View (Controller)

Router

Architecture

Architecture

MVC

Model / Collection

Template (View)

View (Controller)

Router

Model• Representing data (auto-generated).

• Handling persistence. • Throws events.

• Reusable.

Architecture

• Fetch

• Save (new) • Save

• Destroy

/url

/url /url/id

/url/id

HTTP GET

HTTP POSTHTTP PUT

HTTP DELETE

Model / Collection - View - Template - Router - Utilities

Model

Architecture

var Item = Backbone.Model.extend({ idAttribute: “Id”, urlRoot: “/Items” });


Architecture

var item = new Item(); item.set({ Name: “Igloo” }); // trigger change item.save(); // trigger sync


Architecture

• extend

• constructor / initialize

• get

• set

• escape

• has

• unset

• clear

• id

• idAttribute

• cid

• attributes

• defaults

• toJSON

• fetch

• save

• destroy

• validate

• isValid

• url

• urlRoot

• parse

• clone

• isNew

• change

• hasChanged


Model• changedAttributes

• previous

• previousAttributes

Collection• A list of models.

• Underscore methods.

Architecture

var Items = Backbone.Collection.extend({ model: Item, url: "/Items" });


Architecture

var items = new Items(); items.fetch(); // trigger reset


Architecture

items.comparator = function(item) { return item.get("Name"); };


Architecture

Collection

• extend

• model


• models

• toJSON

• add

• remove

• get

• getByCid

• at

• length

• comparator

• sort

• pluck

• url

• parse


• etch

• eset

• create

Architecture

Collection


• forEach (each)

• map

• reduce (foldl, inject)

• reduceRight (foldr)

• find (detect)

• filter (select)

• reject

• every (all)

• some (any)

• include

• invoke

• max

• min

• sortBy

• groupBy

• sortedIndex

• shuffle

• toArray

• size

• first

• initial

• rest

• last

• without

• indexOf

• lastIndexOf

• isEmpty

• chain

View• Manipulates the DOM.

• Delegates DOM events.• Has a Model / Collection.

Architecture

View


View (Model)

View (Collection)

Architecture

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({ model: item }); this.$el.append(itemView.el); itemView.render(); } });

var ItemView = Backbone.View.extend({ tagName: "li", render: function () { this.$el.text(this.model.get("Name")); return this; } });


Architecture

var items = new Items(); var listView = new ListView({ collection: items }); items.fetch();


Architecture

View• $ (jQuery or Zepto)

• render

• remove

• make

• delegateEvents

• undelegateEvents

• extend


• el

• $el

• setElement

• attributes


Template (Underscore.js)

Compiles JavaScript templates into functions that can be evaluated for rendering.

• Mustache • jQuery-tmpl

ArchitectureModel / Collection - View - Template - Router - Utilities

<script type="text/template" id="item-template"> <li> <%= Name %> </li> </script>

Architecture

var ItemView = Backbone.View.extend({ … template: _.template($("#item-template").html()), ... render: function () { this.$el.html(this.template(this.model.toJSON())); return this; } … });


• Maps urls to function.

• Enable history / bookmarking.

Router

ArchitectureModel / Collection - View - Template - Router - Utilities

var AppRouter = Backbone.Router.extend({ routes: { "": "init" }, init: function () { … } });

Architecture

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) { … } });


Router

Architecture

• extend

• routes


• route

• navigate


Utilities• History • Sync• Utility

Architecture

Router View

Model /Collection

Template

DataSource

Real World

Real World

• .NET RESTful Web Services / MS SQL • Backbone.js

Polar management• Smart invoicing web application

Technologies

Real World

Polar management

Real World

Real World

Polar management

window.AppRouter = Backbone.Router.extend({ routes: { … "/modifica/:id": "editInvoice“ }, editInvoice: function (id) { … } });

Polar management

Real World

window.AppRouter = Backbone.Router.extend({ routes: { … "/modifica/:id": "editInvoice“ }, editInvoice: function (id) { … } });

Real World

Koala

• .NET RESTful Web Services / RavenDB • Backbone.js • Highcharts.js

Technologies

• Social media analytics

Real World

Real World

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

Koala

Real World

Cammi

• .NET RESTful Web Services / MS SQL• Backbone.js

Technologies

• Custom newsletter engine

Real World

Cammi

Real World

Cammi

Load User

Load Groups

Load

Companies

Load

Load

Fetch

Fetch

Real World

Linkedin

Real World

WunderKit

Real World

Groupon

Real World

Basecamp

3

Tips & Tricks

Tips & Tricks

idAttribute: “id”

// CouchDB idAttribute: “_id”

// .NET idAttribute: “Id”

idAttribute

Tips & Tricks

Related Models

Tips & Tricks

var Invoice = Backbone.Model.extend({ idAttribute: “Id” }); var Invoices = Backbone.Collection.extend({ model: Invoice, url: "/Invoices" });

Related Models

Tips & Tricks

Related Models

Tips & Tricks

var InvoiceDetail = Backbone.Model.extend({ idAttribute: “Id” }); var InvoiceDetails = Backbone.Collection.extend({ model: InvoiceDetail, url: "/InvoiceDetails“ });

Related Models

Tips & Tricks

var Invoice = Backbone.Model.extend({ idAttribute: "Id", initialize: function () { this.setInvoiceDetails(); }, setInvoiceDetails: function () { this.set({ InvoiceDetails: new InvoiceDetails(this.get("InvoiceDetails")) }); } });

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

TDD - Jasmine

describe("Todo", function() {

it("Should have a title", function() {

var todo = new Todo();

expect(todo.get("title")).toBeDefined();

});

});

Extras

Backbone is anti-SEO

http://www.spiffyui.org#!css

http://www.spiffyui.org?_escaped_fragment_=css

http://coding.smashingmagazine.com/2011/09/27/searchable-dynamic-content-with-ajax-crawling/

http://www.spiffyui.org

http://www.spiffyui.org







Extras

• http://sproutcore.com (Apple/iCloud)

• http://knockoutjs.com

• http://emberjs.com

• http://batmanjs.org (Shopify)

http://sproutcore.com

http://sproutcore.com

http://knockoutjs.com

http://knockoutjs.com

http://emberjs.com

http://emberjs.com

http://batmanjs.org

http://batmanjs.org

Extras

• http://www.igloolab.com/downloads/backbone-cheatsheet.pdf

Cheat Sheet

http://www.igloolab.com/downloads/backbone-cheatsheet.pdf

http://www.igloolab.com/downloads/backbone-cheatsheet.pdf

Backbone.js

-

• Lightweight • Powerful • Code is clean (and maintainable)

+

• Too verbose (for small applications)

3Lago di Garda

Questions ?

Graziewww.igloolab.com

@iloveigloo

http://www.iloveigloo.com

http://www.iloveigloo.com

client-side mvc with backbone.js (reloaded)

Technology

var id

function data

function index

keyvalue binding

custom events

cool butwe

data layer

data uptodate