Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A framework-less zoomsquare.com

A framework-less zoomsquare.com

Why we moved zoomsquare.com away from client side frameworks and
JS stuff we use to make our user experience instant!

3545e9295c21555624a143ce22f864dd?s=128

Bernd Artmüller

September 27, 2017
Tweet

Transcript

  1. None
  2. 2 Why we moved zoomsquare.com away from client side frameworks

    and JS stuff we use to make our user experience instant!
  3. 3 Frontend Dev, Product Manager, SEO Guy BERND ARTMÜLLER bernd@zoomsquare.com

    @berndartmueller
  4. 4

  5. 5

  6. 6 Real estate search engine & platform in AT &

    DE Social media Focus more on new developments
  7. Tech Stack Evolution Early 2017 Mid 2017 2016 2014

  8. 8

  9. •Angular 2 + RxJS •Redux Stores •Webpack •Server Side Rendering

    •JiT & AoT Compilation •Async Routes & Code Splitting 9 Previous Stack
  10. •Build very slow •Complexity & „Magic“ behind the scenes •Server-side

    rendering •Lazy Loaded components flicker •Huge JS payload sent to client 10 Problems
  11. 11

  12. 12

  13. 13

  14. Webpack 2 Node.JS & Express Pug Templates Custom micro client-side

    framework (Size Budget ~30kb) - UmbrellaJS Turbolinks - AJAX page loading Self-written components ServiceWorker Redis Caching 14 Rewrite everything
  15. 15

  16. • Progressive enhancement • Page navigation with Ajax • Graceful

    degradation if JS disabled • Hybrid Apps using native navigation controls 16 Turbolinks
  17. 17 Custom Container Class

  18. 18 Custom Container Class

  19. 19 Preloading

  20. 20 Rendering Pre-compiled Pug Templates with webpack -> 1-2ms render

    time
  21. 21 Custom Pug Components (Mixins)

  22. 22 Custom Pug Components (Mixins)

  23. • Node.js + Redis Service • Caches all submitted pages

    (~25.000) • Re-generate every 6 hours 23 Caching
  24. 24

  25. 25 Client JS Payload 631kb ~25kb Before After

  26. 26 2400ms ~700ms Before After +342% *Above the fold rendering

    Speed Index*
  27. 27 Pages / Session Organic Traffic +56% Leads +57% +30%

  28. 28

  29. 29 Takeaway Think carefully if your website is a SPA

    or needs a framework!!
  30. Questions?