Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ONE PAGE
ONE CODEBASE
How to Write a Crawlable
Single Page Web App
-OR-
Thursday, August 1, 13
@technicolorenvy
Thursday, August 1, 13
noun
1. 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
Han...
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-side
MV*
Routing
View Rendering
Models,
Collections
Persistence
l18n
Currency
formatting, etc.
localStorage
cache
H...
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 HACKS
BUT, LETS BE HONEST
Thursday, August 1, 13
OR
Thursday, August 1, 13
Client-side
MV*
+ server
support
Routing
View Rendering
Models,
Collections
Persistence
l18n
Currency
formatting, etc.
loc...
Good SEO, Crawlable
Initial load
App logic is DRY
Native-app-like
Thursday, August 1, 13
“But I still
haven’t found
what I’m looking for”
Paul ‘Bono’ Hewson
Thursday, August 1, 13
Client +
server
MV*
Routing
View Rendering
Models,
Collections
Persistence
l18n
Currency
formatting, etc.
localStorage
cac...
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,...
DERBY- very alpha, has zero IE support <10, owns data layer, but on
the upside has really rad OT logic built in.
METEOR- r...
DERBY- very alpha, has zero IE support <10, owns data layer, but on
the upside has really rad OT logic built in.
METEOR- r...
DERBY- very alpha, has zero IE support <10, owns data layer, but on
the upside has really rad OT logic built in.
METEOR- r...
+
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 s...
•A collection of classes - BaseView,
BaseModel, BaseCollection, BaseApp,
ClientRouter, ServerRouter, so on...
•Express Mid...
•An asset pipeline
•many features that would ship with a
Framework, not a library
What’s Rendr missing?
Thursday, August 1...
rendr-cli
A (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...
• rendr https://github.com/airbnb/rendr
• app template https://github.com/airbnb/rendr-app-
template
• rendr-cli https://g...
THANKS!
Thursday, August 1, 13
Upcoming SlideShare
Loading in …5
×

One Page, One App -or- How to Write a Crawlable Single Page Web App

1,399 views

Published on

talk from Dvlpdnver2013

Published in: Technology, Education
  • Be the first to comment

One Page, One App -or- How to Write a Crawlable Single Page Web App

  1. 1. ONE PAGE ONE CODEBASE How to Write a Crawlable Single Page Web App -OR- Thursday, August 1, 13
  2. 2. @technicolorenvy Thursday, August 1, 13
  3. 3. noun 1. any application that uses a web browser as a client.{ } web ap·pli·ca·tion Thursday, August 1, 13
  4. 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. 5. Good SEO, Crawlable Initial load App logic is DRY Native-app-like Thursday, August 1, 13
  6. 6. SPA ALL THE THINGS! Thursday, August 1, 13
  7. 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. 8. Thursday, August 1, 13
  9. 9. WTF? Thursday, August 1, 13
  10. 10. Good SEO, Crawlable Initial load App logic is DRY Native-app-like Thursday, August 1, 13
  11. 11. SH%T... HOW DO I MAKE THIS THING CRAWLABLE? Thursday, August 1, 13
  12. 12. YOU CAN USE THE DOM... Thursday, August 1, 13
  13. 13. THESE ARE HACKS BUT, LETS BE HONEST Thursday, August 1, 13
  14. 14. OR Thursday, August 1, 13
  15. 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. 16. Good SEO, Crawlable Initial load App logic is DRY Native-app-like Thursday, August 1, 13
  17. 17. “But I still haven’t found what I’m looking for” Paul ‘Bono’ Hewson Thursday, August 1, 13
  18. 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. 19. Good SEO, Crawlable Initial load App logic is DRY Native-app-like Thursday, August 1, 13
  20. 20. SWEET... OPTIONS, WHAT ARE THEY? Thursday, August 1, 13
  21. 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. 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. 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. 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. 25. + Thursday, August 1, 13
  26. 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. 27. •A collection of classes - BaseView, BaseModel, BaseCollection, BaseApp, ClientRouter, ServerRouter, so on... •Express Middleware What comes with Rendr? Thursday, August 1, 13
  28. 28. •An asset pipeline •many features that would ship with a Framework, not a library What’s Rendr missing? Thursday, August 1, 13
  29. 29. rendr-cli A (mostly) shameless plug Thursday, August 1, 13
  30. 30. <CODE LOOKING> Thursday, August 1, 13
  31. 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. 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. 33. THANKS! Thursday, August 1, 13

×