Building a Single-Page App: Backbone, Node.js, and Beyond

Building a Single-Page App: Backbone, Node.js, and Beyond

Spike Brehm, Front End [email protected]

@spikebrehmSeptember 12, 2012

Thursday, September 13, 12

mailto:[email protected]

mailto:[email protected]

Past: Why Single-Page Apps

Present: How we built Wish Lists

Future: In pursuit of the Holy Grail


PastWhy Single-Page Apps



Airbedandbreakfast.com



• Started in 2008 as a Rails 2.x app




• Now Rails 3.0




• Now Rails 3.0

• Still stuck in old, page-based paradigm


What is a Single-Page App?







• Navigate in the app without page refresh




• Application logic in the client




• Application logic in the client

• Fetch data on demand


Why Single-Page Apps?



• Faster JavaScript runtimes




• New browser features (pushState, localStorage, etc.)




• New browser features (pushState, localStorage, etc.)

• Heightened user expectations


Two Approaches

The Easy Way

The Hard Wayaka “The Holy Grail”


The Easy Way


The Easy Way


The Easy Way

• JavaScript app runs entirely in client


The Easy Way


• Server technology agnostic


The Easy Way



• Can use Backbone to structure app


The Easy Way




• Poor SEO -- not crawlable


The Easy Way





• Performance hit to download & evaluate JS before rendering


The Easy Way





• Performance hit to download & evaluate JS before rendering

• Good for apps behind login, or tools


The Hard Wayaka “The Holy Grail”


The Hard Way


The Hard Way• Routing, templating, application logic, utilities run on

client and server



client and server

• Navigate to any page, HTML rendered in client -- hit refresh, serves up HTML



client and server


• Must render full page of HTML without access to DOM (or find a faster DOM implementation)



client and server



• Requires JavaScript runtime on the server (or DSL that compiles down to JavaScript -- think GWT)



client and server




• Backbone not a good fit



client and server





• Provides good SEO



client and server





• Provides good SEO

• Better performance


Performance

Improving performance on Twitter.comhttp://engineering.twitter.com/2012/05/improving-performance-on-twittercom.html

“Time to first tweet”


http://engineering.twitter.com/2012/05/improving-performance-on-twittercom.html




Stops and Starts


Stops and Starts

• mustache.rb: code duplication


Stops and Starts


• therubyracer: performance, stability


Stops and Starts


• therubyracer: performance, stability

• PhantomJS: slow, overly complicated


PresentHow we built Wish Lists



Technologies


Technologies• MV*: Backbone.js



• Templating: Handlebars




• UI & Layout: Oxygen (Airbnb’s Bootstrap)





• CoffeeScript





• CoffeeScript

• HTML5 pushState





• CoffeeScript

• HTML5 pushState

• api.airbnb.com


Rails-Backbone interface: index.html.erb

<div class=”app_view”></div>

<script>!function(){ I18n.extend(<%= @phrases.to_json.html_safe %>); Airbnb.Api.config(<%= @api_config.to_json.html_safe %>);

window.WishlistsApp = new AIR.Apps.Wishlists( <%= @init_data.to_json.html_safe %> );}();</script>
































Bootstrapping the app window.WishlistsApp = new AIR.Apps.Wishlists({ “listings”: [...], “wishlists”: [...], ... });


Bootstrapping the app window.WishlistsApp = new AIR.Apps.Wishlists({ “listings”: [...], “wishlists”: [...], ... });

WishlistsApp.get(‘wishlists’)

=> [Object, Object, Object, ...]


Bootstrapping the app


• Each action bootstraps whatever data needed on first pageload



• Each action bootstraps whatever data needed on first pageload

• Subsequent data is requested on-demand



App Initializeclass AIR.Apps.Wishlists extends Backbone.Model

initialize: => @wishlists = new AIR.Collections.Wishlists @get('wishlists') @listings = new AIR.Collections.Listings @get('listings') ...

new AIR.Routers.Wishlists({app: @})


App Initializeclass AIR.Apps.Wishlists extends Backbone.Model

initialize: => @wishlists = new AIR.Collections.Wishlists @get('wishlists') @listings = new AIR.Collections.Listings @get('listings') ...

new AIR.Routers.Wishlists({app: @})

WishlistsApp.wishlists=> Wishlists _byCid: Object _byId: Object length: 11 models: Array[11] __proto__: ctor


Backbone Router


Backbone Router• Translates URL changes to method

calls



calls

• Source of global app state



calls


• Keep state out of views



calls


• Keep state out of views

• Idempotent view rendering


Backbone Routerclass AIR.Routers.Wishlists extends Backbone.Router routes: 'wishlists/:id' : 'show' 'wishlists/:id/edit' : 'edit'

...

show: (id) -> @app.fetchWishlist id, (model) => view = new AIR.Views.Wishlists.ShowView {@app, model} @updateContent(view)



...




...




...



Data-on-demand


Data-on-demand # AIR.Apps.Wishlists

fetchWishlist: (id, callback) -> model = @wishlists.get(id) if model? callback(model) else @appView.setLoading(true) @wishlists.fetchById id, (model) => @appView.setLoading(false) callback(model)

















api.airbnb.com


api.airbnb.com• Used by iOS, Android, Mobile Web clients



• No Cross-Domain XHR




• JSONP for GET; but no POST, PUT, DELETE




• JSONP for GET; but no POST, PUT, DELETE

• Added CORS support in API to allow requests coming from valid Airbnb domain (*.airbnb.com, *.airbnb.co.uk, *.airbnb.de...)


Accessing API from Backbone

Airbnb.Api.getUrl(‘/v1/users/1234’)



Airbnb.Api.getUrl(‘/v1/users/1234’)

=> "https://api.airbnb.com/v1/users/1234?currency=USD&locale=en& key=...&oauth_token=..."


https://api.airbnb.com/v1/users/1234?key=d306zoyjsyarp7ifhu67rjxn52tv0t20&currency=USD&locale=en&oauth_token=2gc6s1qmk1lvtw15tf0vofagr





class AIR.Models.WishlistUser extends Backbone.Model jsonKey: 'user' apiPath: -> "/v1/users/#{@id}" ...

_.extend AIR.Models.WishlistUser.prototype, AIR.Mixins.ApiResource



AIR.Mixins.ApiResource = url: (options = {}) -> apiPath = options.apiPath || @apiPath if _.isFunction(apiPath)

apiPath = apiPath.call(@) Airbnb.Api.getUrl(apiPath)

sync: (method, model, options) -> options = _.defaults options, url: @url(options) Backbone.sync method, model, options

















AIR.Views.BaseViewclass AIR.Views.BaseView extends Backbone.View

postInitialize: ->

postRender: ->

getRenderData: ->

cleanup: ->

...


Beforeclass WishlistIndexView extends Backbone.View

template: 'wishlists/wishlist_index_view'

render: ->

@$el.html JST[@template](@model.toJSON())

@renderSomeThing()

@

renderSomeThing: -> ...




render: ->


@renderSomeThing()

@





render: ->


@renderSomeThing()

@





render: ->


@renderSomeThing()

@





render: ->


@renderSomeThing()

@





render: ->


@renderSomeThing()

@



Afterclass WishlistIndexView extends AIR.Views.BaseView


postRender: ->

@renderSomeThing()





postRender: ->

@renderSomeThing()





postRender: ->

@renderSomeThing()



Before, Part IIclass WishlistIndexView extends Backbone.View

...

render: ->


@



...

render: ->

data = _.extend @model.toJSON(),

show_share_button: @options.show_share_button

@$el.html JST[@template](data)

@



...

render: ->

@$el.html JST[@template](@getRenderData())

@

getRenderData: ->

_.extend @model.toJSON(),



After, Part IIclass WishlistIndexView extends AIR.Views.BaseView

...

getRenderData: ->

_.extend super,



After, Part IIclass WishlistIndexView extends AIR.Views.BaseView

...

getRenderData: ->

_.extend super,



cleanup()class AIR.Views.BaseView extends Backbone.View

...

cleanup: ->

@undelegateEvents()

@model?.off(null, null, @)

@remove()


cleanup()class WishlistIndexView extends AIR.Views.BaseView

...

cleanup: ->

super

@someChildView.cleanup()

clearInterval(@interval)


cleanup()

Backbone 0.9.2 adds new method: Backbone.View.prototype.dispose()


Modular, DRY views


Modular, DRY views

• Re-usable bits of markup and behavior


Modular, DRY views

• (screenshot)


Modular, DRY views

• (screenshot)


Subview initializationclass EditView extends AIR.Views.BaseView

...

postRender: ->

@renderPrivacyDropdown()

renderPrivacyDropdown: ->

view = new AIR.Views.Shared.PrivacyDropdownView

'private': @model.get('private')

@$('data-privacy-dropdown').replaceWith view.render().el



...

postRender: ->








...

postRender: ->








...

postRender: ->








...

postRender: ->





view.on ‘private-changed’, (isPrivate) =>

# do something

console.log(isPrivate)



What goes into a view?



• app/assets/coffeescripts/views/shared/privacy_dropdown_view.coffee




• app/assets/templates/views/shared/privacy_dropdown_view.hbs





• app/assets/stylesheets/partials/_ privacy_dropdown_view.scss





• app/assets/stylesheets/partials/_ privacy_dropdown_view.scss

• lib/phrase_bundles/privacy_dropdown_view.rb


Rdio’s Backbone-based View Component FrameworkJustin Tulloss, @justin_tullosshttp://www.youtube.com/watch?v=TB-l2nF67iU


http://www.youtube.com/watch?v=TB-l2nF67iU

http://www.youtube.com/watch?v=TB-l2nF67iU

Modular, DRY views

• (screenshot)


Infinity.js

• (screenshot)

http://airbnb.github.com/infinity




I18n.js


I18n.js

• 192 countries


I18n.js

• 192 countries

• 31 locales


I18n.js

• 192 countries

• 31 locales

• Client-slide translation library


I18n.t()I18n.t('edit_wish_list');



"Edit Wish List"



<h1>{{t "edit_wish_list"}}</h1>

"Edit Wish List"



<h1>Edit Wish List</h1>

<h1>{{t "edit_wish_list"}}</h1>

"Edit Wish List"


InterpolationI18n.t('owners_wish_list', {name: name});


InterpolationI18n.t('owners_wish_list', {name: name});

"Spike’s Wish List"


Interpolation

<h1>{{t "owners_wish_list" name=name}}</h1>

I18n.t('owners_wish_list', {name: name});



Interpolation

<h1>{{t "owners_wish_list" name=name}}</h1>

<h1>Spike’s Wish List</h1>

I18n.t('owners_wish_list', {name: name});



I18n.extend()

I18n.extend({ "edit_wish_list": "Edit Wish List", "owners_wish_list": "%{name}’s Wish List", ...});


I18n.pluralize()I18n.pluralize("Listing", listings);


I18n.pluralize()I18n.pluralize("Listing", listings);

3 Listings


I18n.pluralize()

<span>{{t_pluralize "Listing" count=listings}}</span>

I18n.pluralize("Listing", listings);

3 Listings


I18n.pluralize()

<span>{{t_pluralize "Listing" count=listings}}</span>

<span>3 Listings</span>

I18n.pluralize("Listing", listings);

3 Listings


pluralize() just calls t(){

"pluralize.Listing.zero": "%{count} Listings",

"pluralize.Listing.one": "%{count} Listing",

"pluralize.Listing.many": "%{count} Listings"

}


PhraseBundle


PhraseBundle• Composable bundles of I18n phrases



• Keep phrases DRY



• Keep phrases DRY

• Separation of concerns: treat phrases as data source


PhraseBundleI18n.extend(<%= { 'map_view' => t('wishlists.Map View', :default => 'Map View'), 'list_view' => t('wishlists.List View', :default => 'List View'), ...}.to_json.html_safe %>);


PhraseBundleI18n.extend(<%= { 'map_view' => t('wishlists.Map View', :default => 'Map View'), 'list_view' => t('wishlists.List View', :default => 'List View'), ...}.to_json.html_safe %>);

I18n.extend(<%= PhraseBundles::Wishlists.new.to_json.html_safe %>);


module PhraseBundles class Wishlists < PhraseBundle includes :privacy_dropdown, :share_dropdown, :wishlists_modal def phrases { 'map_view' => t('wishlists.Map View', :default => 'Map View'), 'list_view' => t('wishlists.List View', :default => 'List View'), ... } end endend

PhraseBundle



PhraseBundle



PhraseBundle


CDN Asset URLs• Image paths need to go through Sprockets


CDN Asset URLs

https://localhost.airbnb.com:3001/static/icons/facebook.png

• Image paths need to go through Sprockets

Development:






CDN Asset URLs


https://a0.muscache.com/airbnb/static/icons/facebook-e04e8c0c43e40ff7a277a3a7a734ed52.png

• Image paths need to go through Sprockets

Development:

Production:












CDN Asset URLs


CDN Asset URLswindow.ImagePaths = <%= map_image_paths([ 'icons/facebook.png', ...]).to_json.html_safe %>;



ImagePaths['icons/facebook.png'];=> “https://a0.muscache.com/airbnb

/static/icons/facebook-e04e8c0c43e40ff7a277a3a7a734ed52.png”









<img src=”{{image_path “icons/facebook.png”}}” ...>

ImagePaths['icons/facebook.png'];=> “https://a0.muscache.com/airbnb

/static/icons/facebook-e04e8c0c43e40ff7a277a3a7a734ed52.png”








FutureIn pursuit of the Holy Grail


Backbone.js is just a stopgap



• Backbone.View is DOM-centric




• Backbone.History is window-centric




• Backbone.History is window-centric

• Backbone.Model and Backbone.Collection are more portable (with override of Backbone.sync)


It’s a great time to be a JavaScript hacker.


It’s a great time to be a JavaScript hacker.

But not a great time to build modern, plug-and-play web apps.


Testing the Node.js Waters


Testing the Node.js WatersWe are refactoring m.airbnb.com with a Node backend instead of Rails.



Primary goal is to learn how to productionize a Node app.



Primary goal is to learn how to productionize a Node app.

Secondary goal is to prototype a new way of building web apps.


Testing the Node.js Waters


Node Frameworks


Node FrameworksGeddy, TowerRails-inspired. Not utilizing Node’s strengths.



SocketStreamModular, real-time, but optimized for The Easy Way.




MeteorSolves for The Hard Way, but all-or-nothing. Alpha.




MeteorSolves for The Hard Way, but all-or-nothing. Alpha.

DerbySolves for The Hard Way, but not very modular. Alpha.


Node Frameworks

Solves for The Hard Way, but not very modular. Alpha.Derby

Active authors.Active mailing list.Small, if messy, codebase.


Node Frameworks

Solves for The Hard Way, but not very modular. Alpha.

DerbyActive authors.Active mailing list.Small, if messy, codebase.


Node Frameworks

Solves for The Hard Way, but not very modular. Alpha.

DerbyActive authors.Active mailing list.Small, if messy, codebase.


Other ResourcesSingle Page App Book, by Mikito Takadahttp://singlepageappbook.com/

view.json, by Mikito Takadahttp://mixu.net/view.json/

Building The Next SoundCloudhttp://backstage.soundcloud.com/2012/06/building-the-next-soundcloud/

Sean McBride, Bridging the Client-Server Dividehttp://seanmcb.com/client-server-divide/

NodeUp Podcasthttp://nodeup.com/


http://singlepageappbook.com

http://singlepageappbook.com

http://mixu.net/view.json/

http://mixu.net/view.json/

http://backstage.soundcloud.com/2012/06/building-the-next-soundcloud/




http://seanmcb.com/client-server-divide/

http://seanmcb.com/client-server-divide/

http://nodeup.com/

http://nodeup.com/

res.end()


Let’s chat@spikebrehm


Documents

Building a Single-Page App: Backbone, Node.js, and Beyond