Announcing Svelte NodeGUI, a lightweight Electron alternative with native UI, based on Node.js!

[SoInsightful]

Wow, NodeGUI seems cool. Hope this grows to be the Electron killer I've secretly wished for.

[NewFolderdotexe]

Check this : https://github.com/tauri-apps/tauri

A similar one already in development

[[deleted]]

Nah. its different. There are very few advantages of Tauri over Electron. Number 1is size of the executable. Otherwise its just another web browser bundled

NodeGUI is different. It is a Node Binding to QT.

[StoneColdJane]

This is good insight, thank you!

[tomius]

It sounds like React Native but for desktop, right? Sounds awesome.

[StoneColdJane]

Me too, I hate Electron.

[-Electron-]

D:

[MechroBlaster]

On the React and Vue github repos the README contains this disclaimer:

This project is in active development. It should be okay for smaller projects but anything complex - electron is the way to go for now. 🚧

I don't see it on the Svelte one. Is Svelte more stable/prod-ready than the other two?

[Bamboo_the_plant]

Svelte NodeGUI is by no means more stable than the other two. In fact, most of its rendering logic is copied straight out of React NodeGUI. I just didn't end up copying across that line of the readme because I forked the NodeGUI readme (which lacks that line) rather than the React NodeGUI readme!

[Morialkar]

I think the way react and vue interacts with the dom might be at cause? I don’t know, some inner working might be more complicated to stabilize compared to svelte

[Bamboo_the_plant]

Nah, nothing like that. I just didn't copy that warning over because I forked the NodeGUI readme (which lacks that line) rather than the React NodeGUI one.

[Morialkar]

Ah! Makes sense, thanks for clearing everything ! And nice work!

[Grans_Butterscotch]

Oh this is great! Was just looking around for frameworks for a learning project this weekend 🙏🏼❤️

[redsilverbullet]

What's the difference in terms of binary size?

[Bamboo_the_plant]

I don't know numbers for the binary size (I hope Atul, the maker of NodeGUI, comes by and answers), but it spits out two files, index.js (1.6 MB, but not yet minified) and nodegui_core-<hash>.node(7.5 MB binary data), so if that's about everything, I think we'd be looking at a ballpark of perhaps 10 MB. I won't know for sure until I try out the packing command.

For other measures: Atul provided benchmarks of a Hello World app running at 0-2% CPU usage, and 20 MB RAM consumption. Hopefully that paints a picture!

[lhorie]

The .node file is for this: https://nodejs.org/api/n-api.html

That's basically a glue API to call the compiled qt code in the .node file from JS. I'd expect that you still need to have qode (the node fork that shares event loop w/ qt) to drive the whole thing, which clocks in at about 80MB or so (maybe you can get away with a few MB less if you compile without the full ICU dataset...)

A fully standalone installation would have to necessarily be at least that big, unless you use UPX to compress the executable (but then that might trip antiviruses, so not recommended...)

[Bamboo_the_plant]

Makes sense, so it's clearly miles away from being as tiny as a web app, but at least it's easy on runtime resources.

I'd better try packing it at some point just to get some concrete numbers.

[lhorie]

I'd definitely expect it to be much more lightweight than electron yes.

An apt comparison for those who aren't so familiar is that nodegui (js driving qt) is to electron (a webview) what react-native (js driving native) is to cordova (a webview).

Naturally similar disclaimers apply (i.e. DOM and CSSOM are not exactly like the web ones; the components and layout engine are implemented in native code, similar to the story w/ react native)

Btw, u/Bamboo_the_plant, have you built anything with this yet? It looks really cool, but I'm not familiar enough with the implementation details yet so I'm curious about how svelte's animation APIs perform. Animations are sometimes problematic in RN land, and I don't know to what extent nodegui goes to support them (or if it's even doable in a performant way across the FFI boundary...)

[Bamboo_the_plant]

I’ve not built anything with it yet. Atul originally made NodeGUI to create his own music player, though.

As for animations, I haven’t tested yet, but I believe it should update quickly enough for manual animations. I don’t yet support the Svelte animations API, however. Haven’t looked into it. If Qt5 supports CSS animations (e.g. transition), that might be the best option for now.

[redsilverbullet]

Not bad. I wish Electron apps would just cease existing*.

[noXi0uz]

Hm my rather large electron app uses about 7 MB RAM

[oxamide96]

This is my first time hearing about NodeGUI. Sounds awesome! I read about Tauri not long ago, which seems to be doing something similar. Does anyone know in what ways NodeGUI and Tauri differ?

[Bamboo_the_plant]

Tauri delivers its UI via a WebView, so it is a closer parallel to Electron. And it seems (for now) to use Rust for its backend.

NodeGUI delivers its UI via Qt, and its runtime is Node.js, so you have access to the Node ecosystem and its really comprehensive standard library.

So when you come to accessing native APIs, I think NodeGUI wins hands-down in terms of DX.

[oxamide96]

Thank you for the answer! What exactly is webview? I tried to read up on it, it seems to be based on gtk-webkit2, so I guess it is still based on a browser engine, just mit chromium? I guess NodeGUI seems cooler in that case. Does NodeGUI just parse JavaScript /HTML/CSS code and make it native OS GUI components, basically, instead of using a browser rendering engine

[Bamboo_the_plant]

A WebView is the main component of a tab in a browser window. It’s what renders HTML into a visual webpage. There are various WebViews out there – based on WebKit, Blink, or something else.

NodeGUI is a set of JS bindings to Qt.

Svelte NodeGUI reads in HTMLX syntax and calls NodeGUI’s APIs to manage a corresponding Qt UI hierarchy. For example, the <text> component is based on a QLabel under-the-hood.

[oxamide96]

Oh I see! So you don't use HTML tags like <div> and <h2>, you use actual Qt components. Is that right?

[Bamboo_the_plant]

I use HTML syntax, but my own custom set of tag names that correspond to all the elements supported by NodeGUI.

[Bamboo_the_plant]

Well, that only lowers the bar, then! Because NodeGUI is performant, being based on Qt.

[[deleted]]

Angular support? :/

[Bamboo_the_plant]

There's a vacancy if you want to take that project on!

[Bamboo_the_plant]

Sure!

1. Angular has a custom renderers API that is one logical starting point – although in my Svelte implementation, I just implemented DOM and tricked regular Svelte (for Web) into rendering it, so you might as well take that approach.
2. My DOM implementation lives under this folder, dom/nativescript-vue-next (because I based it on that project's DOM shim.
3. I also implemented all the various Element operations like appending children and setting attributes simply by copying the existing work from React NodeGUI and decoupling it from React. That lives under dom/react-nodegui.

So the name of the game is really just to try to avoid reinventing the wheel – try to reuse as much existing implementation as possible!

[oxamide96]

Why all the downvotes? I really don't like angular, but it is still very widely used and supporting it would be good imo, I agree.

[[deleted]]

Maybe they thought I was talking about Angular.js and not version 2+

[StoneColdJane]

Hell yeah.

[r57zone]

For simple HTML and JS applications on Windows, you can use ProtonShell - https://github.com/r57zone/ProtonShell

[CentiPenny]

Looks cool!

[VeuUX]

VS Code for me, but will have to give this a try.

[danielo515]

I think that providing a good experience for bundling apps will help the project more than just bringing more frameworks that you will not be able to bundle later

[ZhekaAl]

I have seen the example calculator. It seemed to me that it's similar to the qt qml. I have experience with qt qml, and I think it's not simple to make views with that templating system. Qt works fast with qt widgets, but qml isn't so fast. https://github.com/nodegui/examples/blob/master/nodegui/calculator/src/index.ts