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

1. View Slide

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

   View Slide

3. 3
   Frontend Dev, Product Manager, SEO Guy
   BERND ARTMÜLLER
   bernd@zoomsquare.com
   @berndartmueller
   

   View Slide

4. View Slide

5. View Slide

6. 6
   Real estate search engine & platform in AT & DE
   Social media
   Focus more on new developments
   

   View Slide

7. Tech Stack Evolution
   Early 2017 Mid 2017
   2016
   2014
   

   View Slide

8. View Slide

9. •Angular 2 + RxJS
   •Redux Stores
   •Webpack
   •Server Side Rendering
   •JiT & AoT Compilation
   •Async Routes & Code Splitting
   9
   Previous Stack
   

   View Slide

10. •Build very slow
    •Complexity & „Magic“ behind the scenes
    •Server-side rendering
    •Lazy Loaded components flicker
    •Huge JS payload sent to client
    10
    Problems
    

    View Slide

11. View Slide

12. View Slide

13. View Slide

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
    

    View Slide

15. View Slide

16. • Progressive enhancement
    • Page navigation with Ajax
    • Graceful degradation if JS disabled
    • Hybrid Apps using native navigation controls
    16
    Turbolinks
    

    View Slide

17. 17
    Custom Container Class
    

    View Slide

18. 18
    Custom Container Class
    

    View Slide

19. 19
    Preloading
    

    View Slide

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

    View Slide

21. 21
    Custom Pug Components (Mixins)
    

    View Slide

22. 22
    Custom Pug Components (Mixins)
    

    View Slide

23. • Node.js + Redis Service
    • Caches all submitted pages (~25.000)
    • Re-generate every 6 hours
    23
    Caching
    

    View Slide

24. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

28. View Slide

29. 29
    Takeaway
    Think carefully if your website is a SPA or needs a framework!!
    

    View Slide

30. Questions?
    

    View Slide