Proton-Native vs Vuido vs NodeGUI
Tags: proton, react, nodegui, typescript
Published: 2019-08-28 23:12:34

_Image by <a href="https://pixabay.com/users/LUM3N-1066559/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=2303849">LUM3N</a> from <a href="https://pixabay.com/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=2303849">Pixabay</a>_

Last year we welcome a new library to make UI components using native widgets called [`libui`](https://github.com/andlabs/libui). It's written in C++, and has bindings with Node, called [`libui-node`](https://github.com/parro-it/libui-node), effectively allowing to develop desktop native applications with Javascript. Using `libui-node` two projects went live, one supporting `Vue` ([Vuido](https://github.com/mimecorg/vuido)) and other supporting `React` ([Proton Native](https://github.com/kusti8/proton-native)). Both use the same library, but neither is developed for the same team. Each one has a different team and a different approach.

Recently, a new Node library with Node bindings for creating UI components was announced, [`NodeGUI`](https://github.com/nodegui/nodegui). But the team wasn't creating a new widget library, instead, their goal it's to target bindings of Qt5 widgets. However, it's not the first project to bind Qt widgets in Node, that honor belongs to [`node-qt`](https://github.com/arturadib/node-qt), but the project was left behind. The same team provides a React library to work with NodeGUI, conveniently named [React NodeGUI](https://github.com/nodegui/react-nodegui). Additionally, another developer is making a library that makes NodeGUI work with Angular, [ng-qt](https://github.com/marcus-sa/ng-qt).

# Goal

## libui / node-libui

The `libui` motto is _a portable GUI library for C_, so that might give us an idea of what to expect with this. It uses native widgets on each system, with the performance expected of doing so. It has bindings for several platforms, including .NET, Node, Kotlin, and Go but only the last one its develop by the same guy, ([ui](https://github.com/andlabs/ui)). All others are being developed by the community, and I think that's not as good as being developed by the same guy/team, but it's ok. As I said earlier, the node library that does the binding is `libui-node`, and its goal seems to be a Node wrapper for the C++ widgets of `libui`. Because `libui` provides native widgets, `libui-node` only requires the normal node runtime to be able to call those widgets.

## NodeGUI

I think the team behind `NodeGUI` is more modest, as they have one clear goal, to bind Qt5 widgets with node. However, it seems they push a way to have this in the best performance-wise way. They have a fork of regular Node runtime, that merges the event loop of Qt and Node, called [`qode`](https://github.com/nodegui/qode). With that, you can use the power of both event loops.

# Status

## libui / node-libui

As the readme says, it supposed to be pre-alpha, meaning not near to be stable, and the project has not been updated in a while. It currently has 3944 commits, 138 open issues, and 63 open pull requests. In the mid-time, `node-libui` it's as stable as its big brother. Still, you can build something around that. I have not tried anything big but it seems to be fine.

## NodeGUI

Itself is very recent, and it's currently actively updated, but it's hard to say if it will keep going like that. The project seems more stable than `node-libui`, but that's also because they use a stable widget platform. I think the real deal here is `Qode`, the one tool that powered all this. It currently has 323 commits, 9 open issues, and 1 open PR. Additionally, it has a project board with 6 tasks in To-Do.

# Additional renderers

Being able to render just using JavaScript it's good, but be able to use the same platform that you are used to, it's so much better without a doubt.

## node-libui

### Viudo

This is a `node-libui` renderer for Vue, developed by [mimecorg](https://github.com/mimecorg). It supports declaring custom elements, using them with `as` syntax. I have to say, that's the first one I tried, and I did it when it just went out. It's easy to use and integrates very well with Vue. It has a CLI template that allows you to use `@vue/cli` to create the project. 

### Proton-Native

I don't know why it's called that way, but it's a renderer to React. It's being developed by [kusti8](https://github.com/kusti8). It seems to support all React tools, like Redux and such. It has a CLI tool called `create-proton-app` that resembles the `create-react-app` tool. 

## NodeGUI

### React NodeGUI

This is the official library for React and NodeGUI. You don't have a CLI here, so you have to clone an empty repository to start using it. It supports styling with CSS-like syntax, and it supposed to work with all the React plugins out there. It also has support for TS out of the box.

### NG-QT

It's developed by [marcus-sa](https://github.com/marcus-sa). It aims to be an Angular renderer compatible with NodeGUI. So far it supports some components, but still, have some issues to be resolved.

# Build tools

## node-libui

Proton-Native has a build system based on `electron-builder`, but it didn't work for me, because it doesn't support Windows. The team behind Vuido has developed a build tool called `launchui-packager`. It did work, but only with Vuido based project, although it supposed to work with Proton-Native, it didn't. I don't know if it is because Proton-Native itself doesn't support Windows, that it should. Both approaches are just packaging the project with an embedded node runtime, and the native modules from `libui`

## NodeGUI

The team is working on the build system. I think this is harder to be implemented, but it could be a better system than the two `node-libui` have, because it could be a complete build tool, and embedded with the Qode run time.

# What to choose?

I don't think you can choose any. Both are very experimental projects that look more like a declaration of intention than something you could use for production applications. However, NodeGUI seems to be faster in terms of development, but again, it lacks a proper build system to be able to distribute your application.

# That's all folks!

Thank you for reading. I hope you have liked it, and you find it helpful.

Have you experimented with any of the technologies that I did mention? Tell me about your experiences in the comments below.