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

Rebuilding a faster, lazier Slack

samanthasiow
November 08, 2019
Technology
71
7.9k

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

See All in Technology
AWS IoT TwinMaker サービス紹介
tottu
0
100
PHPからはじめるコンピュータア ーキテクチャ / PHP Meets Silicon: A Fun Dive into Computer Structures PHP Conference 2023 ver
tomzoh
0
130
Observabilityとダッシュボードのベストプラクティス
o11yfes2023
0
110
VR点検シュミレーションをA-Frameで作った話
kawajiritakayuki
0
1.5k
[PHPカンファレンス2023]NFCネームプレートを自作して楽しく交流しよう！
ikezoemakoto
0
120
データプロダクトとは何か
10xinc
5
2.1k
Component-Driven UI with ViewComponent Gem
rstankov
1
130
プロンプトの「効きやすい / 効きにくい」 これってモデルの性能にも言えますか？
sakusakumura
3
290
Why use Groovy today?
paulk
0
160
EQを高めて不快な感情に立ち向かえ
yamasatimi
1
510
AWS CDKでインフラ、アプリを分離した際に困ったこと
smt7174
1
160
データ活用の最前線！Modern Data Stack界隈で注目されている4つの分野
sagara
0
340

Featured

See All Featured
Building an army of robots
kneath
300
41k
The Illustrated Children's Guide to Kubernetes
chrisshort
26
45k
Building Adaptive Systems
keathley
29
1.6k
Designing the Hi-DPI Web
ddemaree
274
33k
For a Future-Friendly Web
brad_frost
168
8.3k
jQuery: Nuts, Bolts and Bling
dougneiner
57
6.8k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
The World Runs on Bad Software
bkeepers
PRO
59
6.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
239
20k
Design by the Numbers
sachag
272
18k
Typedesign – Prime Four
hannesfritz
35
1.8k
Embracing the Ebb and Flow
colly
77
3.8k

Transcript

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

    View Slide

  2. LEGACY MODERN

    View Slide

  3. View Slide

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

    View Slide

  5. 5 YEARS

    View Slide

  6. 5 YEARS

    View Slide

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

    View Slide

  8. View Slide

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

    View Slide

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

    View Slide

  11. LEGACY

    View Slide

  12. 700ms
    JS assets
    LEGACY

    View Slide

  13. LEGACY
    1750ms

    View Slide

  14. Start initial API calls
    LEGACY

    View Slide

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

    View Slide

  16. MODERN

    View Slide

  17. MODERN
    boot payload

    View Slide

  18. 700ms -> 160ms
    MODERN
    boot payload

    View Slide

  19. Dynamically import JS bundles
    MODERN
    Start initial API calls

    View Slide

  20. MODERN
    800ms

    View Slide

  21. But wait! There’s more!

    View Slide

  22. MODERN (+ Service Worker!)

    View Slide

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

    View Slide

  24. MODERN
    550ms
    (+ Service Worker!)

    View Slide

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

    View Slide

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

    View Slide

  27. View Slide

  28. Lots of data required to boot
    Problem:

    View Slide

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

    View Slide

  30. OLD
    NEW
    Eager loading / Complete Model

    View Slide

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

    View Slide

  32. ???

    View Slide

  33. ???

    View Slide

  34. View Slide

  35. Embrace the unknown
    Solution:

    View Slide

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

    View Slide

  37. View Slide

  38. 5750ms
    LEGACY

    View Slide

  39. blocks first
    meaningful paint
    LEGACY

    View Slide

  40. LEGACY
    not really blocking
    blocks first
    meaningful paint

    View Slide

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

    View Slide

  42. MODERN
    2500ms

    View Slide

  43. MODERN
    high priority

    View Slide

  44. deferred
    MODERN
    high priority

    View Slide

  45. parallel calls
    MODERN

    View Slide

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

    View Slide

  47. Takeaways!

    View Slide

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

    View Slide

  49. Declutter your boot data Embrace the Unknown

    View Slide

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

    View Slide

  51. View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide