Backbone JS - Journey to the Front End [Dev Nexus Conference]

BACKBONE JS { Journey to the Front End } Brian
Mann @backbonerails BackboneRails.com

MY EXPERIENCE WITH BACKBONE

Backbone JS: Journey to the Front End BACKBONERAILS.com • Web
Application Developer ‣ Backbone / Ruby on Rails • Scaling Our Project ‣ Totals about 600 JS files ‣ Close to 80 diﬀerent JS modules ‣ 120+ server models ‣ Entirely Single Page • Published Screencasts ‣ Chronicles development patterns A Little Perspective

BACKBONE IN A NUTSHELL

Backbone JS: Journey to the Front End BACKBONERAILS.com • Introduces
the building blocks of MVC frameworks • Manages the complexity of front end logic • Provides the structural components for organizing ‣ Presentation ‣ Behavior ‣ Implementation • Keeps view changes in sync • Eliminates unmanageable spaghetti code Key Points

Backbone JS: Journey to the Front End BACKBONERAILS.com • Powered
by RESTful JSON API • Low Profile ‣ Unopinionated ‣ Leaves implementation up to the developer • Small Set of Documentation • Huge Success Record ‣ Major players using it in production • Awesome Community Support Tenets of Backbone

SHOW DON’T TELL

Google Analytics Pandora WuFoo Rdio

Google Analytics 1. Loading feedback while fetching data from server

Google Analytics 2. Dialog Selection Events

WuFoo 1. Picked up and dragged “Single Line Text”

WuFoo 2. Passively saved to server, displayed single line text

WuFoo 3. Two Way Data Binding

WuFoo 4. Immediate Selection Feedback

Rdio 1. Changing sort order - hovered over “Song” drop
down

Rdio 2. Clicking “Artist” to sort songs by Artist

Rdio 3. Shows loading spinner while fetching new data

Rdio 4. New collection is shown, URL is updated

EVOLUTION OF THE WEB

Stateless Servers before 2005 http://www.serversrule.com/

Stateless Servers before 2005 http://www.serversrule.com/ <html> <head> <title>Best Page in
the Universe</title> </head> <body> <div id="header"> <ul> <li> <a href="link1">Link 1</a> </li> <li> <a href="link2">Link 2</a> </li> <li> <a href="link3">Link 3</a> </li> </ul> </div> <div id="main">Home Page Content</div> </body> </html>

Stateless Servers before 2005 http://www.serversrule.com/ My Awesome Site Link 1
| Link 2 | Link 3 Home Page

Stateless Servers before 2005 http://www.serversrule.com/ My Awesome Site Link 1
| Link 2 | Link 3 link1 Home Page

Stateless Servers http://www.serversrule.com/link1 before 2005

Stateless Servers http://www.serversrule.com/link1 before 2005 <html> <head> <title>Best Page in
the Universe</title> </head> <body> <div id="header"> <ul> <li class="active"> <a href="link1">Link 1</a> </li> <li> <a href="link2">Link 2</a> </li> <li> <a href="link3">Link 3</a> </li> </ul> </div> <div id="main">Link 1 - Content</div> </body> </html>

Stateless Servers http://www.serversrule.com/link1 Link 1 - Content My Awesome Site
Link 3 | Link 2 | Link 1 before 2005

before 2005 Stateless Servers http://www.serversrule.com/link1 Link 1 - Content Heavy
AJAX Use 2006 - 2009 My Awesome Site Link 3 | Link 2 | Link 1

AJAX Use 2006 - 2009 My Awesome Site Link 3 | Link 2 | Link 1 <html> <head> <title>Best Page in the Universe</title> </head> <body> <div id="header"> <ul> <a href="link1">Link 1</a> </li> <a href="link2">Link 2</a> </li> <li> <a href="link3">Link 3</a> </li> </ul> </div> <div id="main"> </div> </body> </html> <li class="active"> <li> Link 1 - Content

AJAX Use 2006 - 2009 My Awesome Site Link 3 | Link 2 | Link 1 <html> <head> <title>Best Page in the Universe</title> </head> <body> <div id="header"> <ul> <a href="link1">Link 1</a> </li> <a href="link2">Link 2</a> </li> <li> <a href="link3">Link 3</a> </li> </ul> </div> <div id="main"> </div> </body> </html> <li class="active"> <li>

AJAX Use 2006 - 2009 My Awesome Site Link 3 | Link 2 | Link 1 <html> <head> <title>Best Page in the Universe</title> </head> <body> <div id="header"> <ul> <a href="link1">Link 1</a> </li> <a href="link2">Link 2</a> </li> <li> <a href="link3">Link 3</a> </li> </ul> </div> <div id="main"> </div> </body> </html> <li class="active"> <li> Link 2 - Content

AJAX Use 2006 - 2009 My Awesome Site Link 3 | Link 2 | Link 1 <html> <head> <title>Best Page in the Universe</title> </head> <body> <div id="header"> <ul> <a href="link1">Link 1</a> </li> <a href="link2">Link 2</a> </li> <li> <a href="link3">Link 3</a> </li> </ul> </div> <div id="main"> </div> </body> </html> <li> Link 2 - Content

AJAX Use 2006 - 2009 My Awesome Site Link 3 | Link 2 | Link 1 <html> <head> <title>Best Page in the Universe</title> </head> <body> <div id="header"> <ul> <a href="link1">Link 1</a> </li> <a href="link2">Link 2</a> </li> <li> <a href="link3">Link 3</a> </li> </ul> </div> <div id="main"> </div> </body> </html> <li> <li> Link 2 - Content

AJAX Use 2006 - 2009 My Awesome Site Link 3 | Link 2 | Link 1 <html> <head> <title>Best Page in the Universe</title> </head> <body> <div id="header"> <ul> <a href="link1">Link 1</a> </li> <a href="link2">Link 2</a> </li> <li> <a href="link3">Link 3</a> </li> </ul> </div> <div id="main"> </div> </body> </html> <li> Link 2 - Content

AJAX Use 2006 - 2009 My Awesome Site Link 3 | Link 2 | Link 1 <html> <head> <title>Best Page in the Universe</title> </head> <body> <div id="header"> <ul> <a href="link1">Link 1</a> </li> <a href="link2">Link 2</a> </li> <li> <a href="link3">Link 3</a> </li> </ul> </div> <div id="main"> </div> </body> </html> <li> <li class="active"> Link 2 - Content

AJAX Use 2006 - 2009 My Awesome Site Link 3 | Link 2 | Link 1

Stateless Servers before 2005 http://www.serversrule.com/link1 My Awesome Site Link 1
Link 3 | Link 2 | Link 2 - Content Heavy AJAX Use 2006 - 2009

Link 3 | Link 2 | Link 2 - Content Heavy AJAX Use 2006 - 2009 Modern MVC 2010 - now

Link 3 | Link 2 | Link 2 - Content Heavy AJAX Use 2006 - 2009 Modern MVC 2010 - now <Links Collection> Models: [ {name: “Link1”, active: false}, {name: “Link2”, active: true}, {name: “Link3”, active: false} ]

Link 3 | Link 2 | Link 2 - Content Heavy AJAX Use 2006 - 2009 Modern MVC 2010 - now Object { ... type=”click” .. } <Links Collection> Models: [ {name: “Link1”, active: false}, {name: “Link2”, active: true}, {name: “Link3”, active: false} ]

Link 3 | Link 2 | Link 2 - Content Heavy AJAX Use 2006 - 2009 Modern MVC 2010 - now Object { ... type=”click” .. } <Links Collection> Models: [ {name: “Link1”, active: false}, {name: “Link2”, active: true}, {name: “Link3”, active: false} ] 1. Capture event, prevent default action 2. Call method on model to set {active: true} 3. Fires event which causes previously selected <li> to deselect itself - and current <li> to select itself <li class=”active”>...</li> 4. Let our managing controller know this click event has occurred 5. Controller decides what the next action should be

Backbone JS: Journey to the Front End BACKBONERAILS.com • Entities
‣ Models ‣ Collections Backbone Components

‣ Models ‣ Collections Backbone Components User firstName: lastName: Brian Mann fullName() save() Model

‣ Models ‣ Collections Backbone Components User firstName: lastName: Brian Mann fullName() save() Name When This Event Triggers change when any model attributes have changed change:[attribute] when a specific attribute has changed destroy when a model is destroyed sync when a model has successfully synced with the server error when a model’s save call fails on the server invalid when a models validations fails on the client Model Events

‣ Models ‣ Collections Backbone Components User User Collection User User User User

‣ Models ‣ Collections Backbone Components User User Collection Events User User User User Name When This Event Triggers add when a model is added to the collection remove when a model is removed from a collection reset when the collection’s entire contents have been replaced sort when the collection has been re-sorted request when a collection has started to request to the server sync when a collection has been successfully synced with the server

Backbone JS: Journey to the Front End BACKBONERAILS.com • Views
‣ usually paired with a model or collection ‣ given a template (a chunk of HTML) ‣ responsible for rendering + responding to model/collection events Backbone Components • Entities ‣ Models ‣ Collections

‣ usually paired with a model or collection ‣ given a template (a chunk of HTML) ‣ responsible for rendering + responding to model/collection events • Routers ‣ listen for and react to client side URLs Backbone Components • Entities ‣ Models ‣ Collections

‣ usually paired with a model or collection ‣ given a template (a chunk of HTML) ‣ responsible for rendering + responding to model/collection events • Routers ‣ listen for and react to client side URLs Backbone Components • Entities ‣ Models ‣ Collections Z http://www.app.com/#users

‣ usually paired with a model or collection ‣ given a template (a chunk of HTML) ‣ responsible for rendering + responding to model/collection events • Routers ‣ listen for and react to client side URLs • Events Backbone Components • Entities ‣ Models ‣ Collections

RELATIONSHIP BETWEEN VIEWS AND MODELS

http://www.app.com/#users/1/edit Edit Profile Name Age Stanley Kubrick 70 cancel Gender
male female Save Hi, Stanley Kubrick Email [email protected] Friends 1. Malcolm McDowell 2. Arthur C. Clarke 3. Peter Sellers x x x add new friend... +

male female Save Hi, Stanley Kubrick Email [email protected] Friends 1. Malcolm McDowell 2. Arthur C. Clarke 3. Peter Sellers x x x add new friend... + View

male female Save Hi, Stanley Kubrick Email [email protected] Friends 1. Malcolm McDowell 2. Arthur C. Clarke 3. Peter Sellers x x x add new friend... + View Model Template

{ "id": 1, "picture": "images/user_1.png", "age": 70, "name": "Stanley Kubrick",
"gender": "male", "company": "MGM", "phone": "832-547-3983", "email": "[email protected]", "address": "Hertfordshire England", "friends": [ { "id": 1, "name": "Malcolm McDowell" }, { "id": 2, "name": "Arthur C. Clarke" }, { "id": 3, "name": "Peter Sellers" } ] }

<div id=”user”>Hi, Stanley Kubrick</div> { "id": 1, "picture": "images/user_1.png", "age":
70, "name": "Stanley Kubrick", "gender": "male", "company": "MGM", "phone": "832-547-3983", "email": "[email protected]", "address": "Hertfordshire England", "friends": [ { "id": 1, "name": "Malcolm McDowell" }, { "id": 2, "name": "Arthur C. Clarke" }, { "id": 3, "name": "Peter Sellers" } ] }

<div id=”user”>Hi, Stanley Kubrick</div> <a href=”mailto:[email protected]”> Email Stanley </a> {
"id": 1, "picture": "images/user_1.png", "age": 70, "name": "Stanley Kubrick", "gender": "male", "company": "MGM", "phone": "832-547-3983", "email": "[email protected]", "address": "Hertfordshire England", "friends": [ { "id": 1, "name": "Malcolm McDowell" }, { "id": 2, "name": "Arthur C. Clarke" }, { "id": 3, "name": "Peter Sellers" } ] }

<div id=”user”>Hi, Stanley Kubrick</div> <a href=”mailto:[email protected]”> Email Stanley </a> <div
id=”friends”> <span id=”count”>You have 3 friends:</span> <ul> <li>Malcolm McDowell</li> <li>Arthur C. Clarke</li> <li>Peter Sellers</li> </ul> </div> { "id": 1, "picture": "images/user_1.png", "age": 70, "name": "Stanley Kubrick", "gender": "male", "company": "MGM", "phone": "832-547-3983", "email": "[email protected]", "address": "Hertfordshire England", "friends": [ { "id": 1, "name": "Malcolm McDowell" }, { "id": 2, "name": "Arthur C. Clarke" }, { "id": 3, "name": "Peter Sellers" } ] }

{ "id": 1, "picture": "images/user_1.png", "age": 70, "name": "gender": "male",
"company": "MGM", "phone": "832-547-3983", "email": "[email protected]", "address": "Hertfordshire England", "friends": [ { "id": 1, "name": "Malcolm McDowell" }, { "id": 2, "name": "Arthur C. Clarke" }, { "id": 3, "name": "Peter Sellers" } ] } "Stanley Kubrick", <a href=”mailto:[email protected]”> Email Stanley </a> <div id=”friends”> <span id=”count”>You have 3 friends:</span> <ul> <li>Malcolm McDowell</li> <li>Arthur C. Clarke</li> <li>Peter Sellers</li> </ul> </div> <div id=”user”>Hi, Stanley Kubrick</div>

"company": "MGM", "phone": "832-547-3983", "email": "[email protected]", "address": "Hertfordshire England", "friends": [ { "id": 1, "name": "Malcolm McDowell" }, { "id": 2, "name": "Arthur C. Clarke" }, { "id": 3, "name": "Peter Sellers" } ] } <a href=”mailto:[email protected]”> Email Stanley </a> <div id=”friends”> <span id=”count”>You have 3 friends:</span> <ul> <li>Malcolm McDowell</li> <li>Arthur C. Clarke</li> <li>Peter Sellers</li> </ul> </div> <div id=”user”>Hi, Stanley Kubrick</div>

"company": "MGM", "phone": "832-547-3983", "email": "[email protected]", "address": "Hertfordshire England", "friends": [ { "id": 1, "name": "Malcolm McDowell" }, { "id": 2, "name": "Arthur C. Clarke" }, { "id": 3, "name": "Peter Sellers" } ] } "Paul Thomas Anderson", <a href=”mailto:[email protected]”> Email Stanley </a> <div id=”friends”> <span id=”count”>You have 3 friends:</span> <ul> <li>Malcolm McDowell</li> <li>Arthur C. Clarke</li> <li>Peter Sellers</li> </ul> </div> <div id=”user”>Hi, Stanley Kubrick</div>

"company": "MGM", "phone": "832-547-3983", "email": "[email protected]", "address": "Hertfordshire England", "friends": [ { "id": 1, "name": "Malcolm McDowell" }, { "id": 2, "name": "Arthur C. Clarke" }, { "id": 3, "name": "Peter Sellers" } ] } "Paul Thomas Anderson", <a href=”mailto:[email protected]”> Email Stanley </a> <div id=”friends”> <span id=”count”>You have 3 friends:</span> <ul> <li>Malcolm McDowell</li> <li>Arthur C. Clarke</li> <li>Peter Sellers</li> </ul> </div>

"company": "MGM", "phone": "832-547-3983", "email": "[email protected]", "address": "Hertfordshire England", "friends": [ { "id": 1, "name": "Malcolm McDowell" }, { "id": 2, "name": "Arthur C. Clarke" }, { "id": 3, "name": "Peter Sellers" } ] } "Paul Thomas Anderson", <a href=”mailto:[email protected]”> Email Stanley </a> <div id=”friends”> <span id=”count”>You have 3 friends:</span> <ul> <li>Malcolm McDowell</li> <li>Arthur C. Clarke</li> <li>Peter Sellers</li> </ul> </div> <div id=”user”>Hi, Paul Thomas Anderson</div>

"gender": "male", "company": "MGM", "phone": "832-547-3983", "email": "address": "Hertfordshire England", "friends": [ { "id": 1, "name": "Malcolm McDowell" }, { "id": 2, "name": "Arthur C. Clarke" }, { "id": 3, "name": "Peter Sellers" } ] } <a href=”mailto:[email protected]”> Email Stanley </a> <div id=”friends”> <span id=”count”>You have 3 friends:</span> <ul> <li>Malcolm McDowell</li> <li>Arthur C. Clarke</li> <li>Peter Sellers</li> </ul> </div> <div id=”user”>Hi, Paul Thomas Anderson</div> "[email protected]",

"gender": "male", "company": "MGM", "phone": "832-547-3983", "email": "address": "Hertfordshire England", "friends": [ { "id": 1, "name": "Malcolm McDowell" }, { "id": 2, "name": "Arthur C. Clarke" }, { "id": 3, "name": "Peter Sellers" } ] } <a href=”mailto:[email protected]”> Email Stanley </a> <div id=”friends”> <span id=”count”>You have 3 friends:</span> <ul> <li>Malcolm McDowell</li> <li>Arthur C. Clarke</li> <li>Peter Sellers</li> </ul> </div> <div id=”user”>Hi, Paul Thomas Anderson</div>

"gender": "male", "company": "MGM", "phone": "832-547-3983", "email": "address": "Hertfordshire England", "friends": [ { "id": 1, "name": "Malcolm McDowell" }, { "id": 2, "name": "Arthur C. Clarke" }, { "id": 3, "name": "Peter Sellers" } ] } <a href=”mailto:[email protected]”> Email Stanley </a> <div id=”friends”> <span id=”count”>You have 3 friends:</span> <ul> <li>Malcolm McDowell</li> <li>Arthur C. Clarke</li> <li>Peter Sellers</li> </ul> </div> <div id=”user”>Hi, Paul Thomas Anderson</div> "[email protected]",

"gender": "male", "company": "MGM", "phone": "832-547-3983", "email": "address": "Hertfordshire England", "friends": [ { "id": 1, "name": "Malcolm McDowell" }, { "id": 2, "name": "Arthur C. Clarke" }, { "id": 3, "name": "Peter Sellers" } ] } <div id=”friends”> <span id=”count”>You have 3 friends:</span> <ul> <li>Malcolm McDowell</li> <li>Arthur C. Clarke</li> <li>Peter Sellers</li> </ul> </div> <div id=”user”>Hi, Paul Thomas Anderson</div> "[email protected]",

"gender": "male", "company": "MGM", "phone": "832-547-3983", "email": "address": "Hertfordshire England", "friends": [ { "id": 1, "name": "Malcolm McDowell" }, { "id": 2, "name": "Arthur C. Clarke" }, { "id": 3, "name": "Peter Sellers" } ] } <div id=”friends”> <span id=”count”>You have 3 friends:</span> <ul> <li>Malcolm McDowell</li> <li>Arthur C. Clarke</li> <li>Peter Sellers</li> </ul> </div> <div id=”user”>Hi, Paul Thomas Anderson</div> "[email protected]", <a href=”mailto:[email protected]”> Email Paul </a>

] } { "id": 1, "picture": "images/user_1.png", "age": 70, "name":
"Stanley Kubrick", "gender": "male", "company": "MGM", "phone": "832-547-3983", "email": "[email protected]", "address": "Hertfordshire England", "friends": [ { "id": , "name": } "Malcolm McDowell" , { "id": 2, "name": "Arthur C. Clarke" }, { "id": 3, "name": "Peter Sellers" } ] } 1 <div id=”friends”> <span id=”count”>You have 3 friends:</span> <ul> <li>Malcolm McDowell</li> <li>Arthur C. Clarke</li> <li>Peter Sellers</li> </ul> </div> <div id=”user”>Hi, Paul Thomas Anderson</div> <a href=”mailto:[email protected]”> Email Paul </a>

"Stanley Kubrick", "gender": "male", "company": "MGM", "phone": "832-547-3983", "email": "[email protected]", "address": "Hertfordshire England", "friends": [ { "id": , "name": } "Malcolm McDowell" ] } 1 <div id=”friends”> <span id=”count”>You have 3 friends:</span> <ul> <li>Malcolm McDowell</li> <li>Arthur C. Clarke</li> <li>Peter Sellers</li> </ul> </div> <div id=”user”>Hi, Paul Thomas Anderson</div> <a href=”mailto:[email protected]”> Email Paul </a>

"Stanley Kubrick", "gender": "male", "company": "MGM", "phone": "832-547-3983", "email": "[email protected]", "address": "Hertfordshire England", "friends": [ { "id": , "name": } ] } <div id=”friends”> <span id=”count”>You have 3 friends:</span> <ul> <li>Malcolm McDowell</li> <li>Arthur C. Clarke</li> <li>Peter Sellers</li> </ul> </div> <div id=”user”>Hi, Paul Thomas Anderson</div> <a href=”mailto:[email protected]”> Email Paul </a>

"Stanley Kubrick", "gender": "male", "company": "MGM", "phone": "832-547-3983", "email": "[email protected]", "address": "Hertfordshire England", "friends": [ { "id": , "name": } "Daniel Day Lewis" ] } 4 <div id=”friends”> <span id=”count”>You have 3 friends:</span> <ul> <li>Malcolm McDowell</li> <li>Arthur C. Clarke</li> <li>Peter Sellers</li> </ul> </div> <div id=”user”>Hi, Paul Thomas Anderson</div> <a href=”mailto:[email protected]”> Email Paul </a>

"Stanley Kubrick", "gender": "male", "company": "MGM", "phone": "832-547-3983", "email": "[email protected]", "address": "Hertfordshire England", "friends": [ { "id": , "name": } "Daniel Day Lewis" ] } 4 <div id=”user”>Hi, Paul Thomas Anderson</div> <a href=”mailto:[email protected]”> Email Paul </a>

"Stanley Kubrick", "gender": "male", "company": "MGM", "phone": "832-547-3983", "email": "[email protected]", "address": "Hertfordshire England", "friends": [ { "id": , "name": } "Daniel Day Lewis" ] } 4 <div id=”user”>Hi, Paul Thomas Anderson</div> <a href=”mailto:[email protected]”> Email Paul </a> <div id=”friends”> <span id=”count”>You have 1 friend:</span> <ul> <li>Daniel Day Lewis</li> </ul> </div>

BACKBONE IN ACTION

View Layout Container

View Layout Container Title View

View Layout Container Day Views Title View

View Layout Container Time Control View Day Views Title View

View Layout Container Chosen Time View Time Control View Day
Views Title View

[{ id: 1, name: "Doctors Appt", where: "Dentist", date: "02-02-2013",
time_start: "2:00pm", time_end: "3:00pm" },{ id: 2, name: "Ruby Meetup", where: "Centergy Bld", date: "02-13-2013", time_start: "7:00pm", time_end: "9:00pm" },{ id: 3, name: where: date: "02-14-2013", time_start: time_end: },{ id: 4, name: "Visit Vet", where: "Avian Center", date: "02-24-2013", time_start: "10:00am", time_end: "11:00am" }] "Buy Flowers!", null, null, null Event

[{ id: 1, name: "Doctors Appt", where: "Dentist", date: "02-02-2013",
time_start: "2:00pm", time_end: "3:00pm" },{ id: 2, name: "Ruby Meetup", where: "Centergy Bld", date: "02-13-2013", time_start: "7:00pm", time_end: "9:00pm" },{ id: 3, name: "Chocolate", where: "Walmart", date: "02-14-2013", time_start: "5:00pm", time_end: "6:00pm" },{ id: 4, name: "Visit Vet", where: "Avian Center", date: "02-24-2013", time_start: "10:00am", time_end: "11:00am" }] Event

CHANGES TO THE SERVER

Server Client M V C M C V

Server Client M V JSON JSON C M C V

Server Client M V JSON JSON C M C V
<div id="header-region"></div> <div id="main-region"></div> <div id="footer-region"></div> <%= javascript_tag do %> $(function() { App.start(); }); <% end %>

TOOLS YOU’LL NEED

Backbone JS: Journey to the Front End BACKBONERAILS.com • JSON
Generation • Bootstrapping Data • Dependency Management ‣ Folder / File Conventions ‣ Ensuring JS files load in the correct order • Environment Optimizations ‣ Concatenation ‣ Minification / Obfuscation • Precompiled JST Strategy The Backbone of Backbone

JSON GENERATION

https://github.com/nesquena/rabl ## models/user.rb class User < ActiveRecord::Base has_many :posts attr_accessible
:first_name, :last_name def full_name "#{first_name} #{last_name}" end end Rabl

:first_name, :last_name def full_name "#{first_name} #{last_name}" end end Rabl ## views/users/index.json.rabl collection @users attributes :id, :first_name, :last_name, :full_name, :date_created node do |user| { :date_created_formatted => user.date_created.to_s(:db), :date_created_ago => time_ago_in_words(user.date_created) } end child :posts do attributes :id, :title, :body end

:first_name, :last_name def full_name "#{first_name} #{last_name}" end end Rabl ## views/users/index.json.rabl collection @users attributes :id, :first_name, :last_name, :full_name, :date_created node do |user| { :date_created_formatted => user.date_created.to_s(:db), :date_created_ago => time_ago_in_words(user.date_created) } end child :posts do attributes :id, :title, :body end [{ id: 1, first_name: "Brian", last_name: "Mann", full_name: "Brian Mann", date_created: "2013-02-02T18:35:35.511", date_created_formatted: "2013-02-02 1:35:35", date_created_ago: "about 2 weeks", posts: [{ id: 100, title: "BackboneRails Released!", body: "go download them.", }] },{ id: 2, first_name: "Jennifer", last_name: "Shehane", full_name: "Jennifer Shehane", date_created: "2013-02-10T22:13:46.245", date_created_formatted: "2013-02-10 5:13:46", date_created_ago: "3 days", posts: [{ id: 101, title: "You misspelled ‘tenants’ in Ep02", body: "should be ‘tenets’", },{ id: 102, title: "Uhhh.....", body: "It is misspelled on every single slide :D", }] }]

BOOTSTRAPPING DATA

Making Data Available on Load <head> ... <script> window.gon =
{}; gon.current_user = { "first_name":"Brian", "last_name":"Mann", "account_id":1, "user_id":1013, "is_admin":true }; </script> ... </head>

WORKING WITH JAVASCRIPT FILES

1. Dependency Management //= require jquery //= require lib/underscore //=
require lib/backbone //= require lib/marionette //= require_tree ./backbone/config //= require backbone/app //= require_tree ./backbone/entities //= require_tree ./backbone/mixins //= require_tree ./backbone/views //= require_tree ./backbone/components //= require_tree ./backbone/apps

2. Concatenation Development <script src="/assets/jquery.js?body=1" type="text/javascript"></script> <script src="/assets/lib/underscore.js?body=1" type="text/javascript"></script> <script
src="/assets/lib/backbone.js?body=1" type="text/javascript"></script> <script src="/assets/lib/marionette.js?body=1" type="text/javascript"></script> <script src="/assets/backbone/config/marionette/renderer.js?body=1" type="text/javascript"></script> <script src="/assets/backbone/app.js?body=1" type="text/javascript"></script> <script src="/assets/backbone/entities/_base/collections.js?body=1" type="text/javascript"></script> <script src="/assets/backbone/entities/_base/models.js?body=1" type="text/javascript"></script> <script src="/assets/backbone/entities/header.js?body=1" type="text/javascript"></script> <script src="/assets/backbone/apps/footer/footer_app.js?body=1" type="text/javascript"></script> <script src="/assets/backbone/apps/footer/show/show_controller.js?body=1" type="text/javascript"></script> <script src="/assets/backbone/apps/footer/show/show_view.js?body=1" type="text/javascript"></script> <script src="/assets/backbone/apps/header/header_app.js?body=1" type="text/javascript"></script> <script src="/assets/backbone/apps/header/list/list_controller.js?body=1" type="text/javascript"></script> <script src="/assets/backbone/apps/header/list/list_view.js?body=1" type="text/javascript"></script> <script src="/assets/backbone/apps/header/list/templates/_header.js?body=1" type="text/javascript"></script> <script src="/assets/backbone/apps/header/list/templates/headers.js?body=1" type="text/javascript"></script> <script src="/assets/application.js?body=1" type="text/javascript"></script>

2. Concatenation <script src="/assets/application-8c8a70f80dfbcf26505f7e9ee9a0267d.js" type="text/javascript"></script> Production

3. Minification / Obfuscation (function(e,t){function P(e){var t=e.length,n=b.type(e);return b.isWindow(e)?!1:e.nodeType===1&&t?!0:n==="array"||n!=="function"&&(t===0||typeof t=="number"&&t>0&&t-1 in
e)}function B(e){var t=H[e]={};return b.each(e.match(E)||[],function(e,n){t[n]=!0}),t}function I(e,n,r,i){if(!b.acceptData(e))return;var s,o,u=b.expando,a=typeof n=="string",f=e.nodeType,c=f?b.cache:e,h=f?e[u]:e[u]&&u;if((!h||!c[h]||!i&&!c[h].data)&&a&&r===t)return;h||(f?e[u]=h=l.pop()||b.guid+ +:h=u),c[h]||(c[h]={},f||(c[h].toJSON=b.noop));if(typeof n=="object"||typeof n=="function")i?c[h]=b.extend(c[h],n):c[h].data=b.extend(c[h].data,n);return s=c[h],i|| (s.data||(s.data={}),s=s.data),r!==t&&(s[b.camelCase(n)]=r),a?(o=s[n],o==null&&(o=s[b.camelCase(n)])):o=s,o}function q(e,t,n){if(!b.acceptData(e))return;var r,i,s,o=e.nodeType,u=o?b.cache:e,a=o?e[b.expando]:b.expando;if(!u[a])return;if(t){s=n?u[a]:u[a].data;if(s){b.isArray(t)?t=t.concat(b.map(t,b.camelCase)):t in s?t=[t]: (t=b.camelCase(t),t in s?t=[t]:t=t.split(" "));for(r=0,i=t.length;r<i;r++)delete s[t[r]];if(!(n?U:b.isEmptyObject)(s))return}}if(!n){delete u[a].data;if(!U(u[a]))return}o? b.cleanData([e],!0):b.support.deleteExpando||u!=u.window?delete u[a]:u[a]=null}function R(e,n,r){if(r===t&&e.nodeType===1){var i="data-"+n.replace(F,"- $1").toLowerCase();r=e.getAttribute(i);if(typeof r=="string"){try{r=r==="true"?!0:r==="false"?!1:r==="null"?null:+r+""===r?+r:j.test(r)?b.parseJSON(r):r}catch(s){} b.data(e,n,r)}else r=t}return r}function U(e){var t;for(t in e){if(t==="data"&&b.isEmptyObject(e[t]))continue;if(t!=="toJSON")return!1}return!0}function it(){return!0} function st(){return!1}function ct(e,t){do e=e[t];while(e&&e.nodeType!==1);return e}function ht(e,t,n){t=t||0;if(b.isFunction(t))return b.grep(e,function(e,r){var i=!! t.call(e,r,e);return i===n});if(t.nodeType)return b.grep(e,function(e){return e===t===n});if(typeof t=="string"){var r=b.grep(e,function(e){return e.nodeType===1});if(at.test(t))return b.filter(t,r,!n);t=b.filter(t,r)}return b.grep(e,function(e){return b.inArray(e,t)>=0===n})}function pt(e){var t=dt.split("|"),n=e.createDocumentFragment();if(n.createElement)while(t.length)n.createElement(t.pop());return n}function Mt(e,t){return e.getElementsByTagName(t)[0]||e.appendChild(e.ownerDocument.createElement(t))}function _t(e){var t=e.getAttributeNode("type");return e.type=(t&&t.specified) +"/"+e.type,e}function Dt(e){var t=Ct.exec(e.type);return t?e.type=t[1]:e.removeAttribute("type"),e}function Pt(e,t){var n,r=0;for(;(n=e[r])!=null;r+ +)b._data(n,"globalEval",!t||b._data(t[r],"globalEval"))}function Ht(e,t){if(t.nodeType!==1||!b.hasData(e))return;var n,r,i,s=b._data(e),o=b._data(t,s),u=s.events;if(u) {delete o.handle,o.events={};for(n in u)for(r=0,i=u[n].length;r<i;r++)b.event.add(t,n,u[n][r])}o.data&&(o.data=b.extend({},o.data))}function Bt(e,t){var n,r,i;if(t.nodeType!==1)return;n=t.nodeName.toLowerCase();if(!b.support.noCloneEvent&&t[b.expando]){i=b._data(t);for(r in i.events)b.removeEvent(t,r,i.handle);t.removeAttribute(b.expando)}if(n==="script"&&t.text!==e.text)_t(t).text=e.text,Dt(t);else if(n==="object")t.parentNode&&(t.outerHTML=e.outerHTML),b.support.html5Clone&&e.innerHTML&&!b.trim(t.innerHTML)&&(t.innerHTML=e.innerHTML);else if(n==="input"&&xt.test(e.type))t.defaultChecked=t.checked=e.checked,t.value!==e.value&&(t.value=e.value);else if(n==="option")t.defaultSelected=t.selected=e.defaultSelected;else if(n==="input"||n==="textarea")t.defaultValue=e.defaultValue}function jt(e,n){var r,s,o=0,u=typeof e.getElementsByTagName!==i?e.getElementsByTagName(n||"*"):typeof e.querySelectorAll!==i?e.querySelectorAll(n||"*"):t;if(!u)for(u=[],r=e.childNodes||e;(s=r[o])! =null;o++)!n||b.nodeName(s,n)?u.push(s):b.merge(u,jt(s,n));return n===t||n&&b.nodeName(e,n)?b.merge([e],u):u}function Ft(e) {xt.test(e.type)&&(e.defaultChecked=e.checked)}function tn(e,t){if(t in e)return t;var n=t.charAt(0).toUpperCase()+t.slice(1),r=t,i=en.length;while(i--){t=en[i]+n;if(t in e)return t}return r}function nn(e,t){return e=t||e,b.css(e,"display")==="none"||!b.contains(e.ownerDocument,e)}function rn(e,t){var n,r,i,s=[],o=0,u=e.length;for(;o<u;o++){r=e[o];if(!r.style)continue;s[o]=b._data(r,"olddisplay"),n=r.style.display,t?(!

4. CoﬀeeScript

4. CoﬀeeScript @App.module "UsersApp.List", (List, App, Backbone, Marionette, $, _)
-> List.Controller = listUsers: -> users = App.request "user:entities" @layout = @getLayoutView() @layout.on "show", => @showPanel users @listUsers users App.mainRegion.show @layout listUsers: (users) -> usersView = @getUsersView users usersView.on "itemview:edit:user", (iv, user) -> App.vent.trigger "edit:user", user @layout.tableRegion.show usersView getUsersView: (users) -> new List.Users collection: users getLayoutView: -> new List.Layout

JAVASCRIPT TEMPLATING STRATEGY

Backbone JS: Journey to the Front End BACKBONERAILS.com Handling the
HTML • Templates hold the actual HTML markup • Used just like server side templates ‣ Usually stored as a separate file ‣ Interpolate model/collection properties • Various template languages: ‣ ECO (Embedded Coﬀeescript) ‣ Handlebars / Mustache ‣ Underscore • Server is responsible for precompiling them

## users/templates/show.jst.eco <%- @linkTo Routes.user_path(@id), Class: "button button-mini", -> %>
<i class='icons-user'></i> Show User <% end %>

<i class='icons-user'></i> Show User <% end %> ## users/show.html.erb <%= link_to user_path(@user), class: "button button-mini" do %> <i class='icons-user'></i> Show User <% end %>

<i class='icons-user'></i> Show User <% end %> ## users/show.html.erb <%= link_to user_path(@user), class: "button button-mini" do %> <i class='icons-user'></i> Show User <% end %>

EVERYTHING ELSE STAYS THE SAME

APPLICATION ARCHITECTURE

APPLICATION

APPLICATION APPLICATION MODULE 1 MODULE 3 MODULE 2

APPLICATION USERS APPOINTMENTS LEADS

CONTROLLERS APPLICATION USERS APPOINTMENTS LEADS

APPLICATION USERS LIST SHOW NEW APPOINTMENTS LIST SHOW NEW LEADS
LIST SHOW NEW

VIEWS / ENTITIES APPLICATION USERS LIST SHOW NEW APPOINTMENTS LIST
SHOW NEW LEADS LIST SHOW NEW

LIST SHOW NEW V E V E V E V E V E V E V E V E V E

LIST SHOW NEW V E V E V E V E V E V E V E V E V E TEMPLATES

LIST SHOW NEW V E V E V E V E V E V E V E V E V E T T T T T T T T T

APPLICATION USERS LIST V E T SHOW V E T
NEW V E T APPOINTMENTS LIST V E T SHOW V E T NEW V E T LEADS LIST V E T SHOW V E T NEW V E T

Screencasts available for streaming and downloading Brian Mann @backbonerails BackboneRails.com

Backbone JS - Journey to the Front End [Dev Nex...

Backbone JS - Journey to the Front End [Dev Nexus Conference]

More Decks by Brian Mann

Other Decks in Programming

Featured

Transcript