Using Electron for Cross-Platform App Development

Electron for cross-platform app development: benefits, challenges, and lessons learned

If you have a web app and want to create a desktop version, Electron is a great option. Electron is an open-source app development framework that lets you create native and cross-platform apps using only web-based technologies such as JavaScript, HTML, and CSS. It renders apps on the desktop using the open-source Chromium web browser. 

You’re probably running one or more Electron apps on your computer right now without even knowing it. In this article, I’ll share our experience using it to help a client quickly create a desktop solution and discuss some of the pros and cons of Electron compared to other options. 

From web app to desktop app in record time

We recently worked with a client who needed to build a desktop app as a companion to their web app. Part of the product’s value proposition is to keep track of users’ locations in a shared virtual space. Unfortunately, when a user closed their browser, their location would disappear. It wasn’t persisted separately on a server. They also wouldn’t get notifications, which are a key value driver for this particular app.

To solve this challenge, they wanted to create a desktop app that could run in the background, enabling users to stay connected and get notifications without having to keep a browser open. However, developing separate native apps for Windows, Linux, and macOS was not an option due to time and budget constraints.

We chose Electron to solve this challenge. If you already have a web app, and especially if you have a team of web developers, Electron makes it extremely easy to create and maintain a desktop version of your software. Apps created with Electron can run on Mac, Windows, and Linux machines with little modification. We found that porting the client’s web app using Electron was fast and simple, producing a robust result that solved the client’s needs.

Join the club

Electron is extremely flexible, well understood, and uses standard languages and frameworks that web developers are familiar with. It enables access to native components such as notifications, tray permissions, cameras, and so on. You can also use the processor at a much lower level than you can with a web app in the browser and run native code when needed in many cases. For example, one of my colleagues is working on audio noise cancellation capabilities, which run as binaries that can be attached to the Electron app and run across platforms. 

Because it’s so fast and cheap to build with Electron in many cases, it’s very useful for creating prototypes and getting validation from customers. At GenUI, we like to start small, build iteratively, and validate as we go, and Electron can be a great tool for that process. At the end of the day, we might decide to transition to a different solution, or the final app might be based on Electron. 

The fact that Discord, Slack, Microsoft, Facebook, and other household names use electron to build desktop apps used by millions demonstrates that it is, at the very least, one viable approach to building cross-platform solutions. Many of these organizations have more than enough budget to build native apps. However, they choose to use Electron because it can deliver most of the functionality of a native app for a fraction of the cost, and most modern computers have no problem running Chromium. 

The hidden value of Electron

Many critiques of Electron from the perspective of pure performance tend to overlook the cost, utility, and organizational realities faced by real-world dev teams. In most scenarios, if you want to target Windows, Linux, and Mac—and keep a web app running at the same time—the costs can be astronomical. You’ll be creating and maintaining four separate codebases. 

The benefits of this tradeoff become even clearer when you dig a bit deeper into the operational side. If your development stack and personnel choices to date have all been based on web technologies, dipping into native development may be largely new for you. You may have to rethink your whole approach to development.

It even comes down to knowing who to hire. Developers who specialize in a specific technology stack tend to know how to hire others like themselves. But they may have no idea what constitutes competency in another arena. Suddenly, your organization faces the need to learn not just one new domain, but several at once. That’s a tall order and a dealbreaker for many products.

With Electron, you can avoid all that complexity. Most businesses of any size have a web team already. They can continue to use web technologies and pipelines to build new apps, all on a shared codebase. If the team needs to staff up, it won’t need as many people, and it will have an easier time hiring based on technologies it’s already using. 

These are the kinds of business considerations that make Electron attractive. It’s a classic 80/20 situation. If you can get 80 percent of the functionality and performance of a native app for 20 percent of the cost, most people are going to take that deal. And in many cases, it’s going to be a choice between an Electron app or no desktop app. Building native isn't an option.

How heavy is an Electron (app)?

Although it’s very powerful and can meet a wide range of needs, Electron isn’t a perfect solution for every cross-platform development scenario. In particular, Chromium can be a bit of a resource hog. Additionally, JavaScript is not going to win any races next to Swift for Mac or C# for Windows.

An Electron app is typically going to use more CPU, RAM, and memory than a comparable native app—although this is not always the case given that resource usage can be controlled with development and testing best practices.

However, there are scenarios where it’s not the right solution. For example, it might not be a great fit if…

• The app is extremely processor-intensive, leaving insufficient headroom for the browser
• Your target use case relies on lower-end hardware that will struggle to run Chromium or will have issues downloading a relatively large install package
• You’re building a game or VR application that needs peak performance
• You need to access the full spectrum of native features

If Electron isn’t a good fit, another newer option is to use React Native, which we also considered for the client application I discussed earlier. Like Electron, it uses React.js and tends to be more performant than a Chromium-based Electron app. However, in our experience, it’s substantially more labor-intensive to take a web app to the desktop using React Native. The business logic and the data flows can be the same between React Native apps running on different operating systems, but the rendering layer needs to be customized for each one. Still, React Native is super powerful and we expect to see it grow substantially in the coming years. 

Try it, you’ll like it

If you’ve got web skills or a web app in-house, Electron makes cross-platform apps shockingly easy to build and maintain. Speed of development, ease of use, and low barriers to entry make it highly attractive in a wide range of scenarios. It’s especially appropriate for small or mid-sized businesses, innovation initiatives, or any company or project with constraints around budget, deadlines, and developer staffing. I’m hard-pressed to think of an organization that doesn’t face some of those challenges, so I believe that Electron should be on everyone’s radar. 

Get in touch to talk about the right technology for taking your product to the next level. We’d love to hear from you.