Growing Pains: Migrating Slack’s Desktop App to BrowserView

Recently Slack on the desktop has been going through an awkward adolescence. Instead of flailing limbs and pitch squeaks, ours has manifested in ways rather more grim: inexplicably failing to render content, reloading during common operations, and error screens that aren’t actionable. The only silver lining has been being on the receiving end of some…

Slack logo
Slack
•
Charlie Hess
•15 min read•intermediate•
--
•View Original
ChefCSSJavaScriptReactReduxTypeScript

Overview

The article discusses the migration of Slack's desktop app from using the webview feature of Electron to the more efficient BrowserView. It highlights the challenges faced during this transition, the architectural decisions made, and the improvements in performance and user experience resulting from the upgrade.

What You'll Learn

1

How to transition from webview to BrowserView in an Electron app

2

Why using Redux with electron-redux can simplify state management across processes

3

When to implement observables for managing asynchronous actions in Redux

Prerequisites & Requirements

  • Understanding of Electron architecture and Redux
  • Familiarity with TypeScript and React(optional)

Key Questions Answered

What were the main issues with Slack's original desktop app architecture?
The original architecture relied heavily on the webview feature of Electron, which led to various issues such as renderer crashes, focus problems, and inefficient resource usage. These problems prompted the need for a significant overhaul to improve performance and user experience.
How does BrowserView improve upon the webview feature in Electron?
BrowserView behaves more like a native window than a DOM element, allowing for better performance and resource management. It enables more efficient rendering and interaction, which is crucial for applications like Slack that require real-time communication.
How does Slack manage state across multiple processes in its app?
Slack uses Redux in conjunction with electron-redux to create a centralized store that synchronizes state across multiple processes. This approach allows for consistent state management without the need for complex serialization, making the application more efficient.

Key Statistics & Figures

Code reuse after migration
70%
The migration from webview to BrowserView allowed Slack to reuse over 70% of its existing codebase while addressing performance issues.

Technologies & Tools

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

Framework
Electron
Used to build the desktop application and manage the rendering processes.
State Management
Redux
Used for managing application state across multiple processes.
Programming Language
Typescript
Facilitates type-checking and improves code quality during the refactor.
Frontend Library
React
Used to build the user interface components of the Slack desktop app.

Key Actionable Insights

1
Consider migrating from webview to BrowserView if your Electron app is experiencing performance issues.
BrowserView offers better resource management and performance, especially for applications that require real-time updates and interactions.
2
Utilize Redux and electron-redux to streamline state management in multi-process Electron applications.
This approach simplifies the complexity of managing state across different processes, ensuring consistency and reducing bugs.
3
Implement observables for handling asynchronous actions in Redux to improve code clarity and maintainability.
Using libraries like redux-observable can help manage complex asynchronous workflows more effectively, leading to cleaner and more manageable code.

Common Pitfalls

1
Relying too heavily on webview can lead to performance issues and bugs.
Many developers may overlook the limitations of webview, leading to a suboptimal user experience. Transitioning to BrowserView can mitigate these issues.

Related Concepts

Electron Architecture
Redux State Management
Asynchronous Programming With Observables