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

La technologie rend nos vies meilleures, non uniquement les utilisateurs, mais aussi les créateurs (développeurs et designers). 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; [19659006] vous créez déjà des applications de bureau multiplateforme avec des technologies comme Electron, et vous souhaitez découvrir des alternatives;
• vous voulez créer des applications avec des technologies Web pour les distributions Linux, telles que PureOS;
• vous êtes un Rust passionné, et vous souhaitez l'appliquer pour créer des applications natives multiplateformes.

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

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

Qu'est-ce que Tauri?

Le site Web 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 un natif
• 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

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 de fichier) et qui sont très rapides (c.-à-d. utilisation minimale de RAM).

Pourquoi pas Electron?

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

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

• Bundle
  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 libres et open-source dans leurs magasins d'applications.

En résumé, si votre application est construite avec Electron, elle ne sera jamais officiellement envoyée 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 choisissez 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 pourrait utiliser Rust dans un projet basé sur Tauri, il est complètement facultatif. Si vous l'avez fait, vous n'auriez pas besoin de changer quoi que ce soit dans votre base de code d'origine ciblée pour le Web.

Real-World Tauri

Si vous avez fait partie de la communauté Vue.js pendant un certain temps, alors vous ' ll a entendu parler de Guillaume Chau membre de l'équipe de base 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.

Fonctionnement de Tauri

À un niveau élevé, Tauri utilise Node.js pour échafauder une fenêtre de rendu HTML, CSS et JavaScript comme interface utilisateur (UI), géré et démarré 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 les applications Tauri sont faites

A Tauri L'application est créée via les étapes suivantes:

1. Commencez par créer une interface dans votre infrastructure GUI et préparez le HTML, CSS et JavaScript pour la consommation.
2. La CLI Tauri Node.js la prend et configure le runner Rust selon
3. En mode développement, il crée une fenêtre WebView, avec débogage et Hot Module Reloading .
4. En mode construction, il configure le bundler et crée un 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 est pour les machines Linux, mais les guides pour macOS et pour Wi ndows sont également disponibles

Configuration Linux

La nature polyglotte de Tauri signifie qu'elle nécessite un certain nombre de dépendances d'outil. 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 | frapper

Cela installera nvm (gestionnaire de version 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 se trouvent 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 la caisse tauri-bundler . 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.

Fils

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

 npm install -g yarn

Exécutez ensuite la commande suivante:

 yarn --version

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

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/[19459086

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

 yarn

Ensuite, exécutez ceci:

 service de fil

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 truque rapidement et transforme 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 modifications apportées par le plugin Tauri.

package.json

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

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

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

 fils tauri: servir

Ce qui précède téléchargerait les caisses Rust nécessaires au démarrage de notre application. Après cela, il lancera notre application en mode de développement où il créera une fenêtre WebView, avec débogage et Hot Module Reloading !

src- tauri

Vous remarquerez également que le plugin a ajouté un répertoire src-tauri à 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 dans src-tauri / Cargo.toml . Cargo.toml est comme le fichier package.json pour Rust. Trouvez la ligne ci-dessous dans Cargo.toml :

 name = "app"

Remplacez-le par 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 du 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.

Une fois les étapes ci-dessus terminées, vous devriez avoir un binaire de nota pour votre système d'exploitation actuel. Pour moi, j'ai un binaire .deb créé dans le répertoire src-tauri / target / release / bundle / deb / . *

Going Cross-Platform

You probablement remarqué que la commande yarn tauri: build 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 flux de travail que nous implémenterions créerait automatiquement nos fichiers binaires pour nous via la puissance des actions GitHub .

Création du flux de travail 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 effectuée par Jacob pour y parvenir.

Pour utiliser ce flux de travail, créez un répertoire .github à 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 le nommerions release-tauri-app.yml .

Dans release-tauri-app. yml nous ajouterions un workflow qui construit les binaires pour Linux, macOS et Windows. Ce flux de travail téléchargerait également les binaires en tant que version provisoire sur GitHub.

Ouvrez release-tauri-app.yml et ajoutez l'extrait de code ci-dessous:

 nom: release-tauri-app

sur:
  pousser:
    branches:
      - Maître
    chemins:
      - '** / package.json'

emplois:
  check-build:
    s'exécute: ubuntu-latest
    délai d'expiration: 30

    pas:
      - utilise: actions / checkout @ v2
      - nom: nœud de configuration
        utilise: actions / setup-node @ v1
        avec:
          version nœud: 12
      -Nom: installez stable à la rouille
        utilise: actions-rs / toolchain @ v1
        avec:
          chaîne d'outils: stable
          profil: minimal
      - nom: installez webkit2gtk
        exécuter: |
          mise à jour sudo apt-get
          sudo apt-get install -y webkit2gtk-4.0
      - run: fil
      - nom: construire nota pour l'application tauri
        exécuter: construction de fil
      - exécuter: cargo install tauri-bundler --force
      - nom: construire l'application tauri
        exécuter: fil tauri: construire

  créer-libérer:
    besoins: check-build
    s'exécute: ubuntu-latest
    les sorties:
      RELEASE_UPLOAD_URL: $ {{steps.create_tauri_release.outputs.upload_url}}

    pas:
      - utilise: actions / checkout @ v2
      - nom: nœud de configuration
        utilise: actions / setup-node @ v1
        avec:
          version nœud: 12
      - nom: obtenir la version
        run: echo :: set-env name = PACKAGE_VERSION :: $ (node ​​-p "require ('./ package.json'). version")
      - nom: créer une version
        id: create_tauri_release
        utilise: jbolda/create-release@v1.1.0
        env:
          GITHUB_TOKEN: $ {{secrets.GITHUB_TOKEN}}
        avec:
          tag_name: $ {{matrix.package.name}} - v $ {{env.PACKAGE_VERSION}}
          release_name: 'Release nota app v $ {{env.PACKAGE_VERSION}}'
          corps: "Voir les ressources pour télécharger cette version et installer."
          brouillon: vrai
          avant-première: faux

  créer et télécharger des actifs:
    besoins: création-version
    s'exécute: $ {{matrix.platform}}
    délai d'expiration: 30

    stratégie:
      fail-fast: faux
      matrice:
        plate-forme: [ubuntu-latest, macos-latest, windows-latest]
        comprendre:
          - plateforme: ubuntu-latest
            buildFolder: bundle / deb
            ext:  _0.1.0_amd64.deb
            compressé: ''
          - plateforme: macos-latest
            buildFolder: bundle / osx
            ext: .app
            compressé: .tgz
          - plate-forme: windows-latest
            buildFolder: ''
            ext: .x64.msi
            compressé: ''

    pas:
      - utilise: actions / checkout @ v2
      - nom: nœud de configuration
        utilise: actions / setup-node @ v1
        avec:
          version nœud: 12
      -Nom: installez stable à la rouille
        utilise: actions-rs / toolchain @ v1
        avec:
          chaîne d'outils: stable
          profil: minimal
      - nom: installez webkit2gtk (ubuntu uniquement)
        if: matrix.platform == 'ubuntu-latest'
        exécuter: |
          mise à jour sudo apt-get
          sudo apt-get install -y webkit2gtk-4.0
      - run: fil
      - nom: construire nota pour l'application tauri
        exécuter: construction de fil
      - exécuter: cargo install tauri-bundler --force
      - nom: construire l'application tauri
        exécuter: fil tauri: construire
      - nom: compresser (macos uniquement)
        if: matrix.platform == 'macos-latest'
        répertoire de travail: $ {{format ('./ src-tauri / target / release / {0}', matrix.buildFolder)}}
        exécuter: tar -czf $ {{format ('nota {0} {1}', matrix.ext, matrix.compressed)}} $ {{format ('nota {0}', matrix.ext)}}
      - nom: télécharger l'actif de la version
        id: upload-release-asset
        utilise: actions/upload-release-asset@v1.0.2
        env:
          GITHUB_TOKEN: $ {{secrets.GITHUB_TOKEN}}
        avec:
          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)}}
          nom_élément: $ {{format ('nota {0} {1}', matrix.ext, matrix.compressed)}}
          asset_content_type: application / zip
      - nom: construire l'application tauri en mode débogage
        run: yarn tauri: build --debug
      - nom: compresser (macos uniquement)
        if: matrix.platform == 'macos-latest'
        répertoire de travail: $ {{format ('./ src-tauri / target / debug / {0}', matrix.buildFolder)}}
        exécuter: tar -czf $ {{format ('nota {0} {1}', matrix.ext, matrix.compressed)}} $ {{format ('nota {0}', matrix.ext)}}
      - nom: télécharger l'actif de la version avec le mode de débogage activé
        id: upload-release-asset-debug-mode
        utilise: actions/upload-release-asset@v1.0.2
        env:
          GITHUB_TOKEN: $ {{secrets.GITHUB_TOKEN}}
        avec:
          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)}}
          nom_élément: $ {{format ('nota-debug {0} {1}', matrix.ext, matrix.compressed)}}
          asset_content_type: application / zip

Pour tester le flux de travail, validez et envoyez vos modifications à la branche master de votre fork. 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 flux de travail.

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, multiplateformes et minuscules. Nous avons vu ce qu'est Tauri et comment l'intégrer à Vue.js. Enfin, nous avons intégré notre première application Tauri en exécutant yarn tauri: build et nous avons également utilisé une action GitHub pour créer des binaires pour Linux, macOS et Windows.

Faites-moi savoir 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 pour cet article est sur GitHub. Voir également les binaires générés par le flux de travail GitHub .

(ra, il, al)