Vous êtes-vous interrogé sur les concepts clés et les cas d'utilisation de WASM ? Sinon, nous vous couvrons.
WebAssembly (WASM) est un nouveau langage de bas niveau qui vous permet de débloquer des performances de type natif sur le Web.
In WebAssembly pour les débutants - Partie 1, nous avons présenté WASM du point de vue d'un débutant en couvrant sa définition et ses limites. De plus, nous avons parcouru les fonctionnalités de WebAssembly, la feuille de route WASM et comment JavaScript fonctionne avec WebAssembly, et non contre lui.
Cet article explorera WebAssembly en discutant des objectifs WASM, des concepts clés et des cas d'utilisation. Nous allons également jeter un œil à certains de ses projets passionnants.
Commençons.
WebAssembly Goals
Pour comprendre les concepts clés de WebAssembly, nous devons d'abord examiner ses objectifs. Ces objectifs comprennent :
- Possibilité de tirer parti du matériel disponible en utilisant un format binaire efficace en termes de temps de chargement et de taille comme cible de compilation. En termes simples, WASM utilise un arbre de syntaxe abstraite (AST) au format binaire, prenant en charge la compilation et l'exécution à la vitesse native. En utilisant l'approche, WASM peut fonctionner sur divers appareils, y compris IdO, Web et mobiles.
- L'objectif de WASM n'est pas de modifier ou de changer la plate-forme Web existante. Avec cette approche, WebAssembly peut bien s'intégrer au Web actuel et passé. Il permet également à WebAssembly de fonctionner de manière transparente avec JavaScript, notamment en s'exécutant parallèlement ou en effectuant des appels synchrones à partir de JavaScript.
- Pour travailler de manière transparente avec les politiques de sécurité des autorisations et la même origine.
- Assurez-vous que les développeurs peuvent concevoir leurs solutions pour prendre en charge les intégrations sans navigateur.
- Enfin, donner aux développeurs les outils pour travailler efficacement avec le code source WebAssembly en fournissant un format de texte modifiable par l'homme.
WebAssembly Key Concepts
À l'intérieur du capot, WebAssembly suit les étapes suivantes :
- Au début, vous devez écrire du code dans un langage typé statiquement avec des types définis.
- Une fois cela fait, vous générez un module WASM pré-compilé et introduisez le code dans le compilateur du moteur.
- L'étape ci-dessus garantit que WASM ignore l'analyse et prépare le code à être rendu sur le navigateur Web.
Les concepts clés derrière WebAssembly s'exécutant dans le navigateur Web incluent :
- Mémoire: La mémoire dans WebAssembly est gérée et écrite par ses instructions d'accès à la mémoire de bas niveau. Techniquement, il s'agit d'un ArrayBuffer redimensionnable et contient un tableau d'octets de mémoire.
- Modules: Le module de WebAssembly est un code informatique exécutable compilé. En raison de sa forme sans état, le navigateur Web compile le module et le partage entre Windows et Workers. En outre, le module stocke et déclare les importations et les exportations, en plus d'héberger les fonctions, les tables, les types, les variables globales et la mémoire.
- Tableau: Une table se compose de toutes les références et fonctions utilisant un tableau typé redimensionnable. Cela supprime le besoin de stocker des octets bruts dans la mémoire.
- Instance Dans WASM, une instance est un module pendant l'exécution, avec tous les états appariés. Ces états incluent Table, Mémoire et d'autres ensembles de valeurs importés.
En tant que développeur Web, vous pouvez utiliser l'API JavaScript pour appeler et définir des modules, des tables, des instances et des tables. De plus, vous utilisez JavaScript pour appeler les exportations WASM de manière synchrone dans les fonctions JavaScript. Par conséquent, JavaScript fonctionne bien avec WebAssembly car vous pouvez utiliser WASM pour écrire des applications hautes performances dans le navigateur Web.
WASM Objects
Lorsque vous travaillez avec WebAssembly, vous devez suivre huit objets WASM. Ces objets comprennent :
- WebAssembly.Global – L'objet Global est une instance de variable globale. Il est accessible à la fois par WebAssembly.Module et JavaScript.
- WebAssembly.Module – Ici, l'objet Module contient le code WASM sans état. Le code est pré-compilé.
- WebAssemly.Instance – WebAssembly.Instance est l'instance exécutable avec état de WebAssembly.Module.
- WebAssembly.Table – L'objet Table contient des références de fonction et agit comme un wrapper JavaScript.
- WebAssembly.CompileError – L'objet CompileError contient toutes les erreurs lors de la validation et du décodage.
- WebAssembly.RuntimeError – Ici, l'objet RuntimeError liste toutes les erreurs d'exécution.
- WebAssembly.LinkError – L'objet LinkError contient des erreurs qui se produisent lors de l'instanciation du module.
WASM Use-Cases and Projects
Nous savons déjà que WebAssembly offre des performances de type natif dans le navigateur Web. Cependant, pour vraiment comprendre où vous pouvez l'utiliser, vous devez examiner ses cas d'utilisation. Énumérons ci-dessous quelques-uns des cas d'utilisation de WASM.
Les cas d'utilisation de WebAssembly s'étendent à la fois à l'intérieur et à l'extérieur du navigateur. Par exemple, si vous souhaitez utiliser WASM dans un navigateur, vous pouvez faire beaucoup de choses, notamment :
- Montage vidéo ou audio, comme le ffmpegwasm .
- Les jeux vidéo dans le navigateur Web, tels que ceux-ci jeux performants.
- Visualisation scientifique et simulation
- Émulation/simulation de plate-forme telle que DOSBox, MAME, etc.
- Chiffrement
- Bureau à distance
- Outils de développement
Cas d'usage
D'un point de vue général, les cas d'utilisation convaincants de WebAssembly incluent
- La possibilité d'écrire du code plus rapidement peut tirer parti du matériel sous-jacent.
- De plus, vous pouvez également effectuer une compression côté client, ce qui se traduit par un meilleur temps de chargement et des économies de bande passante. Ainsi, vous utilisez le processeur du client ou le matériel sous-jacent pour effectuer la compression et la décompression, puis utilisez les ressources du serveur.
- De plus, vous pouvez utiliser différents langages de programmation pour écrire du code pour le Web autrement qu'en utilisant simplement JavaScript. Par exemple, vous pouvez utiliser Rust, C et C + + pour écrire du code performant pour certains aspects de vos applications Web.
Projets
Si nous passons à des exemples concrets, les projets suivants méritent d'être mentionnés.
- Figma amélioré les performances de ses applications Web avec l'utilisation de WebAssembly. Ils ont réduit le temps de chargement lors de l'initialisation de l'application, du rendu complet de la conception et même du téléchargement d'un fichier de conception. Comme nous en avons discuté précédemment, WebAssembly est également idéal pour la compression. Figma a implémenté WASM pour améliorer la taille des téléchargements, en les réduisant considérablement.
- Pyodure: Un autre projet WASM passionnant est le projet Pyodide, qui a été publié par Mozilla. Il permet aux scientifiques de compiler la pile scientifique Python sur WebAssembly, y compris NumPy, SciPy, Scikit-learn, etc., au navigateur. Il offre une conversion d'objet transparente entre Python et JavaScript. Enfin, il permet également aux développeurs d'utiliser des API Web à l'aide de Python.
- Brazor WebAssembly: Le framework Brazor WebAssembly permet aux développeurs de créer des applications Web interactives, côté client et d'une seule page avec .NET. Vous pouvez héberger ces applications dans le navigateur avec le runtime .NET basé sur WebAssembly. Ici, en tant que développeur, vous avez accès aux fonctionnalités du navigateur dans votre code .NET à l'aide des API JavaScript de WebAssembly.
De nombreux autres projets bien connus et dignes utilisent WebAssembly. Ceux-ci sont binaire, Bravo, Forêt, GrainEt autres.
Réflexions finales
WebAssembly n'est pas vraiment adapté aux débutants. Cependant, en étudiant ses cas d'utilisation et ses concepts clés, vous pouvez clairement comprendre sa capacité.
Avec des projets passionnants sur le marché, c'est le meilleur moment pour apprendre WebAssembly, surtout si vous êtes dans Développement Web. La capacité de WASM à fonctionner en dehors du navigateur en fait également un excellent choix pour le développement axé sur les performances.
