Multi-platform Development (Node-GTK)

About this Series

If you haven't read the intro, I discuss a lot of the core information about this, I have included the Raw Stats in each of the blog posts so you can easily reference it while reading about each of the products.

Raw Stats

Platform	AppImage File Size	Hello Memory AppImage	Hello Memory Unbundled	Graphic AppImage	Graphic Unbundled
Electron	97 Megs	203	129	401	316
NW.JS	110 Megs	274	163	515	389
Tauri	71 Megs	192	52	364	301
NodeGui	47 Megs	437	53	760	467
Yue	19 Megs	59	43	302	292
Node-GTK	100 Megs	85	70	90	89
Flutter	70 Megs	124	53	337	321

Thoughts on Node-GTK

Node-GTK is one of the harder frameworks to get started on if you are not familiar with GTK. The docs and examples on the site are pretty much non-existent, however the native GTK docs (v3 & v4) themselves are decent, and you can also look up the docs for Python's PyGObject and do simple conversions from any of these into JavaScript. Getting started to having a fully scrolling GTK app with 60 images dynamically sized from > 1000x1000 in multiple columns to 200x200 each took me only a couple hours.

I just recently (as in right about in time to publish this) found out that you can use the Node REPL to actually get a lot of help on the GTK classes. So it is a tad easier to use than I original expected.

GTK Versions

You have the choice of using either GTK3 or GTK4, when you get the reference, you can choose which version dynamically. Initially I only had GTK3 on my system, but I did install the couple libraries from GTK4 at the end and verified it also worked well. All tests were done using GTK3, because that was what my AppImage was setup for. I might do more work in the future and do a full GTK4 sample...

This is also the only app which killed my entire desktop session while developing it. It force me to logout, (which then closed all programs), and then re-login. Since my primary desktop is GTK based, apparently loading 60 images that are > 1000x1000 and trying to have it lay it out next to each other means I exceeded the (unknown by me at the time) hard GTK3 window limit of 32,768 x 32,768 and GTK decided it didn't like that in the slightest... Ah, well, it was my mistake, nothing ventured nothing gained...

Visual Development

In addition one thing that is kinda cool is that not only can you create your UI using fully JavaScript, but you can use Glade/ Cambalache .UI files and then attach events or change properties of the layout from JavaScript.

Speed

The application actually performs extremely well, and was pretty close to tied in startup speed with Yue. Both started up in under a second and had already displayed about 30 of the 60 images in the scroll list (and had loaded all 60). In all my tests it was extremely stable (not a single crash beyond me killing my session I mentioned earlier). I was very surprised at the memory, I tested it multiple times especially the AppImage, and those were the worst values I got. I suspect that all the other projects kept the entire 60 1000x1000+ images in memory, and then displayed them at 200x200, where my GTK3 example, it sized it to 200x200 so its memory usage was drastically smaller. Either way I was very pleasantly surprised by how lean Node-GTK ran even in an AppImage...

Development Status

This is listed as Beta software, and not as well maintained as something like Electron or NW.JS. Also based on the issues there are a number of potential issues like WebSockets not working after the main loop has started (question is, what other issues are present with the timing loop). Unfortunately Node was never designed for a "desktop" application, so it doesn't always play well with the native gui message loops. However, this was reported for the GTK3. It is possible based on the way the GTK4 sample is setup, which actually sets up a secondary loop, that there is no issues. In addition it also sounds like some introspection things might not be fully working, however my understanding of GTK is very limited so the issues weren't as clear to me what wasn't working as the issues for all the other frameworks. Finally, it is hard to know the support of Windows, I believe it is hit or miss, but the author has instructions on how to build for Windows, but my guess based on the issue and docs, is that it still doesn't quite work properly...

In addition there is a React project that supposedly takes a react layout and allows it to create a node-gtk layout. If it works (which I didn't try), this would at least help those that like to program in React.

Update (at time of publication)

I have started a project called Node-GTK-Svelte, it basically allows you to run GTK interface from Svelte. The interesting thing I that I've not only have a custom <gtk> component which can instantiate any of the gtk objects and assigns events and properties. But I've also been devising a HTML compatibility layer, so I can reuse my svelte code in either Electron, NW, or now even GTK. So this:

Creates this:

Summary

Node-GTK is a serious contender in this race, if the developer could get more people helping on the project it easily could become the best solution for Node projects that need a GUI. It even can load in the current OS's browser (like Tauri does) if you need access to a browser. I'm going to be playing a lot more with this project, and sending in PR's if I can help out.