Utiliser Rust pour faire du frontend, une idée folle ?

Qu'est-ce qu'un language comme Rust, que l'on associe plutôt à du développement bas niveau, vient-il faire dans le navigateur web ?

Alors que ce domaine est très largement dominé par le javascript/typescript, on peut aujourd'hui néanmoins considérer Rust comme une alternative intéressante à bien des égards. On voit d'ailleurs de plus en plus d'applications complexes l'utiliser, comme Figma, Adobe Photoshop Web, Google Earth et bien d'autres.
En fait tout repose sur une technologie : le WebAssembly (WASM) qui permet de compiler le code Rust (ou autre) en un binaire interpretable nativement par les navigateurs et qui s'interface avec le javascript.
Avec le développement de librairies et frameworks facilitant le développement d'applications réactives tels que Yew, Leptos ou Dioxus, nous avons aujourd'hui des alternatives qui permettent de faire la même chose qu'avec Angular ou React, mais avec la performance, la sécurité, et l'expérience développeur de Rust en plus.
Voici donc mon retour d'expérience après avoir utilisé Yew dans un projet client.

Qu'est-ce que le WebAssembly (WASM) ?

Tout d'abord, il faut bien comprendre que le WebAssembly n'est pas là pour remplacer Javascript. En effet, WebAssembly a besoin de javascript pour pouvoir déclarer et executer son code binaire, qui est directement interprétable par tous les navigateurs modernes, avec la promesse d'obtenir des performances proches du natif.

Mais il faut noter que WASM ne permet pas de manipuler le DOM directement. Pour cela, il est nécessaire de passer par des bindings, qui permettent de mapper des éléments du DOM à des constructs Rust typés. Et c'est là que des frameworks tels que Yew entrent en jeu.

Yew, un React en Rust ?

Yew est probablement le framework WASM le plus populaire de l'écosystème Rust. Il s'inspire clairement de React en se basant sur la mécanique de composants, props, gestion d'état, et de virtual DOM. Du coup, lorsque l'on connait déjà ce type de librairies en JS, on n'est vraiment pas dépaysé et on peut commencer très naturellement, avec le système de typage fort et la magie de Rust en plus !

Voici un exemple simple :

use yew::prelude::*;

#[function_component(Compteur)]
fn compteur() -> Html {
	let compteur = use_state(|| 0);
	let on_click = {
		let compteur = compteur.clone();
		Callback::from(move |_| compteur.set(*compteur + 1))
	};
	
	html! {
		<div>
			<button onclick={on}>{ "Incrémenter" }</button>
			<p>{ format!("Valeur : {}", *compteur) }</p>
		</div>
	}
}

Du côté des outils de développement, je recommande Trunk qui permet de build le code et de bundle le WASM avec la "glue" JS nécessaire, et tout autre assets (images, CSS...).

Avantages et inconvénients d'utiliser Rust pour faire du frontend

Alors si cela ressemble tant à ce que l'on fait déjà en Javascript, pourquoi changer ? Quels sont les avantages à utiliser Rust dans le navigateur ?

Tout repose sur les bénéfices qu'apporte Rust de manière générale :

• une fiabilité du code sans comparaison, grâce au typage, qui permet d'attraper tout un pan de bug dès la compilation;
• pouvoir refactorer sans peur, qui est pour moi l'un des plus grands atouts de Rust, et je l'ai observé maintes fois durant mes missions;
• un écosystème de packages solide et complet, grâce à cargo et crates.io
• la possibilité de réutiliser / partager du code avec le backend

Évidemment, il y a encore des limites à tout ça :

• Un écosystème quand même jeune, avec donc moins de resources sur internet, et notamment pas la même quantité de librairies de composants d'UI disponibles;
• une courbe d'apprentissage plus raide si on ne connait pas déjà Rust;
• le temps de compilation supplémentaire que l'on a pas en JS, à chaque modification du code;

Conclusion

En conclusion, Rust est totalement envisageable pour faire du frontend, en particulier pour les équipes qui travaillent déjà en Rust sur le backend, ou pour les projets qui nécessitent plus de robustesse et de performance.