The Dark Side of Single Page Applications

9,596
-1

Published on

The story of all the pitfalls we had while transferring FTBpro.com from the good old web to a Backbone single page application... and all the great solutions we've came up with

Published in: Technology
3 Comments
19 Likes
Statistics
Notes
No Downloads
Views
Total Views
9,596
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
87
Comments
3
Likes
19
Embeds 0
No embeds

No notes for slide

The Dark Side of Single Page Applications

  1. The Dark Side of Single Page Applications Dor Kalev, CTO @ FTBpro
  2. Dor Kalev • Age 31 • Professional Body Builder • Railer since 2005 • CTO @ FTBpro
  3. FTBpro Largest Fan-Generated Digital Media Platform in Football
  4. FTBpro Also on mobile...
  5. Web’s Evolution • Web Applications are much more sophisticated • JavaScript is much faster today • AJAX & Sockets • MV* Frameworks everywhere
  6. What is a Single Page Application? • Self contained webpage • Complex but slick User Interaction • Allows using 100% Client Side technology for the Client Side • MVC 2.0 / MVP / MV* • Right UX for the Mobile Web - Phone & Tablet • www.slashdotslash.com
  7. Why BackBone? • Light weight • Fits our heavy customization • But why not? Ember, Angular are more robust
  8. Using Presenters • Each Web Componenet / BackBone Model is linked to a Presenter that supplies data in Json • Fully tested - RSpec & Mocha • Each Presenter manages its own Redis cache that is sweeped by the relevant Models on updates • Thin Models, no Controllers • Recommended regardless of SPA
  9. What’s PIPE? • In BackBone each Model AJAXes his data separately • PIPE creates a single aggregated AJAX Request per page • PIPE data queries are always based on the URL not cookies • PIPE can be put on CDN BackBone Model BackBone Model BackBone Model BackBone Model PIPE SERVER
  10. Generators • A generator for all MVP files + Tests • Faster development process • Sets a standard • Read more: http://tech.ftbpro.com/post/ 62148484009/speed-up-your- development-process-with-yeoman
  11. ENTER THE DARK SIDE
  12. Caveats • How will Google read the page’s content? • First page takes time to load, using Ajax loader on first load is ugly • How to use CDN? • Lousy Mobile performance
  13. SOLUTION RENDER ON THE SERVER
  14. Render on the Server • Use escaped Fragment + Phantom.js • Just Jader everything • Phantom.js + Rndr.me as a middle ware • Phantom.js + Rndr.me as a supervised middle ware
  15. JADER https://github.com/zohararad/jader • Using Serverside JavaScript render jade templates on the server • UPS: • Stay in Rails context without Phantom.js • Share JavaScript templates between client & server • DOWNS: • Slow rendering • Duplicate server logic
  16. Classic Phantom.js NGINX + MEMCACHED CLIENT PHANTOM.JS RAILS RESQUE or use http://www.brombone.com/
  17. Phantom.js as Middleware • Use Phantom.js directly with the client • Phantom.js calls should be cached because it can’t stand the load • Use Phantom Manager to manage multiple Phantom.js instances https://github.com/ FTBpro/phantom-manager PHANTOM.JS + CACHE CLIENT RAILS
  18. Supervised Phantom.js • If we have to live with it, let’s control it • Serve Phantom.js when possible, fall back to standard SPA when Phantom.js times out • Use Phantom Manager • STABLE AT LAST! RAILS + CACHE CLIENT PHANTOM RAILS
  19. Caching Solutions • Localstorage • CDN • Full page caching • PIPE • Memcached for Phantom.js render output • REDIS for Presenters • BONUS: ElasticSearch & NEO4J for Data
  20. Everything is Amazing • Fast UX • Web servers rest • Database rests • Faster development • Full control of caching tiers • Rule client-side with client-side technology • Unify mobile web with desktop web (m.ftbpro.com = ftbpro.com)
  21. Thank you! Questions?
  22. Visit tech.ftbpro.com for more...

×