Forem: Alex

Uno Platform

Alex — Thu, 05 Dec 2019 22:52:14 +0000

El mundo de del desarrollo de software, web y de aplicaciones móviles, estamos saturados de herramientas, plataformas y frameworks.

El que ser emprendedor valiente o un experimentado developer no significa que nunca vayas a tener o experimentar miedo y/o preocupaciones sobre lo que viene o te piden implementar; simplemente quiere decir que reconoces esas emociones y que tienes la confianza que serás capaz de superar los obstáculo y alcanzar las y metas y/o tu visión. Con esto dicho vamos a platicar un poco de la Plataforma Uno ¿que ofrece? ¿ ventajas? ¿desventajas? etc, etc..

Echemos un vistazo ahora a la plataforma Uno.

Build Mobile, Desktop and WebAssembly apps with C# and XAML.

Breve historia

La version inicial fue lanzada en mayo 7 del 2018, liberada bajo la licencia Apache 2.0 , creada por Richard Campbell and Carl Franklin, pueden ver lo joven que es el proyecto. Originalmente solo se centraba en la creación de aplicaciones móviles Universal Windows Platform (UWP), la plataforma Uno Platform fue descrita como un puente UWP que permite UWP-Code correr en iOS, Android y WebAssembly.

Con Uno Platform, podemos darle el poder a los equipos .NET para crear aplicaciones no solo agradables, sino con buen performance y con un solo código base, multi plataforma, para dispositivos móviles, web y escritorio.

Diagrama

Uno is a UWP bridge for iOS, Android and WebAssembly

Algo que ya hemos escuchado eso muchas veces ¿correcto? Peroooo, esta dice que es la única plataforma que puede ser usada para construir aplicaciones móviles, de escritorio y aplicaciones WebAssembly con C# y XAML desde un solo código base.

¿Que es WebAssembly?

Image de : https://blog.logrocket.com/webassembly-how-and-why-559b7f96cd71/

Ya hemos escrito en otros artículos al respecto pero en resumen WebAssembly operates on a stack-based machine that allows web applications to run near-native speed by using a binary format. It can be generated by higher level programming languages like C++ or C#. The idea is that it runs a lot faster than JavaScript.

Regresando al hilo principal. L a plataforma Uno enables you to write the UI once, then, using native controls, deploys native UI look and feel to each of your platforms. This means, you write the same code for a button regardless of the platform the button is for, and the user will see the native button for their platform.

Ay! Papantla tus hijos vuelan.

WebAssembly, que respalda el proyecto de Microsoft Blazor, provee un ensamble de bajo nivel como lenguaje de compilación objetivo para lenguajes de programación de lato nivel como C/C++, C#,Rust, etc) así que pueden ser usados para Desarrollo Web en lugar de JavaScript, el lenguaje que actualmente domina el desarrollo basado en web.

El administrador comercial del proyecto de código abierto Uno project, inventive Inc., el 19 de septiembre anunció una nueva integración con Xamarins Forms que provee que los renders de WebAssembly permitan a los desarrolladores extender las apps de los formularios (Xamarin Xamarins.Forms-based apps) a la Web simplemente ejecutando una simple linea en la linea de comandos de Visual Studio.

Arquitectura

En iOS y Android, la Plataforma Uno Platform recae exhaustivamente en el stack nativo de Xamarin. En WebAssembly, la plataforma recae directamente en el runtime de Mono WASM. Al final, la plataforma nos provee con la habilidad de correr un solo código fuente, C#y aplicaciones XAML en todas estas plataformas.

El Stack de Uno

Uno es un framework UI multi plataforma. Tu escribes tu app in C# y un marcado UWP-flavoured XAML. Este corre en Windows por que es una UWP app. Con Uno, esta corre en Android, iOS, y (para los valientes) en el navegadores también a través de WebAssembly.

El siguiente esquema es muy ilustrativo.

Muy ilustrativo ¿no? (Imagen propiedad de Uno Platform)

En iOS y Android, la plataforma Uno usa Xamarin para acceder las frameworks nativos de la plataforma. En la versión web esta corriendo directamente arriba de Mono, el cual resulta esta corriendo arriba de WebAssembly.

Debugging C# en WebAssembly

El equipo Mono ha estado invirtiendo bastante tiempo en la experiencia de debugging y las recientes mejoras han hecho mucho más fácil trabajar con este. Aún es experimental, pero aún así es de gran ayuda en la depuración de los proyectos WebAssembly.

Por ahora solo existe una importante restricción: la depuración solo trabaja en Chrome. Esta utilizando el protocolo de las herramientas de desarrollo de Chrome.

Para ser honestos, la experiencia de depuración es un dolor de muelas, eñ debugger falla frecuentemente (con el Chrome diciendo que un se desconecto un WebSocket) entendamos que aún hay muchos escenarios sin mucha luz que digamos que no han sido probados aún. Esto significa que tal vez no podrás poner puto de interrupción (breakpoints) , pasos dentro o fuera de algunas secciones de código (ej. métodos parciales).

¡Gracias! Nos seguimos leyendo.

Aquí les dejo el enlace la presentación que tuve oportunidad de dar del 5 de diciembre de este año en KMMX.

Algunos enlaces de interes

Casos de éxito, algunas apps hechas con esta plataforma.

El primer tutorial

Playground

NodeGUI

Alex — Sun, 17 Nov 2019 18:30:13 +0000

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

https://nodegui.github.io

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.

Logo de QT

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.

KDE Plasma esta desarrollado 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.

error

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

Bonito ¿no?

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