Crear aplicaciones de escritorio con JavaScript y Tauri

Descubre cómo crear aplicaciones de escritorio con JavaScript y la librería Tauri. Desarrolla programas para Windows, MacOS y Linux con lenguajes de programación HTML5 y Rust.

https://tauri.studio/ Build smaller, faster, and more secure desktop applications with a web frontend
Esquema funcionalidad Tauri
Esquema funcionalidad Tauri

Si no te apetece leer la introducción, puedes saltar directamente al tutorial

El ecosistema de desarrollo «cross-platform desktop»

Hace unas semanas estuvimos viendo cómo crear apps para varios soportes con lenguajes HTML5. Aunque, a decir verdad, solo nos centramos en los sistemas operativos Android e iOS. 

Sin embargo, para que una aplicación sea verdaderamente multiplataforma, también debería poder compilarse para dispositivos de sobremesa. Así como los sistemas operativos Windows, MacOSX o Linux.

Por eso, me decidí a crear esta segunda parte. Hoy aprenderemos a utilizar Tauri, una nueva herramienta para generar aplicaciones de escritorio con JavaScript y Rust.

Si aún no has leído la primera parte, y te interesa el desarrollo de apps híbridas para dispositivos móviles, te dejo el enlace a continuación. NO es necesario leerlo para seguir con el artículo de hoy.

Crea apps multiplataforma con JavaScript y Capacitor

Inicialmente, en este artículo se iba a hablar de ElectronJs, otra librería JavaScript, que permite compilar programas para sistemas operativos desktop.

De hecho, Electron es tan popular, que fue la tecnología elegida por Microsoft para crear nada más, y nada menos, que Visual Studio Code.

Efectivamente, uno de los IDE más famosos y utilizado por millones de desarrolladores del mundo, fue creado, en parte, con código HTML5 y JavaScript.

Entonces, te preguntarás por qué he decidido hablar de Tauri en su lugar.

Tecnologías competidoras para crear aplicaciones de escritorio con JavaScript
Competidores para crear aplicaciones de escritorio con JavaScript

En primera instancia, porque parte del objetivo de este blog, es descubrir y estudiar nuevas librerías. 

Sobre Electron ya se ha comentado mucho, es un recurso consolidado y ya existe una gran cantidad de documentación al respecto. Tauri, en cambio, es relativamente nuevo. Su versión estable ha sido lanzada en Abril de 2022.

En segundo lugar, porque considero que Tauri realmente puede ser un digno competidor de Electron. Se presenta como una alternativa capaz de compilar aplicaciones de escritorio más ligeras, más seguras y de forma más rápida.

A nivel técnico, la arquitectura interna de esta herramienta está compuesta por un backend construido con Rust, y por un frontend que combina las librerías TAO y WRY

https://tauri.studio/about/architecture#tao

De forma parecida a como vimos en el anterior artículo, Tauri también despliega un webviewer nativo encargado de renderizar el contenido web. No obstante, ese webviewer no está basado en Chromium. De modo que, al final del día, esto se traduce en un ejecutable menos pesado, y una gestión de la memoria más optimizada.

Vamos a crear un clon de Wordle y hacerlo instalable.

Para poder utilizar este software, es preciso tener algunas dependencias instaladas en el ordenador.

Por un lado, es imprescindible disponer de Rust y Node.js. Sin estos recursos, no es posible compilar aplicaciones con Tauri.

Por otro lado, puede ser necesario incluir algunas dependencias adicionales, dependiendo del sistema operativo con el que se trabaje. El siguiente enlace lleva al manual, paso a paso, para que puedas preparar el entorno según tu OS.

https://tauri.studio/guides/getting-started/prerequisites

En mi caso, utilizaré MacOSX. De modo que, de forma complementaria, es necesario que tenga instalado xcode.

Una vez preparado el contexto de trabajo, la librería ofrece tanto la posibilidad de generar un proyecto completamente nuevo, como la de integrarse en uno existente.

En esta ocasión partiremos de cero, y crearemos uno utilizando la línea de comandos que pone a nuestra disposición. Para ello se debe ejecutar la siguiente instrucción.

npx create-tauri-app
Cli Tauri
Cli Tauri

Esta orden abrirá en la terminal una guía que nos permitirá configurar el proyecto. En este punto decidiremos el nombre del proyecto y el framework con el que se desea trabajar. En el momento de redactar estas líneas ofrece soporte para las siguientes opciones.

  • Vanilla JavaScript
  • Entorno de desarrollo con Vite
  • Create-react-app
  • Svelte
  • Solid
  • Vue CLI
  • Angular CLI

Para el propósito de este vistazo, trabajaré la parte UI con React. Por consiguiente, elegiré create-react-app. Evidentemente, tú puedes elegir la opción que te resulte más cómoda.

Llamaré al proyecto “tauri-wordle-clon«. Ya que, en esta ocasión, crearé un clon del famoso juego Wordle, y posteriormente lo convertiremos en un juego instalable.

Con esto, damos por finalizada la fase de preparación del entorno de trabajo. Para corroborar que todo ha funcionado correctamente, se puede ejecutar el siguiente comando:

npm run tauri info

Tauri info” nos da información relativa al sistema y al estado de las dependencias necesarias. Asegúrate de que está todo en orden antes de continuar.

A partir de este punto, podemos escribir el código de nuestro programa, como si de una webapp se tratara.

Te animo a que idees y desarrolles tu propio programa. Pero, si no tienes tiempo, o te interesa centrarte únicamente en la parte de Tauri, te dejo el código de mi ejercicio en el repositorio de libreriasjs, en Github.

Como dije, se trata de un clon del juego Wordle, creado con React. Puedes ver el resultado haciendo click en la siguiente imagen. 

Wordle clon con Tauri
Wordle clon con Tauri, Haz click en la imágen para ver el proyecto en marcha

Por supuesto, lo puedes utilizar como base para seguir con este tutorial, y editando como te convenga.

https://github.com/Danivalldo/libreriasjs/tree/master/tauri-wordle-clon

Analizar el código de este ejercicio alargaría demasiado esta guía. Así que, he tratado de documentar el código fuente mediante comentarios.

Sin embargo, debes tener en cuenta que se trata de un programa puramente ilustrativo. No está optimizado, y muchos “edge cases” no están resueltos (por ejemplo cuando existen letras repetidas en la solución).

Antes de realizar la build, es preciso editar el archivo tauri.config.json, que se encuentra dentro del directorio src-tauri.

Allí, encontramos opciones para configurar parámetros varios. Por ejemplo, el nombre de la aplicación, la versión, las referencias a los distintos formatos del icono o las restricciones de seguridad

tauri.config.json
tauri.config.json

Es necesario modificar el valor de “identifier”, que por defecto viene con el parámetro “com.tauri.dev”. En mi caso lo sustituiré por “com.libreriasjs.tauri-wordle-clon”.

Finalmente lanzamos la siguiente instrucción en la terminal.

npm run tauri build

Al final del proceso, Tauri habrá creado un archivo instalable para el sistema operativo en el que estemos trabajando.

Instalador de programa MacOSX
Instalador de programa MacOSX

JavaScript y Tauri, la combinación perfecta para crear aplicaciones de escritorio.

Con este sencillo tutorial hemos aprendido a crear aplicaciones de escritorio con JavaScript y Tauri. Ahora está en tus manos crear un magnífico programa, si necesitas inspiración, te dejo un enlace a un recopilatorio de webapps que perfectamente podrían tener una versión instalable.

El navegador es el mejor programa de tu ordenador.

No obstante, para explotar al máximo el potencial de esta herramienta, sería clave estudiar las opciones de desarrollo que ofrece Rust. Así como la API JavaScript para conectarse a capacidades del sistema operativo, como por ejemplo, el sistema de archivos.

A mi parecer, Tauri es una herramienta muy prometedora, de modo que merece la pena estar atentos a su evolución. Dicho eso, también es cierto que de momento su documentación es un tanto escasa, por ese motivo te dejo a continuación algunos recursos adicionales.

Espero que esta sencilla guía te haya podido ayudar, o al menos haya despertado en tí el interés por empezar un proyecto nuevo. Si así ha sido, te agradecería mucho que lo compartieras entre tus compañeras y compañeros de profesión.

Nos vemos pronto, un abrazo desarrolladores.

Deja un comentario