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!

Bernd Artmüller

September 27, 2017
Tweet

Other Decks in Technology

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
    [email protected]
    @berndartmueller

    View Slide

  4. 4

    View Slide

  5. 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. 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. 11

    View Slide

  12. 12

    View Slide

  13. 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. 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. 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. 28

    View Slide

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

    View Slide

  30. Questions?

    View Slide