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