one page, one app -or- how to write a crawlable single page web app
Post on 13-Sep-2014
789 views
DESCRIPTION
talk from Dvlpdnver2013TRANSCRIPT
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