Comprendre le Web Assembly

Vous entendez parler de Web Assembly, ou de WASM, mais vous ne savez toujours pas de quoi il s'agit ? Alors cet article est fait pour vous !

Comprendre le Web Assembly

Si je vous demande quels sont les langages que peut interpréter nativement un navigateur web, il y a de fortes chances pour que vous me répondiez : HTML, CSS et Javascript.

Et vous avez raison !

Mais si je vous disais qu’il existe aussi un moyen pour exĂ©cuter du code Ă©crit en C/C++ ou mĂȘme Python directement dans le navigateur ? Et bien oui, c’est possible grĂące Ă  une technologie que l’on appelle le Web Assembly.

Qu’est-ce que c’est ?

Le Web Assembly (ou WASM) est un format de bytecode spĂ©cialement fait pour ĂȘtre chargĂ©, compilĂ© et exĂ©cutĂ© dans un navigateur.

Un bytecode est un langage intermédiaire entre un code non-compilé (écrit par le développeur), et un code machine (exécutable).

Le principe de Web Assembly est donc de prendre un code écrit avec un langage bas-niveau en entrée, pour le compiler en un bytecode qui sera chargé dans le navigateur avec une interface disponible pour que le Javascript et le code natif puisse communiquer facilement.

Une fois le bytecode chargé, il sera donc compilé en langage machine et exécuté dans une sandbox spécialisée du navigateur web.

Vous l’aurez compris, le principal intĂ©rĂȘt du Web Assembly se cache dans sa vitesse d’exĂ©cution car il est dĂ©sormais possible d’apporter la rapiditĂ© d’exĂ©cution des langages bas-niveau directement dans une application web.

Dans certains cas, on arrive mĂȘme Ă  des gains de performances jusqu’à 16 fois meilleurs que la vitesse d’exĂ©cution du mĂȘme code en Javascript.

Pour ceux que ça intéresse, voilà un benchmark détaillé des performances entre Javascript et Web Assembly : https://link.medium.com/94HhoIRUZ9

Quels sont les usages du Web Assembly ?

La vitesse d'exécution et l'optimisation mémoire possibles grùce aux outils bas-niveau permettent de faire passer les applications web déjà trÚs puissantes à un stade supérieur.

Il est désormais possible de développer des jeux de plus en plus complexes tournant directement dans le navigateur, c'est notamment le cas avec Unity qui exporte la version navigateur de ses jeux en Web Assembly.

Mais il est également possible de faire du Edge Computing, c'est à dire de soulager les serveurs en effectuant certains calculs sur la machine du client. C'est le cas par exemple pour certains hébergeur d'images qui effectuent la compression des images uploadées directement dans le navigateur.

Et avec le Web Assembly, mĂȘme la compression vidĂ©o dans le navigateur devient possible !

Et mĂȘme si cette technologie est capable de bien d'autre choses, il ne faut pas oublier que pour certaines entreprise cela veut aussi dire pouvoir rĂ©utiliser une "legacy codebase" Ă©crite en C dans un navigateur sans avoir Ă  rĂ©Ă©crire de JavaScript !

Comment l’utiliser ?

Si vous voulez mettre en place des modules Web Assembly, je vous recommande de lire ces deux tutoriels pour apprendre à installer et utiliser Emscripten, la toolchain nécessaire pour compiler des scripts C/C++ en Web Assembly :

J'espÚre que cet article vous aura été utile, et à bientÎt sur le blog !

Les articles les plus populaires du blog

Envie de continuer à lire des articles autour du développement web (entre autres) ? Voici la sélection des articles de mon blog les plus lus par la communauté !

Voir la sĂ©lection 🚀

Recevez les articles de la semaine par e-mail pour ne rien manquer !

S'abonner à la newsletter 📧
Mes formations disponibles 🎓  -5% inclus pour les lecteurs du blog

À propos de l'auteur

Hello, je suis Nicolas Brondin-Bernard, ingénieur web indépendant depuis 2015 passionné par le partage d'expériences et de connaissances.

Aujourd'hui je suis aussi formateur/coach pour dĂ©veloppeurs web juniors, tu peux me contacter sur nicolas@brondin.com, sur mon site ou devenir membre de ma newsletter pour ne jamais louper le meilleur article de la semaine et ĂȘtre tenu au courant de mes projets !


Photo par Hello I'm Nik 🎞 sur Unsplash