Cómo crear aplicaciones de escritorio nativas con JavaScript (Proton Native)

Cuando estaba escribiendo este artículo, me vino a la mente la Ley de Atwood:

Cualquier aplicación que se pueda escribir en JavaScript, eventualmente se escribirá en JavaScript. - Jeff Atwood

¡Publicado originalmente en mi blog!

Hoy vamos a echar un vistazo a Proton Native y a crear una aplicación sencilla con él.

A diferencia de las aplicaciones de Electron , las aplicaciones creadas con Proton Native son en realidad nativas (de ahí el nombre) y no están basadas en la web en chromium.

Proton Native es como React Native pero para escritorio. Se compila en el código de la plataforma nativa, por lo que se ve y funciona como una aplicación nativa.

Entonces empecemos.

Ventanas

Instale las herramientas de compilación ejecutando:

npm install --global --production windows-build-tools

Linux

Necesitará estas bibliotecas:

  • libgtk-3-dev
  • construir-esencial

Mac

No necesitas nada.

Ahora ejecuta lo siguiente:

npm install -g create-proton-app

y

create-proton-app my-app

para hacer un nuevo proyecto.

Abra el directorio del proyecto con su editor de código favorito. El directorio debería verse así:

 └───node_modules ├───.babelrc ├───index.js ├───package.json └───package-lock.json

index.js debería verse así:

Al igual que cualquier React o React Native Project, importamos la biblioteca de reacciones y creamos un componente de clase.

El Appelemento es solo un contenedor que contiene el Window y Menu, y el Windowtiene tres accesorios: title(el título de la ventana), size(toma un objeto que contiene el ancho y alto de la ventana) y menuBar(establecido en falso porque no queremos Barra de menús).

Antes de comenzar a codificar, instalemos cryptousando npm:

npm i crypto

Usaremos cryptopara hash el texto con el algoritmo MD5.

index.js

Primero los importé Texty TextInputluego los pude usar. Luego, classdespués de configurar las cadenas texty md5vacías en el state objeto, creé una función hashque toma un textargumento.

En la hashfunción, establecemos el estado texty declaramos md5almacenar el texto cifrado (como se muestra a continuación)

this.setState({ text });let md5 = crypto.createHash("md5")  .update(text, "utf8").digest("hex");

y establezca el objeto de estado en actualizado md5.

this.setState({ md5 });

El rendermétodo devuelve algún jsxelemento. El Boxelemento es como diven React, o Viewen React Native, que contiene TextInputy Text. Esto se debe a que el elemento de ventana padre no permite tener más de un hijo.

TextInputtiene un onChangeaccesorio que se llamará cada vez que cambie el texto. Por lo tanto, lo configuramos como una función de flecha gruesa que toma un textargumento y devuelve la hashfunción que declaramos anteriormente.

Así que ahora, cada vez que el texto cambia, textse aplica un hash y se establece en md5.

Ahora si lo ejecutamos con

npm run start

esta ventana debería aparecer:

Y si ingresamos algún texto, se convierte en hash a md5 de esta manera:

Podrías decir "Se ve feo; agreguemos un poco de estilo". Bueno, al momento de escribir este artículo, Proton Native todavía está en su infancia. Tiene muchos errores y no admite estilos (todavía), pero es un proyecto divertido para jugar.

Si desea contribuir al proyecto, consulte el repositorio.

Si tiene alguna pregunta o sugerencia, no dude en comentar o comunicarse conmigo en Twitter @ 4msal4 y no olvide presionar el botón de aplaudir :)

¿Cómprame un café?

? Mira mi historia anterior?

Cómo crear una aplicación de noticias con React Native.