• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
The Dark Side of Single Page Applications
 

The Dark Side of Single Page Applications

on

  • 5,912 views

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

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

Statistics

Views

Total Views
5,912
Views on SlideShare
5,787
Embed Views
125

Actions

Likes
14
Downloads
34
Comments
4

6 Embeds 125

http://railsisrael2013.events.co.il 106
https://twitter.com 11
http://www.linkedin.com 5
http://pulse.me&_=1381453109233 HTTP 1
http://www.google.com 1
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

14 of 4 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Nice to see my slashdotslash.com website referenced here, however I should clarify your statement about use of iframes. Yes there are a few iframes used to show the first version of the site and pictures, pdfs, ie anything not contained in the initial load, but the site for the mostpart is downloaded in one go and displayed or hidden with javascript and css. Before 2002 and IE6, iframes and dropdown boxes would not render correctly and had a heigher z-index than anything else, the website compensated for this by dynamically writing the iframe code to a division. stu
    Are you sure you want to
    Your message goes here
    Processing…
  • now on video: http://www.youtube.com/watch?v=dlqaPJZCEE4#t=2023
    Are you sure you want to
    Your message goes here
    Processing…
  • Very nice!
    Are you sure you want to
    Your message goes here
    Processing…
  • Slide #20 graph belongs to 2008 Economy Crisis and yet it best demonstrates the decreased load on our servers!!!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    The Dark Side of Single Page Applications The Dark Side of Single Page Applications Presentation Transcript

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