building a single-page app: backbone, node.js, and beyond

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

Spike Brehm, Front End Engineerspike@airbnb.com

@spikebrehmSeptember 12, 2012

Thursday, September 13, 12

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

• 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

• Fetch data on demand

Why Single-Page Apps?

• Faster JavaScript runtimes

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

• Heightened user expectations

Two Approaches

The Easy Way

The Hard Wayaka “The Holy Grail”

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

• 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”

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

• HTML5 pushState

• CoffeeScript

• HTML5 pushState

• api.airbnb.com

Rails-Backbone interface: index.html.erb

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

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

• 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

• Source of global app state

• 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

• 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’)

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

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

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

@someChildView.cleanup()

clearInterval(@interval)

cleanup()

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

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

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

• lib/phrase_bundles/privacy_dropdown_view.rb

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

Modular, DRY views

• (screenshot)

Infinity.js

• (screenshot)

http://airbnb.github.com/infinity

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"

"Edit Wish List"

"Edit Wish List"

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);

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

• 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 %>);

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

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://localhost.airbnb.com:3001/static/icons/facebook.png

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”

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.Model and Backbone.Collection are more portable (with override of Backbone.sync)

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.

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.

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/

res.end()

Let’s chat@spikebrehm

building a single-page app: backbone, node.js, and beyond

page of html

easy way javascript

page refreshthursday

singlepage appspresent

singlepage appsthursday

page refresh application

hard way routing

pagebased paradigmthursday

Documents

node.js primer -...

nw.js: ^ n dom ¾node.js 1 « u Ü w · 3 n ònw.js + app/...

most popular node.js frameworks for app development

jsconfbr - securing node.js app, by the community and for...

node.js workshop- node.js databases

node.js workshop- node.js basics

creating single page web app using backbone js

securing your node.js app

node.js with sql server -...

node.js i getting started -...

big app design for node.js

develop & deploy node.js app on windows azure

market research + javascript frameworks · javascript...

potential gotchas in making a backbone app

javaone 2016 -emerging web app architectures using java and...

huv - packt publishing · node.js node.js command prompt...

integrating a node.js app using force.com canvas

a little backbone for your app

node.js einführung - fossgis.de · node.js einführung |...

introducing in - finn technology · pdf fileagenda what is...