Introduction to Backbone.js

Backbone.js

Jonathan Weiss

MVC in the Browser

Who am I?

Jonathan Weiss §  Peritor GmbH in Berlin

§  Webistrano / Capistrano

§  Ruby: SimplyStored, Happening

§  FreeBSD: Original Rubygems & Rails maintainer

§  The great fire of London

2

http://www.peritor.com http://github.com/jweiss @jweiss

Scalarium

Amazon EC2 Cluster Management §  Auto-Config

§  Self-Healing

§  Auto-Scaling

§  One-click-deployment

www.scalarium.com

3

4

Web App History

Web 1.0

5

Webserver

GET

PAGE

Web 1.0

6

Webserver

GET

GET

PAGE

PAGE

Ajax

7

Webserver

GET

PAGE

Ajax

8

Webserver

GET

GET

PAGE

Fragment

PAGE

Ajax

9

Logic

GET

GET

PAGE

Fragment

PAGE Load Fragment

Ajax

10

Models, Validation, Rendering,

....

GET

GET

PAGE

Fragment

PAGE Mess for complex

apps

Ajax

11

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!

12

13

14

15

Principles D R Y

17

Backbone.js

18

supplies structure to JavaScript-heavy applications by providing

§  Models

§  Collections

§  Views & Templating

§  Router

Backbone.js

19

http://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

MVC

MVC

Router

Model

Business model

Domain logic

Reusable

Models in Backbone

Data store

Setters & setters

Events & notifications

Persistence in & out JSON (optional)

Collection

List of models

Events & notifications

Adjust with URL / JSON

List comprehensions: map, inject, select, …

View

Presentation

Specific 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

Workflow with Backbone.js

29

Server Model

JSON

fetch

Workflow with Backbone.js

30

Server Model

JSON

fetch

View 2 View 1

notify

Workflow with Backbone.js

31

Server Model

JSON

fetch

View 2 View 1

notify

render

Workflow with Backbone.js

32

Server Model

JSON

fetch

View 2 View 1

notify

render

update

inject

Workflow with Backbone.js

Model

View 2 View 1 update, click, input,...

Workflow with Backbone.js

Model

View 2 View 1

update

update, click, input,...

Workflow with Backbone.js

Model

View 2 View 1

update

update, click, input,...

notify

Workflow with Backbone.js

36

Server Model JSON

update

View 2 View 1

update

update, click, input,...

notify

Workflow with Backbone.js

37

Model

View 2 View 1

notify

render

update

inject

38

Show Me The Code

Model

39

Collection

40

Assumes RESTful JSON backed, e.g. /servers/4646 …

View

41

View

42

View

43

Custom Events

44

Custom Events

45

46

Data, Events & Views

47

Pattern

§  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

48

Give Me More

Validations

49

Failed validation will prevent set and save

Triggers error event

List Comprehensions

50

List Comprehensions

51

Short form for map on an attribute

Navigation & Back Button

52

53

54

55

56

http://documentcloud.github.com/backbone/

http://peepcode.com/products/backbone-js http://peepcode.com/products/backbone-ii

© Peritor GmbH - Alle Rechte vorbehalten

Peritor GmbH Blücherstr. 22, Hof III Aufgang 6 10961 Berlin

Tel.: +49 (0)30 69 20 09 84 0 Fax: +49 (0)30 69 20 09 84 9

Internet: www.peritor.com E-Mail: [email protected]

Q&A