Catégories
Astuces et Design

Création de minuscules applications de bureau avec Tauri et Vue.js – Smashing Magazine

A propos de l'auteur

Kelvin Omereshone est le CTO de Quru Lab. Kelvin était auparavant ingénieur front-end chez myPadi.ng. Il est le créateur de la communauté Nuxtjs Africa et très passionné…
Plus à propos
Kelvin

Tauri est une chaîne d'outils pour créer de petites applications de bureau rapides et sécurisées à partir de votre code HTML, CSS et JavaScript existant. Dans cet article, Kelvin explique comment Tauri joue bien avec le cadre progressif Vue.js en intégrant les deux technologies dans le regroupement d'une application Web d'exemple appelée nota en tant qu'application native.

La technologie améliore notre vie, non seulement les utilisateurs, mais aussi les créateurs (développeurs et concepteurs). Dans cet article, je vais vous présenter Tauri. Cet article vous sera utile si:

  • vous avez créé des applications sur le Web avec HTML, CSS et JavaScript, et vous souhaitez utiliser les mêmes technologies pour créer des applications destinées aux plates-formes Windows, macOS ou Linux;
  • vous créez déjà des applications de bureau multiplateformes avec des technologies comme Electron et vous souhaitez découvrir des alternatives;
  • vous souhaitez créer des applications avec des technologies Web pour les distributions Linux, telles que PureOS;
  • vous êtes un passionné de Rust et vous souhaitez l'appliquer pour créer des applications multiplateformes natives.

Nous verrons comment créer une application multiplateforme native à partir d'un projet Web existant. Allons-y!

Remarque: Cet article suppose que vous maîtrisez HTML, CSS, JavaScript et Vue.js.

Qu'est-ce que Tauri?

Le site officiel résume bien Tauri:

  • Tauri est une chaîne d'outils polyglotte pour créer des applications natives plus sécurisées avec des binaires minuscules et rapides. Par «polyglotte», je veux dire que Tauri utilise plusieurs langages de programmation. À l'heure actuelle, Rust, JavaScript et TypeScript sont utilisés. Mais il est prévu de vous permettre d'utiliser Go, C ++, Python et plus encore.
  • Il vous permet d'utiliser n'importe quel framework frontal HTML et JavaScript, tel que Vue.js, React ou Angular, pour créer une application de bureau native, et il peut être intégré dans n'importe quel pipeline.
  • Il vous aide à créer et à regrouper des binaires pour les principales plates-formes de bureau (mobile et WebAssembly à venir).

Donc, en gros, Tauri vous permet d'utiliser les technologies Web pour créer des applications de bureau natives minuscules et sécurisées.

Sur sa page GitHub, Tauri est décrit comme une chaîne d'outils indépendante du framework pour créer des applications natives hautement sécurisées qui ont de minuscules binaires (c'est-à-dire la taille du fichier) et qui sont très rapides (c'est-à-dire une utilisation minimale de la RAM).

Pourquoi pas Electron?

Electron est un outil populaire pour utiliser les technologies Web pour créer des applications de bureau.

Cependant, les applications Electron ont une taille de bundle assez grande et elles ont tendance à occuper beaucoup de mémoire lors de l'exécution. Voici comment Tauri se compare à Electron:

  • Paquet
    La taille d'une application Tauri peut être inférieure à 600 Ko.
  • Mémoire
    L'empreinte d'une application Tauri est inférieure à la moitié de la taille d'une application Electron.
  • Licence
    La nouvelle licence est possible avec Tauri, mais pas avec Electron. Electron est livré avec du chrome dès la sortie de la boîte. Cependant, Chromium comprend un système de gestion des droits numériques nommé Widevine. L'inclusion de Widevine dans Chromium rend les applications créées avec Electron désapprouvées par les utilisateurs de plates-formes telles que PureOS pour la seule raison qu'il ne s'agit pas d'un logiciel libre / libre (FLOSS). Les plateformes comme PureOS sont vérifiées par la Free Software Foundation (FSF). Cela signifie qu'ils ne peuvent publier que des logiciels gratuits et open-source dans leurs boutiques d'applications.

En un mot, si votre application est construite avec Electron, elle ne sera jamais expédiée officiellement dans la boutique PureOS. Cela devrait être une préoccupation pour les développeurs ciblant de telles distributions.

Plus de fonctionnalités de Tauri

  • La sécurité est vraiment importante pour l'équipe Tauri. Les applications créées avec Tauri sont censées être sécurisées dès le départ.
  • Tauri est compatible avec n'importe quel framework frontal, vous n'avez donc pas à changer votre pile.
  • Il a de nombreux modèles de conception pour vous aider à choisir des fonctionnalités importantes avec des configurations simples.

Avantages de Tauri

  • Tauri vous permet de prendre la base de code que vous avez créée pour le Web et de la transformer en une application de bureau native, sans rien changer.
  • Bien que vous puissiez utiliser Rust dans un projet basé sur Tauri, il est complètement facultatif. Si vous l'avez fait, vous n'auriez pas besoin de modifier quoi que ce soit dans votre base de code d'origine ciblée pour le Web.

Tauri du monde réel

Si vous faites partie de la communauté Vue.js depuis un certain temps, alors vous avez entendu parler de Guillaume Chau, membre de l'équipe centrale de Vue.js. Il est responsable de l'interface de ligne de commande (CLI) Vue.js, ainsi que d'autres bibliothèques Vue.js impressionnantes. Il a récemment créé guijs, qui signifie «interface utilisateur graphique pour les projets JavaScript». Il s'agit d'une application de bureau native optimisée par Tauri pour gérer visuellement vos projets JavaScript.

Guijs est un exemple de ce qui est possible avec Tauri, et le fait qu'un membre principal de l'équipe Vue.js travaille sur l'application nous indique que Tauri joue bien avec Vue.js (entre autres frameworks frontaux). Consultez le référentiel guijs sur GitHub si vous êtes intéressé. Et, oui, c'est open-source.

Comment fonctionne Tauri

À un niveau élevé, Tauri utilise Node.js pour échafauder une fenêtre de rendu HTML, CSS et JavaScript en tant qu'interface utilisateur (UI), gérée et démarrée par Rust. Le produit est un binaire monolithique qui peut être distribué en tant que types de fichiers courants pour Linux (deb / appimage), macOS (app / dmg) et Windows (exe / msi).

Comment sont créées les applications Tauri

Une application Tauri est créée via les étapes suivantes:

  1. Commencez par créer une interface dans votre infrastructure graphique et préparez le HTML, le CSS et le JavaScript pour la consommation.
  2. La CLI Tauri Node.js le prend et configure le runner Rust selon votre configuration.
  3. En mode développement, il crée une fenêtre WebView, avec débogage et Rechargement à chaud du module.
  4. En mode construction, il configure le bundler et crée une application finale en fonction de vos paramètres.

Configuration de votre environnement

Maintenant que vous savez ce qu'est Tauri et comment cela fonctionne, permettez-moi de vous expliquer comment configurer votre machine pour le développement avec Tauri.

Remarque: La configuration ici concerne les machines Linux, mais des guides pour macOS et pour Windows sont également disponibles.

Configuration Linux

La nature polyglotte de Tauri signifie qu'elle nécessite un certain nombre de dépendances d'outils. Commençons par installer certaines des dépendances. Exécutez ce qui suit:

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

Une fois que ce qui précède a réussi, installez Node.js (si vous ne l’avez pas déjà), car Tauri a besoin de son runtime. Vous pouvez le faire en exécutant ceci:

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

Cela installera nvm (gestionnaire de versions Node.js), qui vous permet de gérer facilement le runtime Node.js et de basculer facilement entre les versions de Node.js. Une fois installé, exécutez ceci pour voir une liste des versions de Node.js:

nvm ls-remote

Au moment d'écrire ces lignes, la version la plus récente est 14.1.0. Installez-le comme ceci:

nvm install v14.1.0

Une fois Node.js entièrement configuré, vous devrez installer le compilateur Rust et le gestionnaire de packages Rust: Cargo. La commande ci-dessous installerait les deux:

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

Après avoir exécuté cette commande, assurez-vous que Cargo et Rust sont dans votre $PATH en exécutant ce qui suit:

rust --version

Si tout s'est bien passé, cela devrait renvoyer un numéro de version.

Selon la documentation de Tauri, assurez-vous que vous êtes sur la dernière version en exécutant la commande suivante:

$ rustup update stable

Voilà! Vous êtes un peu plus près de préparer votre machine à 100% pour Tauri. Il ne reste plus qu'à installer le tauri-bundler Caisse. Il est préférable de quitter votre CLI et d'exécuter la commande ci-dessous dans une nouvelle fenêtre CLI:

$ cargo install tauri-bundler --force

Eureka! Si tout s'est bien passé, votre machine est maintenant prête pour Tauri. Ensuite, nous allons commencer à intégrer Tauri à Vue.js. Allons-y!

Fil

L'équipe Tauri recommande d'installer le gestionnaire de paquets Yarn. Alors installons-le de cette façon:

npm install -g yarn

Exécutez ensuite ce qui suit:

yarn --version

Si tout fonctionnait, un numéro de version aurait dû être retourné.

Intégration de Tauri avec Vue.js

Maintenant que Tauri est installé, regroupons un projet Web existant. Vous pouvez trouver la démo en direct du projet sur Netlify. Allez-y et bifurquez le référentiel, qui servira de shell. Après l'avoir bifurqué, assurez-vous de cloner la fourche en exécutant ceci:

git clone https://github.com/(yourUserName)/nota-web

Après avoir cloné le projet, exécutez ce qui suit pour installer les dépendances:

yarn

Ensuite, exécutez ceci:

yarn serve

Votre application doit être exécutée sur localhost:8080. Tuez le serveur en cours d'exécution et installons le plug-in CLI Vue.js pour Tauri.

vue-cli-plugin-tauri

L'équipe Tauri a créé un plug-in CLI Vue.js qui configure et transforme rapidement votre application monopage Vue.js (SPA) en une petite application de bureau multiplateforme à la fois rapide et sécurisée. Installons ce plugin:

vue add tauri

Une fois le plugin installé, ce qui peut prendre un certain temps, il vous demandera un titre de fenêtre. Tapez simplement nota et appuyez sur "Entrée".

Examinons les changements introduits par le plugin Tauri.

package.json

Le plugin Tauri a ajouté deux scripts dans la section scripts de notre package.json fichier. Elles sont:

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

le tauri:serve le script doit être utilisé pendant le développement. Alors allons-y:

yarn tauri:serve

Ce qui précède téléchargerait les caisses de rouille nécessaires pour démarrer notre application. Après cela, il lancera notre application dans Mode de développement, où il va créer une fenêtre WebView, avec débogage et Rechargement à chaud du module!

src-tauri

Vous remarquerez également que le plugin a ajouté un src-tauri répertoire à la racine de votre répertoire d'application. Dans ce répertoire se trouvent des fichiers et des dossiers utilisés par Tauri pour configurer votre application de bureau. Voyons le contenu:

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

Le seul changement que nous aurions besoin d'apporter est src-tauri/Cargo.toml. Cargo.toml c'est comme package.json fichier pour Rust. Trouvez la ligne ci-dessous dans Cargo.toml:

name = "app"

Changez-le en ceci:

name = "nota"

C'est tout ce que nous devons changer pour cet exemple!

Regroupement

Pour regrouper nota pour votre plate-forme actuelle, exécutez simplement ceci:

yarn tauri:build

Remarque: Comme pour la fenêtre de développement, la première fois que vous l'exécutez, il faudra un certain temps pour collecter les caisses Rust et tout construire. Lors des exécutions suivantes, il n'aura qu'à reconstruire les caisses Tauri elles-mêmes.

Lorsque ce qui précède est terminé, vous devriez avoir un binaire de nota pour votre système d'exploitation actuel. Pour moi, j'ai un .deb binaire créé dans le src-tauri/target/release/bundle/deb/ annuaire.*

Aller multiplateforme

Vous avez probablement remarqué que le yarn tauri:build La commande vient de générer un binaire pour votre système d'exploitation. Générons donc les binaires pour d'autres systèmes d'exploitation. Pour ce faire, nous allons mettre en place un workflow sur GitHub. Nous utilisons ici GitHub pour servir de support de distribution pour notre application multiplateforme. Ainsi, vos utilisateurs pourraient simplement télécharger les fichiers binaires dans l'onglet «Release» du projet.
Le workflow que nous implémenterions créerait automatiquement nos binaires pour nous via la puissance des actions GitHub. Allons-y.

Création du workflow Tauri

Grâce à Jacob Bolda, nous avons un flux de travail pour créer et publier automatiquement des applications multiplateformes avec Tauri sur GitHub. Outre la construction du binaire pour les différentes plates-formes (Linux, Mac et Windows), l'action téléchargerait également le binaire pour vous en tant que version sur GitHub. Il utilise également l'action Créer une version créée par Jacob pour y parvenir.

Pour utiliser ce flux de travail, créez un .github répertoire à la racine de nota-web. Dans ce répertoire, créez un autre répertoire nommé workflows. Nous créerions ensuite un fichier de workflow dans .github/workflows/et nommez-le release-tauri-app.yml.

Dans release-tauri-app.yml, nous ajouterions un flux de travail qui crée les binaires pour Linux, macOS et Windows. Ce flux de travail téléchargerait également les binaires en tant que version provisoire sur GitHub. Le workflow serait déclenché chaque fois que nous poussons vers le maître.

Ouvert release-tauri-app.ymlet ajoutez l'extrait ci-dessous:

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/create-release@v1.1.0
        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/upload-release-asset@v1.0.2
        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/upload-release-asset@v1.0.2
        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

Pour tester le flux de travail, validez et transférez vos modifications dans votre fork master branche. Après avoir réussi à accéder à GitHub, vous pouvez ensuite cliquer sur l'onglet «Actions» dans GitHub, puis cliquer sur le lien «Vérifier la construction» pour voir la progression du workflow.

Une fois l'exécution de l'action réussie, vous pouvez voir le projet de version dans «Releases» sur la page du référentiel sur GitHub. Vous pouvez ensuite publier votre version!

Conclusion

Cet article a introduit une chaîne d'outils polyglotte pour la création d'applications natives sécurisées, multiplates-formes et minuscules. Nous avons vu ce qu'est Tauri et comment l'intégrer à Vue.js. Enfin, nous avons regroupé notre première application Tauri en exécutant yarn tauri:buildet nous avons également utilisé une action GitHub pour créer des binaires pour Linux, macOS et Windows.

Dites-moi ce que vous pensez de Tauri – je serais ravi de voir ce que vous construirez avec. Vous pouvez rejoindre le serveur Discord si vous avez des questions.

Le référentiel de cet article est sur GitHub. Consultez également les fichiers binaires générés par le flux de travail GitHub.

Smashing Editorial(ra, il, al)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *