NodeGUI

Una alternativa al desarrollo de interfaces gráficas (GUI) en el ecosistema NodeJS.

NodeGUI es básicamente una vinculación nativa de JavaScript para QT. QT es entorno de desarrollo de plataforma cruzada hecho en C++ para aplicaciones de escritorio, web y móviles y otros.

NodeGUI tiene todo el poder de Qt5 💚 el cual lo hace muy eficiente en cuanto a CPU y memoria sobre todo si se compara con otras soluciones basadas en chromium como electron.

Las aplicaciones basadas en Electron son pesadas.

Pues esa es la mayor critica a Electron — main criticism levelled at Electron apps, que están super hinchadas y requieren mucha memoria. Estos es porque cada app de Electron se entrega con una versión del navegador Chromium y no esta en una posición de compartir recursos, como las apps nativas hacen.

La compañía Qt (antes Trolltech ) es una compañía de software fundada en Espoo, Finlandia, desde donde supervisa el desarrollo de su framework de aplicaciones Qt, siendo este un entorno de trabajo multi plataforma para la creación de interfaces gráficas (GUI) escrito en C++ como ya habíamos mencionado, pero es soportado con enlaces a otros lenguajes de programación como Python, Lua, etc y ¡si! recientemente JavaScript.

Nota curiosa

KDE el escritorio de linux, en su versión denominada plasma, esta desarrollada con Qt.

Los enlaces (bindings) nativos de JavaScript son escritos usando N-API o node addon api. N-API es una API para construir complementos nativos, para mayor referencia pueden revisar la documentación, dando click aquí. esto significa que las aplicaciones escritas usando NodeGUI no se despliegan en una instancia del navegador y dibujan la UI en este, en lugar de eso todos los widgets son dibujados nativamente.

Ya que NodeGUI es un complemento nativo de NodeJS, es decir extiende NodeJS tenemos acceso completo a todas las APIs de Node y a todos los módulos npm compatibles. Y también por supuesto las herramientas de depuración que usamos con NodeJS podemos usarlas con NodeGUI ¿fantástico no?

Otra ventaja de usar de usar Qt es que esta tiene un API para poder definir los estilos de nuestros widgets via CSS y el soporte de Flex Box a las hojas de estilo de Qt se añadió usando Yoga, entonces pues tenemos soporte en Qt para pintar y definir propiedades de layout via CSS.

Mucho ruido y pocas nueces.

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

Ooops. Me mando un error al momento de instalar.

Parece que falta instalar la librería y la dependencia C make.

_npm i @nodegui/nodegui_

holamundo.js con Qt

En nuestro editor favorito

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

Conclusión

Me queda la duda de si realmente QT será una opción para el desarrollo de UIs en Node. No me queda duda de que Qt es una gran herramienta y de que el sistema NodeJS cada vez crece más. A pesar de que NodeGUI esta en desarrollo constante, el proyecto aún esta en su infancia y el equipo que lleva este recomienda no usarlo en producción todavía.

Nos leemos. Alex