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!

Transcript

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
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
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
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
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
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%
29. 29 Takeaway Think carefully if your website is a SPA or needs a framework!!
30. Questions?