The Dark Side of Single Page Applications

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

Transcript

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