Créer une application Web simple avec Rust et WebAssembly : un guide étape par étape

Max Zhuk8m2023/10/26

Apprenez à créer une application Web hautes performances à l'aide de Rust et WebAssembly.

featured image - Créer une application Web simple avec Rust et WebAssembly : un guide étape par étape

Introduction

Avez-vous déjà été frustré par les limitations de performances de JavaScript ? Tu n'es pas seul. À mesure que les applications Web deviennent plus complexes, le besoin de solutions hautes performances devient plus évident. Entrez Rust et WebAssembly, deux technologies qui promettent non seulement des performances mais également de la sécurité et de l'efficacité. Dans cet article, nous passerons en revue le processus de création d'une application Web simple à l'aide de Rust et WebAssembly.

Pourquoi Rust et WebAssembly ?

Qu’est-ce que la rouille ?

Rust est un langage de programmation système qui vise à assurer la sécurité, la concurrence et les performances de la mémoire. Il est conçu pour éliminer les bogues courants causés par les pointeurs nuls, les dépassements de tampon et les courses de données, grâce à son système de types et à son modèle de propriété solides. Cela fait de Rust un choix idéal pour créer des logiciels fiables et efficaces.

Avantages de la rouille

Sécurité de la mémoire : le modèle de propriété de Rust garantit que les variables ont un seul propriétaire, empêchant ainsi les fuites de mémoire et les accès non autorisés aux données.
Performances : Rust est conçu pour la vitesse, rivalisant étroitement avec des langages comme C et C++.
Concurrence : la conception du langage de Rust facilite l'écriture de code simultané, ce qui le rend hautement évolutif.
Écosystème riche : avec un référentiel de packages en constante évolution, Cargo, Rust propose une large gamme de bibliothèques et de frameworks pour le développement Web, la manipulation de données, etc.

Qu’est-ce que WebAssembly ?

WebAssembly (souvent abrégé en wasm) est un format d'instruction binaire qui sert de cible de compilation pour les langages de haut niveau comme C, C++ et Rust. Il est conçu pour être un format de code portable et efficace qui permet des performances quasi natives sur les navigateurs Web.

Avantages de WebAssembly

Performances : le code WebAssembly s'exécute à une vitesse quasi native en tirant parti des capacités matérielles courantes.
Sécurité : WebAssembly est conçu pour être sécurisé et en mode sandbox, s'exécutant dans un environnement protégé distinct du système hôte.
Portabilité : WebAssembly est indépendant de la plate-forme, ce qui signifie qu'il peut s'exécuter sur n'importe quelle machine dotée d'un navigateur Web compatible.
Interopérabilité : les modules WebAssembly peuvent être facilement intégrés aux applications JavaScript, vous permettant de tirer parti des technologies Web existantes.

La synergie de Rust et WebAssembly

La combinaison des performances et des fonctionnalités de sécurité de Rust avec la vitesse et la portabilité de WebAssembly crée un duo puissant pour le développement Web. Voici pourquoi ils fonctionnent si bien ensemble :

Performances optimisées : l'accent mis par Rust sur les abstractions sans coût garantit que vos modules WebAssembly sont simples et rapides.
Sûreté et sécurité : Rust et WebAssembly donnent la priorité à une exécution sécurisée, rendant vos applications Web plus fiables.
Facilité d'intégration : Rust dispose d'un support de première classe pour WebAssembly, ce qui facilite la compilation du code Rust dans wasm et son intégration dans vos applications Web.

En tirant parti de Rust et WebAssembly, vous ne vous contentez pas de suivre les tendances modernes du développement Web ; vous gardez une longueur d'avance.

Configuration de votre environnement de développement

Avant de plonger dans le code, il est crucial de mettre en place un environnement de développement adapté à Rust et WebAssembly. Cela garantira que vous disposez de tous les outils et bibliothèques nécessaires, rationalisant ainsi le processus de développement.

Installer Rust

Téléchargez le programme d'installation de Rust : Visitez le site Web officiel de Rust et téléchargez le programme d'installation adapté à votre système d'exploitation.
Exécutez le programme d'installation : Ouvrez votre terminal et exécutez la commande suivante pour installer Rust et son gestionnaire de packages, Cargo.
```
 curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
```
Vérifier l'installation : Pour vous assurer que Rust est correctement installé, ouvrez une nouvelle fenêtre de terminal et exécutez :
```
 rustc --version
```
Vous devriez voir la version du compilateur Rust en sortie.

Installation de wasm-pack

wasm-pack est un outil pour assembler et empaqueter des caisses Rust qui ciblent WebAssembly.

Installer wasm-pack : Ouvrez votre terminal et exécutez la commande suivante :
```
 curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
```
Vérifier l'installation : Vérifiez que wasm-pack est installé en exécutant :
```
 wasm-pack --version
```

Installation de Node.js et npm

Node.js et npm sont essentiels pour gérer les dépendances et exécuter votre serveur Web.

Téléchargez Node.js : Visitez le site Web officiel de Node.js et téléchargez le programme d'installation de votre système d'exploitation.
Exécutez le programme d'installation : suivez les invites d'installation pour installer Node.js et npm.
Vérifier l'installation : ouvrez un terminal et exécutez les commandes suivantes pour vérifier que Node.js et npm sont installés :
```
 node --version npm --version
```

Configuration de votre IDE

Bien que vous puissiez utiliser n'importe quel éditeur de texte pour le développement de Rust et WebAssembly, les IDE comme Visual Studio Code proposent des extensions pour Rust qui fournissent des fonctionnalités telles que la complétion de code, le peluchage et le débogage.

Installez Visual Studio Code : Téléchargez-le et installez-le depuis le site officiel .
Installez Rust Extension : Ouvrez Visual Studio Code, accédez au marché des extensions et recherchez l'extension "Rust" par rust-lang. Installez-le pour une prise en charge améliorée de Rust.

Note pour les utilisateurs de macOS : Les commandes d'installation fournies dans ce guide sont compatibles avec macOS. Si vous rencontrez des problèmes, veuillez vous référer à la documentation officielle respective pour obtenir des instructions spécifiques à la plate-forme.

Création d'un programme Rust simple

Dans cette section, nous allons créer un programme Rust qui calcule la factorielle d'un nombre donné. Cela nous donnera l'occasion d'explorer certaines fonctionnalités de Rust, telles que les fonctions, les boucles et les instructions conditionnelles, tout en créant un programme gourmand en calcul.

Initialiser le projet Rust

Créer une nouvelle bibliothèque Rust : ouvrez votre terminal et exécutez la commande suivante pour créer un nouveau projet de bibliothèque Rust.
```
 cargo new --lib factorial_calculator
```
Accédez au répertoire du projet :
```
 cd factorial_calculator
```

Écrire la fonction factorielle

Ouvrez le fichier lib.rs : accédez au fichier src/lib.rs dans votre éditeur de texte ou IDE.
Implémentez la fonction factorielle : ajoutez le code Rust suivant pour implémenter la fonction factorielle.
```
 #[no_mangle] pub extern "C" fn factorial(n: u32) -> u32 { if n == 0 { 1 } else { n * factorial(n - 1) } }
```
Ici, nous définissons une fonction appelée factorial qui prend un u32 (entier non signé de 32 bits) comme argument et renvoie un u32 . La fonction utilise la récursion pour calculer la factorielle du nombre donné.

Compiler sur WebAssembly

Compilez le code Rust : Maintenant que nous avons notre fonction factorielle, compilons-la dans un module WebAssembly. Exécutez la commande suivante dans votre terminal :
```
 wasm-pack build
```
Vérifiez la construction : après avoir exécuté la commande, vous devriez voir un répertoire pkg dans votre dossier de projet. À l'intérieur, vous trouverez le module WebAssembly ( factorial_calculator_bg.wasm ) et la liaison JavaScript générée ( factorial_calculator.js ).

Et voila! Vous venez de créer un programme Rust qui calcule la factorielle d'un nombre et de le compiler dans un module WebAssembly. Cela démontre non seulement les capacités de Rust, mais ouvre également la voie à l'intégration de cette logique dans une application Web.

Intégration de WebAssembly dans une application Web

Maintenant que nous disposons d'un module WebAssembly pour calculer des factorielles, intégrons-le dans une application Web simple. Nous allons créer une interface HTML de base dans laquelle les utilisateurs peuvent saisir un nombre, puis afficher la factorielle de ce nombre à l'aide de notre module WebAssembly généré par Rust.

Configuration HTML et JavaScript

Créer un fichier HTML : Créez un nouveau fichier nommé index.html dans le répertoire de votre projet et ajoutez le code HTML suivant :

 <!DOCTYPE html> <html> <head> <title>Factorial Calculator</title> </head> <body> <h1>Factorial Calculator</h1> <input type="number" id="numberInput" placeholder="Enter a number"> <button onclick="calculateFactorial()">Calculate</button> <p>Result: <span id="result"></span></p> <script src="./bootstrap.js"></script> </body> </html>

Ici, nous créons une interface simple avec un champ de saisie du nombre, un bouton pour déclencher le calcul et un paragraphe pour afficher le résultat.

Créer un fichier JavaScript : Créez un nouveau fichier nommé bootstrap.js et ajoutez le code JavaScript suivant :
```
 import('./factorial_calculator').then(module => { window.calculateFactorial = () => { const input = document.getElementById('numberInput').value; const result = module.factorial(parseInt(input)); document.getElementById('result').innerText = result; }; }).catch(console.error);
```
Dans ce script, nous importons dynamiquement notre module WebAssembly et définissons une fonction appelée calculateFactorial . Cette fonction lit le nombre dans le champ de saisie, appelle la fonction factorial depuis notre module WebAssembly et affiche le résultat.

Exécuter l'application Web

Installer un serveur Web : Si vous n'avez pas de serveur Web local, vous pouvez en installer un en utilisant npm :
```
 npm install -g http-server
```
Exécutez le serveur Web : accédez au répertoire de votre projet dans le terminal et exécutez :
```
 http-server .
```
Ouvrez l'application Web : ouvrez votre navigateur Web et accédez à http://localhost:8080 . Vous devriez voir votre application Web Calculatrice Factorielle. Entrez un nombre, cliquez sur « Calculer » et la factorielle du nombre devrait être affichée.

Et c'est tout! Vous avez intégré avec succès un module WebAssembly généré par Rust dans une application Web simple. Cela démontre la puissance et la flexibilité de la combinaison de Rust avec WebAssembly pour créer des applications Web hautes performances.

Conclusion

Dans cet article, nous avons exploré la puissante combinaison de Rust et WebAssembly pour le développement Web. Nous avons commencé par configurer notre environnement de développement, puis sommes passés à la création d'un programme Rust qui calcule la factorielle d'un nombre. Enfin, nous avons intégré ce programme dans une application web simple.

La synergie entre Rust et WebAssembly offre une multitude d'opportunités pour créer des applications Web hautes performances, sécurisées et efficaces. Que vous cherchiez à optimiser un projet existant ou à en démarrer un nouveau, ces technologies offrent des solutions robustes qui méritent d'être considérées.

À mesure que les technologies Web continuent d’évoluer, il est crucial de garder une longueur d’avance. Rust et WebAssembly ne sont pas seulement des tendances modernes ; ce sont les éléments constitutifs de la prochaine génération d’applications Web.

Merci de m'avoir rejoint dans ce voyage et je vous encourage à plonger plus profondément dans le monde de Rust et WebAssembly. Restez à l'écoute de nos prochains articles, dans lesquels nous approfondirons la création de fonctionnalités plus complexes et l'exploration d'applications du monde réel.

Ressources additionnelles

Photo de SpaceX sur Unsplash

L O A D I N G
. . . comments & more!

About Author

Max Zhuk@zhukmax

Web-developer, prefer php and sql, traveling and reading

Read my stories