A personal thought on how we should use web versions of apps rather than hogging our beloved RAM with multiple instances of Chromium ✨
The year is 2019 and there will be at least one Electron-based application installed on people's computer. Maybe it's Slack, WhatsApp Desktop, Visual Studio Code, GitKraken, or Discord. Do open your start menu, Launchpad, or your applications menu and list how many Electron-based apps you have. I have ~15 Electron-based apps on my laptop. Not my greatest achievement.
- What is Electron 🤔
- To use or not to use Electron 🏓
- Testing and comparing 👏🏻
- Test results 😱
- Verdict 👋🏻
Skip to "To use or not to use Electron" section if you know about Electron.
For the uninitiated, Electron is a framework for creating desktop apps using web technologies made by the folks from GitHub. Electron is based on Node.js (or Node) and Chromium, which powers the infamous Google Chrome browser. In other words, use your existing HTML, CSS, and JS knowledge to create cross platform desktop apps. There are a lot of apps made using this framework, some of which I've listed before. You can see the list of apps made using Electron on their website.
Because of its multi-platform target, lots of people and corporations create their next app using Electron, some even migrate their existing apps to one. For example, Discord app is available for macOS, Linux, Windows, and even as a web app (note the blog post cover image). Just by using one codebase and you can build for every platform, no need to have multiple teams to create specific platforms. Pretty cool, right?
Just like other frameworks, Electron has its pros and cons. Do a quick search on "should i use electron" and you'll see that people have mixed thoughts about whether they should or shouldn't create or use Electron-based apps. Here are some personal picks from the search results:
- What Is Electron and Why Should We Use it? - DZone Web Dev
- Electron is Cancer – Commit Log
- The desktop belongs to Electron - The Verge
- Defeating Electron - Felix Rieseberg
Basically, an Electron app is a web app (HTML, CSS, and JS files) bundled with its own Chromium and Node. Not to mention that the size of the Electron package itself is ~200 megabytes measured on Package Phobia, excluding web app files (GitKraken app size on macOS can go up to ~500 MB). Which means that if you have Slack, WhatsApp Desktop, Visual Studio Code, GitKraken, and Discord installed, you have five separate browsers for five separate apps, ~200-500 MB for each app, which totals around a gigabyte or more. That's just five apps, and here I am with 15 Electron-based apps installed on my MacBook, totalling around ~3.5 GB.
Aside from storage usage, Electron apps are famous for its hefty usage of RAM, especially the Slack desktop app. Just like Google Chrome, Electron-based apps are memory hoarders which spawns multiple child processes (or helpers) for the app to work. For comparison, the Slack desktop app uses an average of 300-400 MB on idle, the equivalent of my Google Chrome instance, just counting the empty new tab and browser instance. So if you run all five apps, it'll take around ~2 GB of memory on idle. Imagine also opening multiple Chrome tabs.
So the obvious reason why people have second thoughts for Electron apps is the app size and memory consumption. But hold on, some apps have web versions of it, like Discord, Slack, and so on. They look the same, they work the same, so what's the difference?
Here's the desktop version of Discord:
And here's the web version of Discord:
It's exactly the same! So which one should I use? Which one consumes the most memory? How about storage?
I decided to test and log the memory usages for Electron apps versus web apps. It's not scientifically accurate or concrete, but this'll do. Here's the specs I use for testing:
- MacBook Pro Early 2015, 2.7 GHz Intel Core i5, 8 GB 1867 MHz DDR3, 120 GB flash storage
- Google Chrome Dev* (Version 73.0.3683.20, 64-bit)
*) with several third-party extensions and Chrome apps installed
- Discord (Version 0.0.254)
- Slack (Version 3.3.7, App Store)
- Spotify** (Version 184.108.40.206.g936eab8d)
- WhatsApp (Version 0.3.1850)
**) technically, Spotify uses Chromium Embedded Framework (CEF), but it's still Chromium nonetheless
For retrieving the memory consumption, I opened all four desktop apps and the web versions on each tab on Google Chrome, summed all the memory usage of the app (main process + all child processes).
All apps on desktop and web versions are opened and interacted with the same behavior: Discord and Slack opening a text channel, Spotify opening a playlist, and WhatsApp opening a conversation.
Click on the hyperlinked values to view screenshot of the activity monitor.
|App||Desktop (avg.)||Chrome Tab (avg.)|
|Total||~1.7 GB||~1.5 GB|
Looks like both desktop and web versions are slightly the same in memory consumption. I even tried restarting Chrome and reopened the tabs, restarting the desktop apps, even restarting my computer, yet the results are averagely the same.
Storage wise, the web version has the advantage of not storing another Chromium binaries for each app, so you'll save ~300-500 MB per app. So if you use the web version of Slack, Discord, and WhatsApp, you're saving a gigabyte of storage.
Feature wise, the desktop versions has the advantage like native notifications, better hardware API controls, and better usage of third-party libraries bundled with the app. Take for example, the desktop version of Discord is bundled with proprietary libraries for better audio and microphone support. So the desktop version is recommended for high quality voice chats, but if you're just using it for text chats, the web version should suffice.
Both versions has its pros and cons. Some apps are great on the web version, some works better on the desktop version. It all goes back to what you need and what you're comfortable with. Use web versions of apps if possible. If needed, use desktop versions. Oh and it looks cool having multiple apps on one window. Plus dark mode on Chrome!
Also, vote on the tweet poll below (dev.to can't view the poll):
Griko Nibras@griko_nibrasHow many @electronjs based apps installed on your machine?
(e.g. Slack, Spotify, VS Code, Insomnia, Discord, etc.)14:57 PM - 06 Feb 2019