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

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

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

Visit
tech.ftbpro.com
for more...