Building Hybrid Applications with Electron

Today we’ve just shipped a new version of the Slack Desktop application for macOS. We built it with Electron, and, as a result, it’s faster, sports a frameless look, and has a number of behind-the-scenes improvements to make for a much better Slack experience. There are, of course, different ways to build desktop applications with…

Slack logo
Slack
•
Anaïs Betts
•8 min read•advanced•
--
•View Original
ChefCoffeeScriptHTMLHTTP/2JavaScriptNode.jsReactReduxTypeScript

Overview

This article discusses the development of the Slack Desktop application using Electron, highlighting its hybrid architecture that combines local and remote assets. It covers the technology stack, the transition from previous frameworks, and the benefits of using Electron for building cross-platform applications.

What You'll Learn

1

How to build hybrid applications using Electron

2

Why to use the Chromium multi-process model in desktop applications

3

When to implement security boundaries in Electron applications

Prerequisites & Requirements

  • Understanding of web technologies and JavaScript frameworks
  • Familiarity with Electron and Node.js(optional)

Key Questions Answered

What are the advantages of using Electron for desktop applications?
Electron allows developers to build cross-platform desktop applications using web technologies, providing a unified codebase across macOS, Windows, and Linux. This approach enables rapid iteration and access to native OS features while leveraging the extensive ecosystem of web development.
How does Slack ensure security in its Electron application?
Slack uses the WebView element in Electron to create a security boundary, preventing remote content from directly accessing desktop features and Node.js. This is achieved by running a preload script that exposes a controlled API to the web application, ensuring that only specific methods are accessible.
What is the role of the electron-remote library in Slack's architecture?
The electron-remote library facilitates communication between different processes in the Slack application by using ES6 Proxy Objects. This allows method calls to be sent as messages to remote renderers, simplifying the API integration while maintaining security.

Technologies & Tools

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

Framework
Electron
Used to build the Slack Desktop application, combining Chromium's rendering engine and Node.js.
Frontend
React
Used for building the user interface of the Slack application.
Programming Language
Typescript
Currently being incrementally adopted in the Slack application for better type safety.

Key Actionable Insights

1
Implementing a hybrid architecture can significantly enhance the performance and flexibility of desktop applications.
By combining local and remote assets, developers can ensure that applications remain responsive while also being able to update features and content dynamically without requiring users to download new versions.
2
Utilizing the Chromium multi-process model can improve application stability and user experience.
This model allows individual processes to be restarted without affecting the entire application, which is crucial for maintaining performance and reliability in applications with multiple user accounts.

Common Pitfalls

1
Failing to properly secure APIs exposed to remote content can lead to vulnerabilities.
It's essential to audit the APIs and ensure that sensitive Node.js modules are not leaked, as this could allow malicious actors to exploit the application.

Related Concepts

Hybrid Application Architecture
Electron Security Practices
Cross-platform Development