Electron implements a multi-process model composed of the main and renderer processes, which is similar to the Chromium browser.Įach application’s window is a render process, which isolates the code execution at window level. How Electron worksĮlectron embeds Chromium and Node.js in its binary, enabling web developers to write desktop applications without writing native code.

VS Code, Slack, Twitch, and many other popular desktop applications are built using Electron. Since its release in 2013, Electron has grown to become one of the most-used frameworks for building cross-platform desktop applications. Similarly, we’ve seen JavaScript grow beyond the browser with Node.js, Deno, and React Native.Įlectron.js is one of these frameworks. In the last few years, JavaScript usage has dramatically increased within the browser realm, largely with the help of libraries and frameworks like React, Vue, and Angular. Note: You can follow along with this GitHub repository. The blueprint presented in this article is the outcome of an ongoing effort to find an approach that enables me, a solo developer, to manage the complexity of the app and meet performance requirements by leveraging standard web tooling.

We’ll analyze the shortcomings of each and introduce an architecture that aims to tackle them.

In this article, we’ll discuss the trade-offs of different architectural approaches for building desktop applications with Electron. Developing taggr required me to navigate up from the lowest level of app complexity, trying out multiple architectural approaches and exploring the limitations of each. Advanced Electron.js architectureĪ while back, I began working on a side project called taggr, a completely offline, interactive photo exploration app. Alain Perkaz Follow A passionate and disciplined software engineer.

Electron node js version