Jouons avec WebAssembly Studio !

Un Web IDE consacré à wasm et ses acteurs

Dans le dernier billet, j’avais abordé la fonction de wasm-bindgen dans la chaîne d’outils mise à disposition, tout en oubliant de présenter un service qui risque de s’avérer très pratique lorsqu’il sera opérationnel: j’ai nommé WebAssembly Studio !

Nous avons ici un Web IDE entièrement dédié à wasm et permet à l’utilisateur de gérer plutôt simplement l’architecture de son projet. En passant par la configuration de gulp, l’intégration de nouveaux modules node ou encore la création libre de nouveaux fichiers et répertoires, tout y est. Il ne reste plus qu’à s’y mettre.

Il n’est pas nécessaire de connaître les différents langages qui seront présentés plus bas pour lire ce billet.

Champ d'action

A l’heure où j’écris ces lignes, l’environnement supporte 4 langages:

  1. C;
  2. TS;
  3. Rust;
  4. Et, bien évidemment, wasm lui-même.
Menu WebAssembly Studio
Menu WebAssembly Studio

L’UI reste relativement intuitive et peu chargée, ne contenant que l’essentiel pour télécharger, exporter, compiler et exécuter un projet.

Sidebar de l'IDE
Sidebar de l'IDE

Une fois votre projet compilé, vous pourrez avoir accès à de nouvelles options dans le menu contextuel1 visant à optimiser, transpiler, désassembler ou même visualiser votre code sous ses différentes formes grâce au backend Binaryen/Emscripten.

Options du menu contextuel
Options du menu contextuel

Au cas où vous vous poseriez la question, le build.ts que vous voyez n’a rien de spécial. Il contient simplement les instructions de gulp destinées aux fichiers produits en sortie. Vous pouvez le consulter vous-même en allant jeter un œil ! ;)


  1. Que vous pouvez déclencher par un clic droit sur un élément de l’arborescence se trouvant à gauche de votre écran.

État actuel de l'IDE

Bien que ce très bon outil en devenir soit à notre disposition, il est encore très imparfait et ne nous permettra l’exécution que de très modestes tests (qui ne traitent pas de données complexes, en réalité). Ajoutons à cela qu’il souffre de bugs plutôt lourds puisque tout ce qui requiert les services de Binaryen n’aboutira à rien pour le moment (le backend ne répond pas).

Services défectueux de Binaryen
Services défectueux de Binaryen

Il faut toutefois garder à l’esprit que WebAssembly Studio se trouve encore dans son cycle de bêta et que cette situation ne sera certainement pas définitive. Affaire à suivre ! :)


Voir aussi

6 commentaires

Pourquoi le tag JavaScript ?

Pour compléter ce que disait @backmachine, JS est littéralement le mortier qui va nous permettre de rendre l’ensemble cohérent entre la partie native (écrite en wasm) et le système écrit en JS.

Quoi qu’il arrive, JS est toujours concerné par wasm.

P.S : @Songbird il y a des problèmes avec les liens vers tes anciens billets, certains me font une erreur 403.

En effet, j’ai mis un lien renvoyant vers le brouillon du billet. :lol: Je corrige ça, merci !

C’est du bytecode exécutable par ton navigateur (si il le supporte, donc en gros pour le moment Firefox et ± Chrome (performances horrible d’après ce que j’ai vu)). Donc de l’exécution de code côté client, comme JS.
C’est une sorte de concurrent pour asm.js

WebAssembly est un conteneur pour une page web/html accompagné d’un moteur JS ? (je ne suis pas sûr d’avoir bien compris ce que c’était)

A-312

Pas forcément. En théorie, wasm pourrait fonctionner indépendamment de JavaScript. D’un point de vue stratégique, ce n’est pas vraiment viable selon moi.

JavaScript est, actuellement, le seul outil stable et "standard" utilisé pour le côté client, donc wasm a sérieusement intérêt de collaborer avec ce qui existe avant de se proposer comme une alternative qui ne serait pas aussi bien comprise sans cette entente préalable.

Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte