Rebuilding Slack’s Emoji Picker in React

Slack is transitioning its web client to React. When Slack was first built, our frontend consisted of established technologies like jQuery and Handlebars. Since then, the community has developed better ways to create scalable, data-driven interfaces. jQuery’s “render and modify” approach is straightforward, but it’s prone to falling out of sync with the underlying model.…

Slack logo
Slack
•
Chris Montrois
•9 min read•advanced•
--
•View Original
BabelCDNChefJavaScriptjQueryJSXReactTypeScript

Overview

The article discusses the process of rebuilding Slack's Emoji Picker using React, highlighting the advantages of React's rendering model over traditional methods. It details the performance improvements achieved and the development workflow challenges faced during the transition.

What You'll Learn

1

How to implement a self-contained React component for an interactive UI feature

2

Why using React can improve performance and reliability in web applications

3

How to integrate React into an existing development workflow with minimal disruption

4

How to leverage virtual lists for optimizing rendering performance in React

Prerequisites & Requirements

  • Basic understanding of React and its component lifecycle
  • Familiarity with Storybook for UI development(optional)

Key Questions Answered

How does React improve the performance of the Emoji Picker?
React improves the performance of the Emoji Picker by utilizing a virtual DOM that minimizes direct DOM manipulations. This allows for efficient updates, resulting in a significant reduction in render times, such as an 85% decrease in the first mount time from 318ms to 48ms.
What challenges did Slack face when integrating React into their existing workflow?
Slack faced challenges such as managing merge conflicts and dependency issues due to their in-house frontend build pipeline lacking modern features like imports and transpilation. They addressed this by developing a service around webpack to streamline asset compilation and testing.
What are the key components of the new Emoji Picker built in React?
The new Emoji Picker consists of a stateful root component with stateless children, including a header with category tabs and a search bar, a body displaying a virtual list of emojis, and a footer for emoji previews and skin tone selection. This structure enhances usability and performance.
What performance metrics were observed after deploying the new Emoji Picker?
After deploying the new Emoji Picker, performance metrics showed a 270ms decrease in the first mount time and a 158ms decrease in the second mount time. However, searching with many results took 27ms longer due to the new rendering strategy.

Key Statistics & Figures

First mount time
-270ms
85% decrease
Second mount time
-158ms
91.3% decrease
Search (many results)
+27ms
259% increase
Search (one result)
-25ms
53.2% decrease
Reset search
-68ms
70.1% decrease

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

Frontend
React
Used to rebuild the Emoji Picker for improved performance and maintainability.
Tools
Storybook
Facilitates UI component development and testing.
Tools
Webpack
Used for asset compilation and to manage dependencies in the development workflow.
Library
React-virtualized
Helps optimize rendering by managing virtual lists of emojis.

Key Actionable Insights

1
Consider using React for building interactive UI components to leverage its efficient rendering capabilities.
React's virtual DOM can significantly improve performance by reducing the number of direct DOM updates, making it ideal for features like the Emoji Picker that require frequent updates.
2
Utilize Storybook for developing and testing UI components in isolation.
Storybook allows developers to visualize different states of components, facilitating easier testing and review processes, which can enhance collaboration among team members.
3
Adopt a modular approach by exporting a single component per file to maintain code organization.
This practice improves maintainability and clarity in the codebase, especially when working with complex components like the Emoji Picker.
4
Implement a robust build pipeline with tools like webpack to streamline development processes.
A modern build pipeline can help manage dependencies and reduce conflicts, making it easier to integrate new technologies like React into existing workflows.

Common Pitfalls

1
Failing to properly integrate React into an existing workflow can lead to significant merge conflicts and dependency management issues.
This often occurs when teams attempt to adopt new technologies without a clear strategy for managing existing codebases, highlighting the importance of planning and gradual integration.

Related Concepts

Frontend Development With React
Performance Optimization Techniques
Component-based Architecture