TechPrufer
Get started
Slack
Slack logoSlack · Feature trail

slack.com Redesign and Architecture Overhaul

3 posts · May 2017 – Sep 2019

What this trail covers

This thread tracks the evolution of slack.com's architecture and frontend. Initial posts detail the major redesign of slack.com in August 2017, focusing on decoupling the marketing website from the web client, introducing the Spacesuit UI framework, and improving CSS payload, specificity, and organization. It also covers the adoption of Flexbox and CSS Grid for responsive layouts, fluid typesetting with Less mixins, and art direction for imagery using the `<picture>` and `<source>` elements. This post details the creation and evolution of Slack Kit, a design system that codifies UI standards for typography, color, spacing, and accessibility. It describes the grassroots origins of Slack Kit, starting with standardizing colors and expanding to rebuild components for the desktop client's React modernization. The post emphasizes the "carrier-grade" principles (robust, accessible, flexible, reliable) and the impact of process, communication, and collaboration. Slack Kit is now used across the desktop client and web surfaces, and efforts are underway to bring it to mobile apps. The post highlights its role in enabling features like Dark Mode.

All Slack trails
  1. The Gradual Design System: How We Built Slack KitThis post details the creation and evolution of Slack Kit, a design system for codifying UI standards. It describes the grassroots origins, starting with standardizing colors and expanding to rebuild components for the desktop client's React modernization. Key contributions include defining "carrier-grade" principles (robust, accessible, flexible, reliable), emphasizing the impact of process, communication, and collaboration, and detailing how Slack Kit is used across the desktop client and web surfaces, with efforts to extend it to mobile apps. It also highlights its role in enabling features like Dark Mode.
  2. Rebuilding slack.comThis post details the technical implementation of the slack.com redesign. Key contributions include: decoupling slack.com from the web client to create a streamlined codebase; introducing the 'Spacesuit' UI framework with class-based, reusable components and utility classes, resulting in a significant reduction in CSS payload (from 416kB to 132kB), unique declarations (from 1881 to 799), unique colors (from 91 to 14), and selectors (from 2328 to 1719); organizing CSS based on ITCSS philosophy and BEM-like naming conventions with single-letter prefixes for style types (e.g., `u-margin-top--small`); implementing responsive layouts using Flexbox and CSS Grid, with a shift from a traditional 12-column grid to custom Grid objects for common layout patterns and using CSS feature queries for fallback; developing Less mixins for fluid typesetting (e.g., `m-typeset`) to manage font family, size, line-height, weight, and text-transforms; implementing art direction for imagery using the `<picture>` and `<source>` elements with Picturefill polyfill for older browsers, allowing for viewport-specific image assets; and prioritizing accessibility by improving color contrast, semantic HTML, and keyboard navigation.
  3. Rebuilding Slack’s Emoji Picker in ReactRebuilt the Emoji Picker component using React, migrating from jQuery/Handlebars to a declarative, data-driven UI approach. Implemented virtual DOM benefits with `react-virtualized` to render fewer DOM nodes and improve performance, especially during initial mounts and search resets. Introduced Storybook for UI development and testing. Integrated webpack into the build pipeline for asset compilation, transpilation (JSX, ES2015+), and CDN deployment, addressing merge conflicts and dependency management issues.