Rebuilding a faster, lazier Slack

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.

C0b42577cfc2b321be3474618107e933?s=128

samanthasiow

November 08, 2019
Tweet

Transcript

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

  2. LEGACY MODERN

  3. None
  4. Handlebars & Smarty templates Manual DOM updates via jQuery Multiple

    processes for multiple workspaces Eager data loading LEGACY
  5. 5 YEARS

  6. 5 YEARS

  7. All UI components built in React Single process for multiple

    workspaces Lazily-loaded and incomplete data model MODERN
  8. None
  9. 1. Load less code upfront 2. Declutter your boot data

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

    3. Prioritize initial API calls
  11. LEGACY

  12. 700ms JS assets LEGACY

  13. LEGACY 1750ms

  14. Start initial API calls LEGACY

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

  16. MODERN

  17. MODERN boot payload

  18. 700ms -> 160ms MODERN boot payload

  19. Dynamically import JS bundles MODERN Start initial API calls

  20. MODERN 800ms

  21. But wait! There’s more!

  22. MODERN (+ Service Worker!)

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

  24. MODERN 550ms (+ Service Worker!)

  25. 1. Client-side rendering 2. Small boot payload 3. Code splitting

    4. Use SW to cache assets Solutions:
  26. 1. Load less code upfront 2. Declutter your boot data

    3. Prioritize initial API calls
  27. None
  28. Lots of data required to boot Problem:

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

  30. OLD NEW Eager loading / Complete Model

  31. OLD NEW Eager loading / Complete Model Lazy loading /

    Incomplete Model
  32. ???

  33. ???

  34. None
  35. Embrace the unknown Solution:

  36. 1. Load less code upfront 2. Declutter your boot data

    3. Prioritize initial API calls
  37. None
  38. 5750ms LEGACY

  39. blocks first meaningful paint LEGACY

  40. LEGACY not really blocking blocks first meaningful paint

  41. 1. API calls block boot 2. We have so many

    API calls Problems:
  42. MODERN 2500ms

  43. MODERN high priority

  44. deferred MODERN high priority

  45. parallel calls MODERN

  46. 1. Prioritize 2. Parallelize Solutions: 3. The early bird get

    the worm API calls first meaningful paint on the screen faster
  47. Takeaways!

  48. Load less code upfront Client-side rendering Small boot payload Code

    splitting Use SW to cache assets
  49. Declutter your boot data Embrace the Unknown

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

  51. None
  52. 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
  53. 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
  54. Thank you! samanthasiow.com ssiow@slack-corp.com