Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

MY EXPERIENCE WITH BACKBONE

Slide 3

Slide 3 text

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 different JS modules ‣ 120+ server models ‣ Entirely Single Page • Published Screencasts ‣ Chronicles development patterns A Little Perspective

Slide 4

Slide 4 text

BACKBONE IN A NUTSHELL

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

SHOW DON’T TELL

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Google Analytics Pandora WuFoo Rdio

Slide 10

Slide 10 text

Google Analytics 1. Loading feedback while fetching data from server

Slide 11

Slide 11 text

Google Analytics 1. Loading feedback while fetching data from server

Slide 12

Slide 12 text

Google Analytics 2. Dialog Selection Events

Slide 13

Slide 13 text

Google Analytics 2. Dialog Selection Events

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

WuFoo 3. Two Way Data Binding

Slide 19

Slide 19 text

WuFoo 3. Two Way Data Binding

Slide 20

Slide 20 text

WuFoo 4. Immediate Selection Feedback

Slide 21

Slide 21 text

WuFoo 4. Immediate Selection Feedback

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Rdio 3. Shows loading spinner while fetching new data

Slide 27

Slide 27 text

Rdio 3. Shows loading spinner while fetching new data

Slide 28

Slide 28 text

Rdio 4. New collection is shown, URL is updated

Slide 29

Slide 29 text

Rdio 4. New collection is shown, URL is updated

Slide 30

Slide 30 text

EVOLUTION OF THE WEB

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Stateless Servers before 2005 http://www.serversrule.com/ Best Page in the Universe
  • Link 1
  • Link 2
  • Link 3
Home Page Content

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Stateless Servers http://www.serversrule.com/link1 before 2005 Best Page in the Universe
  • Link 1
  • Link 2
  • Link 3
Link 1 - Content

Slide 38

Slide 38 text

Stateless Servers http://www.serversrule.com/link1 before 2005 Best Page in the Universe
  • Link 1
  • Link 2
  • Link 3
Link 1 - Content

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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 Best Page in the Universe
    Link 1 Link 2
  • Link 3
  • Link 1 - Content

    • Slide 44

    Slide 44 text

    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 Best Page in the Universe
      Link 1 Link 2
    • Link 3
  • Link 1 - Content

    • Slide 45

    Slide 45 text

    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 Best Page in the Universe
      Link 1 Link 2
    • Link 3

    • Slide 46

    Slide 46 text

    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 Best Page in the Universe
      Link 1 Link 2
    • Link 3
  • Link 2 - Content

    • Slide 47

    Slide 47 text

    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 Best Page in the Universe
      Link 1 Link 2
    • Link 3
  • Link 2 - Content

    • Slide 48

    Slide 48 text

    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 Best Page in the Universe
      Link 1 Link 2
    • Link 3
  • Link 2 - Content

    • Slide 49

    Slide 49 text

    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 Best Page in the Universe
      Link 1 Link 2
    • Link 3
  • Link 2 - Content

    • Slide 50

    Slide 50 text

    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 Best Page in the Universe
      Link 1 Link 2
    • Link 3
  • Link 2 - Content

    • Slide 51

    Slide 51 text

    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 Best Page in the Universe
      Link 1 Link 2
    • Link 3
  • Link 2 - Content

    • Slide 52

    Slide 52 text

    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 Best Page in the Universe
      Link 1 Link 2
    • Link 3
  • Link 2 - Content

    • Slide 53

    Slide 53 text

    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

    Slide 54

    Slide 54 text

    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

    Slide 55

    Slide 55 text

    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

    Slide 56

    Slide 56 text

    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 Modern MVC 2010 - now

    Slide 57

    Slide 57 text

    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 Modern MVC 2010 - now Models: [ {name: “Link1”, active: false}, {name: “Link2”, active: true}, {name: “Link3”, active: false} ]

    Slide 58

    Slide 58 text

    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 Modern MVC 2010 - now Object { ... type=”click” .. } Models: [ {name: “Link1”, active: false}, {name: “Link2”, active: true}, {name: “Link3”, active: false} ]

    Slide 59

    Slide 59 text

    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 Modern MVC 2010 - now Object { ... type=”click” .. } 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
  • to deselect itself - and current
  • to select itself
  • ...
    • 4. Let our managing controller know this click event has occurred 5. Controller decides what the next action should be

    Slide 60

    Slide 60 text

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

    Slide 61

    Slide 61 text

    Backbone JS: Journey to the Front End BACKBONERAILS.com • Entities ‣ Models ‣ Collections Backbone Components User firstName: lastName: Brian Mann fullName() save() Model

    Slide 62

    Slide 62 text

    Backbone JS: Journey to the Front End BACKBONERAILS.com • Entities ‣ Models ‣ Collections Backbone Components User firstName: lastName: Brian Mann fullName() save() Model

    Slide 63

    Slide 63 text

    Backbone JS: Journey to the Front End BACKBONERAILS.com • Entities ‣ Models ‣ Collections Backbone Components User firstName: lastName: Brian Mann fullName() save() Model

    Slide 64

    Slide 64 text

    Backbone JS: Journey to the Front End BACKBONERAILS.com • Entities ‣ 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

    Slide 65

    Slide 65 text

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

    Slide 66

    Slide 66 text

    Backbone JS: Journey to the Front End BACKBONERAILS.com • Entities ‣ 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

    Slide 67

    Slide 67 text

    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

    Slide 68

    Slide 68 text

    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 • Routers ‣ listen for and react to client side URLs Backbone Components • Entities ‣ Models ‣ Collections

    Slide 69

    Slide 69 text

    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 • Routers ‣ listen for and react to client side URLs Backbone Components • Entities ‣ Models ‣ Collections Z http://www.app.com/#users

    Slide 70

    Slide 70 text

    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 • Routers ‣ listen for and react to client side URLs • Events Backbone Components • Entities ‣ Models ‣ Collections

    Slide 71

    Slide 71 text

    RELATIONSHIP BETWEEN VIEWS AND MODELS

    Slide 72

    Slide 72 text

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

    Slide 73

    Slide 73 text

    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... + View

    Slide 74

    Slide 74 text

    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... + View Model Template

    Slide 75

    Slide 75 text

    { "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" } ] }

    Slide 76

    Slide 76 text

    Hi, Stanley Kubrick
    { "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" } ] }

    Slide 77

    Slide 77 text

    Hi, Stanley Kubrick
    Email Stanley { "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" } ] }

    Slide 78

    Slide 78 text

    Hi, Stanley Kubrick
    Email Stanley
    You have 3 friends:
    • Malcolm McDowell
    • Arthur C. Clarke
    • Peter Sellers
    { "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" } ] }

    Slide 79

    Slide 79 text

    { "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", Email Stanley
    You have 3 friends:
    • Malcolm McDowell
    • Arthur C. Clarke
    • Peter Sellers
    Hi, Stanley Kubrick

    Slide 80

    Slide 80 text

    { "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" } ] } Email Stanley
    You have 3 friends:
    • Malcolm McDowell
    • Arthur C. Clarke
    • Peter Sellers
    Hi, Stanley Kubrick

    Slide 81

    Slide 81 text

    { "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" } ] } "Paul Thomas Anderson", Email Stanley
    You have 3 friends:
    • Malcolm McDowell
    • Arthur C. Clarke
    • Peter Sellers
    Hi, Stanley Kubrick

    Slide 82

    Slide 82 text

    { "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" } ] } "Paul Thomas Anderson", Email Stanley
    You have 3 friends:
    • Malcolm McDowell
    • Arthur C. Clarke
    • Peter Sellers
    Hi, Stanley Kubrick

    Slide 83

    Slide 83 text

    { "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" } ] } "Paul Thomas Anderson", Email Stanley
    You have 3 friends:
    • Malcolm McDowell
    • Arthur C. Clarke
    • Peter Sellers

    Slide 84

    Slide 84 text

    { "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" } ] } "Paul Thomas Anderson", Email Stanley
    You have 3 friends:
    • Malcolm McDowell
    • Arthur C. Clarke
    • Peter Sellers
    Hi, Paul Thomas Anderson

    Slide 85

    Slide 85 text

    { "id": 1, "picture": "images/user_1.png", "age": 70, "name": "Stanley Kubrick", "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" } ] } Email Stanley
    You have 3 friends:
    • Malcolm McDowell
    • Arthur C. Clarke
    • Peter Sellers
    Hi, Paul Thomas Anderson
    "[email protected]",

    Slide 86

    Slide 86 text

    { "id": 1, "picture": "images/user_1.png", "age": 70, "name": "Stanley Kubrick", "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" } ] } Email Stanley
    You have 3 friends:
    • Malcolm McDowell
    • Arthur C. Clarke
    • Peter Sellers
    Hi, Paul Thomas Anderson
    "[email protected]",

    Slide 87

    Slide 87 text

    { "id": 1, "picture": "images/user_1.png", "age": 70, "name": "Stanley Kubrick", "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" } ] } Email Stanley
    You have 3 friends:
    • Malcolm McDowell
    • Arthur C. Clarke
    • Peter Sellers
    Hi, Paul Thomas Anderson

    Slide 88

    Slide 88 text

    { "id": 1, "picture": "images/user_1.png", "age": 70, "name": "Stanley Kubrick", "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" } ] } Email Stanley
    You have 3 friends:
    • Malcolm McDowell
    • Arthur C. Clarke
    • Peter Sellers
    Hi, Paul Thomas Anderson
    "[email protected]",

    Slide 89

    Slide 89 text

    { "id": 1, "picture": "images/user_1.png", "age": 70, "name": "Stanley Kubrick", "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" } ] } Email Stanley
    You have 3 friends:
    • Malcolm McDowell
    • Arthur C. Clarke
    • Peter Sellers
    Hi, Paul Thomas Anderson
    "[email protected]",

    Slide 90

    Slide 90 text

    { "id": 1, "picture": "images/user_1.png", "age": 70, "name": "Stanley Kubrick", "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" } ] }
    You have 3 friends:
    • Malcolm McDowell
    • Arthur C. Clarke
    • Peter Sellers
    Hi, Paul Thomas Anderson
    "[email protected]",

    Slide 91

    Slide 91 text

    { "id": 1, "picture": "images/user_1.png", "age": 70, "name": "Stanley Kubrick", "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" } ] }
    You have 3 friends:
    • Malcolm McDowell
    • Arthur C. Clarke
    • Peter Sellers
    Hi, Paul Thomas Anderson
    "[email protected]", Email Paul

    Slide 92

    Slide 92 text

    ] } { "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
    You have 3 friends:
    • Malcolm McDowell
    • Arthur C. Clarke
    • Peter Sellers
    Hi, Paul Thomas Anderson
    Email Paul

    Slide 93

    Slide 93 text

    ] } { "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
    You have 3 friends:
    • Malcolm McDowell
    • Arthur C. Clarke
    • Peter Sellers
    Hi, Paul Thomas Anderson
    Email Paul

    Slide 94

    Slide 94 text

    ] } { "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" ] } 1
    You have 3 friends:
    • Malcolm McDowell
    • Arthur C. Clarke
    • Peter Sellers
    Hi, Paul Thomas Anderson
    Email Paul

    Slide 95

    Slide 95 text

    ] } { "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": } ] }
    You have 3 friends:
    • Malcolm McDowell
    • Arthur C. Clarke
    • Peter Sellers
    Hi, Paul Thomas Anderson
    Email Paul

    Slide 96

    Slide 96 text

    ] } { "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": } "Daniel Day Lewis" ] } 4
    You have 3 friends:
    • Malcolm McDowell
    • Arthur C. Clarke
    • Peter Sellers
    Hi, Paul Thomas Anderson
    Email Paul

    Slide 97

    Slide 97 text

    ] } { "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": } "Daniel Day Lewis" ] } 4
    You have 3 friends:
    • Malcolm McDowell
    • Arthur C. Clarke
    • Peter Sellers
    Hi, Paul Thomas Anderson
    Email Paul

    Slide 98

    Slide 98 text

    ] } { "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": } "Daniel Day Lewis" ] } 4
    Hi, Paul Thomas Anderson
    Email Paul

    Slide 99

    Slide 99 text

    ] } { "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": } "Daniel Day Lewis" ] } 4
    Hi, Paul Thomas Anderson
    Email Paul
    You have 1 friend:
    • Daniel Day Lewis

    Slide 100

    Slide 100 text

    ] } { "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": } "Daniel Day Lewis" ] } 4
    Hi, Paul Thomas Anderson
    Email Paul
    You have 1 friend:
    • Daniel Day Lewis

    Slide 101

    Slide 101 text

    BACKBONE IN ACTION

    Slide 102

    Slide 102 text

    View Layout Container

    Slide 103

    Slide 103 text

    View Layout Container Title View

    Slide 104

    Slide 104 text

    View Layout Container Day Views Title View

    Slide 105

    Slide 105 text

    View Layout Container Time Control View Day Views Title View

    Slide 106

    Slide 106 text

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

    Slide 107

    Slide 107 text

    Event

    Slide 108

    Slide 108 text

    Event

    Slide 109

    Slide 109 text

    Event

    Slide 110

    Slide 110 text

    Event

    Slide 111

    Slide 111 text

    Event

    Slide 112

    Slide 112 text

    Event

    Slide 113

    Slide 113 text

    Event

    Slide 114

    Slide 114 text

    Event

    Slide 115

    Slide 115 text

    Event

    Slide 116

    Slide 116 text

    Event

    Slide 117

    Slide 117 text

    Event

    Slide 118

    Slide 118 text

    Event

    Slide 119

    Slide 119 text

    Event

    Slide 120

    Slide 120 text

    Event

    Slide 121

    Slide 121 text

    Event

    Slide 122

    Slide 122 text

    Event

    Slide 123

    Slide 123 text

    Event

    Slide 124

    Slide 124 text

    [{ 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

    Slide 125

    Slide 125 text

    [{ 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

    Slide 126

    Slide 126 text

    [{ 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

    Slide 127

    Slide 127 text

    [{ 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

    Slide 128

    Slide 128 text

    CHANGES TO THE SERVER

    Slide 129

    Slide 129 text

    Server Client M V C M C V

    Slide 130

    Slide 130 text

    Server Client M V JSON JSON C M C V

    Slide 131

    Slide 131 text

    Server Client M V JSON JSON C M C V
    <%= javascript_tag do %> $(function() { App.start(); }); <% end %>

    Slide 132

    Slide 132 text

    TOOLS YOU’LL NEED

    Slide 133

    Slide 133 text

    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

    Slide 134

    Slide 134 text

    JSON GENERATION

    Slide 135

    Slide 135 text

    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

    Slide 136

    Slide 136 text

    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 ## 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

    Slide 137

    Slide 137 text

    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 ## 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", }] }]

    Slide 138

    Slide 138 text

    BOOTSTRAPPING DATA

    Slide 139

    Slide 139 text

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

    Slide 140

    Slide 140 text

    WORKING WITH JAVASCRIPT FILES

    Slide 141

    Slide 141 text

    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

    Slide 142

    Slide 142 text

    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

    Slide 143

    Slide 143 text

    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

    Slide 144

    Slide 144 text

    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

    Slide 145

    Slide 145 text

    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

    Slide 146

    Slide 146 text

    2. Concatenation Development

    Slide 147

    Slide 147 text

    2. Concatenation Production

    Slide 148

    Slide 148 text

    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=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

    Slide 149

    Slide 149 text

    4. CoffeeScript

    Slide 150

    Slide 150 text

    4. CoffeeScript @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

    Slide 151

    Slide 151 text

    JAVASCRIPT TEMPLATING STRATEGY

    Slide 152

    Slide 152 text

    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 Coffeescript) ‣ Handlebars / Mustache ‣ Underscore • Server is responsible for precompiling them

    Slide 153

    Slide 153 text

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

    Slide 154

    Slide 154 text

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

    Slide 155

    Slide 155 text

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

    Slide 156

    Slide 156 text

    EVERYTHING ELSE STAYS THE SAME

    Slide 157

    Slide 157 text

    APPLICATION ARCHITECTURE

    Slide 158

    Slide 158 text

    APPLICATION

    Slide 159

    Slide 159 text

    APPLICATION APPLICATION MODULE 1 MODULE 3 MODULE 2

    Slide 160

    Slide 160 text

    APPLICATION USERS APPOINTMENTS LEADS

    Slide 161

    Slide 161 text

    CONTROLLERS APPLICATION USERS APPOINTMENTS LEADS

    Slide 162

    Slide 162 text

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

    Slide 163

    Slide 163 text

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

    Slide 164

    Slide 164 text

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

    Slide 165

    Slide 165 text

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

    Slide 166

    Slide 166 text

    APPLICATION USERS LIST SHOW NEW APPOINTMENTS LIST SHOW NEW LEADS 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

    Slide 167

    Slide 167 text

    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

    Slide 168

    Slide 168 text

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