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.

Transcript

1. Presented by Samantha Siow (she/her) REBUILDING A FASTER, LAZIER SLACK
2. LEGACY MODERN
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
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
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. ???
35. Embrace the unknown Solution:
36. 1. Load less code upfront 2. Declutter your boot data 3. Prioritize initial API calls
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
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