Electron Software Framework: The Best Way to Build Desktop Apps?
Building desktop apps is challenging, as the desktop isn’t just one thing. It encompasses 3 major operating systems (OS) — Windows, macOS, and Linux, all with multiple versions and numerous distributions. Building a cross-platform desktop app that worked on all of them was even more challenging (even for well-resourced teams), as each version of an operating system has its own quirks. All this changed in 2013 with the introduction of the Electron software framework.
In this blog post, we’ll explore Electron, how it works, and what makes the framework so popular. We’ll also look at a few examples and talk about the importance of the framework from the business and software development angles.
What is Electron and How Does it Work?
Electron (also spelled Electron.js and Electron JS) is a runtime framework that allows software developers to create cross-platform desktop apps using web technologies.
It’s an open-source project started by Cheng Zhao, an engineer at GitHub.
Almost 10 years ago, GitHub was trying to build a new text and source code called Atom using web technologies. Since there weren’t that many good tools for building these types of apps back then, GitHub decided to build its own and called it Atom-Shell. The tool quickly became popular and was renamed Electron.
Advantages of Electron
There’s no doubt that Electron’s popularity among software developers is well deserved. However, the experience of people online may be vastly different from yours. That’s why it’s crucial to make your own judgments about Electron. Before giving it a go, make sure you look at some of its advantages.
Like Flutter, cross-platform desktop apps built using Electron may work better and faster than native apps, at least in some cases.
However, this largely depends on how many components the desktop uses and whether or not it only loads the necessary ones.
Easy to Use
When compared to standard desktop app development, it takes a lot less time to build a desktop app with Electron.
Electron includes an autoUpdater component which allows the app to update itself automatically.
This is beneficial to both users and developers. Users don't need to spend time manually updating their apps, and developers can be sure that all users are using the latest version of their desktop app.
Disadvantages of Electron
However, not everything is perfect with Electron, as the framework has its own disadvantages. Some of the standout ones are listed below.
Electron-based apps bundle both Chromium and Node.js into the app. These two technologies make these types of apps much larger in size. This may discourage some users from downloading your app.
Lack of Mobile Support
These days, mobile apps dominate the modern Internet. Because of this, users tend to prefer mobile experiences.
At the moment, Electron has no mobile support, which means that developers will need to look at other options if they want to develop mobile-first apps. Flutter could be a great one, as it’s also a cross-platform framework, but for mobile operating systems — Android and iOS.
Electron from the Business Perspective
From a business point of view, the Electron software framework is a great choice. Existing developers can easily take on the challenge of building Electron-based desktop apps.
Hiring talent to build desktop apps is also easier if you're using Electron, as web developers — that are usually easier to hire than more specialized roles — can shift to building Electron quickly.
Software Built with Electron
WordPress, one of the original content management systems (CMS), relies on Electron for its desktop app.
While most people are used to using WordPress via their browser, WordPress for desktop provides an entirely different experience — free from the distractions of any other browser tabs. WordPress’ desktop app is also built using React.
Sticking to the CMS theme, Ghost is a platform that lets creators publish, share, and grow their content-based business. Its desktop app is also built on Electron.
The app provides a much better user experience than the web browser version, allowing its users to focus on creating content rather than dealing with the distractions of a web-based CMS. Ghost’s desktop app is also built using Node.
Because of this, Slack for desktop is a better choice for teams using macOS, especially ones looking to get better at organizing their work in a more focused workspace.
WhatsApp is another messaging app whose desktop version is built using Electron.
Building the desktop app using the Electron software framework has allowed Meta to provide more to their users by wrapping the desktop experience around a more streamlined framework.
Like any framework, Electron has its pros and cons. While some of the cons might scare people away from using it, remember that some of the largest tech companies are relying on Electron.
If you need help hiring a software development company specializing in Electron, you can use our vendor search tool. Alternatively, we can match you with 5 companies that fit your needs, for free, within 72 hours.
Q1. Is WhatsApp an Electron app?
Yes, the macOS desktop version of WhatsApp is built using Electron. Previously, the Windows desktop version of WhatsApp was also built using Electron, but the company recently released a new version of the desktop app built using the Universal Windows Platform (UWP).
Q2. What applications use Electron?
In addition to WordPress, Ghost, Slack, and WhatsApp, many other apps use Electron. Some standout examples include 1Password, Asana, Discord, Figma, Loom, Notion, and more. For even more apps, check out Electron's showcase page.
Q3. Which framework is best for Electron?
The best overall CSS UI libraries for Electron are Photon, Framework7, Antd, Semantic UI, React Desktop, and Bootstrap, according to Nucleus. However, the correct answer to this question depends mainly on the type of app you're building, as some frameworks may work better with Electron-based apps than others.
Need help selecting the right company?
We will do the work for you, all for free.
Tell us what you need