Your SlideShare is downloading. ×
0
The Dark Side of Single
Page Applications
Dor Kalev, CTO @ FTBpro
Dor Kalev
• Age 31
• Professional Body Builder
• Railer since 2005
• CTO @ FTBpro
FTBpro
Largest Fan-Generated Digital Media Platform in Football
FTBpro
Also on mobile...
Web’s Evolution
• Web Applications are much
more sophisticated
• JavaScript is much faster today
• AJAX & Sockets
• MV* Fr...
What is a Single Page Application?
• Self contained webpage
• Complex but slick User Interaction
• Allows using 100% Clien...
Why BackBone?
• Light weight
• Fits our heavy customization
• But why not? Ember, Angular
are more robust
Using Presenters
• Each Web Componenet / BackBone
Model is linked to a Presenter that
supplies data in Json
• Fully tested...
What’s PIPE?
• In BackBone each Model AJAXes his data separately
• PIPE creates a single aggregated AJAX Request per page
...
Generators
• A generator for all MVP files + Tests
• Faster development process
• Sets a standard
• Read more:
http://tech....
ENTER THE DARK SIDE
Caveats
• How will Google read the page’s content?
• First page takes time to load, using Ajax loader on first load is ugly...
SOLUTION
RENDER ON THE SERVER
Render on the Server
• Use escaped Fragment +
Phantom.js
• Just Jader everything
• Phantom.js + Rndr.me as a
middle ware
•...
JADER
https://github.com/zohararad/jader
• Using Serverside JavaScript render jade templates on the server
• UPS:
• Stay i...
Classic Phantom.js
NGINX +
MEMCACHED
CLIENT
PHANTOM.JS
RAILS
RESQUE
or use
http://www.brombone.com/
Phantom.js as Middleware
• Use Phantom.js directly with
the client
• Phantom.js calls should be
cached because it can’t st...
Supervised Phantom.js
• If we have to live with it, let’s
control it
• Serve Phantom.js when
possible, fall back to standa...
Caching Solutions
• Localstorage
• CDN
• Full page caching
• PIPE
• Memcached for Phantom.js render output
• REDIS for Pre...
Everything is Amazing
• Fast UX
• Web servers rest
• Database rests
• Faster development
• Full control of caching tiers
•...
Thank you! Questions?
Visit
tech.ftbpro.com
for more...
Upcoming SlideShare
Loading in...5
×

The Dark Side of Single Page Applications

8,326

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

No notes for slide

Transcript of "The Dark Side of Single Page Applications"

  1. 1. The Dark Side of Single Page Applications Dor Kalev, CTO @ FTBpro
  2. 2. Dor Kalev • Age 31 • Professional Body Builder • Railer since 2005 • CTO @ FTBpro
  3. 3. FTBpro Largest Fan-Generated Digital Media Platform in Football
  4. 4. FTBpro Also on mobile...
  5. 5. Web’s Evolution • Web Applications are much more sophisticated • JavaScript is much faster today • AJAX & Sockets • MV* Frameworks everywhere
  6. 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. 7. Why BackBone? • Light weight • Fits our heavy customization • But why not? Ember, Angular are more robust
  8. 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. 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. 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. 11. ENTER THE DARK SIDE
  12. 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. 13. SOLUTION RENDER ON THE SERVER
  14. 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. 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. 16. Classic Phantom.js NGINX + MEMCACHED CLIENT PHANTOM.JS RAILS RESQUE or use http://www.brombone.com/
  17. 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. 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. 19. Caching Solutions • Localstorage • CDN • Full page caching • PIPE • Memcached for Phantom.js render output • REDIS for Presenters • BONUS: ElasticSearch & NEO4J for Data
  20. 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. 21. Thank you! Questions?
  22. 22. Visit tech.ftbpro.com for more...
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×