Introduction to Backbone.js

Backbone.jsMVC in the BrowserJonathan Weiss

Who am I? Jonathan Weiss §  Peritor GmbH in Berlin §  Webistrano / Capistrano §  Ruby: SimplyStored, Happening §  FreeBSD: Original Rubygems & Rails maintainer §  The great ﬁre of London http://www.peritor.com http://github.com/jweiss @jweiss 2

ScalariumAmazon EC2 Cluster Management §  Auto-Conﬁg §  Self-Healing §  Auto-Scaling §  One-click-deploymentwww.scalarium.com 3

Web App History 4

Web 1.0 GET Webserver PAGE 5

Web 1.0 GET PAGE Webserver GET PAGE 6

Ajax GET Webserver PAGE 7

Ajax GET PAGE Webserver GET PAGE Fragment 8

Ajax GET PAGE Logic GET Load PAGE Fragment Fragment 9

Ajax GET PAGE Models, Validation, Rendering, Mess for GET .... PAGE complex apps Fragment 10

Ajax Can get messy really fast §  Loading multiple HTML fragments when updating single entity §  Handle validation errors from the server §  Dependency between fragments, multiple views need to change on update §  TESTING! 11

Principles DRY

Backbone.jssupplies structure to JavaScript-heavy applications by providing §  Models §  Collections §  Views & Templating §  Router 18

Backbone.jshttp://documentcloud.github.com/backbone/ §  BSD license §  Depends on §  jQuery §  underscore.js §  template engine (build-in, mustache, handlebars, eco, …) §  Lightweight – no UI widgets or desktop GUI in the browser §  Backend agnostic by talking to RESTful JSON endpoints 19

MVCRouter

Model Business model Domain logic Reusable

Models in Backbone Data store Setters & setters Events & notiﬁcations Persistence in & out JSON (optional)

Collection List of models Events & notiﬁcations Adjust with URL / JSON List comprehensions: map, inject, select, …

View Presentation Speciﬁc to a use-case Different views for different perspectives on a model

Views in Backbone Display UI & data Templating Respond to user input Respond to model change

Controller Conducts and connects Inspects user requests and responds Delegate instead of work

Router in Backbone Map URLs to JS actions History state management Instantiation of initial setup

Workﬂow with Backbone.js fetch Model Server JSON 29

Workﬂow with Backbone.js View 1 View 2 notify fetch Model Server JSON 30

Workﬂow with Backbone.js render View 1 View 2 notify fetch Model Server JSON 31

Workﬂow with Backbone.js render View 1 View 2 update inject notify fetch Model Server JSON 32

Workﬂow with Backbone.js View 1 View 2 update, click, input,... Model

Workﬂow with Backbone.js View 1 View 2 update, click, input,... update Model

Workﬂow with Backbone.js View 1 View 2 update, click, input,... update notify Model

Workﬂow with Backbone.js View 1 View 2 update, click, input,... update notify update Model Server JSON 36

Workﬂow with Backbone.js render View 1 View 2 update inject notify Model 37

Show Me The Code 38

Model 39

CollectionAssumes RESTful JSON backed, e.g. /servers/4646 … 40

Custom Events 44

Custom Events 45

Data, Events & ViewsPattern §  User or server trigger data change, never update view directly §  Data update triggers change event §  Views subscribe to change events and re-render §  Router to connect URLs to actions and initialize views 47

Give Me More 48

ValidationsFailed validation will prevent set and saveTriggers error event 49

List Comprehensions 50

List ComprehensionsShort form for map on an attribute 51

Navigation & Back Button 52

http://documentcloud.github.com/backbone/http://peepcode.com/products/backbone-js http://peepcode.com/products/backbone-ii 56

Q&APeritor GmbHBlücherstr. 22, Hof III Aufgang 610961 BerlinTel.: +49 (0)30 69 20 09 84 0Fax: +49 (0)30 69 20 09 84 9Internet: www.peritor.comE-Mail: info@peritor.com© Peritor GmbH - Alle Rechte vorbehalten

Introduction to Backbone.js

by Jonathan Weiss

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 2

Statistics

Introduction to Backbone.js Presentation Transcript

http://us-w1.rockmelt.com	1
http://a0.twimg.com	1