GitHub’s Electron is rapidly gaining popularity for building cross-platform applications. An open source application shell for apps built using Web technologies, Electron is a spin-off of GitHub’s famed Atom editor.
Electron is based on Node.js and HTML5, so it has gained broad support; companies like Microsoft are using it to build its Visual Studio Code and Slack for the desktop endpoints of its collaboration platform. In fact, Electron is perhaps best thought of as a way to use Node.js to build and run desktop applications.
Architecturally, Electron is relatively simple: It uses a Chromium frame to wrap JavaScript code running on Node.js. This approach makes it relatively easy to bring familiar Web application technologies to the desktop, letting you quickly convert your existing code into a desktop tool, with Node.js providing low-level API access to the underlying operating system.
If you’ve built a single-page Web app that can run on Node.js, you can build and deliver an Electron app. While you can have multiple widows in Electron, they remain under the control of a main process and are displayed using separate renderers. Views are isolated from each other, so all communications between windows must take place through the main process.
Electron enables you to build relatively complex applications quickly. That’s not surprising because it was originally designed as the host for GitHub’s Atom development environment. It’s flexible enough to let you start simply, then build more complex code over time.
Spinning up Electron
An Electron application looks much like a Node.js module. It’s packaged using a derivative of the familiar NPM packager, with everything hosted in a single directory tree of scripts and HTML5 content. Your code starts with a main.js script, which manages windows and serves as your application's event hub. It’s where you handle messages from windows and from the underlying OS -- for example, shutting down your application cleanly when the last window is closed.
GitHub helps you get started with a prebuilt main.js, ready to hook in your own code. A prebuilt Electron download further simplifies matters, though you may want to build your own environment from scratch -- especially if you’re using Electron to write an application you plan on shipping to a wide community of users or as part of a commercial software platform.
You can use all of the built-in Node.js modules in an Electron application, along with extra Electron-specific modules for working with the host OS. In other words, you can bring all your Node.js skills to Electron, with only a short learning curve to handle its mix of main and renderer processes and how they communicate.
Much of the interprocess communication is handled by Electron’s IPC module, which can send messages either synchronously or asynchronously, opening channels between windows. This approach enables you to send content from isolated processes to the main process in order to access the underlying file system, letting you open and save files. It’s also a way of sending events between different renderers using the main process as a messaging hub.
One option to speed up development is to take advantage of Electron’s support for native Node.js modules. While most work out the box, Electron uses a different version of the V8 JavaScript engine, so you may need to look for a specific version (recent changes by the Node.js development team are likely to make this less of an issue). An electron-rebuild NPM module handles preparing native modules for use in Electron applications, though you can use NPM directly once you’ve adjusted a set of environment variables.
Testing and more
Debugging Electron apps used to be a problem. Electron is not part of a traditional build chain or development environment. While you can test code outside the Electron shell using a traditional browser and the F12 debugging tools, it’s not particularly convenient.
Luckily, the Chromium team has developed a shim for the WebDriver testing framework to allow Chromium to be used as an endpoint for WebDriver-automated tests. Using ChromeDriver, you can build automated tests for an Electron application into your build chain using the tools in Jenkins or in your preferred build engine, working with WebDriver frameworks such as Selenium.
Electron provides various APIs that work with OS-level features. Some offer hooks to file system features; if you’re building an editor in Electron, you can use the various recent file options offered by Windows and OS X. You can also hook into Windows features, such as its Toolbar player, so if your Electron app is a media app, your users can control playback, even when an app is minimized. Other options give you access to such UI features as toolbar progress bars or Linux launcher shortcuts.
Frameworks like Electron go a long way. They let you try out ideas on the Web before bringing them into desktop applications, while reducing the need to convert code to run on different platforms. They also simplify the distribution process, so it's easy to update applications on the fly. Plus, users always get the latest version -- Electron an ideal endpoint for a continuous build cycle.