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

Rebuilding a faster, lazier Slack

samanthasiow
November 08, 2019

Rebuilding a faster, lazier Slack

A new version of Slack is rolling out for our desktop customers, built from the ground up to be faster, more efficient, and easier to work on. In this talk, I’ll focus on our move from an eager data model to a lazily loaded and incomplete data model, and how that made for a speedier Slack experience.

samanthasiow

November 08, 2019
Tweet

Other Decks in Technology

Transcript

  1. Presented by Samantha Siow (she/her)
    REBUILDING A
    FASTER, LAZIER
    SLACK

    View full-size slide

  2. LEGACY MODERN

    View full-size slide

  3. Handlebars & Smarty templates
    Manual DOM updates via jQuery
    Multiple processes for multiple workspaces
    Eager data loading
    LEGACY

    View full-size slide

  4. All UI components built in React
    Single process for multiple workspaces
    Lazily-loaded and incomplete data model
    MODERN

    View full-size slide

  5. 1. Load less code upfront
    2. Declutter your boot data
    3. Prioritize initial API calls

    View full-size slide

  6. 1. Load less code upfront
    2. Declutter your boot data
    3. Prioritize initial API calls

    View full-size slide

  7. 700ms
    JS assets
    LEGACY

    View full-size slide

  8. LEGACY
    1750ms

    View full-size slide

  9. Start initial API calls
    LEGACY

    View full-size slide

  10. 1. Lots of templates!
    2. Lots of code!
    Problems:

    View full-size slide

  11. MODERN
    boot payload

    View full-size slide

  12. 700ms -> 160ms
    MODERN
    boot payload

    View full-size slide

  13. Dynamically import JS bundles
    MODERN
    Start initial API calls

    View full-size slide

  14. But wait! There’s more!

    View full-size slide

  15. MODERN (+ Service Worker!)

    View full-size slide

  16. MODERN
    700ms -> 160ms 36.9ms!
    boot payload
    (+ Service Worker!)

    View full-size slide

  17. MODERN
    550ms
    (+ Service Worker!)

    View full-size slide

  18. 1. Client-side rendering
    2. Small boot payload
    3. Code splitting
    4. Use SW to cache assets
    Solutions:

    View full-size slide

  19. 1. Load less code upfront
    2. Declutter your boot data
    3. Prioritize initial API calls

    View full-size slide

  20. Lots of data required to boot
    Problem:

    View full-size slide

  21. https://www.onekingslane.com/live-love-home/marie-kondo-book-declutter/

    View full-size slide

  22. OLD
    NEW
    Eager loading / Complete Model

    View full-size slide

  23. OLD
    NEW
    Eager loading / Complete Model Lazy loading / Incomplete Model

    View full-size slide

  24. Embrace the unknown
    Solution:

    View full-size slide

  25. 1. Load less code upfront
    2. Declutter your boot data
    3. Prioritize initial API calls

    View full-size slide

  26. 5750ms
    LEGACY

    View full-size slide

  27. blocks first
    meaningful paint
    LEGACY

    View full-size slide

  28. LEGACY
    not really blocking
    blocks first
    meaningful paint

    View full-size slide

  29. 1. API calls block boot
    2. We have so many API calls
    Problems:

    View full-size slide

  30. MODERN
    2500ms

    View full-size slide

  31. MODERN
    high priority

    View full-size slide

  32. deferred
    MODERN
    high priority

    View full-size slide

  33. parallel calls
    MODERN

    View full-size slide

  34. 1. Prioritize
    2. Parallelize
    Solutions:
    3. The early bird get the worm
    API calls
    first meaningful paint on the screen faster

    View full-size slide

  35. Load less code upfront
    Client-side rendering
    Small boot payload
    Code splitting
    Use SW to cache assets

    View full-size slide

  36. Declutter your boot data Embrace the Unknown

    View full-size slide

  37. Prioritize initial API calls
    Prioritize
    Parallelize
    Start API calls early

    View full-size slide

  38. References & Credits
    Mark Christian & Johnny Rodgers - bit.ly/slack-rebuild
    When a rewrite isn’t: rebuilding Slack on the desktop
    Service Workers at Slack: Our Quest for Faster Boot Times and Offline Support
    Jim Whimpey - bit.ly/slack-sw
    Introducing a snappier, more efficient Slack desktop experience
    tiny.cc/slack-intro
    Slide theme: Bitter Sweet
    Templates for Keynote - DesiGN (https://apps.apple.com/us/app/themes-for-keynote/id935290998?mt=12)
    Anuj Nair - bit.ly/slack-gantry
    Gantry: Slack’s Fast-booting Frontend Framework
    Anuj Nair - bit.ly/slack-sonic
    Sonic: A Slack Modernization Project

    View full-size slide

  39. slack.engineering
    References & Credits
    Mark Christian & Johnny Rodgers - bit.ly/slack-rebuild
    When a rewrite isn’t: rebuilding Slack on the desktop
    Service Workers at Slack: Our Quest for Faster Boot Times and Offline Support
    Jim Whimpey - bit.ly/slack-sw
    Introducing a snappier, more efficient Slack desktop experience
    tiny.cc/slack-intro
    Slide theme: Bitter Sweet
    Templates for Keynote - DesiGN (https://apps.apple.com/us/app/themes-for-keynote/id935290998?mt=12)
    Anuj Nair - bit.ly/slack-gantry
    Gantry: Slack’s Fast-booting Frontend Framework
    Anuj Nair - bit.ly/slack-sonic
    Sonic: A Slack Modernization Project

    View full-size slide

  40. Thank you!
    samanthasiow.com
    [email protected]

    View full-size slide