Your SlideShare is downloading. ×
The Dark Side of Single Page Applications
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

The Dark Side of Single Page Applications

7,797
views

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

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
7,797
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
78
Comments
3
Likes
19
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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

×