WebAssembly : comment rendre une appli web puissante… et légère !
De plus en plus utilisé, le WebAssembly (Wasm) désigne une technologie qui permet d’exécuter du code bas niveau sur une appli ou une page web, à partir de langages comme le C++ ou le Rust. Émuler un ancien logiciel ou traiter des tâches complexes depuis un simple navigateur devient ainsi possible, pour une intégration simple. Cas pratique.
Qu’est-ce que le WebAssembly
Intégré depuis 2019 aux recommandations du World Wide Web Consortium, le WebAssembly, abrégé Wasm, est un standard ouvert d’exécution de code binaire sur les pages web, côté client. Conçu pour être interprété dans n’importe quel contexte, en version « portable », il s’agit d’un format binaire avec une représentation textuelle. Aujourd’hui, il est principalement utilisé en complément du JavaScript, dont il peut remplacer certains scripts d’exécution lourde : des codes rédigés en Rust, Go ou C++ peuvent en effet être compilés en Wasm et se déclencher dans le navigateur, de manière optimisée. En constante évolution, le Wasm déploie chaque année de nouvelles avancées ; en témoigne aujourd’hui le WebAssembly System Interface (WASI), standard d’API dévolu, entre autres, à l’implantation sur serveur d’interfaces dédiées à des pages ou applis Wasm.
Wasm dans un contexte web
C’est un peu la quadrature du cercle : rechercher la performance optimale dans un environnement web dépend largement de la capacité des développeurs à optimiser leur code avec des outils comme JIT (Just-In-Time Compilation), par exemple. Pour autant, par son mode d’exécution, JavaScript peut s’avérer moins rapide qu’escompté, surtout par comparaison avec des applis binaires compilées à partir de Rust ou de C++. L’intérêt du Wasm vient de son principe même : des fonctionnalités précises du code peuvent être précompilées en format WebAssembly avant de s’exécuter dans le navigateur. Un algorithme ou un programme émulé sont ainsi intégrés à une page web de manière optimisée. C’est via un code JavaScript qu’un module Wasm est chargé : le moteur JavaScript met à jour la page en fonction du fichier Wasm lu par le navigateur (Firefox, Chrome, Safari ou Edge comprennent des moteurs généralistes avec interpréteur et/ou compilateur dédiés au WebAssembly) avec exécution du bytecode C++/Rust dans un sandbox sécurisé, avec une rapidité proche des programmes natifs.
Cas pratique : une interface web pour la logistique opérationnelle
D’abord plébiscité pour exécuter d’anciens codes directement sur le navigateur, et ainsi ne pas avoir à « traduire » des programmes desktop vers le JavaScript, le Wasm s’utilise aujourd’hui pour adjoindre des fonctions de calcul avancé à des apps web ou de simples pages. On peut ainsi imaginer ainsi qu’une société de logistique souhaite optimiser les trajets de ses opérateurs lors des livraisons. Pour ce faire, des algorithmes d’optimisation peuvent être développés en interne afin d’avoir une solution pensée pour le contexte réel de l’entreprise, plutôt que de faire appel à un logiciel du marché.
Un langage comme Rust ou C++ est à considérer pour intégrer un modèle d’optimisation dit « VRP » (Vehicle Routing Problem), qui sera connecté aussi bien à la flotte de véhicules qu’aux logiciels de gestion RH – afin d’anticiper les éventuelles absences d’un livreur ou d’adapter les itinéraires en cas d’incident. L’intérêt de Wasm sera alors de pouvoir proposer aux opérateurs une simple page web listant les prochaines destinations et d’anticiper les éventuels retours aux dépôts directement dans une interface mise à jour en temps réel – par le biais d’un relai WebSockets.
Dans le développement initial de la solution, le processus partage de nombreux traits communs avec ceux employés pour une application desktop – avec des adaptations pour le Web, néanmoins – : les développeurs peuvent s’appuyer sur une bibliothèque ou une boîte à outils dédiée aux optimisations de trajets (Google OR-Tools ou Valhalla) ou concevoir leur propre algorithme. C’est à la compilation que l’intégration vers le Web est à prévoir de manière précise, avec des outils spécifiques. Pour Rust, c’est wasm-bindgen qui « traduit » le module vers le JavaScript, quand le compilateur Emscripten couplé à BinaryEN transforme C/C++ en Wasm pouvant être appelé en JavaScript.
Dans tous les cas, des fichiers .wasm ainsi que des bindings JavaScript sont à intégrer côté client au développement de la page web finale. Dans cette optique, c’est une fonction de compilation et d’instanciation en mémoire qui permet au fichier WebAssembly d’être « chargé » et de délivrer les résultats de l’algorithme d’optimisation directement dans une interface web. On peut ainsi adjoindre différents modules opérationnels aux itinéraires récupérés : la géolocalisation de l’opérateur en temps réel, une API de carte, les données clients de livraison… En mettant en place une architecture réseau basée sur WebSockets.
De cette façon, les données d’itinéraires sont mises à jour de manière instantanée : les événements imprévus sont remontés côté client ou côté serveur, retraités par l’algorithme d’optimisation, et les itinéraires sont modifiés le cas échéant. Le tout sans avoir à empiler les fonctions JavaScript et les dépendances…
Avec un nouveau standard comme Wasm, la performance des applications web ne peut que s’améliorer pour les fonctionnalités nécessitant des calculs complexes. La convergence entre les langages de développement Desktop et l’exécution dans un navigateur figure d’ailleurs parmi les innovations majeures de ces dernières années : il appartient aux décideurs et aux développeurs de se saisir des solutions qu’apporte ce domaine d’expertise !
