Electron Software Framework: The Best Way to Build Desktop Apps?
03.11.2022
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.
Electron revolutionized how desktop apps are built today by allowing developers to build desktop apps using JavaScript, HTML, and CSS. This has further simplified the way cross-platform desktop apps are built today.
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.
Even though GitHub will be sunsetting Atom at the end of 2022, the Electron software framework still remains popular — with 9.57% of developers using it, according to Statista.
At its core, Electron is based on Chromium and Node.js, which are packaged into a desktop app. Since Chromium powers Google Chrome and Node.js is one of the most popular server-side JavaScript engines, basing Electron on them is the best choice, as both are well-maintained, mature, and reliable.
Electron allows developers to use JavaScript on the front end, just like when developing a website. It also lets you use Node.js for accessing files and other system-related operations. Because the Electron software framework allows you to use JavaScript for everything, it has become a popular way to create desktop apps.
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.
Amazing Performance
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
Since Electron allows developers to build desktop apps using standard web technologies — HTML5, CSS, and JavaScript — using it is pretty easy. Developers can get up and running in no time.
Speed
When compared to standard desktop app development, it takes a lot less time to build a desktop app with Electron.
Since Electron is written in JavaScript — one of the most popular languages among software developers — debugging and optimization are also fast and easy.
Automatic Updates
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.
Size
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.
Resource Consumption
Besides being large in size, apps built using the Electron software framework consume a lot of CPU and RAM resources. They run multiple instances of JavaScript at the same time, which can slow down the app. This can frustrate some users and make them abandon your app in favor of something else.
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
Many companies all over the world benefit from Electron-based desktop apps. Let’s explore some of the best examples of apps built with this JavaScript framework.
WordPress
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.
Ghost
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.
Slack
Slack — the massive business messaging tool — has built its macOS desktop app using Electron. The macOS app provides better and faster performance, unlike the browser experience.
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.
Conclusion
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.
FAQs:
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.