There has been a drastic improvements in NodeGui since the last release announcement of v0.2.0 in September 2019. This post aims to summarize some of the major ones.

🏋️‍♀️ Lots of core Qt widgets and features

✨ Includes prebuilt binaries: No more compilation step.

Since NodeGui is a library with native Nodejs addon, the C++ part of the library needed to be built on installation. This meant you needed cmake and other c++ compilation tools to be installed. Since v0.13.0 this is no longer the case. Now the core library ships with prebuilt binaries. So in most cases you should be up and running right after you run npm install. Try the latest nodegui-starter or react-nodegui-starter to check this out! 🚀

🎉 Includes support for native Windows plugins along with existing Unix platforms

v0.2.0 introduced plugin support for unix platforms. This release makes sure native plugins can now be built for all platforms. This means you no longer need to wait for a feature to be added onto the core library, instead anyone can now build third party native plugins for NodeGui. This is heavily inspired from React Native’s architecture.
This will ensure that the core library remains lean and will allow more easy way for contributions. If you are really eager to know how it would look you can take a look at https://github.com/nodegui/nodegui-example-plugin. Now that plugin works for all platforms. Detailed docs on how to build them would be up soon.

🤖 Install latest master release quickly

Now you can install the latest release right after a PR is merged using:

npm i http://master-release.nodegui.org

This is an auto release built using Github actions.

📖 Shiny new Documentation website

Since its initial release documentation website has been updated to use Docusaurus v2 . This brings a new design update that is easier to read. Still a long way to go. Apart from design it also add support for automatic docs generation via Typescript and Typedoc. This is fairly readable but we need a lot of help to make it better. More example code and screenshots will be added soon.
Link to the new docs website: https://docs.nodegui.org/

There are many more improvements and features than what is listed above. Try the NodeGui version v0.13.0 at https://docs.nodegui.org/. I would like to thank all contributions and backers who have sponsored the project without whom this project wouldn’t be possible.

NodeGui is a young open source project which requires your support. It is fairly straight forward to contribute to the project and I encourage everyone to give it a try.

NodeGui v0.13.0 🦮 🚀 was originally published in NodeGui on Medium, where people are continuing the conversation by highlighting and responding to this story.

NodeGUI v0.2.0 contains major architectural changes with respect v0.1

Includes a shiny new build system 🌟

NodeGUI although is a nodejs addon, it no longer uses node-gyp as its build system. This is to enable greater flexibility and stability.
More details on why we changed to cmake here: https://github.com/nodegui/nodegui/pull/103

Includes support for Native plugins for NodeGUI 🎉

From v0.2.0 anyone can now build third party native plugins for NodeGUI. This is heavily inspired from React Native’s architecture.
This will ensure that the core library remains lean and will allow more easy way for contributions. More on this will be added to the docs soon. But if you are really eager to know how it would look you can take a look at https://github.com/nodegui/nodegui-example-plugin

Other changes:

• Adds QTabWidget
• QCheckBoxEvents.toggled
• QIcon.pixmap
• qtnode addon is now renamed to nodegui_core

NodeGUI v0.2.0 was originally published in NodeGui on Medium, where people are continuing the conversation by highlighting and responding to this story.

https://github.com/nodegui/packer

This is an initial MVP release of the module.

• On MacOS — Packer will output a dmg file
• On Linux — Packer will output an AppImage which is something similar to a .app file in MacOS
• On Windows — Packer outputs a folder containing the executable and all the dlls.

Currently if you need to produce a build you need to run the packer in different OS environments. That is, cross platform builds are not supported in this release.

Usage

• First step is to install the packer as a dev dependency. You can do so by:

npm install --save-dev @nodegui/packer

• Next you can run the init command:This will produce the deploy directory containing the template. You can modify this to suite your needs. Like add icons, change the name, description and add other native features or dependencies. Make sure you commit this directory.

npx nodegui-packer --init MyApp

• Next you can run the pack command:This command essential takes the dist folder as the input and puts it in the suitable location inside the standalone executable. Also it runs the correct deployment tool (macdeployqt incase of mac, etc) and packs in the dependencies.The output of the command is found under the build directory. You should gitignore the build directory.

npx nodegui-packer --pack <path to dist>

How does it work ?

Packer uses Qt’s packaging tools in all three platforms.

• On Mac — it uses macdeployqt : https://doc.qt.io/qt-5.9/osx-deployment.html#macdeploy
• On Windows — it uses windeployqt : https://doc.qt.io/qt-5/windows-deployment.html
• On Linux — There is no official tool, hence it uses linuxdeployqt — https://github.com/probonopd/linuxdeployqt

Requirements

• Needs Qode v1.0.4 and up (NodeGUI v0.1.7 and up)

Future enhancements:

1. Cross platform builds.
2. Better documentation.
3. Reduce / Remove unnecessary dynamic libraries.
4. Reduce qode binary size.

Please feel free to help out with this in anyway you can.

Announcing Packer 📦 for NodeGUI and React NodeGUI 🎉 was originally published in NodeGui on Medium, where people are continuing the conversation by highlighting and responding to this story.

This was originally posted at https://blog.atulr.com/nodegui-intro/

We’re very excited to announce the launch of NodeGUI and React NodeGUI🎊

NodeGUI is an open source library for building cross platform native desktop applications with JavaScript and CSS like styling. NodeGui apps can run on Mac, Windows, and Linux from a single codebase.

NodeGUI is powered by Qt5 💚 which makes it CPU and memory efficient as compared to other chromium based solutions like electron. Don’t get me wrong 🤷🏽‍♂️, Electron is a great framework for building cross platform apps but suffers from performance and energy related issues due to heavy reliance on Chromium. NodeGui wants to incorporate everything that is good about Electron: The ease of development, freedom of styling, Native APIs, great documentation, etc. At the same time NodeGui aims to be memory and CPU efficient.

React NodeGUI is a react renderer for NodeGUI. It aims to be what React Native is for mobile app development.

Repository links:

• https://github.com/nodegui/nodegui
• https://github.com/nodegui/react-nodegui

Features

• 🧬 Cross platform. Should work on major Linux flavours, Windows and MacOS
• 📉 Low CPU and memory footprint. Current CPU stays at 0% on idle and memory usage is under 20mb for a hello world program.
• 💅 Styling with CSS (includes actual cascading). Also has full support for Flexbox layout (thanks to Yoga).
• ✅ Complete Nodejs api support (Currently runs on Node v12.x — and is easily upgradable). Hence has access to all nodejs compatible npm modules.
• 🎪 Native widget event listener support. supports all event available from Qt / NodeJs.
• 💸 Can be used for Commercial applications.
• 🕵️‍♂️ Decent Devtools support.
• 📚 Decent documentation and website.
• 🧙‍♂️ Decent documentation for contributors.
• 🦹🏻‍♀️ Good support for dark mode (Thanks to QT).
• 🏅First class Typescript support. (Works on regular JS projects too 😉).

NodeGUI

NodeGUI: @nodegui/nodegui is essentially native javascript bindings for Qt. Qt is a cross-platform C++ application development framework for desktop and various other platforms. The native Javascript bindings are written using N-API or node addon api. This means applications written using NodeGUI DOES NOT open up a browser instance and render the UI in it, instead all the widgets are natively rendered. Since NodeGUI is a native addon to NodeJs (extends Nodejs) you have complete access to Node APIs and all compatible npm modules. Also all debugging tools that you use with NodeJS can now be used with NodeGUI applications as well.

A big motivation towards choosing Qt was that it provides APIs to style a widget using CSS (this includes actual cascading and not just inline styling). Flex box support to the existing amazing Qt stylesheet was added using Yoga. Hence NodeGUI supports both paint and layout properties via CSS.

Some screenshots of example apps that were built during development.

Try it out! 🧙‍♂️

git clone https://github.com/nodegui/nodegui-starter
cd nodegui-starter 
npm install 
npm run build 
npm start

A simple hello world project looks like:

const {
  QMainWindow,
  QWidget,
  QLabel,
  FlexLayout
} = require("@nodegui/nodegui");

const win = new QMainWindow();

const centralWidget = new QWidget();
centralWidget.setObjectName("myroot");
const rootLayout = new FlexLayout();
centralWidget.setLayout(rootLayout);

const label = new QLabel();
label.setObjectName("mylabel");
label.setText("Hello");

const label2 = new QLabel();
label2.setText("World");
label2.setInlineStyle(`
  color: red;
`);

rootLayout.addWidget(label);
rootLayout.addWidget(label2);
win.setCentralWidget(centralWidget);
win.setStyleSheet(
  `
    #myroot {
      background-color: #009688;
      height: '100%';
      align-items: 'center';
      justify-content: 'center';
    }
    #mylabel {
      font-size: 16px;
      font-weight: bold;
    }
  `
);
win.show();

(global as any).win = win;  //to prevent gc

React NodeGUI

React NodeGUI: @nodegui/react-nodegui is a ⚛️ react renderer for NodeGUI. This means you can create you views using React components similar to that of React Native. React NodeGUI is powered by React ⚛️ and Qt5 💚 which makes it easy to build performant, native and cross-platform desktop applications. With react nodegui you have complete access to all React APIs including hooks. React NodeGUI makes it much more easy to manage all the views via Javascript.

Try it out! 🧙‍♂️

The same example we saw above in NodeGui would look like this in react-nodegui

git clone https://github.com/nodegui/react-nodegui-starter
cd react-nodegui-starter 
npm install 
npm run build 
npm start

A simple hello world project looks like:

import { Renderer, View, Text, Window } from '@nodegui/react-nodegui'
import React from 'react'

const App = () => {
  return (
    <Window styleSheet={styleSheet}>
      <View id="myroot">
        <Text id="mylabel">{`Hello`}</Text>
        <Text style={'color: red;'}>{`World`}</Text>
      </View>
    </Window>
  )
}

const styleSheet = `
  #myroot {
    background-color: #009688;
    height: '100%';
    align-items: 'center';
    justify-content: 'center';
  }
  #mylabel {
    font-size: 16px;
    font-weight: bold;
  }
`

Renderer.render(<App />)

The output looks like this:

Disclaimer: Please keep in mind that both NodeGui and React NodeGUI are at their infancy stage. Hence, I would hold on for some more time before using it in production. This post is primarily aimed at encouraging contributions to the project.

Some more example screenshots: 📸

The source code for all these examples are here: https://github.com/nodegui/react-nodegui/tree/master/examples/

Development and Support 🍺

NodeGui and React NodeGUI are open source projects. If you like where these projects are heading please do star 🌟 the respective repos.

The code is structured for simplicity such that anyone who is willing to contribute can get started quickly. There is also a decent contributor’s guide which also contains links to blog posts that can get you started even if you have no clue about nodejs addons, etc. I would suggest you to give it a shot. If anything is unclear you can raise an issue on the respective project repos on Github and we would be more than happy to help. We aim to make the project easy to develop and use. Hence, pull requests are always welcome.

If you can support the project financially 💰 please hit the sponsor button on the Github repo.

I hope we can build an awesome library together ❤️ Cheers 🍺

This was originally posted at https://blog.atulr.com/nodegui-intro/

🐕 Announcing NodeGUI and React Desktop — Build native desktop apps with Javascript and CSS 🎉 was originally published in NodeGui on Medium, where people are continuing the conversation by highlighting and responding to this story.