Les étudiants de l’ESGI, ont la possibilité d’organiser des Meet–up sur des sujets au choix. Quatre étudiants en 5ème année d’Ingénierie du Web, Júlio PEREIRA, Ali RAID, Yacine SOUSSI, Moncef SAIKI, Othmane ELMOHRI, ont mis en place un Meet–up portant sur la découverte de WebAssembly. Ils ont convié 4 intervenants, spécialistes du sujet afin d’animer les conférences.
WebAssembly se propose comme un nouveau standard du Web, disponible dans tous les navigateurs modernes, destiné à la compilation vers le Web.
JavaScript et WebAssembly vont-ils s’affronter ou s’associer ? Pour le moment, c’est l’association qui prime.
L’énorme avantage de WebAssembly est de permettre de transformer en module WebAssembly des applications écrites en C, C++, Rust, etc. On peut en effet importer un module WebAssembly dans un fichier JavaScript.
Àpartir de là, on peut utiliser des fonctions mises à disposition par ce module WebAssembly depuis un fichier JavaScript. Les promesses sont d’envergure : faire abstraction du langage source en proposant un format de Bytecode, et obtenir des performances proches du natif grâce à une plateforme d’exécution sécurisée, directement intégrée dans le navigateur.
WebAssembly & Affichage d’images satellites dans le navigateur
Le premier intervenant était Nicolas Decoster qui a présenté l’un de ses travaux au sein de Magellium, une société de services qui travaille dans le spatial.
M. Decostera une casquette d’informaticien, mais aussi de scientifique puisqu’il s’intéresse et aime énormément les algorithmes, les traitements de données, etc. Il s’est intéressé au web qui est basé sur des standards et, à l’époque de cette recherche pour Magellium, il s’est vite rendu compte que les performances n’étaient pas optimales.
Il a donc eu l’idée de proposer au CNES (Centre national d’études spatiales) de mettre en place une étude pour savoir ce qu’il était possible de faire dans le web en ce qui concerne le traitement de données volumineuses, traitement coûteux, etc. Cette étude commence donc au début de WebAssembly.
Au cours de la présentation, il a mis en avant plusieurs points essentiels?:
Ce que l’on peut faire avec (jeux, édition de vidéo ou d’image, application musicale, reconnaissance d’image, VR et AR, etc.)
L’historique du web
Comment compiler du C en JS avec Emscripten (Code généré lent)
Projet Asm.js (Un sous-ensemble hautement optimisable de JavaScript)
L’historique de WebAssembly
Comment cela fonctionne dans le navigateur (Exemple avec différents code C)
Ce qu’il y a “sous le capot”
La Mémoire de WebAssembly
Comment interagir avec le JavaScript dans le navigateur (Appel du JavaScript depuis WebAssembly)
Finalisation sur l’use case du traitement d’image satellite
Le but de cette présentation était de pouvoir visualiser des images satellite 100% côté navigateur avec des traitements importants.
On peut en conclure que le défi relevé par Nicolas est largement réussi, on est capable d’afficher un fichier distant de plusieurs GO dans le navigateur de façon fluide grâce à WebAssembly.
WebAssembly & OpenCV
Le second speaker était Ikbel Boulabiar, pour présenter une bibliothèque open source développée par Intel, spécialisée dans le traitement d’images en temps réel intitulée OpenCV.
M. Boulabiar est développeur depuis 10 ans, il a donc beaucoup d’expérience dans ce domaine. Par ailleurs, il s’est lancé dans le freelance en 2018 et a créé sa propre entreprise, Aptum.
Au cours de sa présentation, il a abordé plusieurs points essentiels :
Présentation rapide de openCV : Comme décrit précédemment, openCV est une bibliothèque qui date des années 2000. Son but est de faire des opérations simples telles que la gestion de flux de caméra, entrée caméra, segmentation, appliquer des filtres, etc. Elle contient des algorithmes de machine learning.
Présentation du projet chez le client : M. Boulabiar a entrepris un projet où il devait faire de la détection de document (passeport, carte d’identité, etc.).Un algorithme simple est utilisé pour savoir si le document est valide selon différents critères. Il faut donc utiliser openCV et le lancer dans le navigateur. Une fois que le document détecté est valide, on le « coupe » proprement avant de l’envoyer vers un serveur.
Présentation rapide de WebAssembly : Comme le précédent intervenant, il a fait un rapide rappel sur l’utilité de WebAssembly : Comment avoir le traitement côté navigateur, comment faire tourner d’autres langages et bibliothèques dans le navigateur, sans tout recompiler en Javascript, pour que cela soit exécutable...
Explication de la compilation en C++
Explication sur le lancement de openCV : Deux lancements sont possibles : soit via le fichier JS, ou soit le fichier WASM. Il nous montre des exemples de différents fichiers générés après le lancement, avec des explications mettant en avant une compilation du projet.
Le debugging sur openCV : Contrairement à WebAssembly, il est possible de débugger dans le navigateur via des loaders dans la devtools, utilisation de points d’arrêt, etc. Pour terminer avec ce sujet, il abordera les pratiques à mettre en place pour debugger correctement.
Projet deeplearning : M. Boulabiar terminera sur une présentation de son projet sur le deeplearning qui consiste à générer des photos de profils avec un visage. L’algorithme détecte la position des yeux puis centre automatiquement l’image au sein d’un cercle pour avoir une image claire, net et précise.
WebAssembly & Blockchain
Le troisième conférencier était Nicu Vrabii, il s’intéressait à WebAssembly dans l’environnement de la Blockchain. M. Vrabii est un ingénieur logiciel qui est passionné par le Web3.
Pour rappel : le Web3 fait référence à la prochaine génération de technologies internet, qui repose sur une infrastructure décentralisée. Cela signifie qu’aucune autorité centrale ne contrôle ou ne réglemente Internet et que les utilisateurs ont davantage de contrôles sur leurs données et leur vie privée.
Au sein de sa présentation, il a abordé différents sujets tels que :
WebAssembly dans l’environnement de la Blockchain
3 cas d’études et comment WebAssembly aidera à résoudre certains de ces cas dans la Blockchain
Les différents cas d’études sont :
Résoudre l’hétérogénéité
Il parle ici de l’hétérogénéité dans les langages de programmation de contrats intelligents (smart contracts).
Pour rappel, un smart contract c’est un programme stocké et exécuté dans la Blockchain. On peut représenter cela comme un micro-service, mais un smart contract fournit une meilleure sécurité et de meilleurs filtres. Le code est immuable mais fourni tout de même quelques limitations comme (la taille, le temps d’exécution, le sandboxing : seulement opérable à l’intérieur de la Blockchain)
Il s’est intéressé aux deux plus importants langages de programmation de contrats intelligents qui sont Solidity et Viper qui sont utilisés dans l’écosystème de l’Ethereum.
Le fonctionnement est assez simple?: il suffit d’écrire son code dans ces langages et d’ensuite compiler cela en EVM Bytecode. La majorité des développeurs ne veulent pas apprendre un nouveau langage pour pouvoir utiliser WebAssembly et préfère utiliser des langages existants, plus familiers, comme le C, C++, Rust, etc.
Apporter un soutien communautaire plus large
C’est un sujet important, car quand on développe des logiciels et systèmes open source, l’idéal est d’avoir une communauté qui suit derrière. Vous vous en doutez, que dans le monde il n’y a pas beaucoup de gens qui veulent travailler avec du EVM Bytecode que ce soit pour améliorer le standard ou créer des outils autour de cela.
Intervient donc, Wasm qui apparaît avec un support de communauté importante avec des personnes qui viennent de tous les horizons, puisqu’aujourd’hui WebAssembly peut être utilisé avec différents langages.
Gestion des modèles d’exécution prétentieux
Dans ce dernier point, il a abordé l’exécution des smarts contract comme on a vu précédemment. Si vous souhaitez implémenter l’exécution d’un smart contract, vous devez prendre en compte certaines propriétés à respecter.
Premièrement, l’exécution du smart contract doit être déterministe, donc le même programme avec la même entrée, doit toujours avoir la même sortie.
Deuxièmement, vous devez mettre en place un système de comptabilité pour l’exécution. Cela signifie que vous devez savoir exactement combien vous avez pour faciliter votre transaction. Vous devez aussi être au courant de quand arrêter l’exécution si un coût maximum a été atteint.
Troisièmement, d’un point de vue sécurité, il faut mettre en place des mécanismes, comme un environnement sandboxé pour avoir une meilleure sécurité.
Pour finir, c’est important d’implémenter un modèle de sécurité de base capacitaire qui signifie qu’à tout moment, que vous savez quelles ressources non–compactes peuvent être utilisées à partir de votre système.
Mr Vrabii conclura que WebAssembly et la Blockchain sont des « meilleurs amis ». Il y a beaucoup d’études intéressantes déjà réalisées ou même des cas d’utilisation de WebAssembly dans la Blockchain sans compter que le Web continue de se développer très rapidement.
Exécution de WebAssembly en dehors du navigateur
Notre quatrième et dernier intervenant était Philippe Charrière. Il travaille chez Gitlab où il est Senior Customer Success Enginer ce qui signifie qu’il aide ses camarades en interne quand ils ont des soucis techniques trop compliqués pour leurs clients.
Le but de sa présentation était de comprendre les mécanismes qui permettent d’exécuter WASM en dehors de la VM JavaScript.
WASI (mécanisme de base) … Compliqué ou pas ?
WASM a plein de qualités telles que sa rapidité, sa légèreté, pas d’accès aux fonctions systèmes de l’OS, pas d’accès à la mémoire. Par défaut, WASM est « Safe by default »
Mais il serait bien de profiter de tout cela hors du navigateur : intervient donc WASI. Il permettra de faire tourner des modules WASM en dehors du navigateur à partir d’autres hosts via un runtime (application par exemple).
Si on récapitule, pour exécuter du WASM à l’extérieur du navigateur, il faut des runtimes.
Comment simplifier cela ?
Il faut utiliser les frameworks par-dessus les runtimes pour faire plus simple via le passage de paramètres ou encore les host functions « toutes prêtes ».
Une expérience enrichissante
Júlio PEREIRA revient avec sur l’organisation de cette belle conférence :
« Cette expérience fut un véritable défi pour l’ensemble des étudiants puisque trouver des intervenants n’était pas une tâche facile. D’autant plus que le sujet à aborder nécessitait une bonne expertise et donc une recherche plus profonde.
Nous nous sommes serrés les coudes et nous avons utilisé tous les outils en notre possession pour améliorer nos chances de trouver des personnes intéressées pour ce Meet–up. Ceci qui s’est avéré très intéressant sur le plan personnel, mais aussi pour l’ensemble des visiteurs d’après les différents retours que nous avons reçus.Pour citer quelques outils : Linkedin, Twitter, DevChat…
Ce Meet–up a été très enrichissant, nous avons beaucoup appris et cela nous a été d’une grande aide pour nos prochains projets tels que le projet FYC.
Nous conclurons sur un GRAND MERCI à l’école pour avoir mis en place ce projet. »
Organiser des Meet–Up permet aux étudiants d’aller à la rencontre d’experts dans leur domaine d’étude. L’organisation et la participation à ce projet leur apporte une perspective de certains sujets différente de celle apportée en cours.
Ces conférences sont retransmises en live sur Twitch donc n’hésitez pas à y participer !
