This document discusses writing crawlable single page web applications. It describes using a client-server model where the server renders views for crawlers. This allows for good search engine optimization while keeping the benefits of a single page app like native-like experiences. Various frameworks that support this approach like Meteor, Derby and Rendr are described. Rendr is highlighted as an option that uses Backbone on the client with Express on the server, allowing APIs to be customized, though it is missing features common in frameworks. The direction of making Rendr's modules smaller and lazy loading views is suggested.

1. ONE PAGE
ONE CODEBASE
How to Write a Crawlable
Single Page Web App
-OR-
Thursday, August 1, 13

2. @technicolorenvy
Thursday, August 1, 13

3. noun
1. any application that uses
a web browser as a client.{ }
web ap·pli·ca·tion
Thursday, August 1, 13

4. “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

5. Good SEO, Crawlable
Initial load
App logic is DRY
Native-app-like
Thursday, August 1, 13

6. SPA ALL THE THINGS!
Thursday, August 1, 13

7. Client-side
MV*
Routing
View Rendering
Models,
Collections
Persistence
l18n
Currency
formatting, etc.
localStorage
cache
Handling user
events
Logging Static Assets
API
Client
Server
THE SINGLE
PAGE APP
http://nerds.airbnb.com/slides-and-video-from-spike-brehms-tech-talk/
Thursday, August 1, 13

8. Thursday, August 1, 13

9. WTF?
Thursday, August 1, 13

10. Good SEO, Crawlable
Initial load
App logic is DRY
Native-app-like
Thursday, August 1, 13

11. SH%T... HOW DO I MAKE THIS
THING CRAWLABLE?
Thursday, August 1, 13

12. YOU CAN USE THE DOM...
Thursday, August 1, 13

13. THESE ARE HACKS
BUT, LETS BE HONEST
Thursday, August 1, 13

14. OR
Thursday, August 1, 13

15. Client-side
MV*
+ server
support
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

16. Good SEO, Crawlable
Initial load
App logic is DRY
Native-app-like
Thursday, August 1, 13

17. “But I still
haven’t found
what I’m looking for”
Paul ‘Bono’ Hewson
Thursday, August 1, 13

18. Client +
server
MV*
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

19. Good SEO, Crawlable
Initial load
App logic is DRY
Native-app-like
Thursday, August 1, 13

20. SWEET...
OPTIONS,
WHAT ARE THEY?
Thursday, August 1, 13

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

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

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

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

25. +
Thursday, August 1, 13

26. “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

27. •A collection of classes - BaseView,
BaseModel, BaseCollection, BaseApp,
ClientRouter, ServerRouter, so on...
•Express Middleware
What comes with Rendr?
Thursday, August 1, 13

28. •An asset pipeline
•many features that would ship with a
Framework, not a library
What’s Rendr missing?
Thursday, August 1, 13

29. rendr-cli
A (mostly) shameless plug
Thursday, August 1, 13

30. <CODE LOOKING>
Thursday, August 1, 13

31. •Break down into smaller modules
•Lazy load views & templates, etc
•Share routing logic between client & server
•Remove BB dependency?
Direction
Thursday, August 1, 13

32. • 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

33. THANKS!
Thursday, August 1, 13