When a rewrite isn’t: rebuilding Slack on the desktop

Conventional wisdom holds that you should never rewrite your code from scratch, and that’s good advice. Time spent rewriting something that already works is time that won’t be spent making our customers working lives simpler, more pleasant, and more productive. And running code knows things: hard-won knowledge gained through billions of hours of cumulative usage…

Slack logo
Slack
•
Mark Christian
•11 min read•advanced•
--
•View Original
ChefHTMLJavaScriptjQueryReactReduxWebSocket

Overview

The article discusses the comprehensive rebuilding of Slack's desktop application, emphasizing the transition from an outdated architecture to a modern framework using React. It highlights the challenges faced during this process, including performance issues and the need for a multi-workspace architecture, and outlines the incremental approach taken to modernize the application without a complete rewrite.

What You'll Learn

1

How to incrementally modernize a legacy codebase while maintaining existing functionality

2

Why using React can simplify UI updates and improve performance

3

How to manage multiple workspaces within a single application process

Prerequisites & Requirements

  • Understanding of React and modern JavaScript frameworks
  • Experience with application architecture and performance optimization

Key Questions Answered

What architectural shortcomings did Slack's original desktop app have?
The original Slack desktop app suffered from manual DOM updates, eager data loading, and multiple processes for multiple workspaces. These issues led to performance inefficiencies and a cumbersome user experience, necessitating a complete architectural overhaul.
How did Slack manage to modernize its application without a complete rewrite?
Slack adopted an incremental modernization strategy, creating a 'modern' section of the codebase while keeping the existing codebase intact. This approach allowed for gradual updates and feature releases, ensuring continuous functionality and user experience improvements.
What role does Redux play in Slack's new architecture?
Redux serves as a state management solution that allows Slack to model individual workspaces as separate stores. This abstraction simplifies data handling and connectivity management across multiple workspaces without the need for separate Electron processes.
What strategies were used to ensure interoperability between old and new code?
Slack implemented strict rules where old code cannot directly import new code and vice versa. This was managed through a legacy-interop system that allowed gradual adaptation and integration of new features without disrupting existing functionality.

Key Statistics & Figures

Memory usage improvement
Exact percentage not specified
The article mentions that the new version of Slack has significantly improved memory usage compared to the old version.

Technologies & Tools

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

Frontend
React
Used for building UI components in the new version of Slack.
Frontend
Redux
Utilized for managing application state across multiple workspaces.
Desktop Application Framework
Electron
Originally used for the Slack desktop client, but restructured in the new version.

Key Actionable Insights

1
Adopt an incremental approach to modernizing legacy systems to minimize disruption.
This strategy allows teams to deliver value continuously while gradually improving the system's architecture, as demonstrated by Slack's successful rollout of new features.
2
Utilize modern frameworks like React to streamline UI updates and enhance performance.
React's component-based architecture facilitates easier maintenance and reduces the likelihood of errors during data updates, which was a significant issue in Slack's original app.
3
Implement a robust state management solution like Redux for complex applications.
Using Redux can help manage application state effectively, especially in scenarios involving multiple user workspaces, as seen in Slack's new architecture.

Common Pitfalls

1
Failing to maintain a clear separation between old and new code can lead to a tangled codebase.
This can complicate future updates and make it difficult to manage the application effectively. Establishing strict rules for code interoperability, as Slack did, helps mitigate this risk.

Related Concepts

Incremental Modernization Strategies
State Management With Redux
Component-based Architecture With React