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

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