ONE PAGEONE CODEBASE

How to Write a CrawlableSingle Page Web App

-OR-

Thursday, August 1, 13

@technicolorenvy

Thursday, August 1, 13

noun1. any application that uses

a web browser as a client.{ }web ap·pli·ca·tion

Thursday, August 1, 13

“Web 2.0 app”

Routing

View Rendering

Models,Collections

Persistence

l18n

Currency formatting, etc.

localStorage cache

Handling user events

Logging Static Assets

Client

Server

inspired by http://nerds.airbnb.com/slides-and-video-from-spike-brehms-tech-talk/

Thursday, August 1, 13

Good SEO, Crawlable

Initial load

App logic is DRY

Native-app-like

Thursday, August 1, 13

SPA ALL THE THINGS!

Thursday, August 1, 13

Client-sideMV*

Routing

View Rendering

Models,Collections

Persistence

l18n

Currency formatting, etc.

localStorage cache

Handling user events

Logging Static Assets

API

Client

ServerTHE SINGLE PAGE APP

http://nerds.airbnb.com/slides-and-video-from-spike-brehms-tech-talk/

Thursday, August 1, 13

Thursday, August 1, 13

WTF?

Thursday, August 1, 13

Good SEO, Crawlable

Initial load

App logic is DRY

Native-app-like

Thursday, August 1, 13

SH%T... HOW DO I MAKE THIS THING CRAWLABLE?

Thursday, August 1, 13

YOU CAN USE THE DOM...

Thursday, August 1, 13

THESE ARE HACKSBUT, LETS BE HONEST

Thursday, August 1, 13

OR

Thursday, August 1, 13

Client-sideMV*+ serversupport

Routing

View Rendering

Models,Collections

Persistence

l18n

Currency formatting, etc.

localStorage cache

Handling user events

API

Client

Server

Routing

View Rendering

Models,Collections

Persistence

l18n

Currency formatting, etc.

Logging Static Assets

inspired by http://nerds.airbnb.com/slides-and-video-from-spike-brehms-tech-talk/

Thursday, August 1, 13

Good SEO, Crawlable

Initial load

App logic is DRY

Native-app-like

Thursday, August 1, 13

“But I still haven’t foundwhat I’m looking for”Paul ‘Bono’ Hewson

Thursday, August 1, 13

Client +serverMV*

Routing

View Rendering

Models,Collections

Persistence

l18n

Currency formatting, etc.

localStorage cache

Handling user events

Logging Static Assets

API

Client

Server

http://nerds.airbnb.com/slides-and-video-from-spike-brehms-tech-talk/

Thursday, August 1, 13

Good SEO, Crawlable

Initial load

App logic is DRY

Native-app-like

Thursday, August 1, 13

SWEET...

OPTIONS, WHAT ARE THEY?

Thursday, August 1, 13

DERBY - very alpha, has zero IE support <10, owns data layer, but on the upside has really rad OT logic built in.

Thursday, August 1, 13

DERBY - very alpha, has zero IE support <10, owns data layer, but on the upside has really rad OT logic built in.

METEOR - renders server-side w/ phantom.js but only for select userAgents, owns data layer, but hot code pushes are pretty sweet .

Thursday, August 1, 13

DERBY - very alpha, has zero IE support <10, owns data layer, but on the upside has really rad OT logic built in.

METEOR - renders server-side w/ phantom.js but only for select userAgents, owns data layer, but hot code pushes are pretty sweet .

RENDR - uses Backbone + Express, can use any API(s) you choose, however there are no deep api docs yet.

Thursday, August 1, 13

DERBY - very alpha, has zero IE support <10, owns data layer, but on the upside has really rad OT logic built in.

METEOR - renders server-side w/ phantom.js but only for select userAgents, owns data layer, but hot code pushes are pretty sweet .

RENDR - uses Backbone + Express, can use any API(s) you choose, however there are no deep api docs yet.

Thursday, August 1, 13

+

Thursday, August 1, 13

“Rendr is intended to be a building block along the way to this envisionsed future of web apps that can be run on either side of the wire according to the needs of your application.”

Thursday, August 1, 13

•A collection of classes - BaseView, BaseModel, BaseCollection, BaseApp, ClientRouter, ServerRouter, so on...

• Express Middleware

What comes with Rendr?

Thursday, August 1, 13

•An asset pipeline•many features that would ship with a

Framework, not a library

What’s Rendr missing?

Thursday, August 1, 13

rendr-cliA (mostly) shameless plug

Thursday, August 1, 13

<CODE LOOKING>

Thursday, August 1, 13

•Break down into smaller modules•Lazy load views & templates, etc•Share routing logic between client & server•Remove BB dependency?

Direction

Thursday, August 1, 13

• rendr https://github.com/airbnb/rendr• app template https://github.com/airbnb/rendr-app-

template• rendr-cli https://github.com/technicolorenvy/rendr-cli• chart stealing from http://nerds.airbnb.com/slides-and-

video-from-spike-brehms-tech-talk/• holy grail http://nerds.airbnb.com/weve-launched-our-

first-nodejs-app-to-product/

oh, the places you’ll go

Thursday, August 1, 13

THANKS!

Thursday, August 1, 13