air - User contributions [en]

PROJET-INFO5 2021 Artiphonie (saison 2)

2021-03-16T09:45:28Z

Morgan.Crociati:

=Le projet=

L'objectif du projet est le développement d'une application mobile pour une utilisation sur tablette à usage des enfants atteints de trouble du langage. Il a été proposé par une orthophoniste du CHU de Grenoble (Estelle Gillet-Perret). Le but de cette application est d'aider les enfants à travailler leur prononciation de manière autonome, à la maison par l'intermédiaire de mini-jeux et de la méthode Borel-Maisonny.

Une première version de l'application a été développer l'année dernière par un groupe de projet d'INFO5 et l'application est actuellement à l'essai auprès de quelques enfants.

=Les objectifs=

Cette année les objectifs sont :
* Une réflexion autour du backend de l'application
* Une analyse critique de la version actuelle pouvant mener différents développements (refontes partielles, extensions, améliorations)
* Le développement d'une nouvelle application dans le même domaine

=L'équipe=
* Morgan Crociati
* Gaëtan Rival
* Rémy Ruzafa
* Claire Velut

Supervisé par : Bastien De Araujo, Guillaume Denis, Estelle Gillet-Perret et Olivier Richard

=Sprints =
===Sprint 0===
Prise en main du projet
===Sprint 1===
'''Backend'''
* Schéma d'architecture
* Schéma de BDD relationnelle

'''Frontend'''
* Review de code
* Critique constructive de l'application actuelle
* Définition d'une architecture pour l'ajout de nouvelles applications facilement

===Sprint 2===
'''Backend'''
* Poc de l'API

'''Frontend'''
* Amélioration du code existant par rapport aux critiques soulevés dans le sprint 1
* Poc de la nouvelle application définit avec l'orthophoniste

=Journal=

== Sprint 0 ==
'' Vendredi 29 Janvier ''

* Découverte du projet
* Installation des outils et du code déjà existant
* Réunion avec le client : Olivier Richard, pour préciser le projet et ses objectifs

'' Lundi 08 Février ''

Réunion avec le client Olivier Richard et les 2 anciens INFO5 ayant continué à travailler sur le projet pour définir ce qui a été fait et ce qui doit être fait.

'' Mercredi 10 Février ''

* Retour sur la réunion et discutions autour de la gestion de projet
* Définition des objectifs principaux du projet et des milestones
* Planification du rétro planning et des sprints
* Répartition des rôles :
** Equipe Backend : Gaëtan et Rémy
** Equipe Frontend : Claire et Morgan

* Réunion avec les 2 anciens INFO5 pour obtenir les fichiers manquants sur le git et les informations nécessaires à l'exportation du projet godot sous Android afin de tester la version final.

'' Jeudi 11 Février ''

* Prise en main de Godot Engine
* Création d'un mini projet à part pour découvrir et tester les fonctionnalités de Godot Engine
* Elaboration diagramme de l'architecture de l'application Artiphonie
* Elaboration diagramme BDD

'' Vendredi 12 Février ''

* Poursuite du travail de découverte de Godot
* Mise en place d'une interface graphique sur le mini projet
* Découverte et mise en place de tests unitaires en Godot sur le mini projet qui pourraient être ajouté au projet Artiphonie
* Approfondissement diagramme de l'architecture de l'application Artiphonie
* Approfondissement diagramme BDD
* Elaboration de la preuve de concept (POC) sur le backend avec une application Godot liée à une base de donnée par requête HTTP
* Réflexion sur les choix de technos utilisées pour la POC sur l'API et la BDD
* Commencement du développement de l'API en Spring pour la POC

== Sprint 1 ==

'' Lundi 22 Février ''

* Revue de code
* Discussion sur le diagramme de BDD en groupe complet
* Mise en place d'issues liées l'amélioration de l'application existante
* Peaufinement diagramme BDD avec l'ajustement de certaines tables
* Réalisation de la doc sur le diagramme BDD

'' Mardi 23 Février ''

* Revue de code
* Test de l'exportation du projet sous Android
* Réalisation d'une doc pour l'exportation sous Android
* Réflexion sur la maintenance à long terme de l'application
* Finition du développement de l'API avec la liaison avec la BDD PostSQL pour la POC

'' Mercredi 24 février ''

* Résolutions d'issues soulevées lors de la revue de code
* Développement de l'application GODOT pour la POC avec l'envoi de requetes HTTP POST et GET
* Mise à jour de la partie permission Android de l'application, retirer la partie deprecated et faire avec les fonctions built-in

'' Jeudi 25 Février ''

* Résolutions d'issues soulevées lors de la revue de code
* Réunion avec Estelle GILLET-PERRET pour parler de l'application existante et de la nouvelle application.
* Fusion des deux parties de la POC avec l'application GODOT communiquant avec la BDD par l'intermédiaire de l'API
* Redéfinition des entités de l'application (à penser en lien avec la BDD)

'' Vendredi 26 Février ''

* Préparation de la soutenance intermédiaire
* Soutenance intermédiaire
* Réflexion autour de la RGPD accès sur le projet
* Création de l'entité Word, Words, ... sur l'application

== Sprint 2 ==

'' Lundi 01 Mars''

* Réunion avec le porteur de projet (M. Richard) pour redéfinir les objectifs suite à la réunion avec l'orthophoniste
* Réalisation du poster de présentation du projet en anglais
* Finalisation de la POC avec l'affichage du résultat d'une requête GET sur Godot
* Adaptation du bouton ''à propos'' à la nouvelle architecture
* Mise en place des templates (shared dans le projet).
* Premier template réalisé home (menu des applications).

'' Mardi 02 Mars ''

* Redaction de la documentation (Markdown) de la POC Godot HTTP connectée à une base de donnée PostgreSQL par l'intermédiaire d'une API Spring
* Création de la scène partagé ''s'entrainer''
* Template "Learning" implémenté
* Template "playing" implémenté avec un système de difficulté

'' Mercredi 03 Mars ''

* Mise en place de la VM Azure et configuration de cette dernière pour heberger notre base de donnée et API
* Deploiement de l'API et BDD, puis phases de tests à distance
* Adaptation du memory à la nouvelle architecture
* Conversion du jeu goose game sur la nouvelle application.
* Création du template de prononciation utilisé pour Artiphonie

'' Jeudi 04 Mars''

* Correction du poster de présentation du projet en anglais
* Ajustement de l'API avec correction de bug
* Basculement des requetes HTTP en HTTPS avec la mise en place d'un certificat sur la VM Azure
* Adaptation de la scène de fin de jeu
* Implémentation de la partie learning (qui est non partagé)

'' Vendredi 05 Mars ''

* Rédaction de la spécification de l'API
* Création des scores des jeux
* Implémentation d'un système de liste de mot, changeable depuis le menu principal.
* Définition des difficultés pour les jeux existant.

'' Lundi 08 Mars ''

* Mise à jour de la structure de la BDD avec l'avancé et les changements de l'application Artiphonie
* Adaptation du jeu ''écoute et choisis'' à la nouvelle architecture
* Réflexion autour de la façon de trouver si un mot prononcé est correct, la méthode employé précédemment était d'entrer tous les homonymes d'un mot (ce qui n'est pas envisageable pour la version finale)

'' Mardi 09 Mars ''

* Création d'un espace de création de mot en lien avec Lexique sur l'application (Fonctionnalité supprimé post-réunion).
* Découverte de l'API ARASAAC.
* Réunion avec M. Richard sur l'avancé du projet
* Redéfinition de Word, pour savoir si un mot prononcé est correct on se fit à sa phonétique obtenue grâce à Lexique.

''Mercredi 10 Mars ''

* Amélioration de l'ergonomie de la BDD pour stocker des images
* Modification de l'entitée Mot sur le front-end et back-end (normalisation avec les données de Lexique)
* Création d'un script d'export pour les mots lexiques.
* Création d'un script d'export pour les images d'ARASAAC.

'' Jeudi 11 Mars ''

* Elaboration du POC HTTPS avec une application GODOT
* Développement des fonctions dans l'API
* Création de la page principal de l'application qui mène vers les sous application tel qu'Artiphonie
* L'espace avatar est repensé et recréer avec des objets que le joueur peut acheter avec des étoiles qui viennent améliorer l'avatar
* Création d'un script exportant tous les données nécessaire à la BDD (Lexique + ARASAAC)

'' Vendredi 12 Mars ''

* Déboggage certificat HTTPS sur le serveur Artiphonie
* Développement des fonctions dans l'API
* Travail sur l'espace d'avatar
* Redéfinition de la relation mot - image, un mot peut être lié à une image et une image peut être lié à plusieurs mot
* Pour limiter le nombre d'image dans la BDD, création d'un algorithme de regroupement des mots (manger, mangé, mangerais == même image)

'' Lundi 15 mars ''

* Déboggage certificat HTTPS sur le serveur Artiphonie
* Ajout des instructions
* Création de liste de mot par défaut (générale, monosyllabique, bisyllabique, ...)
* Redéfinition du nom des fichiers images généré par la fonctionnalité d'export car non supporté sur Android (nom donné en ASCII)
* Affichage de l'avatar sur les menus
* Ajout de la difficulté phonétique
* Insertion et conversion des fichiers vidéos dans la partie Learning

'' Mardi 16 mars ''

'' Mercredi 17 mars ''

'' Jeudi 18 mars ''

'' Vendredi 19 mars ''

* Soutenance finale sur le projet Artiphonie

=Liens=
* Depôt Git: https://github.com/WriteInGesturesProject
* Diapo soutenance intermédiaire : [[Media:Presentation_Intermediaire_INFO5_ProjetS10_groupe_13.pdf|Présentation Mi-Projet]]

PROJET-INFO5 2021 Artiphonie (saison 2)

2021-01-29T11:32:27Z

Morgan.Crociati: /* Journal */

=Le projet=
=L'équipe=
* Morgan Crociati
* Gaëtan Rival
* Rémy Ruzafa
* Claire Velut

Supervisé par : Bastien De Araujo, Guillaume Denis, Estelle Gillet-Perret et Olivier Richard

=Journal=

== Vendredi 29 Janvier ==

=Liens=

VT2020-WebAssembly-Demo

2020-11-27T15:36:43Z

Morgan.Crociati: /* Démonstration des performances */

Démonstration du WebAssembly
= Code utilisé =
[[File:Code_exemple_demo.PNG|thumb|center|800px| Code utilisé pour calculer la suite de Fibonacci lors de la démo]]
Site web pour compilé le code C et pouvoir lire le code assembleur: https://mbebenita.github.io/WasmExplorer/

> Copiez le code C dans la partie C++ du site

> Cliquez sur compiler

----

Site web utilisé pour créer une alerte "Hello World" en Rust: https://webassembly.studio/

> Créer un nouveau projet de type "Hello World Rust Project"

> Vous pouvez regarder les sources

> Cliquez sur "build & run", normalement une alerte apparait

> Vous avez maintenant accès aux sources compilé en WebAssembly

= Démonstration des performances =
[[File:Array_reverse_perf.png|thumb|center|600px| Comparaison du Javascript et du WebAssembly sur un algorithme d'inversion de tableau]]
[[File:WebAssembly-Performance-Firefox-1024x625.png|thumb|center|600px| Comparaison du Javascript et du WebAssembly sur un algorithme de cryptographie]]
[[File:WebAssembly-Performance-Consecutive-Runs.png|thumb|center|600px| Comparaison du Javascript et du WebAssembly sur des benchmarks cryptographiques consécutifs]]

Comme on peut le voir dans les graphiques ci-dessus, le WebAssembly est plus rapide que le Javascript majoritairement.
Mais on remarque aussi quelque chose d'autre, le Javascript n'est pas toujours stable dans ses performances car il doit être compilé en JIT tandis que le WebAssembly est stable dès le premier lancement comme celui est compilé AOT.

Site pour montrer les différences de performances utilisé pendant la démo: https://fib.johnny.sh/ & http://aws-website-webassemblyskeletalanimation-ffaza.s3-website-us-east-1.amazonaws.com/

= Exemple d'utilisation du WebAssembly =
[[File:Squoosh_app.PNG|thumb|center|1200px| Application de compression d'image faites en WebAssembly par Google ([https://squoosh.app/index.html| lien])]]
[[File:Canvas_ink_webassembly.PNG|thumb|center|1200px| Application de dessin faites en WebAssembly par Google ([https://canvas.apps.chrome/| lien])]]
[[File:Doom3_webassembly.PNG|thumb|center|1200px| Portage de Doom 3 en WebAssembly ([https://wasm.continuation-labs.com/d3demo/| lien])]]
[[File:Made_with_webassembly.PNG|thumb|center|1200px| Site web regroupant un ensemble d'application réalisé en WebAssembly ([https://madewithwebassembly.com/| lien])]]

= Outils =
* [https://webassembly.studio/| WebAssembly Studio], un outil pour essayer le WebAssembly en ligne supportant le C/C++ et Rust.
* [https://mbebenita.github.io/WasmExplorer/| WebAssembly Explorer], un outil pour explorer le code générer en WebAssembly.
* [https://emscripten.org/| Emscripten], un "compilateur" pour le C/C++ pour compiler en WebAssembly.

= Veille Technologique 2020 =
* Année : [[VT2020|VT2020]]
* Sujet : WebAssembly
* [[VT2020-WebAssembly-Fiche|Fiche]]
* [[Media:VT2020-WebAssembly-Presentation.pdf|Présentation]]
* Auteurs : [[User:Morgan.Crociati|Morgan Crociati]]

VT2020-WebAssembly-Demo

2020-11-27T15:34:17Z

Morgan.Crociati: /* Code utilisé */

Démonstration du WebAssembly
= Code utilisé =
[[File:Code_exemple_demo.PNG|thumb|center|800px| Code utilisé pour calculer la suite de Fibonacci lors de la démo]]
Site web pour compilé le code C et pouvoir lire le code assembleur: https://mbebenita.github.io/WasmExplorer/

> Copiez le code C dans la partie C++ du site

> Cliquez sur compiler

----

Site web utilisé pour créer une alerte "Hello World" en Rust: https://webassembly.studio/

> Créer un nouveau projet de type "Hello World Rust Project"

> Vous pouvez regarder les sources

> Cliquez sur "build & run", normalement une alerte apparait

> Vous avez maintenant accès aux sources compilé en WebAssembly

= Démonstration des performances =
[[File:Array_reverse_perf.png|thumb|center|600px| Comparaison du Javascript et du WebAssembly sur un algorithme d'inversion de tableau]]
[[File:WebAssembly-Performance-Firefox-1024x625.png|thumb|center|600px| Comparaison du Javascript et du WebAssembly sur un algorithme de cryptographie]]
[[File:WebAssembly-Performance-Consecutive-Runs.png|thumb|center|600px| Comparaison du Javascript et du WebAssembly sur des benchmarks cryptographiques consécutifs]]

= Exemple d'utilisation du WebAssembly =
[[File:Squoosh_app.PNG|thumb|center|1200px| Application de compression d'image faites en WebAssembly par Google ([https://squoosh.app/index.html| lien])]]
[[File:Canvas_ink_webassembly.PNG|thumb|center|1200px| Application de dessin faites en WebAssembly par Google ([https://canvas.apps.chrome/| lien])]]
[[File:Doom3_webassembly.PNG|thumb|center|1200px| Portage de Doom 3 en WebAssembly ([https://wasm.continuation-labs.com/d3demo/| lien])]]
[[File:Made_with_webassembly.PNG|thumb|center|1200px| Site web regroupant un ensemble d'application réalisé en WebAssembly ([https://madewithwebassembly.com/| lien])]]

= Outils =
* [https://webassembly.studio/| WebAssembly Studio], un outil pour essayer le WebAssembly en ligne supportant le C/C++ et Rust.
* [https://mbebenita.github.io/WasmExplorer/| WebAssembly Explorer], un outil pour explorer le code générer en WebAssembly.
* [https://emscripten.org/| Emscripten], un "compilateur" pour le C/C++ pour compiler en WebAssembly.

= Veille Technologique 2020 =
* Année : [[VT2020|VT2020]]
* Sujet : WebAssembly
* [[VT2020-WebAssembly-Fiche|Fiche]]
* [[Media:VT2020-WebAssembly-Presentation.pdf|Présentation]]
* Auteurs : [[User:Morgan.Crociati|Morgan Crociati]]

VT2020-WebAssembly-Demo

2020-11-27T15:31:31Z

Morgan.Crociati: /* Code utilisé */

VT2020-WebAssembly-Demo

2020-11-27T15:24:57Z

Morgan.Crociati: /* Exemple d'utilisation du WebAssembly */

Démonstration du WebAssembly
= Code utilisé =
[[File:Code_exemple_demo.PNG|thumb|center|800px| Code utilisé pour calculer la suite de Fibonacci lors de la démo]]

= Démonstration des performances =
[[File:Array_reverse_perf.png|thumb|center|600px| Comparaison du Javascript et du WebAssembly sur un algorithme d'inversion de tableau]]
[[File:WebAssembly-Performance-Firefox-1024x625.png|thumb|center|600px| Comparaison du Javascript et du WebAssembly sur un algorithme de cryptographie]]
[[File:WebAssembly-Performance-Consecutive-Runs.png|thumb|center|600px| Comparaison du Javascript et du WebAssembly sur des benchmarks cryptographiques consécutifs]]

= Exemple d'utilisation du WebAssembly =
[[File:Squoosh_app.PNG|thumb|center|1200px| Application de compression d'image faites en WebAssembly par Google ([https://squoosh.app/index.html| lien])]]
[[File:Canvas_ink_webassembly.PNG|thumb|center|1200px| Application de dessin faites en WebAssembly par Google ([https://canvas.apps.chrome/| lien])]]
[[File:Doom3_webassembly.PNG|thumb|center|1200px| Portage de Doom 3 en WebAssembly ([https://wasm.continuation-labs.com/d3demo/| lien])]]
[[File:Made_with_webassembly.PNG|thumb|center|1200px| Site web regroupant un ensemble d'application réalisé en WebAssembly ([https://madewithwebassembly.com/| lien])]]

= Outils =
* [https://webassembly.studio/| WebAssembly Studio], un outil pour essayer le WebAssembly en ligne supportant le C/C++ et Rust.
* [https://mbebenita.github.io/WasmExplorer/| WebAssembly Explorer], un outil pour explorer le code générer en WebAssembly.
* [https://emscripten.org/| Emscripten], un "compilateur" pour le C/C++ pour compiler en WebAssembly.

= Veille Technologique 2020 =
* Année : [[VT2020|VT2020]]
* Sujet : WebAssembly
* [[VT2020-WebAssembly-Fiche|Fiche]]
* [[Media:VT2020-WebAssembly-Presentation.pdf|Présentation]]
* Auteurs : [[User:Morgan.Crociati|Morgan Crociati]]

File:Doom3 webassembly.PNG

2020-11-27T15:23:40Z

Morgan.Crociati:

File:Canvas ink webassembly.PNG

2020-11-27T15:19:30Z

Morgan.Crociati:

VT2020-WebAssembly-Demo

2020-11-27T15:16:30Z

Morgan.Crociati:

Démonstration du WebAssembly
= Code utilisé =
[[File:Code_exemple_demo.PNG|thumb|center|800px| Code utilisé pour calculer la suite de Fibonacci lors de la démo]]

= Démonstration des performances =
[[File:Array_reverse_perf.png|thumb|center|600px| Comparaison du Javascript et du WebAssembly sur un algorithme d'inversion de tableau]]
[[File:WebAssembly-Performance-Firefox-1024x625.png|thumb|center|600px| Comparaison du Javascript et du WebAssembly sur un algorithme de cryptographie]]
[[File:WebAssembly-Performance-Consecutive-Runs.png|thumb|center|600px| Comparaison du Javascript et du WebAssembly sur des benchmarks cryptographiques consécutifs]]

= Exemple d'utilisation du WebAssembly =
[[File:Squoosh_app.PNG|thumb|center|1200px| Application de compression d'image faites en WebAssembly par Google ([https://squoosh.app/index.html| lien])]]
[[File:Made_with_webassembly.PNG|thumb|center|1200px| Site web regroupant un ensemble d'application réalisé en WebAssembly ([https://madewithwebassembly.com/| lien])]]

= Outils =
* [https://webassembly.studio/| WebAssembly Studio], un outil pour essayer le WebAssembly en ligne supportant le C/C++ et Rust.
* [https://mbebenita.github.io/WasmExplorer/| WebAssembly Explorer], un outil pour explorer le code générer en WebAssembly.
* [https://emscripten.org/| Emscripten], un "compilateur" pour le C/C++ pour compiler en WebAssembly.

= Veille Technologique 2020 =
* Année : [[VT2020|VT2020]]
* Sujet : WebAssembly
* [[VT2020-WebAssembly-Fiche|Fiche]]
* [[Media:VT2020-WebAssembly-Presentation.pdf|Présentation]]
* Auteurs : [[User:Morgan.Crociati|Morgan Crociati]]

File:Code exemple demo.PNG

2020-11-27T15:15:39Z

Morgan.Crociati:

VT2020-WebAssembly-Demo

2020-11-27T15:12:54Z

Morgan.Crociati:

Démonstration du WebAssembly
= Code utilisé =

= Démonstration des performances =
[[File:Array_reverse_perf.png|thumb|center|600px| Comparaison du Javascript et du WebAssembly sur un algorithme d'inversion de tableau]]
[[File:WebAssembly-Performance-Firefox-1024x625.png|thumb|center|600px| Comparaison du Javascript et du WebAssembly sur un algorithme de cryptographie]]
[[File:WebAssembly-Performance-Consecutive-Runs.png|thumb|center|600px| Comparaison du Javascript et du WebAssembly sur des benchmarks cryptographiques consécutifs]]

= Exemple d'utilisation du WebAssembly =
[[File:Squoosh_app.PNG|thumb|center|1200px| Application de compression d'image faites en WebAssembly par Google ([https://squoosh.app/index.html| lien])]]
[[File:Made_with_webassembly.PNG|thumb|center|1200px| Site web regroupant un ensemble d'application réalisé en WebAssembly ([https://madewithwebassembly.com/| lien])]]

= Outils =
* [https://webassembly.studio/| WebAssembly Studio], un outil pour essayer le WebAssembly en ligne supportant le C/C++ et Rust.
* [https://mbebenita.github.io/WasmExplorer/| WebAssembly Explorer], un outil pour explorer le code générer en WebAssembly.
* [https://emscripten.org/| Emscripten], un "compilateur" pour le C/C++ pour compiler en WebAssembly.

= Veille Technologique 2020 =
* Année : [[VT2020|VT2020]]
* Sujet : WebAssembly
* [[VT2020-WebAssembly-Fiche|Fiche]]
* [[Media:VT2020-WebAssembly-Presentation.pdf|Présentation]]
* Auteurs : [[User:Morgan.Crociati|Morgan Crociati]]

VT2020-WebAssembly-Demo

2020-11-27T15:12:19Z

Morgan.Crociati: /* Exemple d'utilisation du WebAssembly */

Démonstration du WebAssembly

= Démonstration des performances =
[[File:Array_reverse_perf.png|thumb|center|600px| Comparaison du Javascript et du WebAssembly sur un algorithme d'inversion de tableau]]
[[File:WebAssembly-Performance-Firefox-1024x625.png|thumb|center|600px| Comparaison du Javascript et du WebAssembly sur un algorithme de cryptographie]]
[[File:WebAssembly-Performance-Consecutive-Runs.png|thumb|center|600px| Comparaison du Javascript et du WebAssembly sur des benchmarks cryptographiques consécutifs]]

= Exemple d'utilisation du WebAssembly =
[[File:Squoosh_app.PNG|thumb|center|1200px| Application de compression d'image faites en WebAssembly par Google ([https://squoosh.app/index.html| lien])]]
[[File:Made_with_webassembly.PNG|thumb|center|1200px| Site web regroupant un ensemble d'application réalisé en WebAssembly ([https://madewithwebassembly.com/| lien])]]

= Outils =
* [https://webassembly.studio/| WebAssembly Studio], un outil pour essayer le WebAssembly en ligne supportant le C/C++ et Rust.
* [https://mbebenita.github.io/WasmExplorer/| WebAssembly Explorer], un outil pour explorer le code générer en WebAssembly.
* [https://emscripten.org/| Emscripten], un "compilateur" pour le C/C++ pour compiler en WebAssembly.

= Veille Technologique 2020 =
* Année : [[VT2020|VT2020]]
* Sujet : WebAssembly
* [[VT2020-WebAssembly-Fiche|Fiche]]
* [[Media:VT2020-WebAssembly-Presentation.pdf|Présentation]]
* Auteurs : [[User:Morgan.Crociati|Morgan Crociati]]

File:Made with webassembly.PNG

2020-11-27T15:11:33Z

Morgan.Crociati:

VT2020-WebAssembly-Demo

2020-11-27T15:09:47Z

Morgan.Crociati: /* Démonstration des performances */

Démonstration du WebAssembly

= Démonstration des performances =
[[File:Array_reverse_perf.png|thumb|center|600px| Comparaison du Javascript et du WebAssembly sur un algorithme d'inversion de tableau]]
[[File:WebAssembly-Performance-Firefox-1024x625.png|thumb|center|600px| Comparaison du Javascript et du WebAssembly sur un algorithme de cryptographie]]
[[File:WebAssembly-Performance-Consecutive-Runs.png|thumb|center|600px| Comparaison du Javascript et du WebAssembly sur des benchmarks cryptographiques consécutifs]]

= Exemple d'utilisation du WebAssembly =
[[File:Squoosh_app.PNG|thumb|center|1200px| Application de compression d'image faites en WebAssembly par Google ([https://squoosh.app/index.html| lien])]]

= Outils =
* [https://webassembly.studio/| WebAssembly Studio], un outil pour essayer le WebAssembly en ligne supportant le C/C++ et Rust.
* [https://mbebenita.github.io/WasmExplorer/| WebAssembly Explorer], un outil pour explorer le code générer en WebAssembly.
* [https://emscripten.org/| Emscripten], un "compilateur" pour le C/C++ pour compiler en WebAssembly.

= Veille Technologique 2020 =
* Année : [[VT2020|VT2020]]
* Sujet : WebAssembly
* [[VT2020-WebAssembly-Fiche|Fiche]]
* [[Media:VT2020-WebAssembly-Presentation.pdf|Présentation]]
* Auteurs : [[User:Morgan.Crociati|Morgan Crociati]]

VT2020-WebAssembly-Demo

2020-11-27T15:09:27Z

Morgan.Crociati: /* Démonstration des performances */

Démonstration du WebAssembly

= Démonstration des performances =
[[File:Array_reverse_perf.png|thumb|center|1200px| Comparaison du Javascript et du WebAssembly sur un algorithme d'inversion de tableau]]
[[File:WebAssembly-Performance-Firefox-1024x625.png|thumb|center|1000px| Comparaison du Javascript et du WebAssembly sur un algorithme de cryptographie]]
[[File:WebAssembly-Performance-Consecutive-Runs.png|thumb|center|1000px| Comparaison du Javascript et du WebAssembly sur des benchmarks cryptographiques consécutifs]]

= Exemple d'utilisation du WebAssembly =
[[File:Squoosh_app.PNG|thumb|center|1200px| Application de compression d'image faites en WebAssembly par Google ([https://squoosh.app/index.html| lien])]]

= Outils =
* [https://webassembly.studio/| WebAssembly Studio], un outil pour essayer le WebAssembly en ligne supportant le C/C++ et Rust.
* [https://mbebenita.github.io/WasmExplorer/| WebAssembly Explorer], un outil pour explorer le code générer en WebAssembly.
* [https://emscripten.org/| Emscripten], un "compilateur" pour le C/C++ pour compiler en WebAssembly.

= Veille Technologique 2020 =
* Année : [[VT2020|VT2020]]
* Sujet : WebAssembly
* [[VT2020-WebAssembly-Fiche|Fiche]]
* [[Media:VT2020-WebAssembly-Presentation.pdf|Présentation]]
* Auteurs : [[User:Morgan.Crociati|Morgan Crociati]]

VT2020-WebAssembly-Demo

2020-11-27T15:09:11Z

Morgan.Crociati: /* Démonstration des performances */

Démonstration du WebAssembly

= Démonstration des performances =
[[File:Array_reverse_perf.png|thumb|center|1200px| Comparaison du Javascript et du WebAssembly sur un algorithme d'inversion de tableau]]
[[File:WebAssembly-Performance-Firefox-1024x625.png|thumb|center|1200px| Comparaison du Javascript et du WebAssembly sur un algorithme de cryptographie]]
[[File:WebAssembly-Performance-Consecutive-Runs.png|thumb|center|1200px| Comparaison du Javascript et du WebAssembly sur des benchmarks cryptographiques consécutifs]]

= Exemple d'utilisation du WebAssembly =
[[File:Squoosh_app.PNG|thumb|center|1200px| Application de compression d'image faites en WebAssembly par Google ([https://squoosh.app/index.html| lien])]]

= Outils =
* [https://webassembly.studio/| WebAssembly Studio], un outil pour essayer le WebAssembly en ligne supportant le C/C++ et Rust.
* [https://mbebenita.github.io/WasmExplorer/| WebAssembly Explorer], un outil pour explorer le code générer en WebAssembly.
* [https://emscripten.org/| Emscripten], un "compilateur" pour le C/C++ pour compiler en WebAssembly.

= Veille Technologique 2020 =
* Année : [[VT2020|VT2020]]
* Sujet : WebAssembly
* [[VT2020-WebAssembly-Fiche|Fiche]]
* [[Media:VT2020-WebAssembly-Presentation.pdf|Présentation]]
* Auteurs : [[User:Morgan.Crociati|Morgan Crociati]]

File:WebAssembly-Performance-Consecutive-Runs.png

2020-11-27T15:08:28Z

Morgan.Crociati:

File:WebAssembly-Performance-Firefox-1024x625.png

2020-11-27T15:08:02Z

Morgan.Crociati:

VT2020-WebAssembly-Fiche

2020-11-27T15:03:14Z

Morgan.Crociati: /* Référence */

Fiche WebAssembly

[[File:WebAssembly_Logo.png|400px|thumb|Logo du WebAssembly]]

= TLDR =
Le WebAssembly est une nouvelle technologie ajouté à la majorité des navigateurs internet en 2017.
Il s'apparente à de l'assembleur pour le web.
Son objectif est de permettre l’exécution d'application haute performances sur le navigateur.
Contrairement au Javascript, pour utiliser le WebAssembly nous devons passer (majoritairement) par une compilation.

 

= Description =
Le WebAssembly est une nouvelle technologie du web, elle vient s'ajouter à la majorité des navigateurs et rejoins la famille des langages/technologies reconnue par des navigateurs (HTML, CSS et Javascript).
WebAssembly vient de la concaténation de web et assembleur. Cela reflète l'objectif de cette technologie, obtenir des performances sur le web proche du natif.
La technologie a été créer pour ajouter à l'arsenal des navigateurs une technologie permettant d'avoir performances meilleurs que celle du Javascript, et permettre ainsi aux navigateurs d'avoir accés à des applications hautes performances ou plus sécurisé en utilisant les ressources de l'utilisateur et non pas d'un serveur.

=== WebAssembly et Javascript ===
[[File:javascript_vs_webassembly.png|thumb|right| Créé par [https://twitter.com/diekus| @diekus]]]
Le WebAssembly n'a pas pour objectif de venir perturber le Javascript, les deux langages sont complémentaire.
Cela est particulière vrai car le WebAssembly n'a pas de moyen natif d’interagir avec le DOM et doit donc se reposer sur le Javascript pour interagir avec celui-ci.

L'écart de performance entre le Javascript et le WebAssembly vient du faites que le WebAssembly est généralement compilé "ahead of time" tandis que le Javascript est compilé "just in time"..
 

=== Exemple ===
On peut soit écrire directement en WebAssembly, même si cela n'est pas le but de la technologie en elle même.
Le but est d'écrire dans un autre langage de programmation (C, C++, Rust, ...).
La technologie est encore assez jeune, donc seul un petit ensemble de langage possède un compilateur pour le WebAssembly.
[[File:webassembly_example_compilation.PNG|frame|center| Exemple compilation de code C, en WebAssembly (.wat à gauche et .wasm à droite)]]
 

=== Langage officiellement supporté ===
[[File:Webassembly_official_language.PNG]]

= Historique =
=== Guerre des standards ===
Avant la création du WebAssembly, les grandes entreprises du web (Google, Mozilla, Microsoft, ...) avaient compris que les navigateurs manquaient d'une technologie leur permettant d'avoir de meilleur performance que le Javascript. Cette technologie permettrait de pouvoir faire fonctionner directement depuis un navigateurs des applications lourde, que l'on aurait considéré comme native auparavant.

L'initiative de Google pour créer cette technologie se nomme [https://en.wikipedia.org/wiki/Google_Native_Client| Google Native Client (ou NaCl)]. NaCl fut créé en 2011 et fut. La technologie fonctionner sur un principe de sandboxing, permettant de faire fonctionner du code natif peut importe l'architecture visé (x86, ARM, ...). L'objectif de Google est de faire cette technologie un des piliers [https://en.wikipedia.org/wiki/Chrome_OS| Chrome OS], qui avait pour ambition d'utiliser en majorité des web apps. En 2017, Google annonce l'obsolescence de cette technologie. NaCl a tout de même était une assez belle réussite de Google, car avant son obsolescence on pouvait utiliser l’accélération matériel graphique pour pouvoir faire marcher des jeux par exemple.

[[File:ActiveX_logo.png|thumb|100px|right]]
L'initiative de Microsoft pour créer cette technologie ne fut pas quelque chose de direct, une évolution de leur technologie [https://en.wikipedia.org/wiki/ActiveX| ActiveX] (vieille de 1996) permet en soit de pouvoir faire tourner du code natif sur leur navigateur. ActiveX fut adopter par de nombreux navigateur en dehors de Microsoft de part son ancienneté, mais ses capacités étaient très limité. Les performances d'ActiveX était très loin des performances d'un code natif. Aujourd'hui ActiveX n'est plus utilisé pour le web par Microsoft, car la technologie n'est plus accessible depuis Edge (leur nouveau navigateur).

 

[[File:code_example_asmjs.png|thumb|550px|right| Exemple de code asm.js]]
L'initiative de Mozilla est surement celle qui a eu le plus d'impact sur WebAssembly. Leur technologie se nomme [https://en.wikipedia.org/wiki/Asm.js| asm.js], créé par une équipe à Mozilla (dont Alon Zakai) en 2013. Le but de cette technologie était d'être compatible avec tous les navigateurs, car le code était toujours du Javascript mais que dans certain navigateur le code pouvait gagné en performance de part la façon dont il était écrit. Pour gagner en performance asm.js utilisait un espace mémoire modifiable (cf. MEM8 dans image ci-dessous) ainsi que du code pour inférer le type d'une variable (cf. |0 permet de au navigateur de savoir que ptr est un entier sur 32bits dans l'image ci-dessous). Pour créer du code compatible avec asm.js, soit on peut écrire directement en Javascript (un peu complexe car il faudra respecter scrupuleusement la nomenclature permettant de gagner en performance) ou plus communément en écrivant du code dans un autre langage (C, C++, Rust, ...) et compiler le code en asm.js. Les capacités de asm.js furent montré au travers d'une implémentation d'une démo technique (Citadel) tournant sous le moteur Unreal Engine 3, le moteur fut implémenté en 3 jours en asm.js. Les performances de asm.js pouvait atteindre 2 fois moins que du code native (beaucoup plus performant que du Javascript normal).

 

=== Création du WebAssembly ===
[[File:W3C_Icon.png|500px|right|thumb| Logo du World Wide Web Consortium]]
Ayant vue le potentiel de asm.js, Mozilla décide d'ouvrir la discussion avec les autres acteurs majeur du web et de créer un standard commun gérer par le World Wide Web Consortium (cf. image ci-dessous).
Le WebAssembly fut introduit au monde le 17 juin 2015. La technologie entre en browser preview en novembre 2016, puis en mars 2017 elle est disponible au grand publique.

La sortie de la technologie a poussé à l'obsolescence la plus part des autres technologies ayant le même objectif.

Google Chrome (desktop) et Firefox (desktop) étaient les deux seules navigateurs compatible lors de sa sortie. Maintenant la majorité des navigateurs desktop et mobile supporte la technologie.

A sa sortie WebAssembly était un MVP (minimum viable product) en 1.0, aujourd'hui la technologie en est à sa version 1.1.

Le nombre de langage supportant le WebAssembly en 2017 était très faible on y retrouvais notamment:
* C
* C++
* Rust
* ...

 

=== Roadmap ===
Même si WebAssembly est maintenant disponible au publique, celui-ci continue son développement avec des mises à jours semi-régulière (plus fréquente que les autres langages natif des navigateurs). Voici une courte roadmap des fonctionnalités qui sont envisagé dans avenir plus ou moins proche:
[[File:webassembly_post_mvp.png|frame|right| Roadmap post-mvp du WebAssembly visualisé par [https://hacks.mozilla.org/2018/10/webassemblys-post-mvp-future/| Lin Clark]]]
* Support du GPU par WebAssembly
* Multithreading
* Unification des librairies
* Garbage Collector
* Gestion des exceptions
* Amélioration du tracing
* Meilleur outils de débogage
* SIMD
* Adressage sur 64-bit
* Streaming compilation
* Tiered compilation
* Coroutines
* Linear memory bigger than 4gb
* ...

[https://github.com/WebAssembly/design/blob/master/FutureFeatures.md| Lien vers une partie de leur roadmap à court terme.]

 

= Utilisation =
Pour plus d'information pratique sur l'utilisation du WebAssembly voici le lien de la [[VT2020-WebAssembly-Demo|démonstration]].
= Contribuer =
Il est possible de contribuer au projet de WebAssembly si cela vous intéresse. Pour contribuer il faut se rendre sur leur page Github, où l'on peut voir tout leur projet en cours.
[https://github.com/WebAssembly| Page Github].

De plus, il est possible de contribuer pour majorité des compilateurs de WebAssembly notable, comme par exemple:
* Emscripten (C/C++): https://github.com/emscripten-core
* AssemblyScript (~TypeScript): https://github.com/AssemblyScript
* Rust: https://www.rust-lang.org/
* Blazor (C#): https://github.com/dotnet/blazor
* ...

= Référence =
# https://webassembly.org/
# https://webassembly.org/roadmap/
# https://github.com/WebAssembly/design/blob/master/FutureFeatures.md
# https://webassembly.org/getting-started/developers-guide/
# https://en.wikipedia.org/wiki/WebAssembly
# https://wasmbyexample.dev/home.en-us.html
# https://medium.com/dfinity/why-webassembly-f21967076e4
# https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/
# https://hacks.mozilla.org/2017/02/where-is-webassembly-now-and-whats-next/
# https://medium.com/javascript-scene/what-is-webassembly-the-dawn-of-a-new-era-61256ec5a8f6
# https://rsms.me/wasm-intro
# https://wasm-talk.johnny.sh/#0
# https://www.youtube.com/watch?v=kUljgnOE5-A&t=544s
# https://www.youtube.com/watch?v=drRaRRZ5AJk&t=2273s
# https://www.youtube.com/watch?v=njt-Qzw0mVY&t=2060s
# https://www.youtube.com/watch?v=jGKjKx2vous&t=629s
# https://madewithwebassembly.com/
# https://github.com/mbasso/awesome-wasm
# https://github.com/appcypher/awesome-wasm-langs

= Veille Technologique 2020 =
* Année : [[VT2020|VT2020]]
* Sujet : WebAssembly
* [[Media:VT2020-WebAssembly-Presentation.pdf|Présentation]]
* [[VT2020-WebAssembly-Demo|Démonstration]]
* Auteurs : [[User:Morgan.Crociati|Morgan Crociati]]

VT2020-WebAssembly-Demo

2020-11-27T14:57:57Z

Morgan.Crociati:

Démonstration du WebAssembly

= Démonstration des performances =
[[File:Array_reverse_perf.png|thumb|center|1200px| Comparaison du Javascript et du WebAssembly sur un algorithme d'inversion de tableau]]
= Exemple d'utilisation du WebAssembly =
[[File:Squoosh_app.PNG|thumb|center|1200px| Application de compression d'image faites en WebAssembly par Google ([https://squoosh.app/index.html| lien])]]

= Outils =
* [https://webassembly.studio/| WebAssembly Studio], un outil pour essayer le WebAssembly en ligne supportant le C/C++ et Rust.
* [https://mbebenita.github.io/WasmExplorer/| WebAssembly Explorer], un outil pour explorer le code générer en WebAssembly.
* [https://emscripten.org/| Emscripten], un "compilateur" pour le C/C++ pour compiler en WebAssembly.

= Veille Technologique 2020 =
* Année : [[VT2020|VT2020]]
* Sujet : WebAssembly
* [[VT2020-WebAssembly-Fiche|Fiche]]
* [[Media:VT2020-WebAssembly-Presentation.pdf|Présentation]]
* Auteurs : [[User:Morgan.Crociati|Morgan Crociati]]

File:Array reverse perf.png

2020-11-27T14:57:09Z

Morgan.Crociati:

VT2020-WebAssembly-Demo

2020-11-27T14:56:07Z

Morgan.Crociati: /* Outils */

Démonstration du WebAssembly

= Démonstration des performances =

= Exemple d'utilisation du WebAssembly =
[[File:Squoosh_app.PNG|thumb|center|1200px| Application de compression d'image faites en WebAssembly par Google ([https://squoosh.app/index.html| lien])]]

= Outils =
* [https://webassembly.studio/| WebAssembly Studio], un outil pour essayer le WebAssembly en ligne supportant le C/C++ et Rust.
* [https://mbebenita.github.io/WasmExplorer/| WebAssembly Explorer], un outil pour explorer le code générer en WebAssembly.
* [https://emscripten.org/| Emscripten], un "compilateur" pour le C/C++ pour compiler en WebAssembly.

= Veille Technologique 2020 =
* Année : [[VT2020|VT2020]]
* Sujet : WebAssembly
* [[VT2020-WebAssembly-Fiche|Fiche]]
* [[Media:VT2020-WebAssembly-Presentation.pdf|Présentation]]
* Auteurs : [[User:Morgan.Crociati|Morgan Crociati]]

VT2020-WebAssembly-Demo

2020-11-27T14:54:28Z

Morgan.Crociati: /* Outils */

Démonstration du WebAssembly

= Démonstration des performances =

= Exemple d'utilisation du WebAssembly =
[[File:Squoosh_app.PNG|thumb|center|1200px| Application de compression d'image faites en WebAssembly par Google ([https://squoosh.app/index.html| lien])]]

= Outils =
* [https://webassembly.studio/| WebAssembly Studio], un outil pour essayer le WebAssembly en ligne supportant le C/C++ et Rust.
* [https://mbebenita.github.io/WasmExplorer/| WebAssembly Explorer], un outil pour explorer le code générer en WebAssembly.

= Veille Technologique 2020 =
* Année : [[VT2020|VT2020]]
* Sujet : WebAssembly
* [[VT2020-WebAssembly-Fiche|Fiche]]
* [[Media:VT2020-WebAssembly-Presentation.pdf|Présentation]]
* Auteurs : [[User:Morgan.Crociati|Morgan Crociati]]

VT2020-WebAssembly-Demo

2020-11-27T14:53:42Z

Morgan.Crociati: /* Outils */

Démonstration du WebAssembly

= Démonstration des performances =

= Exemple d'utilisation du WebAssembly =
[[File:Squoosh_app.PNG|thumb|center|1200px| Application de compression d'image faites en WebAssembly par Google ([https://squoosh.app/index.html| lien])]]

= Outils =
* [https://webassembly.studio/| WebAssembly Studio], un outil pour essayer le WebAssembly en ligne supportant le C/C++ et Rust.

= Veille Technologique 2020 =
* Année : [[VT2020|VT2020]]
* Sujet : WebAssembly
* [[VT2020-WebAssembly-Fiche|Fiche]]
* [[Media:VT2020-WebAssembly-Presentation.pdf|Présentation]]
* Auteurs : [[User:Morgan.Crociati|Morgan Crociati]]

VT2020-WebAssembly-Demo

2020-11-27T14:52:35Z

Morgan.Crociati: /* Outils */

VT2020-WebAssembly-Demo

2020-11-27T14:51:30Z

Morgan.Crociati: /* Exemple d'utilisation du WebAssembly */

VT2020-WebAssembly-Demo

2020-11-27T14:50:51Z

Morgan.Crociati: /* Exemple d'utilisation du WebAssembly */

Démonstration du WebAssembly

= Démonstration des performances =

= Exemple d'utilisation du WebAssembly =
[[File:Squoosh_app.PNG|thumb|center|1200px| Application de compression d'image faites en WebAssembly par Google]]

= Outils =

= Veille Technologique 2020 =
* Année : [[VT2020|VT2020]]
* Sujet : WebAssembly
* [[VT2020-WebAssembly-Fiche|Fiche]]
* [[Media:VT2020-WebAssembly-Presentation.pdf|Présentation]]
* Auteurs : [[User:Morgan.Crociati|Morgan Crociati]]

VT2020-WebAssembly-Demo

2020-11-27T14:50:31Z

Morgan.Crociati: /* Exemple d'utilisation du WebAssembly */

Démonstration du WebAssembly

= Démonstration des performances =

= Exemple d'utilisation du WebAssembly =
[[File:Squoosh_app.PNG|frameless|1000px| Application de compression d'image faites en WebAssembly par Google]]

= Outils =

= Veille Technologique 2020 =
* Année : [[VT2020|VT2020]]
* Sujet : WebAssembly
* [[VT2020-WebAssembly-Fiche|Fiche]]
* [[Media:VT2020-WebAssembly-Presentation.pdf|Présentation]]
* Auteurs : [[User:Morgan.Crociati|Morgan Crociati]]

VT2020-WebAssembly-Demo

2020-11-27T14:50:24Z

Morgan.Crociati: /* Exemple d'utilisation du WebAssembly */

Démonstration du WebAssembly

= Démonstration des performances =

= Exemple d'utilisation du WebAssembly =
[[File:Squoosh_app.PNG|frame|1000px| Application de compression d'image faites en WebAssembly par Google]]

= Outils =

= Veille Technologique 2020 =
* Année : [[VT2020|VT2020]]
* Sujet : WebAssembly
* [[VT2020-WebAssembly-Fiche|Fiche]]
* [[Media:VT2020-WebAssembly-Presentation.pdf|Présentation]]
* Auteurs : [[User:Morgan.Crociati|Morgan Crociati]]

VT2020-WebAssembly-Demo

2020-11-27T14:50:16Z

Morgan.Crociati: /* Exemple d'utilisation du WebAssembly */

Démonstration du WebAssembly

= Démonstration des performances =

= Exemple d'utilisation du WebAssembly =
[[File:Squoosh_app.PNG|1000px| Application de compression d'image faites en WebAssembly par Google]]

= Outils =

= Veille Technologique 2020 =
* Année : [[VT2020|VT2020]]
* Sujet : WebAssembly
* [[VT2020-WebAssembly-Fiche|Fiche]]
* [[Media:VT2020-WebAssembly-Presentation.pdf|Présentation]]
* Auteurs : [[User:Morgan.Crociati|Morgan Crociati]]

VT2020-WebAssembly-Demo

2020-11-27T14:50:09Z

Morgan.Crociati: /* Exemple d'utilisation du WebAssembly */

Démonstration du WebAssembly

= Démonstration des performances =

= Exemple d'utilisation du WebAssembly =
[[File:Squoosh_app.PNG|100px| Application de compression d'image faites en WebAssembly par Google]]

= Outils =

= Veille Technologique 2020 =
* Année : [[VT2020|VT2020]]
* Sujet : WebAssembly
* [[VT2020-WebAssembly-Fiche|Fiche]]
* [[Media:VT2020-WebAssembly-Presentation.pdf|Présentation]]
* Auteurs : [[User:Morgan.Crociati|Morgan Crociati]]

VT2020-WebAssembly-Demo

2020-11-27T14:49:52Z

Morgan.Crociati:

Démonstration du WebAssembly

= Démonstration des performances =

= Exemple d'utilisation du WebAssembly =
[[File:Squoosh_app.PNG| Application de compression d'image faites en WebAssembly par Google]]
= Outils =

= Veille Technologique 2020 =
* Année : [[VT2020|VT2020]]
* Sujet : WebAssembly
* [[VT2020-WebAssembly-Fiche|Fiche]]
* [[Media:VT2020-WebAssembly-Presentation.pdf|Présentation]]
* Auteurs : [[User:Morgan.Crociati|Morgan Crociati]]

VT2020-WebAssembly-Demo

2020-11-27T14:49:39Z

Morgan.Crociati:

Démonstration du WebAssembly

= Démonstration des performances =

= Exemple d'utilisation du WebAssembly =
[[File:Squoosh_app.PNG|frame|1000px| Application de compression d'image faites en WebAssembly par Google]]
= Outils =

= Veille Technologique 2020 =
* Année : [[VT2020|VT2020]]
* Sujet : WebAssembly
* [[VT2020-WebAssembly-Fiche|Fiche]]
* [[Media:VT2020-WebAssembly-Presentation.pdf|Présentation]]
* Auteurs : [[User:Morgan.Crociati|Morgan Crociati]]

VT2020-WebAssembly-Demo

2020-11-27T14:49:23Z

Morgan.Crociati:

Démonstration du WebAssembly

= Démonstration des performances =

= Exemple d'utilisation du WebAssembly =
[[File:Squoosh_app.PNG|frame| Application de compression d'image faites en WebAssembly par Google]]
= Outils =

= Veille Technologique 2020 =
* Année : [[VT2020|VT2020]]
* Sujet : WebAssembly
* [[VT2020-WebAssembly-Fiche|Fiche]]
* [[Media:VT2020-WebAssembly-Presentation.pdf|Présentation]]
* Auteurs : [[User:Morgan.Crociati|Morgan Crociati]]

File:Squoosh app.PNG

2020-11-27T14:48:25Z

Morgan.Crociati:

VT2020-WebAssembly-Demo

2020-11-27T14:42:43Z

Morgan.Crociati:

Démonstration du WebAssembly

= Démonstration des performances =

= Exemple d'utilisation du WebAssembly =

= Outils =

= Veille Technologique 2020 =
* Année : [[VT2020|VT2020]]
* Sujet : WebAssembly
* [[VT2020-WebAssembly-Fiche|Fiche]]
* [[Media:VT2020-WebAssembly-Presentation.pdf|Présentation]]
* Auteurs : [[User:Morgan.Crociati|Morgan Crociati]]

VT2020-WebAssembly-Fiche

2020-11-27T14:41:23Z

Morgan.Crociati: /* Historique */

Fiche WebAssembly

[[File:WebAssembly_Logo.png|400px|thumb|Logo du WebAssembly]]

= TLDR =
Le WebAssembly est une nouvelle technologie ajouté à la majorité des navigateurs internet en 2017.
Il s'apparente à de l'assembleur pour le web.
Son objectif est de permettre l’exécution d'application haute performances sur le navigateur.
Contrairement au Javascript, pour utiliser le WebAssembly nous devons passer (majoritairement) par une compilation.

 

= Description =
Le WebAssembly est une nouvelle technologie du web, elle vient s'ajouter à la majorité des navigateurs et rejoins la famille des langages/technologies reconnue par des navigateurs (HTML, CSS et Javascript).
WebAssembly vient de la concaténation de web et assembleur. Cela reflète l'objectif de cette technologie, obtenir des performances sur le web proche du natif.
La technologie a été créer pour ajouter à l'arsenal des navigateurs une technologie permettant d'avoir performances meilleurs que celle du Javascript, et permettre ainsi aux navigateurs d'avoir accés à des applications hautes performances ou plus sécurisé en utilisant les ressources de l'utilisateur et non pas d'un serveur.

=== WebAssembly et Javascript ===
[[File:javascript_vs_webassembly.png|thumb|right| Créé par [https://twitter.com/diekus| @diekus]]]
Le WebAssembly n'a pas pour objectif de venir perturber le Javascript, les deux langages sont complémentaire.
Cela est particulière vrai car le WebAssembly n'a pas de moyen natif d’interagir avec le DOM et doit donc se reposer sur le Javascript pour interagir avec celui-ci.

L'écart de performance entre le Javascript et le WebAssembly vient du faites que le WebAssembly est généralement compilé "ahead of time" tandis que le Javascript est compilé "just in time"..
 

=== Exemple ===
On peut soit écrire directement en WebAssembly, même si cela n'est pas le but de la technologie en elle même.
Le but est d'écrire dans un autre langage de programmation (C, C++, Rust, ...).
La technologie est encore assez jeune, donc seul un petit ensemble de langage possède un compilateur pour le WebAssembly.
[[File:webassembly_example_compilation.PNG|frame|center| Exemple compilation de code C, en WebAssembly (.wat à gauche et .wasm à droite)]]
 

=== Langage officiellement supporté ===
[[File:Webassembly_official_language.PNG]]

= Historique =
=== Guerre des standards ===
Avant la création du WebAssembly, les grandes entreprises du web (Google, Mozilla, Microsoft, ...) avaient compris que les navigateurs manquaient d'une technologie leur permettant d'avoir de meilleur performance que le Javascript. Cette technologie permettrait de pouvoir faire fonctionner directement depuis un navigateurs des applications lourde, que l'on aurait considéré comme native auparavant.

L'initiative de Google pour créer cette technologie se nomme [https://en.wikipedia.org/wiki/Google_Native_Client| Google Native Client (ou NaCl)]. NaCl fut créé en 2011 et fut. La technologie fonctionner sur un principe de sandboxing, permettant de faire fonctionner du code natif peut importe l'architecture visé (x86, ARM, ...). L'objectif de Google est de faire cette technologie un des piliers [https://en.wikipedia.org/wiki/Chrome_OS| Chrome OS], qui avait pour ambition d'utiliser en majorité des web apps. En 2017, Google annonce l'obsolescence de cette technologie. NaCl a tout de même était une assez belle réussite de Google, car avant son obsolescence on pouvait utiliser l’accélération matériel graphique pour pouvoir faire marcher des jeux par exemple.

[[File:ActiveX_logo.png|thumb|100px|right]]
L'initiative de Microsoft pour créer cette technologie ne fut pas quelque chose de direct, une évolution de leur technologie [https://en.wikipedia.org/wiki/ActiveX| ActiveX] (vieille de 1996) permet en soit de pouvoir faire tourner du code natif sur leur navigateur. ActiveX fut adopter par de nombreux navigateur en dehors de Microsoft de part son ancienneté, mais ses capacités étaient très limité. Les performances d'ActiveX était très loin des performances d'un code natif. Aujourd'hui ActiveX n'est plus utilisé pour le web par Microsoft, car la technologie n'est plus accessible depuis Edge (leur nouveau navigateur).

 

[[File:code_example_asmjs.png|thumb|550px|right| Exemple de code asm.js]]
L'initiative de Mozilla est surement celle qui a eu le plus d'impact sur WebAssembly. Leur technologie se nomme [https://en.wikipedia.org/wiki/Asm.js| asm.js], créé par une équipe à Mozilla (dont Alon Zakai) en 2013. Le but de cette technologie était d'être compatible avec tous les navigateurs, car le code était toujours du Javascript mais que dans certain navigateur le code pouvait gagné en performance de part la façon dont il était écrit. Pour gagner en performance asm.js utilisait un espace mémoire modifiable (cf. MEM8 dans image ci-dessous) ainsi que du code pour inférer le type d'une variable (cf. |0 permet de au navigateur de savoir que ptr est un entier sur 32bits dans l'image ci-dessous). Pour créer du code compatible avec asm.js, soit on peut écrire directement en Javascript (un peu complexe car il faudra respecter scrupuleusement la nomenclature permettant de gagner en performance) ou plus communément en écrivant du code dans un autre langage (C, C++, Rust, ...) et compiler le code en asm.js. Les capacités de asm.js furent montré au travers d'une implémentation d'une démo technique (Citadel) tournant sous le moteur Unreal Engine 3, le moteur fut implémenté en 3 jours en asm.js. Les performances de asm.js pouvait atteindre 2 fois moins que du code native (beaucoup plus performant que du Javascript normal).

 

=== Création du WebAssembly ===
[[File:W3C_Icon.png|500px|right|thumb| Logo du World Wide Web Consortium]]
Ayant vue le potentiel de asm.js, Mozilla décide d'ouvrir la discussion avec les autres acteurs majeur du web et de créer un standard commun gérer par le World Wide Web Consortium (cf. image ci-dessous).
Le WebAssembly fut introduit au monde le 17 juin 2015. La technologie entre en browser preview en novembre 2016, puis en mars 2017 elle est disponible au grand publique.

La sortie de la technologie a poussé à l'obsolescence la plus part des autres technologies ayant le même objectif.

Google Chrome (desktop) et Firefox (desktop) étaient les deux seules navigateurs compatible lors de sa sortie. Maintenant la majorité des navigateurs desktop et mobile supporte la technologie.

A sa sortie WebAssembly était un MVP (minimum viable product) en 1.0, aujourd'hui la technologie en est à sa version 1.1.

Le nombre de langage supportant le WebAssembly en 2017 était très faible on y retrouvais notamment:
* C
* C++
* Rust
* ...

 

=== Roadmap ===
Même si WebAssembly est maintenant disponible au publique, celui-ci continue son développement avec des mises à jours semi-régulière (plus fréquente que les autres langages natif des navigateurs). Voici une courte roadmap des fonctionnalités qui sont envisagé dans avenir plus ou moins proche:
[[File:webassembly_post_mvp.png|frame|right| Roadmap post-mvp du WebAssembly visualisé par [https://hacks.mozilla.org/2018/10/webassemblys-post-mvp-future/| Lin Clark]]]
* Support du GPU par WebAssembly
* Multithreading
* Unification des librairies
* Garbage Collector
* Gestion des exceptions
* Amélioration du tracing
* Meilleur outils de débogage
* SIMD
* Adressage sur 64-bit
* Streaming compilation
* Tiered compilation
* Coroutines
* Linear memory bigger than 4gb
* ...

[https://github.com/WebAssembly/design/blob/master/FutureFeatures.md| Lien vers une partie de leur roadmap à court terme.]

 

= Utilisation =
Pour plus d'information pratique sur l'utilisation du WebAssembly voici le lien de la [[VT2020-WebAssembly-Demo|démonstration]].
= Contribuer =
Il est possible de contribuer au projet de WebAssembly si cela vous intéresse. Pour contribuer il faut se rendre sur leur page Github, où l'on peut voir tout leur projet en cours.
[https://github.com/WebAssembly| Page Github].

De plus, il est possible de contribuer pour majorité des compilateurs de WebAssembly notable, comme par exemple:
* Emscripten (C/C++): https://github.com/emscripten-core
* AssemblyScript (~TypeScript): https://github.com/AssemblyScript
* Rust: https://www.rust-lang.org/
* Blazor (C#): https://github.com/dotnet/blazor
* ...

= Référence =
# https://webassembly.org/
# https://webassembly.org/roadmap/
# https://github.com/WebAssembly/design/blob/master/FutureFeatures.md
# https://webassembly.org/getting-started/developers-guide/
# https://en.wikipedia.org/wiki/WebAssembly
# https://wasmbyexample.dev/home.en-us.html
# https://medium.com/dfinity/why-webassembly-f21967076e4
# https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/
# https://hacks.mozilla.org/2017/02/where-is-webassembly-now-and-whats-next/
# https://medium.com/javascript-scene/what-is-webassembly-the-dawn-of-a-new-era-61256ec5a8f6
# https://rsms.me/wasm-intro
# https://wasm-talk.johnny.sh/#0
# https://www.youtube.com/watch?v=kUljgnOE5-A&t=544s
# https://www.youtube.com/watch?v=drRaRRZ5AJk&t=2273s
# https://www.youtube.com/watch?v=njt-Qzw0mVY&t=2060s
# https://www.youtube.com/watch?v=jGKjKx2vous&t=629s
# https://madewithwebassembly.com/
# https://github.com/mbasso/awesome-wasm

= Veille Technologique 2020 =
* Année : [[VT2020|VT2020]]
* Sujet : WebAssembly
* [[Media:VT2020-WebAssembly-Presentation.pdf|Présentation]]
* [[VT2020-WebAssembly-Demo|Démonstration]]
* Auteurs : [[User:Morgan.Crociati|Morgan Crociati]]

VT2020-WebAssembly-Fiche

2020-11-27T14:41:07Z

Morgan.Crociati: /* Description */

Fiche WebAssembly

[[File:WebAssembly_Logo.png|400px|thumb|Logo du WebAssembly]]

= TLDR =
Le WebAssembly est une nouvelle technologie ajouté à la majorité des navigateurs internet en 2017.
Il s'apparente à de l'assembleur pour le web.
Son objectif est de permettre l’exécution d'application haute performances sur le navigateur.
Contrairement au Javascript, pour utiliser le WebAssembly nous devons passer (majoritairement) par une compilation.

 

= Description =
Le WebAssembly est une nouvelle technologie du web, elle vient s'ajouter à la majorité des navigateurs et rejoins la famille des langages/technologies reconnue par des navigateurs (HTML, CSS et Javascript).
WebAssembly vient de la concaténation de web et assembleur. Cela reflète l'objectif de cette technologie, obtenir des performances sur le web proche du natif.
La technologie a été créer pour ajouter à l'arsenal des navigateurs une technologie permettant d'avoir performances meilleurs que celle du Javascript, et permettre ainsi aux navigateurs d'avoir accés à des applications hautes performances ou plus sécurisé en utilisant les ressources de l'utilisateur et non pas d'un serveur.

=== WebAssembly et Javascript ===
[[File:javascript_vs_webassembly.png|thumb|right| Créé par [https://twitter.com/diekus| @diekus]]]
Le WebAssembly n'a pas pour objectif de venir perturber le Javascript, les deux langages sont complémentaire.
Cela est particulière vrai car le WebAssembly n'a pas de moyen natif d’interagir avec le DOM et doit donc se reposer sur le Javascript pour interagir avec celui-ci.

L'écart de performance entre le Javascript et le WebAssembly vient du faites que le WebAssembly est généralement compilé "ahead of time" tandis que le Javascript est compilé "just in time"..
 

=== Exemple ===
On peut soit écrire directement en WebAssembly, même si cela n'est pas le but de la technologie en elle même.
Le but est d'écrire dans un autre langage de programmation (C, C++, Rust, ...).
La technologie est encore assez jeune, donc seul un petit ensemble de langage possède un compilateur pour le WebAssembly.
[[File:webassembly_example_compilation.PNG|frame|center| Exemple compilation de code C, en WebAssembly (.wat à gauche et .wasm à droite)]]
 

=== Langage officiellement supporté ===
[[File:Webassembly_official_language.PNG]]

= Historique =
== Guerre des standards ==
Avant la création du WebAssembly, les grandes entreprises du web (Google, Mozilla, Microsoft, ...) avaient compris que les navigateurs manquaient d'une technologie leur permettant d'avoir de meilleur performance que le Javascript. Cette technologie permettrait de pouvoir faire fonctionner directement depuis un navigateurs des applications lourde, que l'on aurait considéré comme native auparavant.

L'initiative de Google pour créer cette technologie se nomme [https://en.wikipedia.org/wiki/Google_Native_Client| Google Native Client (ou NaCl)]. NaCl fut créé en 2011 et fut. La technologie fonctionner sur un principe de sandboxing, permettant de faire fonctionner du code natif peut importe l'architecture visé (x86, ARM, ...). L'objectif de Google est de faire cette technologie un des piliers [https://en.wikipedia.org/wiki/Chrome_OS| Chrome OS], qui avait pour ambition d'utiliser en majorité des web apps. En 2017, Google annonce l'obsolescence de cette technologie. NaCl a tout de même était une assez belle réussite de Google, car avant son obsolescence on pouvait utiliser l’accélération matériel graphique pour pouvoir faire marcher des jeux par exemple.

[[File:ActiveX_logo.png|thumb|100px|right]]
L'initiative de Microsoft pour créer cette technologie ne fut pas quelque chose de direct, une évolution de leur technologie [https://en.wikipedia.org/wiki/ActiveX| ActiveX] (vieille de 1996) permet en soit de pouvoir faire tourner du code natif sur leur navigateur. ActiveX fut adopter par de nombreux navigateur en dehors de Microsoft de part son ancienneté, mais ses capacités étaient très limité. Les performances d'ActiveX était très loin des performances d'un code natif. Aujourd'hui ActiveX n'est plus utilisé pour le web par Microsoft, car la technologie n'est plus accessible depuis Edge (leur nouveau navigateur).

 

[[File:code_example_asmjs.png|thumb|550px|right| Exemple de code asm.js]]
L'initiative de Mozilla est surement celle qui a eu le plus d'impact sur WebAssembly. Leur technologie se nomme [https://en.wikipedia.org/wiki/Asm.js| asm.js], créé par une équipe à Mozilla (dont Alon Zakai) en 2013. Le but de cette technologie était d'être compatible avec tous les navigateurs, car le code était toujours du Javascript mais que dans certain navigateur le code pouvait gagné en performance de part la façon dont il était écrit. Pour gagner en performance asm.js utilisait un espace mémoire modifiable (cf. MEM8 dans image ci-dessous) ainsi que du code pour inférer le type d'une variable (cf. |0 permet de au navigateur de savoir que ptr est un entier sur 32bits dans l'image ci-dessous). Pour créer du code compatible avec asm.js, soit on peut écrire directement en Javascript (un peu complexe car il faudra respecter scrupuleusement la nomenclature permettant de gagner en performance) ou plus communément en écrivant du code dans un autre langage (C, C++, Rust, ...) et compiler le code en asm.js. Les capacités de asm.js furent montré au travers d'une implémentation d'une démo technique (Citadel) tournant sous le moteur Unreal Engine 3, le moteur fut implémenté en 3 jours en asm.js. Les performances de asm.js pouvait atteindre 2 fois moins que du code native (beaucoup plus performant que du Javascript normal).

 

== Création du WebAssembly ==
[[File:W3C_Icon.png|500px|right|thumb| Logo du World Wide Web Consortium]]
Ayant vue le potentiel de asm.js, Mozilla décide d'ouvrir la discussion avec les autres acteurs majeur du web et de créer un standard commun gérer par le World Wide Web Consortium (cf. image ci-dessous).
Le WebAssembly fut introduit au monde le 17 juin 2015. La technologie entre en browser preview en novembre 2016, puis en mars 2017 elle est disponible au grand publique.

La sortie de la technologie a poussé à l'obsolescence la plus part des autres technologies ayant le même objectif.

Google Chrome (desktop) et Firefox (desktop) étaient les deux seules navigateurs compatible lors de sa sortie. Maintenant la majorité des navigateurs desktop et mobile supporte la technologie.

A sa sortie WebAssembly était un MVP (minimum viable product) en 1.0, aujourd'hui la technologie en est à sa version 1.1.

Le nombre de langage supportant le WebAssembly en 2017 était très faible on y retrouvais notamment:
* C
* C++
* Rust
* ...

 

== Roadmap ==
Même si WebAssembly est maintenant disponible au publique, celui-ci continue son développement avec des mises à jours semi-régulière (plus fréquente que les autres langages natif des navigateurs). Voici une courte roadmap des fonctionnalités qui sont envisagé dans avenir plus ou moins proche:
[[File:webassembly_post_mvp.png|frame|right| Roadmap post-mvp du WebAssembly visualisé par [https://hacks.mozilla.org/2018/10/webassemblys-post-mvp-future/| Lin Clark]]]
* Support du GPU par WebAssembly
* Multithreading
* Unification des librairies
* Garbage Collector
* Gestion des exceptions
* Amélioration du tracing
* Meilleur outils de débogage
* SIMD
* Adressage sur 64-bit
* Streaming compilation
* Tiered compilation
* Coroutines
* Linear memory bigger than 4gb
* ...

[https://github.com/WebAssembly/design/blob/master/FutureFeatures.md| Lien vers une partie de leur roadmap à court terme.]

 

= Utilisation =
Pour plus d'information pratique sur l'utilisation du WebAssembly voici le lien de la [[VT2020-WebAssembly-Demo|démonstration]].
= Contribuer =
Il est possible de contribuer au projet de WebAssembly si cela vous intéresse. Pour contribuer il faut se rendre sur leur page Github, où l'on peut voir tout leur projet en cours.
[https://github.com/WebAssembly| Page Github].

De plus, il est possible de contribuer pour majorité des compilateurs de WebAssembly notable, comme par exemple:
* Emscripten (C/C++): https://github.com/emscripten-core
* AssemblyScript (~TypeScript): https://github.com/AssemblyScript
* Rust: https://www.rust-lang.org/
* Blazor (C#): https://github.com/dotnet/blazor
* ...

= Référence =
# https://webassembly.org/
# https://webassembly.org/roadmap/
# https://github.com/WebAssembly/design/blob/master/FutureFeatures.md
# https://webassembly.org/getting-started/developers-guide/
# https://en.wikipedia.org/wiki/WebAssembly
# https://wasmbyexample.dev/home.en-us.html
# https://medium.com/dfinity/why-webassembly-f21967076e4
# https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/
# https://hacks.mozilla.org/2017/02/where-is-webassembly-now-and-whats-next/
# https://medium.com/javascript-scene/what-is-webassembly-the-dawn-of-a-new-era-61256ec5a8f6
# https://rsms.me/wasm-intro
# https://wasm-talk.johnny.sh/#0
# https://www.youtube.com/watch?v=kUljgnOE5-A&t=544s
# https://www.youtube.com/watch?v=drRaRRZ5AJk&t=2273s
# https://www.youtube.com/watch?v=njt-Qzw0mVY&t=2060s
# https://www.youtube.com/watch?v=jGKjKx2vous&t=629s
# https://madewithwebassembly.com/
# https://github.com/mbasso/awesome-wasm

= Veille Technologique 2020 =
* Année : [[VT2020|VT2020]]
* Sujet : WebAssembly
* [[Media:VT2020-WebAssembly-Presentation.pdf|Présentation]]
* [[VT2020-WebAssembly-Demo|Démonstration]]
* Auteurs : [[User:Morgan.Crociati|Morgan Crociati]]

VT2020-WebAssembly-Fiche

2020-11-27T14:37:31Z

Morgan.Crociati: /* Langage supporté */

Fiche WebAssembly

[[File:WebAssembly_Logo.png|400px|thumb|Logo du WebAssembly]]

= TLDR =
Le WebAssembly est une nouvelle technologie ajouté à la majorité des navigateurs internet en 2017.
Il s'apparente à de l'assembleur pour le web.
Son objectif est de permettre l’exécution d'application haute performances sur le navigateur.
Contrairement au Javascript, pour utiliser le WebAssembly nous devons passer (majoritairement) par une compilation.

 

= Description =
Le WebAssembly est une nouvelle technologie du web, elle vient s'ajouter à la majorité des navigateurs et rejoins la famille des langages/technologies reconnue par des navigateurs (HTML, CSS et Javascript).
WebAssembly vient de la concaténation de web et assembleur. Cela reflète l'objectif de cette technologie, obtenir des performances sur le web proche du natif.
La technologie a été créer pour ajouter à l'arsenal des navigateurs une technologie permettant d'avoir performances meilleurs que celle du Javascript, et permettre ainsi aux navigateurs d'avoir accés à des applications hautes performances ou plus sécurisé en utilisant les ressources de l'utilisateur et non pas d'un serveur.

== WebAssembly et Javascript ==
[[File:javascript_vs_webassembly.png|thumb|right| Créé par [https://twitter.com/diekus| @diekus]]]
Le WebAssembly n'a pas pour objectif de venir perturber le Javascript, les deux langages sont complémentaire.
Cela est particulière vrai car le WebAssembly n'a pas de moyen natif d’interagir avec le DOM et doit donc se reposer sur le Javascript pour interagir avec celui-ci.

L'écart de performance entre le Javascript et le WebAssembly vient du faites que le WebAssembly est généralement compilé "ahead of time" tandis que le Javascript est compilé "just in time"..
 

== Exemple ==
On peut soit écrire directement en WebAssembly, même si cela n'est pas le but de la technologie en elle même.
Le but est d'écrire dans un autre langage de programmation (C, C++, Rust, ...).
La technologie est encore assez jeune, donc seul un petit ensemble de langage possède un compilateur pour le WebAssembly.
[[File:webassembly_example_compilation.PNG|frame|center| Exemple compilation de code C, en WebAssembly (.wat à gauche et .wasm à droite)]]
 

== Langage officiellement supporté ==
[[File:Webassembly_official_language.PNG]]

= Historique =
== Guerre des standards ==
Avant la création du WebAssembly, les grandes entreprises du web (Google, Mozilla, Microsoft, ...) avaient compris que les navigateurs manquaient d'une technologie leur permettant d'avoir de meilleur performance que le Javascript. Cette technologie permettrait de pouvoir faire fonctionner directement depuis un navigateurs des applications lourde, que l'on aurait considéré comme native auparavant.

L'initiative de Google pour créer cette technologie se nomme [https://en.wikipedia.org/wiki/Google_Native_Client| Google Native Client (ou NaCl)]. NaCl fut créé en 2011 et fut. La technologie fonctionner sur un principe de sandboxing, permettant de faire fonctionner du code natif peut importe l'architecture visé (x86, ARM, ...). L'objectif de Google est de faire cette technologie un des piliers [https://en.wikipedia.org/wiki/Chrome_OS| Chrome OS], qui avait pour ambition d'utiliser en majorité des web apps. En 2017, Google annonce l'obsolescence de cette technologie. NaCl a tout de même était une assez belle réussite de Google, car avant son obsolescence on pouvait utiliser l’accélération matériel graphique pour pouvoir faire marcher des jeux par exemple.

[[File:ActiveX_logo.png|thumb|100px|right]]
L'initiative de Microsoft pour créer cette technologie ne fut pas quelque chose de direct, une évolution de leur technologie [https://en.wikipedia.org/wiki/ActiveX| ActiveX] (vieille de 1996) permet en soit de pouvoir faire tourner du code natif sur leur navigateur. ActiveX fut adopter par de nombreux navigateur en dehors de Microsoft de part son ancienneté, mais ses capacités étaient très limité. Les performances d'ActiveX était très loin des performances d'un code natif. Aujourd'hui ActiveX n'est plus utilisé pour le web par Microsoft, car la technologie n'est plus accessible depuis Edge (leur nouveau navigateur).

 

[[File:code_example_asmjs.png|thumb|550px|right| Exemple de code asm.js]]
L'initiative de Mozilla est surement celle qui a eu le plus d'impact sur WebAssembly. Leur technologie se nomme [https://en.wikipedia.org/wiki/Asm.js| asm.js], créé par une équipe à Mozilla (dont Alon Zakai) en 2013. Le but de cette technologie était d'être compatible avec tous les navigateurs, car le code était toujours du Javascript mais que dans certain navigateur le code pouvait gagné en performance de part la façon dont il était écrit. Pour gagner en performance asm.js utilisait un espace mémoire modifiable (cf. MEM8 dans image ci-dessous) ainsi que du code pour inférer le type d'une variable (cf. |0 permet de au navigateur de savoir que ptr est un entier sur 32bits dans l'image ci-dessous). Pour créer du code compatible avec asm.js, soit on peut écrire directement en Javascript (un peu complexe car il faudra respecter scrupuleusement la nomenclature permettant de gagner en performance) ou plus communément en écrivant du code dans un autre langage (C, C++, Rust, ...) et compiler le code en asm.js. Les capacités de asm.js furent montré au travers d'une implémentation d'une démo technique (Citadel) tournant sous le moteur Unreal Engine 3, le moteur fut implémenté en 3 jours en asm.js. Les performances de asm.js pouvait atteindre 2 fois moins que du code native (beaucoup plus performant que du Javascript normal).

 

== Création du WebAssembly ==
[[File:W3C_Icon.png|500px|right|thumb| Logo du World Wide Web Consortium]]
Ayant vue le potentiel de asm.js, Mozilla décide d'ouvrir la discussion avec les autres acteurs majeur du web et de créer un standard commun gérer par le World Wide Web Consortium (cf. image ci-dessous).
Le WebAssembly fut introduit au monde le 17 juin 2015. La technologie entre en browser preview en novembre 2016, puis en mars 2017 elle est disponible au grand publique.

La sortie de la technologie a poussé à l'obsolescence la plus part des autres technologies ayant le même objectif.

Google Chrome (desktop) et Firefox (desktop) étaient les deux seules navigateurs compatible lors de sa sortie. Maintenant la majorité des navigateurs desktop et mobile supporte la technologie.

A sa sortie WebAssembly était un MVP (minimum viable product) en 1.0, aujourd'hui la technologie en est à sa version 1.1.

Le nombre de langage supportant le WebAssembly en 2017 était très faible on y retrouvais notamment:
* C
* C++
* Rust
* ...

 

== Roadmap ==
Même si WebAssembly est maintenant disponible au publique, celui-ci continue son développement avec des mises à jours semi-régulière (plus fréquente que les autres langages natif des navigateurs). Voici une courte roadmap des fonctionnalités qui sont envisagé dans avenir plus ou moins proche:
[[File:webassembly_post_mvp.png|frame|right| Roadmap post-mvp du WebAssembly visualisé par [https://hacks.mozilla.org/2018/10/webassemblys-post-mvp-future/| Lin Clark]]]
* Support du GPU par WebAssembly
* Multithreading
* Unification des librairies
* Garbage Collector
* Gestion des exceptions
* Amélioration du tracing
* Meilleur outils de débogage
* SIMD
* Adressage sur 64-bit
* Streaming compilation
* Tiered compilation
* Coroutines
* Linear memory bigger than 4gb
* ...

[https://github.com/WebAssembly/design/blob/master/FutureFeatures.md| Lien vers une partie de leur roadmap à court terme.]

 

= Utilisation =
Pour plus d'information pratique sur l'utilisation du WebAssembly voici le lien de la [[VT2020-WebAssembly-Demo|démonstration]].
= Contribuer =
Il est possible de contribuer au projet de WebAssembly si cela vous intéresse. Pour contribuer il faut se rendre sur leur page Github, où l'on peut voir tout leur projet en cours.
[https://github.com/WebAssembly| Page Github].

De plus, il est possible de contribuer pour majorité des compilateurs de WebAssembly notable, comme par exemple:
* Emscripten (C/C++): https://github.com/emscripten-core
* AssemblyScript (~TypeScript): https://github.com/AssemblyScript
* Rust: https://www.rust-lang.org/
* Blazor (C#): https://github.com/dotnet/blazor
* ...

= Référence =
# https://webassembly.org/
# https://webassembly.org/roadmap/
# https://github.com/WebAssembly/design/blob/master/FutureFeatures.md
# https://webassembly.org/getting-started/developers-guide/
# https://en.wikipedia.org/wiki/WebAssembly
# https://wasmbyexample.dev/home.en-us.html
# https://medium.com/dfinity/why-webassembly-f21967076e4
# https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/
# https://hacks.mozilla.org/2017/02/where-is-webassembly-now-and-whats-next/
# https://medium.com/javascript-scene/what-is-webassembly-the-dawn-of-a-new-era-61256ec5a8f6
# https://rsms.me/wasm-intro
# https://wasm-talk.johnny.sh/#0
# https://www.youtube.com/watch?v=kUljgnOE5-A&t=544s
# https://www.youtube.com/watch?v=drRaRRZ5AJk&t=2273s
# https://www.youtube.com/watch?v=njt-Qzw0mVY&t=2060s
# https://www.youtube.com/watch?v=jGKjKx2vous&t=629s
# https://madewithwebassembly.com/
# https://github.com/mbasso/awesome-wasm

= Veille Technologique 2020 =
* Année : [[VT2020|VT2020]]
* Sujet : WebAssembly
* [[Media:VT2020-WebAssembly-Presentation.pdf|Présentation]]
* [[VT2020-WebAssembly-Demo|Démonstration]]
* Auteurs : [[User:Morgan.Crociati|Morgan Crociati]]

VT2020-WebAssembly-Fiche

2020-11-27T14:37:01Z

Morgan.Crociati: /* Langage supporté */

Fiche WebAssembly

[[File:WebAssembly_Logo.png|400px|thumb|Logo du WebAssembly]]

= TLDR =
Le WebAssembly est une nouvelle technologie ajouté à la majorité des navigateurs internet en 2017.
Il s'apparente à de l'assembleur pour le web.
Son objectif est de permettre l’exécution d'application haute performances sur le navigateur.
Contrairement au Javascript, pour utiliser le WebAssembly nous devons passer (majoritairement) par une compilation.

 

= Description =
Le WebAssembly est une nouvelle technologie du web, elle vient s'ajouter à la majorité des navigateurs et rejoins la famille des langages/technologies reconnue par des navigateurs (HTML, CSS et Javascript).
WebAssembly vient de la concaténation de web et assembleur. Cela reflète l'objectif de cette technologie, obtenir des performances sur le web proche du natif.
La technologie a été créer pour ajouter à l'arsenal des navigateurs une technologie permettant d'avoir performances meilleurs que celle du Javascript, et permettre ainsi aux navigateurs d'avoir accés à des applications hautes performances ou plus sécurisé en utilisant les ressources de l'utilisateur et non pas d'un serveur.

== WebAssembly et Javascript ==
[[File:javascript_vs_webassembly.png|thumb|right| Créé par [https://twitter.com/diekus| @diekus]]]
Le WebAssembly n'a pas pour objectif de venir perturber le Javascript, les deux langages sont complémentaire.
Cela est particulière vrai car le WebAssembly n'a pas de moyen natif d’interagir avec le DOM et doit donc se reposer sur le Javascript pour interagir avec celui-ci.

L'écart de performance entre le Javascript et le WebAssembly vient du faites que le WebAssembly est généralement compilé "ahead of time" tandis que le Javascript est compilé "just in time"..
 

== Exemple ==
On peut soit écrire directement en WebAssembly, même si cela n'est pas le but de la technologie en elle même.
Le but est d'écrire dans un autre langage de programmation (C, C++, Rust, ...).
La technologie est encore assez jeune, donc seul un petit ensemble de langage possède un compilateur pour le WebAssembly.
[[File:webassembly_example_compilation.PNG|frame|center| Exemple compilation de code C, en WebAssembly (.wat à gauche et .wasm à droite)]]
 

== Langage supporté ==
[[File:Webassembly_official_language.PNG]]

= Historique =
== Guerre des standards ==
Avant la création du WebAssembly, les grandes entreprises du web (Google, Mozilla, Microsoft, ...) avaient compris que les navigateurs manquaient d'une technologie leur permettant d'avoir de meilleur performance que le Javascript. Cette technologie permettrait de pouvoir faire fonctionner directement depuis un navigateurs des applications lourde, que l'on aurait considéré comme native auparavant.

L'initiative de Google pour créer cette technologie se nomme [https://en.wikipedia.org/wiki/Google_Native_Client| Google Native Client (ou NaCl)]. NaCl fut créé en 2011 et fut. La technologie fonctionner sur un principe de sandboxing, permettant de faire fonctionner du code natif peut importe l'architecture visé (x86, ARM, ...). L'objectif de Google est de faire cette technologie un des piliers [https://en.wikipedia.org/wiki/Chrome_OS| Chrome OS], qui avait pour ambition d'utiliser en majorité des web apps. En 2017, Google annonce l'obsolescence de cette technologie. NaCl a tout de même était une assez belle réussite de Google, car avant son obsolescence on pouvait utiliser l’accélération matériel graphique pour pouvoir faire marcher des jeux par exemple.

[[File:ActiveX_logo.png|thumb|100px|right]]
L'initiative de Microsoft pour créer cette technologie ne fut pas quelque chose de direct, une évolution de leur technologie [https://en.wikipedia.org/wiki/ActiveX| ActiveX] (vieille de 1996) permet en soit de pouvoir faire tourner du code natif sur leur navigateur. ActiveX fut adopter par de nombreux navigateur en dehors de Microsoft de part son ancienneté, mais ses capacités étaient très limité. Les performances d'ActiveX était très loin des performances d'un code natif. Aujourd'hui ActiveX n'est plus utilisé pour le web par Microsoft, car la technologie n'est plus accessible depuis Edge (leur nouveau navigateur).

 

[[File:code_example_asmjs.png|thumb|550px|right| Exemple de code asm.js]]
L'initiative de Mozilla est surement celle qui a eu le plus d'impact sur WebAssembly. Leur technologie se nomme [https://en.wikipedia.org/wiki/Asm.js| asm.js], créé par une équipe à Mozilla (dont Alon Zakai) en 2013. Le but de cette technologie était d'être compatible avec tous les navigateurs, car le code était toujours du Javascript mais que dans certain navigateur le code pouvait gagné en performance de part la façon dont il était écrit. Pour gagner en performance asm.js utilisait un espace mémoire modifiable (cf. MEM8 dans image ci-dessous) ainsi que du code pour inférer le type d'une variable (cf. |0 permet de au navigateur de savoir que ptr est un entier sur 32bits dans l'image ci-dessous). Pour créer du code compatible avec asm.js, soit on peut écrire directement en Javascript (un peu complexe car il faudra respecter scrupuleusement la nomenclature permettant de gagner en performance) ou plus communément en écrivant du code dans un autre langage (C, C++, Rust, ...) et compiler le code en asm.js. Les capacités de asm.js furent montré au travers d'une implémentation d'une démo technique (Citadel) tournant sous le moteur Unreal Engine 3, le moteur fut implémenté en 3 jours en asm.js. Les performances de asm.js pouvait atteindre 2 fois moins que du code native (beaucoup plus performant que du Javascript normal).

 

== Création du WebAssembly ==
[[File:W3C_Icon.png|500px|right|thumb| Logo du World Wide Web Consortium]]
Ayant vue le potentiel de asm.js, Mozilla décide d'ouvrir la discussion avec les autres acteurs majeur du web et de créer un standard commun gérer par le World Wide Web Consortium (cf. image ci-dessous).
Le WebAssembly fut introduit au monde le 17 juin 2015. La technologie entre en browser preview en novembre 2016, puis en mars 2017 elle est disponible au grand publique.

La sortie de la technologie a poussé à l'obsolescence la plus part des autres technologies ayant le même objectif.

Google Chrome (desktop) et Firefox (desktop) étaient les deux seules navigateurs compatible lors de sa sortie. Maintenant la majorité des navigateurs desktop et mobile supporte la technologie.

A sa sortie WebAssembly était un MVP (minimum viable product) en 1.0, aujourd'hui la technologie en est à sa version 1.1.

Le nombre de langage supportant le WebAssembly en 2017 était très faible on y retrouvais notamment:
* C
* C++
* Rust
* ...

 

== Roadmap ==
Même si WebAssembly est maintenant disponible au publique, celui-ci continue son développement avec des mises à jours semi-régulière (plus fréquente que les autres langages natif des navigateurs). Voici une courte roadmap des fonctionnalités qui sont envisagé dans avenir plus ou moins proche:
[[File:webassembly_post_mvp.png|frame|right| Roadmap post-mvp du WebAssembly visualisé par [https://hacks.mozilla.org/2018/10/webassemblys-post-mvp-future/| Lin Clark]]]
* Support du GPU par WebAssembly
* Multithreading
* Unification des librairies
* Garbage Collector
* Gestion des exceptions
* Amélioration du tracing
* Meilleur outils de débogage
* SIMD
* Adressage sur 64-bit
* Streaming compilation
* Tiered compilation
* Coroutines
* Linear memory bigger than 4gb
* ...

[https://github.com/WebAssembly/design/blob/master/FutureFeatures.md| Lien vers une partie de leur roadmap à court terme.]

 

= Utilisation =
Pour plus d'information pratique sur l'utilisation du WebAssembly voici le lien de la [[VT2020-WebAssembly-Demo|démonstration]].
= Contribuer =
Il est possible de contribuer au projet de WebAssembly si cela vous intéresse. Pour contribuer il faut se rendre sur leur page Github, où l'on peut voir tout leur projet en cours.
[https://github.com/WebAssembly| Page Github].

De plus, il est possible de contribuer pour majorité des compilateurs de WebAssembly notable, comme par exemple:
* Emscripten (C/C++): https://github.com/emscripten-core
* AssemblyScript (~TypeScript): https://github.com/AssemblyScript
* Rust: https://www.rust-lang.org/
* Blazor (C#): https://github.com/dotnet/blazor
* ...

= Référence =
# https://webassembly.org/
# https://webassembly.org/roadmap/
# https://github.com/WebAssembly/design/blob/master/FutureFeatures.md
# https://webassembly.org/getting-started/developers-guide/
# https://en.wikipedia.org/wiki/WebAssembly
# https://wasmbyexample.dev/home.en-us.html
# https://medium.com/dfinity/why-webassembly-f21967076e4
# https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/
# https://hacks.mozilla.org/2017/02/where-is-webassembly-now-and-whats-next/
# https://medium.com/javascript-scene/what-is-webassembly-the-dawn-of-a-new-era-61256ec5a8f6
# https://rsms.me/wasm-intro
# https://wasm-talk.johnny.sh/#0
# https://www.youtube.com/watch?v=kUljgnOE5-A&t=544s
# https://www.youtube.com/watch?v=drRaRRZ5AJk&t=2273s
# https://www.youtube.com/watch?v=njt-Qzw0mVY&t=2060s
# https://www.youtube.com/watch?v=jGKjKx2vous&t=629s
# https://madewithwebassembly.com/
# https://github.com/mbasso/awesome-wasm

= Veille Technologique 2020 =
* Année : [[VT2020|VT2020]]
* Sujet : WebAssembly
* [[Media:VT2020-WebAssembly-Presentation.pdf|Présentation]]
* [[VT2020-WebAssembly-Demo|Démonstration]]
* Auteurs : [[User:Morgan.Crociati|Morgan Crociati]]

VT2020-WebAssembly-Fiche

2020-11-27T14:36:49Z

Morgan.Crociati: /* Description */

Fiche WebAssembly

[[File:WebAssembly_Logo.png|400px|thumb|Logo du WebAssembly]]

= TLDR =
Le WebAssembly est une nouvelle technologie ajouté à la majorité des navigateurs internet en 2017.
Il s'apparente à de l'assembleur pour le web.
Son objectif est de permettre l’exécution d'application haute performances sur le navigateur.
Contrairement au Javascript, pour utiliser le WebAssembly nous devons passer (majoritairement) par une compilation.

 

= Description =
Le WebAssembly est une nouvelle technologie du web, elle vient s'ajouter à la majorité des navigateurs et rejoins la famille des langages/technologies reconnue par des navigateurs (HTML, CSS et Javascript).
WebAssembly vient de la concaténation de web et assembleur. Cela reflète l'objectif de cette technologie, obtenir des performances sur le web proche du natif.
La technologie a été créer pour ajouter à l'arsenal des navigateurs une technologie permettant d'avoir performances meilleurs que celle du Javascript, et permettre ainsi aux navigateurs d'avoir accés à des applications hautes performances ou plus sécurisé en utilisant les ressources de l'utilisateur et non pas d'un serveur.

== WebAssembly et Javascript ==
[[File:javascript_vs_webassembly.png|thumb|right| Créé par [https://twitter.com/diekus| @diekus]]]
Le WebAssembly n'a pas pour objectif de venir perturber le Javascript, les deux langages sont complémentaire.
Cela est particulière vrai car le WebAssembly n'a pas de moyen natif d’interagir avec le DOM et doit donc se reposer sur le Javascript pour interagir avec celui-ci.

L'écart de performance entre le Javascript et le WebAssembly vient du faites que le WebAssembly est généralement compilé "ahead of time" tandis que le Javascript est compilé "just in time"..
 

== Exemple ==
On peut soit écrire directement en WebAssembly, même si cela n'est pas le but de la technologie en elle même.
Le but est d'écrire dans un autre langage de programmation (C, C++, Rust, ...).
La technologie est encore assez jeune, donc seul un petit ensemble de langage possède un compilateur pour le WebAssembly.
[[File:webassembly_example_compilation.PNG|frame|center| Exemple compilation de code C, en WebAssembly (.wat à gauche et .wasm à droite)]]
 

== Langage supporté ==

[[File:Webassembly_official_language.PNG|frame]]
Webassembly_official_language.PNG

= Historique =
== Guerre des standards ==
Avant la création du WebAssembly, les grandes entreprises du web (Google, Mozilla, Microsoft, ...) avaient compris que les navigateurs manquaient d'une technologie leur permettant d'avoir de meilleur performance que le Javascript. Cette technologie permettrait de pouvoir faire fonctionner directement depuis un navigateurs des applications lourde, que l'on aurait considéré comme native auparavant.

L'initiative de Google pour créer cette technologie se nomme [https://en.wikipedia.org/wiki/Google_Native_Client| Google Native Client (ou NaCl)]. NaCl fut créé en 2011 et fut. La technologie fonctionner sur un principe de sandboxing, permettant de faire fonctionner du code natif peut importe l'architecture visé (x86, ARM, ...). L'objectif de Google est de faire cette technologie un des piliers [https://en.wikipedia.org/wiki/Chrome_OS| Chrome OS], qui avait pour ambition d'utiliser en majorité des web apps. En 2017, Google annonce l'obsolescence de cette technologie. NaCl a tout de même était une assez belle réussite de Google, car avant son obsolescence on pouvait utiliser l’accélération matériel graphique pour pouvoir faire marcher des jeux par exemple.

[[File:ActiveX_logo.png|thumb|100px|right]]
L'initiative de Microsoft pour créer cette technologie ne fut pas quelque chose de direct, une évolution de leur technologie [https://en.wikipedia.org/wiki/ActiveX| ActiveX] (vieille de 1996) permet en soit de pouvoir faire tourner du code natif sur leur navigateur. ActiveX fut adopter par de nombreux navigateur en dehors de Microsoft de part son ancienneté, mais ses capacités étaient très limité. Les performances d'ActiveX était très loin des performances d'un code natif. Aujourd'hui ActiveX n'est plus utilisé pour le web par Microsoft, car la technologie n'est plus accessible depuis Edge (leur nouveau navigateur).

 

[[File:code_example_asmjs.png|thumb|550px|right| Exemple de code asm.js]]
L'initiative de Mozilla est surement celle qui a eu le plus d'impact sur WebAssembly. Leur technologie se nomme [https://en.wikipedia.org/wiki/Asm.js| asm.js], créé par une équipe à Mozilla (dont Alon Zakai) en 2013. Le but de cette technologie était d'être compatible avec tous les navigateurs, car le code était toujours du Javascript mais que dans certain navigateur le code pouvait gagné en performance de part la façon dont il était écrit. Pour gagner en performance asm.js utilisait un espace mémoire modifiable (cf. MEM8 dans image ci-dessous) ainsi que du code pour inférer le type d'une variable (cf. |0 permet de au navigateur de savoir que ptr est un entier sur 32bits dans l'image ci-dessous). Pour créer du code compatible avec asm.js, soit on peut écrire directement en Javascript (un peu complexe car il faudra respecter scrupuleusement la nomenclature permettant de gagner en performance) ou plus communément en écrivant du code dans un autre langage (C, C++, Rust, ...) et compiler le code en asm.js. Les capacités de asm.js furent montré au travers d'une implémentation d'une démo technique (Citadel) tournant sous le moteur Unreal Engine 3, le moteur fut implémenté en 3 jours en asm.js. Les performances de asm.js pouvait atteindre 2 fois moins que du code native (beaucoup plus performant que du Javascript normal).

 

== Création du WebAssembly ==
[[File:W3C_Icon.png|500px|right|thumb| Logo du World Wide Web Consortium]]
Ayant vue le potentiel de asm.js, Mozilla décide d'ouvrir la discussion avec les autres acteurs majeur du web et de créer un standard commun gérer par le World Wide Web Consortium (cf. image ci-dessous).
Le WebAssembly fut introduit au monde le 17 juin 2015. La technologie entre en browser preview en novembre 2016, puis en mars 2017 elle est disponible au grand publique.

La sortie de la technologie a poussé à l'obsolescence la plus part des autres technologies ayant le même objectif.

Google Chrome (desktop) et Firefox (desktop) étaient les deux seules navigateurs compatible lors de sa sortie. Maintenant la majorité des navigateurs desktop et mobile supporte la technologie.

A sa sortie WebAssembly était un MVP (minimum viable product) en 1.0, aujourd'hui la technologie en est à sa version 1.1.

Le nombre de langage supportant le WebAssembly en 2017 était très faible on y retrouvais notamment:
* C
* C++
* Rust
* ...

 

== Roadmap ==
Même si WebAssembly est maintenant disponible au publique, celui-ci continue son développement avec des mises à jours semi-régulière (plus fréquente que les autres langages natif des navigateurs). Voici une courte roadmap des fonctionnalités qui sont envisagé dans avenir plus ou moins proche:
[[File:webassembly_post_mvp.png|frame|right| Roadmap post-mvp du WebAssembly visualisé par [https://hacks.mozilla.org/2018/10/webassemblys-post-mvp-future/| Lin Clark]]]
* Support du GPU par WebAssembly
* Multithreading
* Unification des librairies
* Garbage Collector
* Gestion des exceptions
* Amélioration du tracing
* Meilleur outils de débogage
* SIMD
* Adressage sur 64-bit
* Streaming compilation
* Tiered compilation
* Coroutines
* Linear memory bigger than 4gb
* ...

[https://github.com/WebAssembly/design/blob/master/FutureFeatures.md| Lien vers une partie de leur roadmap à court terme.]

 

= Utilisation =
Pour plus d'information pratique sur l'utilisation du WebAssembly voici le lien de la [[VT2020-WebAssembly-Demo|démonstration]].
= Contribuer =
Il est possible de contribuer au projet de WebAssembly si cela vous intéresse. Pour contribuer il faut se rendre sur leur page Github, où l'on peut voir tout leur projet en cours.
[https://github.com/WebAssembly| Page Github].

De plus, il est possible de contribuer pour majorité des compilateurs de WebAssembly notable, comme par exemple:
* Emscripten (C/C++): https://github.com/emscripten-core
* AssemblyScript (~TypeScript): https://github.com/AssemblyScript
* Rust: https://www.rust-lang.org/
* Blazor (C#): https://github.com/dotnet/blazor
* ...

= Référence =
# https://webassembly.org/
# https://webassembly.org/roadmap/
# https://github.com/WebAssembly/design/blob/master/FutureFeatures.md
# https://webassembly.org/getting-started/developers-guide/
# https://en.wikipedia.org/wiki/WebAssembly
# https://wasmbyexample.dev/home.en-us.html
# https://medium.com/dfinity/why-webassembly-f21967076e4
# https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/
# https://hacks.mozilla.org/2017/02/where-is-webassembly-now-and-whats-next/
# https://medium.com/javascript-scene/what-is-webassembly-the-dawn-of-a-new-era-61256ec5a8f6
# https://rsms.me/wasm-intro
# https://wasm-talk.johnny.sh/#0
# https://www.youtube.com/watch?v=kUljgnOE5-A&t=544s
# https://www.youtube.com/watch?v=drRaRRZ5AJk&t=2273s
# https://www.youtube.com/watch?v=njt-Qzw0mVY&t=2060s
# https://www.youtube.com/watch?v=jGKjKx2vous&t=629s
# https://madewithwebassembly.com/
# https://github.com/mbasso/awesome-wasm

= Veille Technologique 2020 =
* Année : [[VT2020|VT2020]]
* Sujet : WebAssembly
* [[Media:VT2020-WebAssembly-Presentation.pdf|Présentation]]
* [[VT2020-WebAssembly-Demo|Démonstration]]
* Auteurs : [[User:Morgan.Crociati|Morgan Crociati]]

File:Webassembly official language.PNG

2020-11-27T14:36:08Z

Morgan.Crociati:

VT2020-WebAssembly-Fiche

2020-11-27T14:34:37Z

Morgan.Crociati:

Fiche WebAssembly

[[File:WebAssembly_Logo.png|400px|thumb|Logo du WebAssembly]]

= TLDR =
Le WebAssembly est une nouvelle technologie ajouté à la majorité des navigateurs internet en 2017.
Il s'apparente à de l'assembleur pour le web.
Son objectif est de permettre l’exécution d'application haute performances sur le navigateur.
Contrairement au Javascript, pour utiliser le WebAssembly nous devons passer (majoritairement) par une compilation.

 

= Description =
Le WebAssembly est une nouvelle technologie du web, elle vient s'ajouter à la majorité des navigateurs et rejoins la famille des langages/technologies reconnue par des navigateurs (HTML, CSS et Javascript).
WebAssembly vient de la concaténation de web et assembleur. Cela reflète l'objectif de cette technologie, obtenir des performances sur le web proche du natif.
La technologie a été créer pour ajouter à l'arsenal des navigateurs une technologie permettant d'avoir performances meilleurs que celle du Javascript, et permettre ainsi aux navigateurs d'avoir accés à des applications hautes performances ou plus sécurisé en utilisant les ressources de l'utilisateur et non pas d'un serveur.

== WebAssembly et Javascript ==
[[File:javascript_vs_webassembly.png|thumb|right| Créé par [https://twitter.com/diekus| @diekus]]]
Le WebAssembly n'a pas pour objectif de venir perturber le Javascript, les deux langages sont complémentaire.
Cela est particulière vrai car le WebAssembly n'a pas de moyen natif d’interagir avec le DOM et doit donc se reposer sur le Javascript pour interagir avec celui-ci.

L'écart de performance entre le Javascript et le WebAssembly vient du faites que le WebAssembly est généralement compilé "ahead of time" tandis que le Javascript est compilé "just in time"..
 

== Exemple ==
On peut soit écrire directement en WebAssembly, même si cela n'est pas le but de la technologie en elle même.
Le but est d'écrire dans un autre langage de programmation (C, C++, Rust, ...).
La technologie est encore assez jeune, donc seul un petit ensemble de langage possède un compilateur pour le WebAssembly.
[[File:webassembly_example_compilation.PNG|frame|center| Exemple compilation de code C, en WebAssembly (.wat à gauche et .wasm à droite)]]
 

= Historique =
== Guerre des standards ==
Avant la création du WebAssembly, les grandes entreprises du web (Google, Mozilla, Microsoft, ...) avaient compris que les navigateurs manquaient d'une technologie leur permettant d'avoir de meilleur performance que le Javascript. Cette technologie permettrait de pouvoir faire fonctionner directement depuis un navigateurs des applications lourde, que l'on aurait considéré comme native auparavant.

L'initiative de Google pour créer cette technologie se nomme [https://en.wikipedia.org/wiki/Google_Native_Client| Google Native Client (ou NaCl)]. NaCl fut créé en 2011 et fut. La technologie fonctionner sur un principe de sandboxing, permettant de faire fonctionner du code natif peut importe l'architecture visé (x86, ARM, ...). L'objectif de Google est de faire cette technologie un des piliers [https://en.wikipedia.org/wiki/Chrome_OS| Chrome OS], qui avait pour ambition d'utiliser en majorité des web apps. En 2017, Google annonce l'obsolescence de cette technologie. NaCl a tout de même était une assez belle réussite de Google, car avant son obsolescence on pouvait utiliser l’accélération matériel graphique pour pouvoir faire marcher des jeux par exemple.

[[File:ActiveX_logo.png|thumb|100px|right]]
L'initiative de Microsoft pour créer cette technologie ne fut pas quelque chose de direct, une évolution de leur technologie [https://en.wikipedia.org/wiki/ActiveX| ActiveX] (vieille de 1996) permet en soit de pouvoir faire tourner du code natif sur leur navigateur. ActiveX fut adopter par de nombreux navigateur en dehors de Microsoft de part son ancienneté, mais ses capacités étaient très limité. Les performances d'ActiveX était très loin des performances d'un code natif. Aujourd'hui ActiveX n'est plus utilisé pour le web par Microsoft, car la technologie n'est plus accessible depuis Edge (leur nouveau navigateur).

 

[[File:code_example_asmjs.png|thumb|550px|right| Exemple de code asm.js]]
L'initiative de Mozilla est surement celle qui a eu le plus d'impact sur WebAssembly. Leur technologie se nomme [https://en.wikipedia.org/wiki/Asm.js| asm.js], créé par une équipe à Mozilla (dont Alon Zakai) en 2013. Le but de cette technologie était d'être compatible avec tous les navigateurs, car le code était toujours du Javascript mais que dans certain navigateur le code pouvait gagné en performance de part la façon dont il était écrit. Pour gagner en performance asm.js utilisait un espace mémoire modifiable (cf. MEM8 dans image ci-dessous) ainsi que du code pour inférer le type d'une variable (cf. |0 permet de au navigateur de savoir que ptr est un entier sur 32bits dans l'image ci-dessous). Pour créer du code compatible avec asm.js, soit on peut écrire directement en Javascript (un peu complexe car il faudra respecter scrupuleusement la nomenclature permettant de gagner en performance) ou plus communément en écrivant du code dans un autre langage (C, C++, Rust, ...) et compiler le code en asm.js. Les capacités de asm.js furent montré au travers d'une implémentation d'une démo technique (Citadel) tournant sous le moteur Unreal Engine 3, le moteur fut implémenté en 3 jours en asm.js. Les performances de asm.js pouvait atteindre 2 fois moins que du code native (beaucoup plus performant que du Javascript normal).

 

== Création du WebAssembly ==
[[File:W3C_Icon.png|500px|right|thumb| Logo du World Wide Web Consortium]]
Ayant vue le potentiel de asm.js, Mozilla décide d'ouvrir la discussion avec les autres acteurs majeur du web et de créer un standard commun gérer par le World Wide Web Consortium (cf. image ci-dessous).
Le WebAssembly fut introduit au monde le 17 juin 2015. La technologie entre en browser preview en novembre 2016, puis en mars 2017 elle est disponible au grand publique.

La sortie de la technologie a poussé à l'obsolescence la plus part des autres technologies ayant le même objectif.

Google Chrome (desktop) et Firefox (desktop) étaient les deux seules navigateurs compatible lors de sa sortie. Maintenant la majorité des navigateurs desktop et mobile supporte la technologie.

A sa sortie WebAssembly était un MVP (minimum viable product) en 1.0, aujourd'hui la technologie en est à sa version 1.1.

Le nombre de langage supportant le WebAssembly en 2017 était très faible on y retrouvais notamment:
* C
* C++
* Rust
* ...

 

== Roadmap ==
Même si WebAssembly est maintenant disponible au publique, celui-ci continue son développement avec des mises à jours semi-régulière (plus fréquente que les autres langages natif des navigateurs). Voici une courte roadmap des fonctionnalités qui sont envisagé dans avenir plus ou moins proche:
[[File:webassembly_post_mvp.png|frame|right| Roadmap post-mvp du WebAssembly visualisé par [https://hacks.mozilla.org/2018/10/webassemblys-post-mvp-future/| Lin Clark]]]
* Support du GPU par WebAssembly
* Multithreading
* Unification des librairies
* Garbage Collector
* Gestion des exceptions
* Amélioration du tracing
* Meilleur outils de débogage
* SIMD
* Adressage sur 64-bit
* Streaming compilation
* Tiered compilation
* Coroutines
* Linear memory bigger than 4gb
* ...

[https://github.com/WebAssembly/design/blob/master/FutureFeatures.md| Lien vers une partie de leur roadmap à court terme.]

 

= Utilisation =
Pour plus d'information pratique sur l'utilisation du WebAssembly voici le lien de la [[VT2020-WebAssembly-Demo|démonstration]].
= Contribuer =
Il est possible de contribuer au projet de WebAssembly si cela vous intéresse. Pour contribuer il faut se rendre sur leur page Github, où l'on peut voir tout leur projet en cours.
[https://github.com/WebAssembly| Page Github].

De plus, il est possible de contribuer pour majorité des compilateurs de WebAssembly notable, comme par exemple:
* Emscripten (C/C++): https://github.com/emscripten-core
* AssemblyScript (~TypeScript): https://github.com/AssemblyScript
* Rust: https://www.rust-lang.org/
* Blazor (C#): https://github.com/dotnet/blazor
* ...

= Référence =
# https://webassembly.org/
# https://webassembly.org/roadmap/
# https://github.com/WebAssembly/design/blob/master/FutureFeatures.md
# https://webassembly.org/getting-started/developers-guide/
# https://en.wikipedia.org/wiki/WebAssembly
# https://wasmbyexample.dev/home.en-us.html
# https://medium.com/dfinity/why-webassembly-f21967076e4
# https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/
# https://hacks.mozilla.org/2017/02/where-is-webassembly-now-and-whats-next/
# https://medium.com/javascript-scene/what-is-webassembly-the-dawn-of-a-new-era-61256ec5a8f6
# https://rsms.me/wasm-intro
# https://wasm-talk.johnny.sh/#0
# https://www.youtube.com/watch?v=kUljgnOE5-A&t=544s
# https://www.youtube.com/watch?v=drRaRRZ5AJk&t=2273s
# https://www.youtube.com/watch?v=njt-Qzw0mVY&t=2060s
# https://www.youtube.com/watch?v=jGKjKx2vous&t=629s
# https://madewithwebassembly.com/
# https://github.com/mbasso/awesome-wasm

= Veille Technologique 2020 =
* Année : [[VT2020|VT2020]]
* Sujet : WebAssembly
* [[Media:VT2020-WebAssembly-Presentation.pdf|Présentation]]
* [[VT2020-WebAssembly-Demo|Démonstration]]
* Auteurs : [[User:Morgan.Crociati|Morgan Crociati]]

VT2020-WebAssembly-Fiche

2020-11-27T14:25:45Z

Morgan.Crociati: /* WebAssembly et Javascript */

Fiche WebAssembly

[[File:WebAssembly_Logo.png|400px|thumb|Logo du WebAssembly]]

= TLDR =
Le WebAssembly est une nouvelle technologie ajouté à la majorité des navigateurs internet en 2017.
Il s'apparente à de l'assembleur pour le web.
Son objectif est de permettre l’exécution d'application haute performances sur le navigateur.
Contrairement au Javascript, pour utiliser le WebAssembly nous devons passer (majoritairement) par une compilation.

 

= Description =
Le WebAssembly est une nouvelle technologie du web, elle vient s'ajouter à la majorité des navigateurs et rejoins la famille des langages/technologies reconnue par des navigateurs (HTML, CSS et Javascript).
WebAssembly vient de la concaténation de web et assembleur. Cela reflète l'objectif de cette technologie, obtenir des performances sur le web proche du natif.
La technologie a été créer pour ajouter à l'arsenal des navigateurs une technologie permettant d'avoir performances meilleurs que celle du Javascript, et permettre ainsi aux navigateurs d'avoir accés à des applications hautes performances ou plus sécurisé en utilisant les ressources de l'utilisateur et non pas d'un serveur.

== WebAssembly et Javascript ==
[[File:javascript_vs_webassembly.png|thumb|right| Créé par [https://twitter.com/diekus| @diekus]]]
Le WebAssembly n'a pas pour objectif de venir perturber le Javascript, les deux langages sont complémentaire.
Cela est particulière vrai car le WebAssembly n'a pas de moyen natif d’interagir avec le DOM.
En général ce langage est un compilé "ahead of time" (AOT) contrairement au Javascript qui est compilé "just in time" (JIT).
On peut soit écrire directement en WebAssembly, même si cela n'est pas le but de la technologie en elle même.
Le but est d'écrire dans un autre langage de programmation (C, C++, Rust, ...).
La technologie est encore assez jeune, donc seul un petit ensemble de langage possède un compilateur pour le WebAssembly.

 

== Exemple ==
[[File:webassembly_example_compilation.PNG|frame|center| Exemple compilation de code C, en WebAssembly (.wat à gauche et .wasm à droite)]]
 

= Historique =
== Guerre des standards ==
Avant la création du WebAssembly, les grandes entreprises du web (Google, Mozilla, Microsoft, ...) avaient compris que les navigateurs manquaient d'une technologie leur permettant d'avoir de meilleur performance que le Javascript. Cette technologie permettrait de pouvoir faire fonctionner directement depuis un navigateurs des applications lourde, que l'on aurait considéré comme native auparavant.

L'initiative de Google pour créer cette technologie se nomme [https://en.wikipedia.org/wiki/Google_Native_Client| Google Native Client (ou NaCl)]. NaCl fut créé en 2011 et fut. La technologie fonctionner sur un principe de sandboxing, permettant de faire fonctionner du code natif peut importe l'architecture visé (x86, ARM, ...). L'objectif de Google est de faire cette technologie un des piliers [https://en.wikipedia.org/wiki/Chrome_OS| Chrome OS], qui avait pour ambition d'utiliser en majorité des web apps. En 2017, Google annonce l'obsolescence de cette technologie. NaCl a tout de même était une assez belle réussite de Google, car avant son obsolescence on pouvait utiliser l’accélération matériel graphique pour pouvoir faire marcher des jeux par exemple.

[[File:ActiveX_logo.png|thumb|100px|right]]
L'initiative de Microsoft pour créer cette technologie ne fut pas quelque chose de direct, une évolution de leur technologie [https://en.wikipedia.org/wiki/ActiveX| ActiveX] (vieille de 1996) permet en soit de pouvoir faire tourner du code natif sur leur navigateur. ActiveX fut adopter par de nombreux navigateur en dehors de Microsoft de part son ancienneté, mais ses capacités étaient très limité. Les performances d'ActiveX était très loin des performances d'un code natif. Aujourd'hui ActiveX n'est plus utilisé pour le web par Microsoft, car la technologie n'est plus accessible depuis Edge (leur nouveau navigateur).

 

[[File:code_example_asmjs.png|thumb|550px|right| Exemple de code asm.js]]
L'initiative de Mozilla est surement celle qui a eu le plus d'impact sur WebAssembly. Leur technologie se nomme [https://en.wikipedia.org/wiki/Asm.js| asm.js], créé par une équipe à Mozilla (dont Alon Zakai) en 2013. Le but de cette technologie était d'être compatible avec tous les navigateurs, car le code était toujours du Javascript mais que dans certain navigateur le code pouvait gagné en performance de part la façon dont il était écrit. Pour gagner en performance asm.js utilisait un espace mémoire modifiable (cf. MEM8 dans image ci-dessous) ainsi que du code pour inférer le type d'une variable (cf. |0 permet de au navigateur de savoir que ptr est un entier sur 32bits dans l'image ci-dessous). Pour créer du code compatible avec asm.js, soit on peut écrire directement en Javascript (un peu complexe car il faudra respecter scrupuleusement la nomenclature permettant de gagner en performance) ou plus communément en écrivant du code dans un autre langage (C, C++, Rust, ...) et compiler le code en asm.js. Les capacités de asm.js furent montré au travers d'une implémentation d'une démo technique (Citadel) tournant sous le moteur Unreal Engine 3, le moteur fut implémenté en 3 jours en asm.js. Les performances de asm.js pouvait atteindre 2 fois moins que du code native (beaucoup plus performant que du Javascript normal).

 

== Création du WebAssembly ==
[[File:W3C_Icon.png|500px|right|thumb| Logo du World Wide Web Consortium]]
Ayant vue le potentiel de asm.js, Mozilla décide d'ouvrir la discussion avec les autres acteurs majeur du web et de créer un standard commun gérer par le World Wide Web Consortium (cf. image ci-dessous).
Le WebAssembly fut introduit au monde le 17 juin 2015. La technologie entre en browser preview en novembre 2016, puis en mars 2017 elle est disponible au grand publique.

La sortie de la technologie a poussé à l'obsolescence la plus part des autres technologies ayant le même objectif.

Google Chrome (desktop) et Firefox (desktop) étaient les deux seules navigateurs compatible lors de sa sortie. Maintenant la majorité des navigateurs desktop et mobile supporte la technologie.

A sa sortie WebAssembly était un MVP (minimum viable product) en 1.0, aujourd'hui la technologie en est à sa version 1.1.

Le nombre de langage supportant le WebAssembly en 2017 était très faible on y retrouvais notamment:
* C
* C++
* Rust
* ...

 

== Roadmap ==
Même si WebAssembly est maintenant disponible au publique, celui-ci continue son développement avec des mises à jours semi-régulière (plus fréquente que les autres langages natif des navigateurs). Voici une courte roadmap des fonctionnalités qui sont envisagé dans avenir plus ou moins proche:
[[File:webassembly_post_mvp.png|frame|right| Roadmap post-mvp du WebAssembly visualisé par [https://hacks.mozilla.org/2018/10/webassemblys-post-mvp-future/| Lin Clark]]]
* Support du GPU par WebAssembly
* Multithreading
* Unification des librairies
* Garbage Collector
* Gestion des exceptions
* Amélioration du tracing
* Meilleur outils de débogage
* SIMD
* Adressage sur 64-bit
* Streaming compilation
* Tiered compilation
* Coroutines
* Linear memory bigger than 4gb
* ...

[https://github.com/WebAssembly/design/blob/master/FutureFeatures.md| Lien vers une partie de leur roadmap à court terme.]

 

= Utilisation =
Pour plus d'information pratique sur l'utilisation du WebAssembly voici le lien de la [[VT2020-WebAssembly-Demo|démonstration]].
= Contribuer =
Il est possible de contribuer au projet de WebAssembly si cela vous intéresse. Pour contribuer il faut se rendre sur leur page Github, où l'on peut voir tout leur projet en cours.
[https://github.com/WebAssembly| Page Github].

De plus, il est possible de contribuer pour majorité des compilateurs de WebAssembly notable, comme par exemple:
* Emscripten (C/C++): https://github.com/emscripten-core
* AssemblyScript (~TypeScript): https://github.com/AssemblyScript
* Rust: https://www.rust-lang.org/
* Blazor (C#): https://github.com/dotnet/blazor
* ...

= Référence =
# https://webassembly.org/
# https://webassembly.org/roadmap/
# https://github.com/WebAssembly/design/blob/master/FutureFeatures.md
# https://webassembly.org/getting-started/developers-guide/
# https://en.wikipedia.org/wiki/WebAssembly
# https://wasmbyexample.dev/home.en-us.html
# https://medium.com/dfinity/why-webassembly-f21967076e4
# https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/
# https://hacks.mozilla.org/2017/02/where-is-webassembly-now-and-whats-next/
# https://medium.com/javascript-scene/what-is-webassembly-the-dawn-of-a-new-era-61256ec5a8f6
# https://rsms.me/wasm-intro
# https://wasm-talk.johnny.sh/#0
# https://www.youtube.com/watch?v=kUljgnOE5-A&t=544s
# https://www.youtube.com/watch?v=drRaRRZ5AJk&t=2273s
# https://www.youtube.com/watch?v=njt-Qzw0mVY&t=2060s
# https://www.youtube.com/watch?v=jGKjKx2vous&t=629s
# https://madewithwebassembly.com/
# https://github.com/mbasso/awesome-wasm

= Veille Technologique 2020 =
* Année : [[VT2020|VT2020]]
* Sujet : WebAssembly
* [[Media:VT2020-WebAssembly-Presentation.pdf|Présentation]]
* [[VT2020-WebAssembly-Demo|Démonstration]]
* Auteurs : [[User:Morgan.Crociati|Morgan Crociati]]

VT2020-WebAssembly-Fiche

2020-11-27T14:25:33Z

Morgan.Crociati: /* Description */

Fiche WebAssembly

[[File:WebAssembly_Logo.png|400px|thumb|Logo du WebAssembly]]

= TLDR =
Le WebAssembly est une nouvelle technologie ajouté à la majorité des navigateurs internet en 2017.
Il s'apparente à de l'assembleur pour le web.
Son objectif est de permettre l’exécution d'application haute performances sur le navigateur.
Contrairement au Javascript, pour utiliser le WebAssembly nous devons passer (majoritairement) par une compilation.

 

= Description =
Le WebAssembly est une nouvelle technologie du web, elle vient s'ajouter à la majorité des navigateurs et rejoins la famille des langages/technologies reconnue par des navigateurs (HTML, CSS et Javascript).
WebAssembly vient de la concaténation de web et assembleur. Cela reflète l'objectif de cette technologie, obtenir des performances sur le web proche du natif.
La technologie a été créer pour ajouter à l'arsenal des navigateurs une technologie permettant d'avoir performances meilleurs que celle du Javascript, et permettre ainsi aux navigateurs d'avoir accés à des applications hautes performances ou plus sécurisé en utilisant les ressources de l'utilisateur et non pas d'un serveur.

== WebAssembly et Javascript ==
Le WebAssembly n'a pas pour objectif de venir perturber le Javascript, les deux langages sont complémentaire.
Cela est particulière vrai car le WebAssembly n'a pas de moyen natif d’interagir avec le DOM.
En général ce langage est un compilé "ahead of time" (AOT) contrairement au Javascript qui est compilé "just in time" (JIT).
On peut soit écrire directement en WebAssembly, même si cela n'est pas le but de la technologie en elle même.
Le but est d'écrire dans un autre langage de programmation (C, C++, Rust, ...).
La technologie est encore assez jeune, donc seul un petit ensemble de langage possède un compilateur pour le WebAssembly.

[[File:javascript_vs_webassembly.png|thumb|right| Créé par [https://twitter.com/diekus| @diekus]]]
 

== Exemple ==
[[File:webassembly_example_compilation.PNG|frame|center| Exemple compilation de code C, en WebAssembly (.wat à gauche et .wasm à droite)]]
 

= Historique =
== Guerre des standards ==
Avant la création du WebAssembly, les grandes entreprises du web (Google, Mozilla, Microsoft, ...) avaient compris que les navigateurs manquaient d'une technologie leur permettant d'avoir de meilleur performance que le Javascript. Cette technologie permettrait de pouvoir faire fonctionner directement depuis un navigateurs des applications lourde, que l'on aurait considéré comme native auparavant.

L'initiative de Google pour créer cette technologie se nomme [https://en.wikipedia.org/wiki/Google_Native_Client| Google Native Client (ou NaCl)]. NaCl fut créé en 2011 et fut. La technologie fonctionner sur un principe de sandboxing, permettant de faire fonctionner du code natif peut importe l'architecture visé (x86, ARM, ...). L'objectif de Google est de faire cette technologie un des piliers [https://en.wikipedia.org/wiki/Chrome_OS| Chrome OS], qui avait pour ambition d'utiliser en majorité des web apps. En 2017, Google annonce l'obsolescence de cette technologie. NaCl a tout de même était une assez belle réussite de Google, car avant son obsolescence on pouvait utiliser l’accélération matériel graphique pour pouvoir faire marcher des jeux par exemple.

[[File:ActiveX_logo.png|thumb|100px|right]]
L'initiative de Microsoft pour créer cette technologie ne fut pas quelque chose de direct, une évolution de leur technologie [https://en.wikipedia.org/wiki/ActiveX| ActiveX] (vieille de 1996) permet en soit de pouvoir faire tourner du code natif sur leur navigateur. ActiveX fut adopter par de nombreux navigateur en dehors de Microsoft de part son ancienneté, mais ses capacités étaient très limité. Les performances d'ActiveX était très loin des performances d'un code natif. Aujourd'hui ActiveX n'est plus utilisé pour le web par Microsoft, car la technologie n'est plus accessible depuis Edge (leur nouveau navigateur).

 

[[File:code_example_asmjs.png|thumb|550px|right| Exemple de code asm.js]]
L'initiative de Mozilla est surement celle qui a eu le plus d'impact sur WebAssembly. Leur technologie se nomme [https://en.wikipedia.org/wiki/Asm.js| asm.js], créé par une équipe à Mozilla (dont Alon Zakai) en 2013. Le but de cette technologie était d'être compatible avec tous les navigateurs, car le code était toujours du Javascript mais que dans certain navigateur le code pouvait gagné en performance de part la façon dont il était écrit. Pour gagner en performance asm.js utilisait un espace mémoire modifiable (cf. MEM8 dans image ci-dessous) ainsi que du code pour inférer le type d'une variable (cf. |0 permet de au navigateur de savoir que ptr est un entier sur 32bits dans l'image ci-dessous). Pour créer du code compatible avec asm.js, soit on peut écrire directement en Javascript (un peu complexe car il faudra respecter scrupuleusement la nomenclature permettant de gagner en performance) ou plus communément en écrivant du code dans un autre langage (C, C++, Rust, ...) et compiler le code en asm.js. Les capacités de asm.js furent montré au travers d'une implémentation d'une démo technique (Citadel) tournant sous le moteur Unreal Engine 3, le moteur fut implémenté en 3 jours en asm.js. Les performances de asm.js pouvait atteindre 2 fois moins que du code native (beaucoup plus performant que du Javascript normal).

 

== Création du WebAssembly ==
[[File:W3C_Icon.png|500px|right|thumb| Logo du World Wide Web Consortium]]
Ayant vue le potentiel de asm.js, Mozilla décide d'ouvrir la discussion avec les autres acteurs majeur du web et de créer un standard commun gérer par le World Wide Web Consortium (cf. image ci-dessous).
Le WebAssembly fut introduit au monde le 17 juin 2015. La technologie entre en browser preview en novembre 2016, puis en mars 2017 elle est disponible au grand publique.

La sortie de la technologie a poussé à l'obsolescence la plus part des autres technologies ayant le même objectif.

Google Chrome (desktop) et Firefox (desktop) étaient les deux seules navigateurs compatible lors de sa sortie. Maintenant la majorité des navigateurs desktop et mobile supporte la technologie.

A sa sortie WebAssembly était un MVP (minimum viable product) en 1.0, aujourd'hui la technologie en est à sa version 1.1.

Le nombre de langage supportant le WebAssembly en 2017 était très faible on y retrouvais notamment:
* C
* C++
* Rust
* ...

 

== Roadmap ==
Même si WebAssembly est maintenant disponible au publique, celui-ci continue son développement avec des mises à jours semi-régulière (plus fréquente que les autres langages natif des navigateurs). Voici une courte roadmap des fonctionnalités qui sont envisagé dans avenir plus ou moins proche:
[[File:webassembly_post_mvp.png|frame|right| Roadmap post-mvp du WebAssembly visualisé par [https://hacks.mozilla.org/2018/10/webassemblys-post-mvp-future/| Lin Clark]]]
* Support du GPU par WebAssembly
* Multithreading
* Unification des librairies
* Garbage Collector
* Gestion des exceptions
* Amélioration du tracing
* Meilleur outils de débogage
* SIMD
* Adressage sur 64-bit
* Streaming compilation
* Tiered compilation
* Coroutines
* Linear memory bigger than 4gb
* ...

[https://github.com/WebAssembly/design/blob/master/FutureFeatures.md| Lien vers une partie de leur roadmap à court terme.]

 

= Utilisation =
Pour plus d'information pratique sur l'utilisation du WebAssembly voici le lien de la [[VT2020-WebAssembly-Demo|démonstration]].
= Contribuer =
Il est possible de contribuer au projet de WebAssembly si cela vous intéresse. Pour contribuer il faut se rendre sur leur page Github, où l'on peut voir tout leur projet en cours.
[https://github.com/WebAssembly| Page Github].

De plus, il est possible de contribuer pour majorité des compilateurs de WebAssembly notable, comme par exemple:
* Emscripten (C/C++): https://github.com/emscripten-core
* AssemblyScript (~TypeScript): https://github.com/AssemblyScript
* Rust: https://www.rust-lang.org/
* Blazor (C#): https://github.com/dotnet/blazor
* ...

= Référence =
# https://webassembly.org/
# https://webassembly.org/roadmap/
# https://github.com/WebAssembly/design/blob/master/FutureFeatures.md
# https://webassembly.org/getting-started/developers-guide/
# https://en.wikipedia.org/wiki/WebAssembly
# https://wasmbyexample.dev/home.en-us.html
# https://medium.com/dfinity/why-webassembly-f21967076e4
# https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/
# https://hacks.mozilla.org/2017/02/where-is-webassembly-now-and-whats-next/
# https://medium.com/javascript-scene/what-is-webassembly-the-dawn-of-a-new-era-61256ec5a8f6
# https://rsms.me/wasm-intro
# https://wasm-talk.johnny.sh/#0
# https://www.youtube.com/watch?v=kUljgnOE5-A&t=544s
# https://www.youtube.com/watch?v=drRaRRZ5AJk&t=2273s
# https://www.youtube.com/watch?v=njt-Qzw0mVY&t=2060s
# https://www.youtube.com/watch?v=jGKjKx2vous&t=629s
# https://madewithwebassembly.com/
# https://github.com/mbasso/awesome-wasm

= Veille Technologique 2020 =
* Année : [[VT2020|VT2020]]
* Sujet : WebAssembly
* [[Media:VT2020-WebAssembly-Presentation.pdf|Présentation]]
* [[VT2020-WebAssembly-Demo|Démonstration]]
* Auteurs : [[User:Morgan.Crociati|Morgan Crociati]]

VT2020-WebAssembly-Fiche

2020-11-27T14:25:23Z

Morgan.Crociati: /* Description */

Fiche WebAssembly

[[File:WebAssembly_Logo.png|400px|thumb|Logo du WebAssembly]]

= TLDR =
Le WebAssembly est une nouvelle technologie ajouté à la majorité des navigateurs internet en 2017.
Il s'apparente à de l'assembleur pour le web.
Son objectif est de permettre l’exécution d'application haute performances sur le navigateur.
Contrairement au Javascript, pour utiliser le WebAssembly nous devons passer (majoritairement) par une compilation.

 

= Description =
Le WebAssembly est une nouvelle technologie du web, elle vient s'ajouter à la majorité des navigateurs et rejoins la famille des langages/technologies reconnue par des navigateurs (HTML, CSS et Javascript).
WebAssembly vient de la concaténation de web et assembleur. Cela reflète l'objectif de cette technologie, obtenir des performances sur le web proche du natif.
La technologie a été créer pour ajouter à l'arsenal des navigateurs une technologie permettant d'avoir performances meilleurs que celle du Javascript, et permettre ainsi aux navigateurs d'avoir accés à des applications hautes performances ou plus sécurisé en utilisant les ressources de l'utilisateur et non pas d'un serveur.

== WebAssembly et Javascript ==
Le WebAssembly n'a pas pour objectif de venir perturber le Javascript, les deux langages sont complémentaire.
Cela est particulière vrai car le WebAssembly n'a pas de moyen natif d’interagir avec le DOM.
En général ce langage est un compilé "ahead of time" (AOT) contrairement au Javascript qui est compilé "just in time" (JIT).
On peut soit écrire directement en WebAssembly, même si cela n'est pas le but de la technologie en elle même.
Le but est d'écrire dans un autre langage de programmation (C, C++, Rust, ...).
La technologie est encore assez jeune, donc seul un petit ensemble de langage possède un compilateur pour le WebAssembly.

[[File:javascript_vs_webassembly.png|thumb|right| Créé par [https://twitter.com/diekus| @diekus]]]
javascript_vs_webassembly.png

== Exemple ==
[[File:webassembly_example_compilation.PNG|frame|center| Exemple compilation de code C, en WebAssembly (.wat à gauche et .wasm à droite)]]
 

= Historique =
== Guerre des standards ==
Avant la création du WebAssembly, les grandes entreprises du web (Google, Mozilla, Microsoft, ...) avaient compris que les navigateurs manquaient d'une technologie leur permettant d'avoir de meilleur performance que le Javascript. Cette technologie permettrait de pouvoir faire fonctionner directement depuis un navigateurs des applications lourde, que l'on aurait considéré comme native auparavant.

L'initiative de Google pour créer cette technologie se nomme [https://en.wikipedia.org/wiki/Google_Native_Client| Google Native Client (ou NaCl)]. NaCl fut créé en 2011 et fut. La technologie fonctionner sur un principe de sandboxing, permettant de faire fonctionner du code natif peut importe l'architecture visé (x86, ARM, ...). L'objectif de Google est de faire cette technologie un des piliers [https://en.wikipedia.org/wiki/Chrome_OS| Chrome OS], qui avait pour ambition d'utiliser en majorité des web apps. En 2017, Google annonce l'obsolescence de cette technologie. NaCl a tout de même était une assez belle réussite de Google, car avant son obsolescence on pouvait utiliser l’accélération matériel graphique pour pouvoir faire marcher des jeux par exemple.

[[File:ActiveX_logo.png|thumb|100px|right]]
L'initiative de Microsoft pour créer cette technologie ne fut pas quelque chose de direct, une évolution de leur technologie [https://en.wikipedia.org/wiki/ActiveX| ActiveX] (vieille de 1996) permet en soit de pouvoir faire tourner du code natif sur leur navigateur. ActiveX fut adopter par de nombreux navigateur en dehors de Microsoft de part son ancienneté, mais ses capacités étaient très limité. Les performances d'ActiveX était très loin des performances d'un code natif. Aujourd'hui ActiveX n'est plus utilisé pour le web par Microsoft, car la technologie n'est plus accessible depuis Edge (leur nouveau navigateur).

 

[[File:code_example_asmjs.png|thumb|550px|right| Exemple de code asm.js]]
L'initiative de Mozilla est surement celle qui a eu le plus d'impact sur WebAssembly. Leur technologie se nomme [https://en.wikipedia.org/wiki/Asm.js| asm.js], créé par une équipe à Mozilla (dont Alon Zakai) en 2013. Le but de cette technologie était d'être compatible avec tous les navigateurs, car le code était toujours du Javascript mais que dans certain navigateur le code pouvait gagné en performance de part la façon dont il était écrit. Pour gagner en performance asm.js utilisait un espace mémoire modifiable (cf. MEM8 dans image ci-dessous) ainsi que du code pour inférer le type d'une variable (cf. |0 permet de au navigateur de savoir que ptr est un entier sur 32bits dans l'image ci-dessous). Pour créer du code compatible avec asm.js, soit on peut écrire directement en Javascript (un peu complexe car il faudra respecter scrupuleusement la nomenclature permettant de gagner en performance) ou plus communément en écrivant du code dans un autre langage (C, C++, Rust, ...) et compiler le code en asm.js. Les capacités de asm.js furent montré au travers d'une implémentation d'une démo technique (Citadel) tournant sous le moteur Unreal Engine 3, le moteur fut implémenté en 3 jours en asm.js. Les performances de asm.js pouvait atteindre 2 fois moins que du code native (beaucoup plus performant que du Javascript normal).

 

== Création du WebAssembly ==
[[File:W3C_Icon.png|500px|right|thumb| Logo du World Wide Web Consortium]]
Ayant vue le potentiel de asm.js, Mozilla décide d'ouvrir la discussion avec les autres acteurs majeur du web et de créer un standard commun gérer par le World Wide Web Consortium (cf. image ci-dessous).
Le WebAssembly fut introduit au monde le 17 juin 2015. La technologie entre en browser preview en novembre 2016, puis en mars 2017 elle est disponible au grand publique.

La sortie de la technologie a poussé à l'obsolescence la plus part des autres technologies ayant le même objectif.

Google Chrome (desktop) et Firefox (desktop) étaient les deux seules navigateurs compatible lors de sa sortie. Maintenant la majorité des navigateurs desktop et mobile supporte la technologie.

A sa sortie WebAssembly était un MVP (minimum viable product) en 1.0, aujourd'hui la technologie en est à sa version 1.1.

Le nombre de langage supportant le WebAssembly en 2017 était très faible on y retrouvais notamment:
* C
* C++
* Rust
* ...

 

== Roadmap ==
Même si WebAssembly est maintenant disponible au publique, celui-ci continue son développement avec des mises à jours semi-régulière (plus fréquente que les autres langages natif des navigateurs). Voici une courte roadmap des fonctionnalités qui sont envisagé dans avenir plus ou moins proche:
[[File:webassembly_post_mvp.png|frame|right| Roadmap post-mvp du WebAssembly visualisé par [https://hacks.mozilla.org/2018/10/webassemblys-post-mvp-future/| Lin Clark]]]
* Support du GPU par WebAssembly
* Multithreading
* Unification des librairies
* Garbage Collector
* Gestion des exceptions
* Amélioration du tracing
* Meilleur outils de débogage
* SIMD
* Adressage sur 64-bit
* Streaming compilation
* Tiered compilation
* Coroutines
* Linear memory bigger than 4gb
* ...

[https://github.com/WebAssembly/design/blob/master/FutureFeatures.md| Lien vers une partie de leur roadmap à court terme.]

 

= Utilisation =
Pour plus d'information pratique sur l'utilisation du WebAssembly voici le lien de la [[VT2020-WebAssembly-Demo|démonstration]].
= Contribuer =
Il est possible de contribuer au projet de WebAssembly si cela vous intéresse. Pour contribuer il faut se rendre sur leur page Github, où l'on peut voir tout leur projet en cours.
[https://github.com/WebAssembly| Page Github].

De plus, il est possible de contribuer pour majorité des compilateurs de WebAssembly notable, comme par exemple:
* Emscripten (C/C++): https://github.com/emscripten-core
* AssemblyScript (~TypeScript): https://github.com/AssemblyScript
* Rust: https://www.rust-lang.org/
* Blazor (C#): https://github.com/dotnet/blazor
* ...

= Référence =
# https://webassembly.org/
# https://webassembly.org/roadmap/
# https://github.com/WebAssembly/design/blob/master/FutureFeatures.md
# https://webassembly.org/getting-started/developers-guide/
# https://en.wikipedia.org/wiki/WebAssembly
# https://wasmbyexample.dev/home.en-us.html
# https://medium.com/dfinity/why-webassembly-f21967076e4
# https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/
# https://hacks.mozilla.org/2017/02/where-is-webassembly-now-and-whats-next/
# https://medium.com/javascript-scene/what-is-webassembly-the-dawn-of-a-new-era-61256ec5a8f6
# https://rsms.me/wasm-intro
# https://wasm-talk.johnny.sh/#0
# https://www.youtube.com/watch?v=kUljgnOE5-A&t=544s
# https://www.youtube.com/watch?v=drRaRRZ5AJk&t=2273s
# https://www.youtube.com/watch?v=njt-Qzw0mVY&t=2060s
# https://www.youtube.com/watch?v=jGKjKx2vous&t=629s
# https://madewithwebassembly.com/
# https://github.com/mbasso/awesome-wasm

= Veille Technologique 2020 =
* Année : [[VT2020|VT2020]]
* Sujet : WebAssembly
* [[Media:VT2020-WebAssembly-Presentation.pdf|Présentation]]
* [[VT2020-WebAssembly-Demo|Démonstration]]
* Auteurs : [[User:Morgan.Crociati|Morgan Crociati]]

File:Javascript vs webassembly.png

2020-11-27T14:23:31Z

Morgan.Crociati:

VT2020-WebAssembly-Fiche

2020-11-27T14:21:45Z

Morgan.Crociati:

Fiche WebAssembly

[[File:WebAssembly_Logo.png|400px|thumb|Logo du WebAssembly]]

= TLDR =
Le WebAssembly est une nouvelle technologie ajouté à la majorité des navigateurs internet en 2017.
Il s'apparente à de l'assembleur pour le web.
Son objectif est de permettre l’exécution d'application haute performances sur le navigateur.
Contrairement au Javascript, pour utiliser le WebAssembly nous devons passer (majoritairement) par une compilation.

 

= Description =
Le WebAssembly est une nouvelle technologie du web, elle vient s'ajouter à la majorité des navigateurs et rejoins la famille des langages/technologies reconnue par des navigateurs (HTML, CSS et Javascript).
WebAssembly vient de la concaténation de web et assembleur. Cela reflète l'objectif de cette technologie, obtenir des performances sur le web proche du natif.
La technologie a été créer pour ajouter à l'arsenal des navigateurs une technologie permettant d'avoir performances meilleurs que celle du Javascript, et permettre ainsi aux navigateurs d'avoir accés à des applications hautes performances ou plus sécurisé en utilisant les ressources de l'utilisateur et non pas d'un serveur.

== WebAssembly et Javascript ==
Le WebAssembly n'a pas pour objectif de venir perturber le Javascript, les deux langages sont complémentaire.
Cela est particulière vrai car le WebAssembly n'a pas de moyen natif d’interagir avec le DOM.
En général ce langage est un compilé "ahead of time" (AOT) contrairement au Javascript qui est compilé "just in time" (JIT).
On peut soit écrire directement en WebAssembly, même si cela n'est pas le but de la technologie en elle même.
Le but est d'écrire dans un autre langage de programmation (C, C++, Rust, ...).
La technologie est encore assez jeune, donc seul un petit ensemble de langage possède un compilateur pour le WebAssembly.
== Exemple ==
[[File:webassembly_example_compilation.PNG|frame|center| center| Exemple compilation de code C, en WebAssembly (.wat à gauche et .wasm à droite)]]
 

= Historique =
== Guerre des standards ==
Avant la création du WebAssembly, les grandes entreprises du web (Google, Mozilla, Microsoft, ...) avaient compris que les navigateurs manquaient d'une technologie leur permettant d'avoir de meilleur performance que le Javascript. Cette technologie permettrait de pouvoir faire fonctionner directement depuis un navigateurs des applications lourde, que l'on aurait considéré comme native auparavant.

L'initiative de Google pour créer cette technologie se nomme [https://en.wikipedia.org/wiki/Google_Native_Client| Google Native Client (ou NaCl)]. NaCl fut créé en 2011 et fut. La technologie fonctionner sur un principe de sandboxing, permettant de faire fonctionner du code natif peut importe l'architecture visé (x86, ARM, ...). L'objectif de Google est de faire cette technologie un des piliers [https://en.wikipedia.org/wiki/Chrome_OS| Chrome OS], qui avait pour ambition d'utiliser en majorité des web apps. En 2017, Google annonce l'obsolescence de cette technologie. NaCl a tout de même était une assez belle réussite de Google, car avant son obsolescence on pouvait utiliser l’accélération matériel graphique pour pouvoir faire marcher des jeux par exemple.

[[File:ActiveX_logo.png|thumb|100px|right]]
L'initiative de Microsoft pour créer cette technologie ne fut pas quelque chose de direct, une évolution de leur technologie [https://en.wikipedia.org/wiki/ActiveX| ActiveX] (vieille de 1996) permet en soit de pouvoir faire tourner du code natif sur leur navigateur. ActiveX fut adopter par de nombreux navigateur en dehors de Microsoft de part son ancienneté, mais ses capacités étaient très limité. Les performances d'ActiveX était très loin des performances d'un code natif. Aujourd'hui ActiveX n'est plus utilisé pour le web par Microsoft, car la technologie n'est plus accessible depuis Edge (leur nouveau navigateur).

 

[[File:code_example_asmjs.png|thumb|550px|right| Exemple de code asm.js]]
L'initiative de Mozilla est surement celle qui a eu le plus d'impact sur WebAssembly. Leur technologie se nomme [https://en.wikipedia.org/wiki/Asm.js| asm.js], créé par une équipe à Mozilla (dont Alon Zakai) en 2013. Le but de cette technologie était d'être compatible avec tous les navigateurs, car le code était toujours du Javascript mais que dans certain navigateur le code pouvait gagné en performance de part la façon dont il était écrit. Pour gagner en performance asm.js utilisait un espace mémoire modifiable (cf. MEM8 dans image ci-dessous) ainsi que du code pour inférer le type d'une variable (cf. |0 permet de au navigateur de savoir que ptr est un entier sur 32bits dans l'image ci-dessous). Pour créer du code compatible avec asm.js, soit on peut écrire directement en Javascript (un peu complexe car il faudra respecter scrupuleusement la nomenclature permettant de gagner en performance) ou plus communément en écrivant du code dans un autre langage (C, C++, Rust, ...) et compiler le code en asm.js. Les capacités de asm.js furent montré au travers d'une implémentation d'une démo technique (Citadel) tournant sous le moteur Unreal Engine 3, le moteur fut implémenté en 3 jours en asm.js. Les performances de asm.js pouvait atteindre 2 fois moins que du code native (beaucoup plus performant que du Javascript normal).

 

== Création du WebAssembly ==
[[File:W3C_Icon.png|500px|right|thumb| Logo du World Wide Web Consortium]]
Ayant vue le potentiel de asm.js, Mozilla décide d'ouvrir la discussion avec les autres acteurs majeur du web et de créer un standard commun gérer par le World Wide Web Consortium (cf. image ci-dessous).
Le WebAssembly fut introduit au monde le 17 juin 2015. La technologie entre en browser preview en novembre 2016, puis en mars 2017 elle est disponible au grand publique.

La sortie de la technologie a poussé à l'obsolescence la plus part des autres technologies ayant le même objectif.

Google Chrome (desktop) et Firefox (desktop) étaient les deux seules navigateurs compatible lors de sa sortie. Maintenant la majorité des navigateurs desktop et mobile supporte la technologie.

A sa sortie WebAssembly était un MVP (minimum viable product) en 1.0, aujourd'hui la technologie en est à sa version 1.1.

Le nombre de langage supportant le WebAssembly en 2017 était très faible on y retrouvais notamment:
* C
* C++
* Rust
* ...

 

== Roadmap ==
Même si WebAssembly est maintenant disponible au publique, celui-ci continue son développement avec des mises à jours semi-régulière (plus fréquente que les autres langages natif des navigateurs). Voici une courte roadmap des fonctionnalités qui sont envisagé dans avenir plus ou moins proche:
[[File:webassembly_post_mvp.png|frame|right| Roadmap post-mvp du WebAssembly visualisé par [https://hacks.mozilla.org/2018/10/webassemblys-post-mvp-future/| Lin Clark]]]
* Support du GPU par WebAssembly
* Multithreading
* Unification des librairies
* Garbage Collector
* Gestion des exceptions
* Amélioration du tracing
* Meilleur outils de débogage
* SIMD
* Adressage sur 64-bit
* Streaming compilation
* Tiered compilation
* Coroutines
* Linear memory bigger than 4gb
* ...

[https://github.com/WebAssembly/design/blob/master/FutureFeatures.md| Lien vers une partie de leur roadmap à court terme.]

 

= Utilisation =
Pour plus d'information pratique sur l'utilisation du WebAssembly voici le lien de la [[VT2020-WebAssembly-Demo|démonstration]].
= Contribuer =
Il est possible de contribuer au projet de WebAssembly si cela vous intéresse. Pour contribuer il faut se rendre sur leur page Github, où l'on peut voir tout leur projet en cours.
[https://github.com/WebAssembly| Page Github].

De plus, il est possible de contribuer pour majorité des compilateurs de WebAssembly notable, comme par exemple:
* Emscripten (C/C++): https://github.com/emscripten-core
* AssemblyScript (~TypeScript): https://github.com/AssemblyScript
* Rust: https://www.rust-lang.org/
* Blazor (C#): https://github.com/dotnet/blazor
* ...

= Référence =
# https://webassembly.org/
# https://webassembly.org/roadmap/
# https://github.com/WebAssembly/design/blob/master/FutureFeatures.md
# https://webassembly.org/getting-started/developers-guide/
# https://en.wikipedia.org/wiki/WebAssembly
# https://wasmbyexample.dev/home.en-us.html
# https://medium.com/dfinity/why-webassembly-f21967076e4
# https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/
# https://hacks.mozilla.org/2017/02/where-is-webassembly-now-and-whats-next/
# https://medium.com/javascript-scene/what-is-webassembly-the-dawn-of-a-new-era-61256ec5a8f6
# https://rsms.me/wasm-intro
# https://wasm-talk.johnny.sh/#0
# https://www.youtube.com/watch?v=kUljgnOE5-A&t=544s
# https://www.youtube.com/watch?v=drRaRRZ5AJk&t=2273s
# https://www.youtube.com/watch?v=njt-Qzw0mVY&t=2060s
# https://www.youtube.com/watch?v=jGKjKx2vous&t=629s
# https://madewithwebassembly.com/
# https://github.com/mbasso/awesome-wasm

= Veille Technologique 2020 =
* Année : [[VT2020|VT2020]]
* Sujet : WebAssembly
* [[Media:VT2020-WebAssembly-Presentation.pdf|Présentation]]
* [[VT2020-WebAssembly-Demo|Démonstration]]
* Auteurs : [[User:Morgan.Crociati|Morgan Crociati]]

VT2020-WebAssembly-Fiche

2020-11-27T13:40:41Z

Morgan.Crociati: /* Description */

Fiche WebAssembly

[[File:WebAssembly_Logo.png|400px|thumb|Logo du WebAssembly]]

= TLDR =
Le WebAssembly est une nouvelle technologie ajouté à la majorité des navigateurs internet en 2017.
Il s'apparente à de l'assembleur pour le web.
Son objectif est de permettre l’exécution d'application haute performances sur le navigateur.
Contrairement au Javascript, pour utiliser le WebAssembly nous devons passer (majoritairement) par une compilation.

 

= Description =
Il vient s'ajouter à l'HTML, au CSS et au Javascript.

WebAssembly vient de la concaténation de web et assembleur.
Cela reflète l'objectif de cette technologie, obtenir des performances sur le web proche du natif.
C'est pourquoi cette technologie vient s'ajouter à l'arsenal des navigateurs pour leur permettre d'avoir des applications hautes performances.
Le WebAssembly n'a pas pour objectif de venir perturber le Javascript, les deux langages sont complémentaire.
Cela est particulière vrai car le WebAssembly n'a pas de moyen natif d’interagir avec le DOM.
En général ce langage est un compilé "ahead of time" (AOT) contrairement au Javascript qui est compilé "just in time" (JIT).
On peut soit écrire directement en WebAssembly, même si cela n'est pas le but de la technologie en elle même.
Le but est d'écrire dans un autre langage de programmation (C, C++, Rust, ...).
La technologie est encore assez jeune, donc seul un petit ensemble de langage possède un compilateur pour le WebAssembly.
== Exemple ==
[[File:webassembly_example_compilation.PNG|frame|center| center| Exemple compilation de code C, en WebAssembly (.wat à gauche et .wasm à droite)]]
 

= Historique =
== Guerre des standards ==
Avant la création du WebAssembly, les grandes entreprises du web (Google, Mozilla, Microsoft, ...) avaient compris que les navigateurs manquaient d'une technologie leur permettant d'avoir de meilleur performance que le Javascript. Cette technologie permettrait de pouvoir faire fonctionner directement depuis un navigateurs des applications lourde, que l'on aurait considéré comme native auparavant.

L'initiative de Google pour créer cette technologie se nomme [https://en.wikipedia.org/wiki/Google_Native_Client| Google Native Client (ou NaCl)]. NaCl fut créé en 2011 et fut. La technologie fonctionner sur un principe de sandboxing, permettant de faire fonctionner du code natif peut importe l'architecture visé (x86, ARM, ...). L'objectif de Google est de faire cette technologie un des piliers [https://en.wikipedia.org/wiki/Chrome_OS| Chrome OS], qui avait pour ambition d'utiliser en majorité des web apps. En 2017, Google annonce l'obsolescence de cette technologie. NaCl a tout de même était une assez belle réussite de Google, car avant son obsolescence on pouvait utiliser l’accélération matériel graphique pour pouvoir faire marcher des jeux par exemple.

[[File:ActiveX_logo.png|thumb|100px|right]]
L'initiative de Microsoft pour créer cette technologie ne fut pas quelque chose de direct, une évolution de leur technologie [https://en.wikipedia.org/wiki/ActiveX| ActiveX] (vieille de 1996) permet en soit de pouvoir faire tourner du code natif sur leur navigateur. ActiveX fut adopter par de nombreux navigateur en dehors de Microsoft de part son ancienneté, mais ses capacités étaient très limité. Les performances d'ActiveX était très loin des performances d'un code natif. Aujourd'hui ActiveX n'est plus utilisé pour le web par Microsoft, car la technologie n'est plus accessible depuis Edge (leur nouveau navigateur).

 

[[File:code_example_asmjs.png|thumb|550px|right| Exemple de code asm.js]]
L'initiative de Mozilla est surement celle qui a eu le plus d'impact sur WebAssembly. Leur technologie se nomme [https://en.wikipedia.org/wiki/Asm.js| asm.js], créé par une équipe à Mozilla (dont Alon Zakai) en 2013. Le but de cette technologie était d'être compatible avec tous les navigateurs, car le code était toujours du Javascript mais que dans certain navigateur le code pouvait gagné en performance de part la façon dont il était écrit. Pour gagner en performance asm.js utilisait un espace mémoire modifiable (cf. MEM8 dans image ci-dessous) ainsi que du code pour inférer le type d'une variable (cf. |0 permet de au navigateur de savoir que ptr est un entier sur 32bits dans l'image ci-dessous). Pour créer du code compatible avec asm.js, soit on peut écrire directement en Javascript (un peu complexe car il faudra respecter scrupuleusement la nomenclature permettant de gagner en performance) ou plus communément en écrivant du code dans un autre langage (C, C++, Rust, ...) et compiler le code en asm.js. Les capacités de asm.js furent montré au travers d'une implémentation d'une démo technique (Citadel) tournant sous le moteur Unreal Engine 3, le moteur fut implémenté en 3 jours en asm.js. Les performances de asm.js pouvait atteindre 2 fois moins que du code native (beaucoup plus performant que du Javascript normal).

 

== Création du WebAssembly ==
[[File:W3C_Icon.png|500px|right|thumb| Logo du World Wide Web Consortium]]
Ayant vue le potentiel de asm.js, Mozilla décide d'ouvrir la discussion avec les autres acteurs majeur du web et de créer un standard commun gérer par le World Wide Web Consortium (cf. image ci-dessous).
Le WebAssembly fut introduit au monde le 17 juin 2015. La technologie entre en browser preview en novembre 2016, puis en mars 2017 elle est disponible au grand publique.

La sortie de la technologie a poussé à l'obsolescence la plus part des autres technologies ayant le même objectif.

Google Chrome (desktop) et Firefox (desktop) étaient les deux seules navigateurs compatible lors de sa sortie. Maintenant la majorité des navigateurs desktop et mobile supporte la technologie.

A sa sortie WebAssembly était un MVP (minimum viable product) en 1.0, aujourd'hui la technologie en est à sa version 1.1.

Le nombre de langage supportant le WebAssembly en 2017 était très faible on y retrouvais notamment:
* C
* C++
* Rust
* ...

 

== Roadmap ==
Même si WebAssembly est maintenant disponible au publique, celui-ci continue son développement avec des mises à jours semi-régulière (plus fréquente que les autres langages natif des navigateurs). Voici une courte roadmap des fonctionnalités qui sont envisagé dans avenir plus ou moins proche:
[[File:webassembly_post_mvp.png|frame|right| Roadmap post-mvp du WebAssembly visualisé par [https://hacks.mozilla.org/2018/10/webassemblys-post-mvp-future/| Lin Clark]]]
* Support du GPU par WebAssembly
* Multithreading
* Unification des librairies
* Garbage Collector
* Gestion des exceptions
* Amélioration du tracing
* Meilleur outils de débogage
* SIMD
* Adressage sur 64-bit
* Streaming compilation
* Tiered compilation
* Coroutines
* Linear memory bigger than 4gb
* ...

[https://github.com/WebAssembly/design/blob/master/FutureFeatures.md| Lien vers une partie de leur roadmap à court terme.]

 

= Utilisation =
Pour plus d'information pratique sur l'utilisation du WebAssembly voici le lien de la [[VT2020-WebAssembly-Demo|démonstration]].
= Contribuer =
Il est possible de contribuer au projet de WebAssembly si cela vous intéresse. Pour contribuer il faut se rendre sur leur page Github, où l'on peut voir tout leur projet en cours.
[https://github.com/WebAssembly| Page Github].

De plus, il est possible de contribuer pour majorité des compilateurs de WebAssembly notable, comme par exemple:
* Emscripten (C/C++): https://github.com/emscripten-core
* AssemblyScript (~TypeScript): https://github.com/AssemblyScript
* Rust: https://www.rust-lang.org/
* Blazor (C#): https://github.com/dotnet/blazor
* ...

= Référence =
# https://webassembly.org/
# https://webassembly.org/roadmap/
# https://github.com/WebAssembly/design/blob/master/FutureFeatures.md
# https://webassembly.org/getting-started/developers-guide/
# https://en.wikipedia.org/wiki/WebAssembly
# https://wasmbyexample.dev/home.en-us.html
# https://medium.com/dfinity/why-webassembly-f21967076e4
# https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/
# https://hacks.mozilla.org/2017/02/where-is-webassembly-now-and-whats-next/
# https://medium.com/javascript-scene/what-is-webassembly-the-dawn-of-a-new-era-61256ec5a8f6
# https://rsms.me/wasm-intro
# https://wasm-talk.johnny.sh/#0
# https://www.youtube.com/watch?v=kUljgnOE5-A&t=544s
# https://www.youtube.com/watch?v=drRaRRZ5AJk&t=2273s
# https://www.youtube.com/watch?v=njt-Qzw0mVY&t=2060s
# https://www.youtube.com/watch?v=jGKjKx2vous&t=629s
# https://madewithwebassembly.com/
# https://github.com/mbasso/awesome-wasm

= Veille Technologique 2020 =
* Année : [[VT2020|VT2020]]
* Sujet : WebAssembly
* [[Media:VT2020-WebAssembly-Presentation.pdf|Présentation]]
* [[VT2020-WebAssembly-Demo|Démonstration]]
* Auteurs : [[User:Morgan.Crociati|Morgan Crociati]]

VT2020-WebAssembly-Fiche

2020-11-27T13:12:26Z

Morgan.Crociati: /* Description */

Fiche WebAssembly

[[File:WebAssembly_Logo.png|400px|thumb|Logo du WebAssembly]]

= TLDR =
Le WebAssembly est une nouvelle technologie ajouté à la majorité des navigateurs internet en 2017.
Il s'apparente à de l'assembleur pour le web.
Son objectif est de permettre l’exécution d'application haute performances sur le navigateur.
Contrairement au Javascript, pour utiliser le WebAssembly nous devons passer (majoritairement) par une compilation.

 

= Description =
Il vient s'ajouter à l'HTML, au CSS et au Javascript.

WebAssembly vient de la concaténation de web et assembleur.
Cela reflète l'objectif de cette technologie, obtenir des performances sur le web proche du natif.
C'est pourquoi cette technologie vient s'ajouter à l'arsenal des navigateurs pour leur permettre d'avoir des applications hautes performances.
Le WebAssembly n'a pas pour objectif de venir perturber le Javascript, les deux langages sont complémentaire.
Cela est particulière vrai car le WebAssembly n'a pas de moyen natif d’interagir avec le DOM.
En général ce langage est un compilé "ahead of time" (AOT) contrairement au Javascript qui est compilé "just in time" (JIT).
On peut soit écrire directement en WebAssembly, même si cela n'est pas le but de la technologie en elle même.
Le but est d'écrire dans un autre langage de programmation (C, C++, Rust, ...).
La technologie est encore assez jeune, donc seul un petit ensemble de langage possède un compilateur pour le WebAssembly.

[[File:webassembly_example_compilation.PNG|frame|center| center| Exemple compilation de code C, en WebAssembly (.wat à gauche et .wasm à droite)]]
 

= Historique =
== Guerre des standards ==
Avant la création du WebAssembly, les grandes entreprises du web (Google, Mozilla, Microsoft, ...) avaient compris que les navigateurs manquaient d'une technologie leur permettant d'avoir de meilleur performance que le Javascript. Cette technologie permettrait de pouvoir faire fonctionner directement depuis un navigateurs des applications lourde, que l'on aurait considéré comme native auparavant.

L'initiative de Google pour créer cette technologie se nomme [https://en.wikipedia.org/wiki/Google_Native_Client| Google Native Client (ou NaCl)]. NaCl fut créé en 2011 et fut. La technologie fonctionner sur un principe de sandboxing, permettant de faire fonctionner du code natif peut importe l'architecture visé (x86, ARM, ...). L'objectif de Google est de faire cette technologie un des piliers [https://en.wikipedia.org/wiki/Chrome_OS| Chrome OS], qui avait pour ambition d'utiliser en majorité des web apps. En 2017, Google annonce l'obsolescence de cette technologie. NaCl a tout de même était une assez belle réussite de Google, car avant son obsolescence on pouvait utiliser l’accélération matériel graphique pour pouvoir faire marcher des jeux par exemple.

[[File:ActiveX_logo.png|thumb|100px|right]]
L'initiative de Microsoft pour créer cette technologie ne fut pas quelque chose de direct, une évolution de leur technologie [https://en.wikipedia.org/wiki/ActiveX| ActiveX] (vieille de 1996) permet en soit de pouvoir faire tourner du code natif sur leur navigateur. ActiveX fut adopter par de nombreux navigateur en dehors de Microsoft de part son ancienneté, mais ses capacités étaient très limité. Les performances d'ActiveX était très loin des performances d'un code natif. Aujourd'hui ActiveX n'est plus utilisé pour le web par Microsoft, car la technologie n'est plus accessible depuis Edge (leur nouveau navigateur).

 

[[File:code_example_asmjs.png|thumb|550px|right| Exemple de code asm.js]]
L'initiative de Mozilla est surement celle qui a eu le plus d'impact sur WebAssembly. Leur technologie se nomme [https://en.wikipedia.org/wiki/Asm.js| asm.js], créé par une équipe à Mozilla (dont Alon Zakai) en 2013. Le but de cette technologie était d'être compatible avec tous les navigateurs, car le code était toujours du Javascript mais que dans certain navigateur le code pouvait gagné en performance de part la façon dont il était écrit. Pour gagner en performance asm.js utilisait un espace mémoire modifiable (cf. MEM8 dans image ci-dessous) ainsi que du code pour inférer le type d'une variable (cf. |0 permet de au navigateur de savoir que ptr est un entier sur 32bits dans l'image ci-dessous). Pour créer du code compatible avec asm.js, soit on peut écrire directement en Javascript (un peu complexe car il faudra respecter scrupuleusement la nomenclature permettant de gagner en performance) ou plus communément en écrivant du code dans un autre langage (C, C++, Rust, ...) et compiler le code en asm.js. Les capacités de asm.js furent montré au travers d'une implémentation d'une démo technique (Citadel) tournant sous le moteur Unreal Engine 3, le moteur fut implémenté en 3 jours en asm.js. Les performances de asm.js pouvait atteindre 2 fois moins que du code native (beaucoup plus performant que du Javascript normal).

 

== Création du WebAssembly ==
[[File:W3C_Icon.png|500px|right|thumb| Logo du World Wide Web Consortium]]
Ayant vue le potentiel de asm.js, Mozilla décide d'ouvrir la discussion avec les autres acteurs majeur du web et de créer un standard commun gérer par le World Wide Web Consortium (cf. image ci-dessous).
Le WebAssembly fut introduit au monde le 17 juin 2015. La technologie entre en browser preview en novembre 2016, puis en mars 2017 elle est disponible au grand publique.

La sortie de la technologie a poussé à l'obsolescence la plus part des autres technologies ayant le même objectif.

Google Chrome (desktop) et Firefox (desktop) étaient les deux seules navigateurs compatible lors de sa sortie. Maintenant la majorité des navigateurs desktop et mobile supporte la technologie.

A sa sortie WebAssembly était un MVP (minimum viable product) en 1.0, aujourd'hui la technologie en est à sa version 1.1.

Le nombre de langage supportant le WebAssembly en 2017 était très faible on y retrouvais notamment:
* C
* C++
* Rust
* ...

 

== Roadmap ==
Même si WebAssembly est maintenant disponible au publique, celui-ci continue son développement avec des mises à jours semi-régulière (plus fréquente que les autres langages natif des navigateurs). Voici une courte roadmap des fonctionnalités qui sont envisagé dans avenir plus ou moins proche:
[[File:webassembly_post_mvp.png|frame|right| Roadmap post-mvp du WebAssembly visualisé par [https://hacks.mozilla.org/2018/10/webassemblys-post-mvp-future/| Lin Clark]]]
* Support du GPU par WebAssembly
* Multithreading
* Unification des librairies
* Garbage Collector
* Gestion des exceptions
* Amélioration du tracing
* Meilleur outils de débogage
* SIMD
* Adressage sur 64-bit
* Streaming compilation
* Tiered compilation
* Coroutines
* Linear memory bigger than 4gb
* ...

[https://github.com/WebAssembly/design/blob/master/FutureFeatures.md| Lien vers une partie de leur roadmap à court terme.]

 

= Utilisation =
Pour plus d'information pratique sur l'utilisation du WebAssembly voici le lien de la [[VT2020-WebAssembly-Demo|démonstration]].
= Contribuer =
Il est possible de contribuer au projet de WebAssembly si cela vous intéresse. Pour contribuer il faut se rendre sur leur page Github, où l'on peut voir tout leur projet en cours.
[https://github.com/WebAssembly| Page Github].

De plus, il est possible de contribuer pour majorité des compilateurs de WebAssembly notable, comme par exemple:
* Emscripten (C/C++): https://github.com/emscripten-core
* AssemblyScript (~TypeScript): https://github.com/AssemblyScript
* Rust: https://www.rust-lang.org/
* Blazor (C#): https://github.com/dotnet/blazor
* ...

= Référence =
# https://webassembly.org/
# https://webassembly.org/roadmap/
# https://github.com/WebAssembly/design/blob/master/FutureFeatures.md
# https://webassembly.org/getting-started/developers-guide/
# https://en.wikipedia.org/wiki/WebAssembly
# https://wasmbyexample.dev/home.en-us.html
# https://medium.com/dfinity/why-webassembly-f21967076e4
# https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/
# https://hacks.mozilla.org/2017/02/where-is-webassembly-now-and-whats-next/
# https://medium.com/javascript-scene/what-is-webassembly-the-dawn-of-a-new-era-61256ec5a8f6
# https://rsms.me/wasm-intro
# https://wasm-talk.johnny.sh/#0
# https://www.youtube.com/watch?v=kUljgnOE5-A&t=544s
# https://www.youtube.com/watch?v=drRaRRZ5AJk&t=2273s
# https://www.youtube.com/watch?v=njt-Qzw0mVY&t=2060s
# https://www.youtube.com/watch?v=jGKjKx2vous&t=629s
# https://madewithwebassembly.com/
# https://github.com/mbasso/awesome-wasm

= Veille Technologique 2020 =
* Année : [[VT2020|VT2020]]
* Sujet : WebAssembly
* [[Media:VT2020-WebAssembly-Presentation.pdf|Présentation]]
* [[VT2020-WebAssembly-Demo|Démonstration]]
* Auteurs : [[User:Morgan.Crociati|Morgan Crociati]]