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

1,188 views
986 views

Published on

talk from Dvlpdnver2013

Published in: Technology, Education
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,188
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
18
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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

×