TechPrufer
Get started
Slack
Slack logoSlack · Feature trail

Frontend Framework for Fast Booting

3 posts · Jul 2016 – Oct 2019

What this trail covers

This thread tracks the evolution of Slack's frontend architecture, focusing on improving application boot times and developer productivity. Initial posts detailed the challenges of legacy frontend decisions and the need for a unified approach. This post introduces Gantry, a fast-booting frontend framework designed to address these issues by enabling on-demand data fetching, client-side rendering, front-loaded API requests, lazy asset loading, and local caching via Service Workers. Gantry aims to improve the user experience by significantly reducing the time it takes for the Slack web app to become fully interactive. This post details the implementation of an incremental boot process for the web app, which fetches only the data needed for the initial view, making content visible much faster. It also covers the parallel fetching of the full model data and the subsequent re-enabling of the UI once all data is processed, resulting in faster 'content visible' and 'fully loaded' metrics.

All Slack trails
  1. Gantry: Slack’s Fast-booting Frontend FrameworkThis post introduces Gantry, a new fast-booting frontend framework at Slack. It details the technical decisions made to address legacy frontend limitations, including fetching data on demand, client-side rendering with edge caching (Flannel) and CDN for assets, front-loading API requests with code splitting and dynamic imports, and caching assets/data locally using Service Workers for faster subsequent boots and offline support. It also highlights the benefits of a standardized framework for streamlined development and deployment, enabling code sharing and faster onboarding for engineers.
  2. Service Workers at Slack: Our Quest for Faster Boot Times and Offline SupportThis post details the technical implementation and benefits of using Service Workers at Slack to achieve faster boot times and offline support. It explains what Service Workers are, how they are used to cache assets (HTML, JS, CSS, fonts, sounds) and persisted Redux store data (to IndexedDB), and the distinction between cold and warm boots. The post covers the Service Worker lifecycle (install, fetch, activate), cache management using the Cache API keyed by deploy time, and strategies for handling the 'one version behind' issue with a jittered registration interval. It also touches on caching API responses to keep features in sync with assets and highlights the resulting ~50% reduction in boot time over the legacy client and ~25% improvement in warm over cold boots.
  3. Getting to Slack faster with incremental bootThis post details the implementation of an incremental boot process for Slack's web application. This process involves fetching only the data required for the initial channel view, making content visible much faster. It also describes the parallel fetching of the full model data via `rtm.start` and the subsequent re-enabling of the UI once all data is processed. This approach resulted in a significant reduction in 'content visible' time (from ~7s to <5s) and a smaller reduction in 'fully loaded' time (from ~7s to ~6s), saving users substantial waiting time daily.