Is Electron the Best Desktop Framework to Use in 2021?
The advantages and disadvantages of using Electron in 2021.
If you are trying to use JavaScript to build a desktop app, chances are you have at least considered using Electron. Released by GitHub in 2013 for their Atom editor, Electron has been used by many massive companies like Microsoft, Discord, and Slack. This article aims to give an objective overview of Electron, along with its advantages and disadvantages. This article also gives overviews of a few alternatives and whether you might want to use them instead.
In 2013, GitHub was trying to make a new, sleek editor, called Atom. They also wanted to use web technologies to build it. Unfortunately, there were not that many good tools for building apps with web technologies back then. There were very few ways of embedding a browser, and many were not built that well. GitHub decided to build their own tool for this and named it Atom-Shell. It grew quickly, even when Atom got hit hard by VS Code. Later, it was renamed Electron, and that is how it is now.
Electron is essentially Chromium along with Node.js packaged into a desktop app. Chromium is what powers Chrome and Node.js is the most popular server-side JavaScript engine. Both of these projects are well maintained and mature, so they are optimized and reliable tools.
Electron allows you to use JavaScript on the front end, just like a normal website. It also lets you use Node.js for accessing files and other system-related operations. Because Electron allows you to use JavaScript for everything, it has become popular as a way to make JavaScript desktop apps.
However, because Electron bundles an entire browser and Node.js, Electron tends to create large apps. A bare-bones Electron app usually weighs about 120MB uncompressed.
In comparison, Flutter, another popular cross-platform framework, has apps as small as 5MB. Also, because Electron is running multiple JavaScript instances at once, it consumes a large amount of RAM and CPU. As you can see, there are benefits and drawbacks to using Electron.
Should you use Electron?
Pros
- Big community
- Trusted by Microsoft, Discord, Slack, and more
- Low learning curve
- Allows use of the web ecosystem
- Integrates Node.js
Cons
- Large (~120MB) installation size
- Heavy; Uses a lot of RAM and CPU
- No mobile support
- Somewhat insecure; Allows users to see inside the application easily
- No way to integrate native code outside of Node.js FFI
First of all, there is a large community, including multiple companies, behind Electron. This means there are tons of open source tools, tutorials, and more. You can also utilize most of the web ecosystem’s tools and tutorials. Electron also has a low learning curve because if you know JavaScript, you know Electron. Another advantage is that Electron directly integrates Node.js, which allows you to use the full power of JavaScript outside of a sandbox.
However, these advantages come with some drawbacks. First, Electron can be heavy and slow. Electron apps have a ~120MB base size and a lot of RAM and CPU usage. Electron RAM consumption can be as high as hundreds of megabytes.
Another one of the biggest disadvantages of Electron is that it does not have any mobile support. You can deploy Electron apps to Mac, Windows, and Linux (excluding some distros like PureOS), but it can’t be deployed to IOS or Android. There are solutions to this, like using Ionic, but many of those solutions require changing a lot of code and tooling.
Also, if you have an application with a focus on security, Electron might not be your best bet. Electron allows users to access the source code easily through the developer tools and with the ASAR source files. Of course, the same thing could be done with web applications, but some desktop frameworks, like Tauri, make it harder to access the source.
Finally, if you are trying to use other languages as a replacement for Node.js in Electron, you will have some trouble. You can use other languages, but only through WebAssembly or Node.js FFI, which can be hard to set up and decrease performance.
As you can see, Electron is good in many ways, but not so good in others. Overall, if you want to use JavaScript everywhere, and don’t care much about performance or security, Electron is a pretty good choice. However, if you have any performance considerations, need mobile support, or want optimal security, you probably will not want to use Electron.
Alternatives to Electron
Tauri
There are two major differences between Electron and Tauri.
The first is that Tauri uses the browser built into the operating system, which heavily decreases the size of the app and can increase its performance.
The second is that Tauri’s backend is built in Rust instead of Node.js. This makes it possible to use Rust directly without resorting to Node.js FFI or WASM. This also makes Tauri faster and more memory efficient. Tauri apps can be as small as a few megabytes, and they often have less than half the memory usage of Electron apps.
Tauri can also be more secure because it obfuscates source code and disables developer tools in production. Node.js isn’t included in Tauri by default, but you can add it. But there are still disadvantages to Tauri. The first issue is that because Tauri does not always use Chromium, you have to support multiple browsers.
The other disadvantage is that Tauri is newer and does not have as big of a community. If you are willing to try out a new technology, Tauri is a great choice.
Pros
- Way smaller app and less resource usage
- More secure
- Integrates with Rust
Cons
- Some users will not use Chrome
- Smaller community
Progressive Web App
Progressive Web Apps or PWAs are progressively enhanced web apps that are natively supported by most browsers.
Instead of being packaged into an installable file, browsers can detect PWAs when you visit their website and show a prompt to install them. You can also install PWAs from app stores like the Microsoft App Store and Google Play.
Installing from the browser works because PWAs are essentially websites with a few more features. This means that users can use the basic features with the website, and if they want more, they can install the PWA. That is why they are progressively enhanced.
There are many advantages of creating a PWA. First, they are tiny. Since a PWA is just as big as your website’s resources, you can make complete apps that are as small as a few hundred kilobytes.
Another advantage is that updating a PWA is as easy as updating the website. Instead of having to make an automatic updater, you can just configure the caching software to update the cache whenever there is an update. PWAs are also easy to distribute to many different platforms, including all major mobile and desktop platforms.
There are some disadvantages of PWAs too.
First, they have limited access to native APIs, and browser support for those APIs can be limited. Second, PWAs are not supported entirely in Firefox.
Finally, PWAs currently cannot be distributed in many common forms, although there has been great progress in allowing PWAs to be packaged into formats like MSIX packages. If you want to use the future of web apps, want easy deployment and updating, or want mobile support, a PWA is a great option.
Pros
- Installable directly from website prompt
- Easily distributed through app stores
- Automatically works as a website too
- Very small (can be <1MB)
- Easy updating
- Supports desktop and mobile
Cons
- Limited native API access
- No PWA support in Firefox
- Hard to be distributed as a file-based installer
Conclusion
Electron can be helpful in some circumstances. However, it is not always the best tool. It all depends on the needs and focuses in your app.
If you prefer working with projects that have a larger community, Electron is a great choice. If you use Rust and want fast desktop web apps, Tauri works well. Finally, if you want to get to market quickly, mobile support, and don’t want to maintain two versions of your app, PWAs might work well.
Thank you for reading, and I have hoped you learned something from this.
More content at plainenglish.io
