Quick look: Electron vs Qt/QML app memory usage

Your tpyical Memory Hog

In time of COVID-19 there is much less things to do if your country rules are to stay at home.
If you are lucky enough that you can work from home probably you have a bit more time that you need to fill with something that is not movies, games or eating.
One of those could be looking at what next framework you would use and if memory usage of that app should be any concern for you.
If all frameworks give you the same, should you choose the one that is more lightweight or should you wait for that bug report telling that memory usage of your app is too big and you need to optimize it? After all people can use RPI devices as a PC.

I worked quite a lot on optimizing apps that were written poorly and used too much memory. Those scenario today, in my experience, inevitably happen. Everyone is targeting to deliver more in less time and then performance and memory usage of an app usually become secondary…until they don’t.

But even in other cases putting yourself in a better starting position should be a sane choice. You don’t necessarily want your app being remembered as a ‘memory hog’, even if it is a very popular and successful ‘memory hog’.

But how much of a difference can a framework choice really make?

Qt/QML

QML is a declarative language that allows user interfaces to be described in terms of their visual components and how they interact and relate with one another. It is a highly readable language that was designed to enable components to be interconnected in a dynamic manner, and it allows components to be easily reused and customized within a user interface.

Having more than 6+ years of experience in using QML and still writing about it means that I still think it’s a great framework.
It’s cross-platform, use declarative language to write UI and is performant.
There is many ready modules that one can choose from and it is used to develop apps ranging from embedded to mobile.
It also compiles to a native app which should arguably perform better than a web app.

UniqCast IPTV cross platform solution made using Qt/QML

So will an app in Qt/QML be more lightweight?

Electron

Build cross-platform desktop apps with JavaScript, HTML, and CSS

You are either sold by this line or a frowning upon it but you do have some opinion on it. I’m personally very happy that we have this choice and I like to try it out from time to time.

It gives a power of using a known and very popular stack to build a desktop app. Electron covers Windows, Linux and MacOS platforms but you can already target mobile platforms like Android and iOS in a same way. If there is some kind of a WebView you are almost good to go, especially when you slap some high level framework on top of it.
Given that you obviously develop Web apps with same stack it has quite some benefits. Tooling is great and there is many developers that are doing the same. Given on how many Web frameworks you can choose from there is everything for everyone.

Electron is quite popular

However, you probably have read about Electron apps using quite some memory. Given that every Electron app packages a Chromium engine and Node.js run-time it’s not hard to guess why that might be the case. However, how much that really is today?

Testing

For this we are going to start with two simple apps from “Gets started” documentation. That is where I expect most people start, right?

Since this is kinda comparing apples and oranges best is to compare simplest app possible. At least that will tell you where you start. After that you are on your own and you should read Electron guides on optimizing your app or respective one for Qt/QML.

System

My Acer Swift 3 from 2016 (reason why I hope to see more lightweight apps)

i5–7200U CPU @ 2.50GHz
8GB RAM

For memory usage comparison we are going to use ps_mem on linux and we are going to build both in release mode.

Electron

Straight from https://www.electronjs.org/docs/tutorial/first-app#trying-this-example.

Electron Hello World app

ps_mem:

110.6 MiB + 237.5 MiB = 348.1 MiB electron (6)

Qt/QML

From https://doc.qt.io/qt-5/qml-tutorial1.html.
Actually, I combined it with https://doc.qt.io/qt-5/qml-qtquick-controls2-menubar.html. Since Electron came with Menu bar it only made sense to include on in Qt/QML app, even though the one in Electron is native!

QML Hello World

ps_mem:

43.0 MiB + 49.6 MiB = 92.6 MiB QMLHelloWorld

Conclusion

Well that was a quick one. And looks like our Hello world app in Qt/QML uses 3x less memory than Electron app in particular instance. Would be disappointing if that was not the case since we are comparing different technology stacks.

So will Qt/QML will solve all your memory problems? Doubt it. It should help though while also having many other benefits.

There is many other aspects that one has to consider when choosing a framework. One obvious benefit with Electron is ability to share code with Web platforms. Although Qt/QML with WebAssembly is getting interesting in that regard.

However here we are looking only at initial memory usage. And one would have to do a much bigger example to actually look how the memory usage scales. However given that Qt compiles to native apps it can be expected to perform better and in my experience that was always confirmed. QML and JS logic can also be extend by C++ so there is always options to make it even more performant.

In my opinion Qt/QML gives you more in many aspects but tooling and amount of developers on Web platforms will be quite hard to beat.

However if you are targeting embedded or low power platforms or just like your app being more lightweight for ‘free’, while still having benefits of a modern UI framework, Qt/QML should be a good starting choice.

Developer by day, architect at night — never satisfied

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store