The Dark Side of Single Page Applications Dor Kalev, CTO @ FTBpro
Jan 15, 2015
The Dark Side of Single Page Applications
Dor Kalev, CTO @ FTBpro
Dor Kalev
• Age 31
• Professional Body Builder
• Railer since 2005
• CTO @ FTBpro
FTBproLargest Fan-Generated Digital Media Platform in Football
FTBproAlso on mobile...
Web’s Evolution
• Web Applications are much more sophisticated
• JavaScript is much faster today
• AJAX & Sockets
• MV* Frameworks everywhere
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
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 - 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
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
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
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
• How to use CDN?
• Lousy Mobile performance
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
• Phantom.js + Rndr.me as a supervised middle ware
JADERhttps://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
Classic Phantom.js
NGINX + MEMCACHED
CLIENT
PHANTOM.JS
RAILS
RESQUE
or usehttp://www.brombone.com/
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
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
Caching Solutions
• Localstorage
• CDN
• Full page caching
• PIPE
• Memcached for Phantom.js render output
• REDIS for Presenters
• BONUS: ElasticSearch & NEO4J for Data
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)
Thank you! Questions?
Visittech.ftbpro.com
for more...