Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

21

Partager

Télécharger pour lire hors ligne

The Dark Side of Single Page Applications

Télécharger pour lire hors ligne

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 Dark Side of Single Page Applications

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

    Nov. 22, 2016
  • derickdsouza

    Mar. 31, 2016
  • suifengtec

    Apr. 25, 2015
  • donone

    Feb. 28, 2015
  • UmutIIK

    Jan. 10, 2015
  • giulianolatini

    Jan. 1, 2015
  • nachbar90

    Nov. 27, 2014
  • mrcow

    May. 28, 2014
  • junepac

    Dec. 11, 2013
  • rubabrubab

    Oct. 17, 2013
  • alevtinalabyuk

    Oct. 16, 2013
  • saikirank29

    Oct. 14, 2013
  • winstonfernandez

    Oct. 14, 2013
  • waleedalazzawi12

    Oct. 13, 2013
  • fahadbillah

    Oct. 11, 2013
  • zer13army

    Oct. 11, 2013
  • mariaangelicacristihijo

    Oct. 10, 2013
  • IAMGHOSTLY

    Oct. 10, 2013
  • AlejandroLechuga

    Oct. 10, 2013
  • NocommenZ

    Oct. 10, 2013

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

Vues

Nombre de vues

16 334

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

194

Actions

Téléchargements

104

Partages

0

Commentaires

0

Mentions J'aime

21

×