Creación de aplicaciones de escritorio diminutas con Tauri y Vue.js

Publicado: 2022-03-10
Resumen rápido ↬ Tauri es una cadena de herramientas para crear aplicaciones de escritorio pequeñas, rápidas y seguras a partir de HTML, CSS y JavaScript existentes. En este artículo, Kelvin explica cómo Tauri funciona bien con el marco progresivo Vue.js al integrar ambas tecnologías en el paquete de una aplicación web de ejemplo llamada nota como una aplicación nativa.

La tecnología nos hace la vida mejor, no solo a los usuarios, sino también a los creadores (desarrolladores y diseñadores). En este artículo, te presentaré a Tauri. Este artículo te será útil si:

  • ha estado creando aplicaciones en la web con HTML, CSS y JavaScript, y quiere usar las mismas tecnologías para crear aplicaciones destinadas a las plataformas Windows, macOS o Linux;
  • ya está creando aplicaciones de escritorio multiplataforma con tecnologías como Electron y quiere ver alternativas;
  • desea crear aplicaciones con tecnologías web para distribuciones de Linux, como PureOS;
  • es un entusiasta de Rust y le gustaría aplicarlo para crear aplicaciones multiplataforma nativas.

Veremos cómo crear una aplicación multiplataforma nativa a partir de un proyecto web existente. ¡Hagámoslo!

Nota : este artículo asume que se siente cómodo con HTML, CSS, JavaScript y Vue.js.

¡Más después del salto! Continúe leyendo a continuación ↓

¿Qué es Tauri?

El sitio web oficial resume bien a Tauri:

  • Tauri es una cadena de herramientas políglota para crear aplicaciones nativas más seguras con binarios pequeños y rápidos. Por "políglota", quiero decir que Tauri usa múltiples lenguajes de programación. Por el momento, se utilizan Rust, JavaScript y TypeScript. Pero hay planes para permitirle usar Go, C++, Python y más.
  • Le permite usar cualquier marco de front-end basado en HTML y JavaScript, como Vue.js, React o Angular, para crear una aplicación de escritorio nativa y puede integrarse en cualquier canalización.
  • Le ayuda a crear y agrupar archivos binarios para las principales plataformas de escritorio (próximamente móviles y WebAssembly).

Entonces, básicamente, Tauri le permite usar tecnologías web para crear aplicaciones de escritorio nativas pequeñas y seguras.

En su página de GitHub, Tauri se describe como una cadena de herramientas independiente del marco para crear aplicaciones nativas altamente seguras que tienen binarios pequeños (es decir, tamaño de archivo) y que son muy rápidos (es decir, uso mínimo de RAM).

¿Por qué no electrón?

Una herramienta popular para usar tecnologías web para crear aplicaciones de escritorio es Electron.

Sin embargo, las aplicaciones de Electron tienen un tamaño de paquete bastante grande y tienden a ocupar mucha memoria cuando se ejecutan. Así es como Tauri se compara con Electron:

  • Manojo
    El tamaño de una aplicación Tauri puede ser inferior a 600 KB.
  • Memoria
    La huella de una aplicación Tauri es menos de la mitad del tamaño de una aplicación Electron.
  • Licencia
    La renovación de la licencia es posible con Tauri, pero no con Electron. Electron se envía con Chromium nada más sacarlo de la caja. Sin embargo, Chromium incluye un sistema de gestión de derechos digitales llamado Widevine. La inclusión de Widevine en Chromium hace que las aplicaciones creadas con Electron estén mal vistas por los usuarios de plataformas como PureOS por la única razón de que no es un software de código abierto gratuito (FLOSS). Las plataformas como PureOS están verificadas por la Free Software Foundation (FSF). Esto significa que solo pueden publicar software gratuito y de código abierto en sus tiendas de aplicaciones.

En pocas palabras, si su aplicación está construida con Electron, nunca se enviará oficialmente en la tienda PureOS. Esto debería ser una preocupación para los desarrolladores que apuntan a tales distribuciones.

Más características de Tauri

  • La seguridad es muy importante para el equipo de Tauri. Las aplicaciones creadas con Tauri están diseñadas para ser seguras desde el primer momento.
  • Tauri es compatible con cualquier marco de front-end, por lo que no tiene que cambiar su pila.
  • Tiene muchos patrones de diseño para ayudarlo a elegir características importantes con configuraciones simples.

Pros de Tauri

  • Tauri le permite tomar la base de código que ha creado para la web y convertirla en una aplicación de escritorio nativa, sin cambiar nada.
  • Aunque podría usar Rust en un proyecto basado en Tauri, es completamente opcional. Si lo hiciera, no necesitaría cambiar nada en su base de código original destinada a la web.

Tauri del mundo real

Si ha sido parte de la comunidad de Vue.js por un tiempo, habrá oído hablar de Guillaume Chau, miembro del equipo central de Vue.js. Es responsable de la interfaz de línea de comandos (CLI) de Vue.js, así como de otras bibliotecas impresionantes de Vue.js. Recientemente creó guijs, que significa "interfaz gráfica de usuario para proyectos de JavaScript". Es una aplicación de escritorio nativa impulsada por Tauri para administrar visualmente sus proyectos de JavaScript.

Guijs es un ejemplo de lo que es posible con Tauri, y el hecho de que un miembro central del equipo de Vue.js trabaje en la aplicación nos dice que Tauri funciona muy bien con Vue.js (entre otros marcos front-end). Consulte el repositorio de guijs en GitHub si está interesado. Y, sí, es de código abierto.

Cómo funciona Tauri

En un alto nivel, Tauri usa Node.js para montar una ventana de representación de HTML, CSS y JavaScript como una interfaz de usuario (UI), administrada y ejecutada por Rust. El producto es un binario monolítico que se puede distribuir como tipos de archivos comunes para Linux (deb/appimage), macOS (app/dmg) y Windows (exe/msi).

Cómo se hacen las aplicaciones de Tauri

Una aplicación Tauri se crea a través de los siguientes pasos:

  1. Primero, cree una interfaz en su marco GUI y prepare el HTML, CSS y JavaScript para el consumo.
  2. La CLI de Tauri Node.js lo toma y manipula el Rust runner de acuerdo con su configuración.
  3. En el modo de desarrollo, crea una ventana WebView, con depuración y Hot Module Reloading .
  4. En el modo de compilación, manipula el paquete y crea una aplicación final de acuerdo con su configuración.

Configuración de su entorno

Ahora que sabe qué es Tauri y cómo funciona, permítame guiarlo en la configuración de su máquina para el desarrollo con Tauri.

Nota : la configuración aquí es para máquinas Linux, pero también hay guías disponibles para macOS y Windows.

Configuración de Linux

La naturaleza políglota de Tauri significa que requiere una serie de dependencias de herramientas. Comencemos instalando algunas de las dependencias. Ejecute lo siguiente:

 $ sudo apt update && sudo apt install libwebkit2gtk-4.0-dev build-essential curl libssl-dev appmenu-gtk3-module

Una vez que lo anterior sea exitoso, proceda a instalar Node.js (si aún no lo tiene), porque Tauri requiere su tiempo de ejecución. Puedes hacerlo ejecutando esto:

 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

Esto instalará nvm (administrador de versiones de Node.js), que le permite administrar fácilmente el tiempo de ejecución de Node.js y cambiar fácilmente entre versiones de Node.js. Después de instalarlo, ejecute esto para ver una lista de versiones de Node.js:

 nvm ls-remote

En el momento de escribir este artículo, la versión más reciente es la 14.1.0. Instálelo así:

 nvm install v14.1.0

Una vez que Node.js esté completamente configurado, deberá instalar el compilador Rust y el administrador de paquetes Rust: Cargo. El siguiente comando instalaría ambos:

 $ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

Después de ejecutar este comando, asegúrese de que Cargo y Rust estén en su $PATH ejecutando lo siguiente:

 rust --version

Si todo ha ido bien, esto debería devolver un número de versión.

De acuerdo con la documentación de Tauri, asegúrese de tener la última versión ejecutando el siguiente comando:

 $ rustup update stable

¡Voila! Está un paso más cerca de preparar su máquina al 100 % para Tauri. Todo lo que queda ahora es instalar la caja tauri-bundler . Lo mejor es salir de la CLI y ejecutar el siguiente comando en una nueva ventana de la CLI:

 $ cargo install tauri-bundler --force

¡Eureka! Si todo salió bien, su máquina ahora está lista para Tauri. A continuación, comenzaremos a integrar Tauri con Vue.js. ¡Hagámoslo!

Hilo

El equipo de Tauri recomienda instalar el administrador de paquetes Yarn. Así que vamos a instalarlo de esta manera:

 npm install -g yarn

Luego ejecuta lo siguiente:

 yarn --version

Si todo funcionó, se debería haber devuelto un número de versión.

Integrando Tauri con Vue.js

Ahora que tenemos Tauri instalado, empaquetemos un proyecto web existente. Puede encontrar la demostración en vivo del proyecto en Netlify. Continúe y bifurque el repositorio, que servirá como caparazón. Después de bifurcarlo, asegúrese de clonar la bifurcación ejecutando esto:

 git clone https://github.com/[yourUserName]/nota-web

Después de clonar el proyecto, ejecute lo siguiente para instalar las dependencias:

 yarn

Luego, ejecuta esto:

 yarn serve

Su aplicación debería estar ejecutándose en localhost:8080 . Elimine el servidor en ejecución e instalemos el complemento CLI de Vue.js para Tauri.

vue-cli-plugin-tauri

El equipo de Tauri creó un complemento CLI de Vue.js que configura y convierte rápidamente su aplicación de una sola página (SPA) de Vue.js en una pequeña aplicación de escritorio multiplataforma que es rápida y segura. Instalemos ese complemento:

 vue add tauri

Después de instalar el complemento, lo que puede llevar un tiempo, le pedirá un título de ventana. Simplemente escriba nota y presione "Enter".

Examinemos los cambios introducidos por el complemento Tauri.

paquete.json

El complemento Tauri agregó dos scripts en la sección de scripts de nuestro archivo package.json . Ellos son:

 "tauri:build": "vue-cli-service tauri:build", "tauri:serve": "vue-cli-service tauri:serve"

El script tauri:serve debe usarse durante el desarrollo. Así que vamos a ejecutarlo:

 yarn tauri:serve

Lo anterior descargaría las cajas Rust necesarias para iniciar nuestra aplicación. Después de eso, iniciará nuestra aplicación en modo de desarrollo , donde creará una ventana de WebView, con depuración y recarga de módulo en caliente .

src-tauri

También notará que el complemento agregó un directorio src-tauri a la raíz del directorio de su aplicación. Dentro de este directorio hay archivos y carpetas utilizados por Tauri para configurar su aplicación de escritorio. Veamos los contenidos:

 icons/ src/ build.rs cmd.rs main.rs Cargo.lock Cargo.toml rustfmt.toml tauri.conf.json tauri.js

El único cambio que tendríamos que hacer es en src-tauri/Cargo.toml . Cargo.toml es como el archivo package.json para Rust. Encuentre la siguiente línea en Cargo.toml :

 name = "app"

Cámbialo por esto:

 name = "nota"

¡Eso es todo lo que necesitamos cambiar para este ejemplo!

Agrupación

Para agrupar nota para su plataforma actual, simplemente ejecute esto:

 yarn tauri:build

Nota : Al igual que con la ventana de desarrollo, la primera vez que ejecute esto, llevará algún tiempo recolectar las cajas de óxido y construir todo. En ejecuciones posteriores, solo necesitará reconstruir las cajas Tauri.

Cuando se completa lo anterior, debe tener un binario de nota para su sistema operativo actual. Para mí, tengo un binario .deb creado en el directorio src-tauri/target/release/bundle/deb/

Ir multiplataforma

Probablemente haya notado que el comando yarn tauri:build acaba de generar un binario para su sistema operativo. Entonces, generemos los binarios para otros sistemas operativos. Para lograr esto, configuraremos un flujo de trabajo en GitHub. Estamos usando GitHub aquí para servir como medio de distribución para nuestra aplicación multiplataforma. Por lo tanto, sus usuarios podrían simplemente descargar los archivos binarios en la pestaña "Lanzamiento" del proyecto. El flujo de trabajo que implementaríamos crearía automáticamente nuestros archivos binarios a través del poder de las acciones de GitHub. Hagámoslo.

Crear el flujo de trabajo de Tauri

Gracias a Jacob Bolda, tenemos un flujo de trabajo para crear y lanzar automáticamente aplicaciones multiplataforma con Tauri en GitHub. Además de construir el binario para las diversas plataformas (Linux, Mac y Windows), la acción también cargaría el binario para usted como una versión en GitHub. También utiliza la acción Create a Release realizada por Jacob para lograrlo.

Para usar este flujo de trabajo, cree un directorio .github en la raíz de nota-web . En este directorio, cree otro directorio llamado workflows de trabajo. Luego, crearíamos un archivo de flujo de trabajo en .github/workflows/ y lo release-tauri-app.yml .

En release-tauri-app.yml , agregaríamos un flujo de trabajo que crea los archivos binarios para Linux, macOS y Windows. Este flujo de trabajo también cargaría los archivos binarios como versión preliminar en GitHub. El flujo de trabajo se activará cada vez que empujemos al maestro.

Abra release-tauri-app.yml y agregue el fragmento a continuación:

 name: release-tauri-app on: push: branches: - master paths: - '**/package.json' jobs: check-build: runs-on: ubuntu-latest timeout-minutes: 30 steps: — uses: actions/checkout@v2 — name: setup node uses: actions/setup-node@v1 with: node-version: 12 — name: install rust stable uses: actions-rs/toolchain@v1 with: toolchain: stable profile: minimal — name: install webkit2gtk run: | sudo apt-get update sudo apt-get install -y webkit2gtk-4.0 — run: yarn — name: build nota for tauri app run: yarn build — run: cargo install tauri-bundler --force — name: build tauri app run: yarn tauri:build create-release: needs: check-build runs-on: ubuntu-latest outputs: RELEASE_UPLOAD_URL: ${{ steps.create_tauri_release.outputs.upload_url }} steps: — uses: actions/checkout@v2 — name: setup node uses: actions/setup-node@v1 with: node-version: 12 — name: get version run: echo ::set-env name=PACKAGE_VERSION::$(node -p "require('./package.json').version") — name: create release id: create_tauri_release uses: jbolda/[email protected] env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: tag_name: ${{ matrix.package.name }}-v${{ env.PACKAGE_VERSION }} release_name: 'Release nota app v${{ env.PACKAGE_VERSION }}' body: 'See the assets to download this version and install.' draft: true prerelease: false create-and-upload-assets: needs: create-release runs-on: ${{ matrix.platform }} timeout-minutes: 30 strategy: fail-fast: false matrix: platform: [ubuntu-latest, macos-latest, windows-latest] include: — platform: ubuntu-latest buildFolder: bundle/deb ext: \_0.1.0_amd64.deb compressed: '' — platform: macos-latest buildFolder: bundle/osx ext: .app compressed: .tgz — platform: windows-latest buildFolder: '' ext: .x64.msi compressed: '' steps: — uses: actions/checkout@v2 — name: setup node uses: actions/setup-node@v1 with: node-version: 12 — name: install rust stable uses: actions-rs/toolchain@v1 with: toolchain: stable profile: minimal — name: install webkit2gtk (ubuntu only) if: matrix.platform == 'ubuntu-latest' run: | sudo apt-get update sudo apt-get install -y webkit2gtk-4.0 — run: yarn — name: build nota for tauri app run: yarn build — run: cargo install tauri-bundler --force — name: build tauri app run: yarn tauri:build — name: compress (macos only) if: matrix.platform == 'macos-latest' working-directory: ${{ format('./src-tauri/target/release/{0}', matrix.buildFolder ) }} run: tar -czf ${{ format('nota{0}{1}', matrix.ext, matrix.compressed ) }} ${{ format('nota{0}', matrix.ext ) }} — name: upload release asset id: upload-release-asset uses: actions/[email protected] env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: upload_url: ${{ needs.create-release.outputs.RELEASE_UPLOAD_URL }} asset_path: ${{ format('./src-tauri/target/release/{0}/nota{1}{2}', matrix.buildFolder, matrix.ext, matrix.compressed ) }} asset_name: ${{ format('nota{0}{1}', matrix.ext, matrix.compressed ) }} asset_content_type: application/zip — name: build tauri app in debug mode run: yarn tauri:build --debug — name: compress (macos only) if: matrix.platform == 'macos-latest' working-directory: ${{ format('./src-tauri/target/debug/{0}', matrix.buildFolder ) }} run: tar -czf ${{ format('nota{0}{1}', matrix.ext, matrix.compressed ) }} ${{ format('nota{0}', matrix.ext ) }} — name: upload release asset with debug mode on id: upload-release-asset-debug-mode uses: actions/[email protected] env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: upload_url: ${{ needs.create-release.outputs.RELEASE_UPLOAD_URL }} asset_path: ${{ format('./src-tauri/target/debug/{0}/nota{1}{2}', matrix.buildFolder, matrix.ext, matrix.compressed ) }} asset_name: ${{ format('nota-debug{0}{1}', matrix.ext, matrix.compressed ) }} asset_content_type: application/zip

Para probar el flujo de trabajo, confirme y envíe sus cambios a la rama master de su bifurcación. Después de ingresar con éxito a GitHub, puede hacer clic en la pestaña "Acciones" en GitHub, luego hacer clic en el enlace "Verificar compilación" para ver el progreso del flujo de trabajo.

Tras la ejecución exitosa de la acción, puede ver el borrador de la versión en "Versiones" en la página del repositorio en GitHub. A continuación, puede pasar a publicar su lanzamiento!

Conclusión

Este artículo ha presentado una cadena de herramientas políglota para crear aplicaciones nativas diminutas, seguras y multiplataforma. Hemos visto qué es Tauri y cómo incorporarlo con Vue.js. Por último, empaquetamos nuestra primera aplicación Tauri ejecutando yarn tauri:build y también usamos una acción de GitHub para crear archivos binarios para Linux, macOS y Windows.

Déjame saber lo que piensas de Tauri. Estaré emocionado de ver lo que construyes con él. Puedes unirte al servidor de Discord si tienes alguna pregunta.

El repositorio de este artículo está en GitHub. Además, vea los archivos binarios generados por el flujo de trabajo de GitHub.