Syrus Akbary, Fondateur de Wasmer, présente comment compiler des programmes C directement à partir de JavaScript ou de n'importe quel navigateur (Chrome, Firefox, Safari) en utilisant WebAssembly (sous licence MIT). Il partage également les capacités du SDK Wasmer JS.Le langage C est un langage de programmation à usage général. Le C est un langage procédural impératif, qui prend en charge la programmation structurée, la portée lexicale des variables et la récursivité, avec un système de types statique. Il a été conçu pour être compilé afin de fournir un accès de bas niveau à la mémoire et des constructions de langage qui correspondent efficacement aux instructions de la machine, le tout avec un support d'exécution minimal.
WebAssembly (Wasm) définit un format de code binaire portable et un format de texte correspondant pour les programmes exécutables ainsi que des interfaces logicielles pour faciliter la communication entre ces programmes et leur environnement hôte. L'objectif principal de WebAssembly est de faciliter les applications à haute performance sur les pages web, mais il est également conçu pour être utilisable dans des environnements non web.
Syrus Akbary, Fondateur de Wasmer, présente comment compiler des programmes C directement à partir de JavaScript ou de n'importe quel navigateur (Chrome, Firefox, Safari) en utilisant WebAssembly. Il partage également les capacités du SDK Wasmer JS.
Exécuter Clang dans le navigateur en utilisant le runtime WebAssembly, d'après Syrus Akbary
Nous avons franchi une étape importante pour faire fonctionner n'importe quel logiciel avec WebAssembly. Grâce à la dernière version de Wasmer (4.4) et au Wasmer JS SDK (0.8.0), vous pouvez maintenant exécuter clang partout où Wasmer fonctionne !
Cela permet de compiler des programmes C depuis pratiquement n'importe où. Y compris Javascript et votre navigateur préféré ! (nous avons testé Chrome, Safari et Firefox et tout fonctionne comme un charme).
Pour ceux qui souhaitent le voir à l'œuvre, rendez-vous sur le site wasmer.sh pour essayer une démo en direct (attention : il faut télécharger 100 Mo) :
Note : nous avons essayé d'exécuter clang il y a quelques années, mais à cause des limitations de WASI, nous n'avons pas pu appeler posix_spawn, ce qui a limité l'utilisation de clang dans le navigateur, Firefox et Safari n'étaient pas supportés à l'époque, mais le sont maintenant.
Pourquoi est-il utile d'utiliser clang avec Wasmer, quels sont les cas d'utilisation possibles ?
Exécuter Clang dans le navigateur en utilisant le runtime WebAssembly
Créez un fichier donut.c avec le contenu suivant (exemple tiré de l'excellent Donut Math) :
Nous pouvons exécuter clang avec Wasmer et le compiler pour WASI et WASIX (assurez-vous d'avoir installé Wasmer localement !):
Pour exécuter clang sur votre navigateur, vous pouvez essayer ce qui suit sur wasmer.sh (il a ajouté donut.c au répertoire /home pour qu'il soit plus facile à essayer) :
La bonne nouvelle est que le paquetage clang peut compiler, non seulement l'exemple donut c, mais aussi tous les exemples compliqués de WASIX.
Et plus important encore... cela fonctionne parfaitement dans le navigateur ! (et aussi via le Wasmer Javascript SDK).
Note : le paquet clang/clang pèse actuellement environ 100Mo non compressé (car il nécessite les binaires clang + les bibliothèques système). Nous travaillons à réduire la taille du paquet et à le proposer en format compressé. Idéalement, il vous suffira de télécharger ~30Mo pour utiliser clang avec Wasmer : soit dans votre shell local, soit dans votre navigateur, soit dans votre projet Javascript !
Utilisation du SDK Javascript
Voulez-vous utiliser clang dans votre projet Javascript ? Grâce à notre nouveau SDK Wasmer JS, vous pouvez le faire facilement, à la fois dans le navigateur et dans Node.js/Bun etc :
Vous pouvez trouver un fichier index.html fonctionnel exécutant clang : https://github.com/wasmerio/wasmer-j...cdn/index.html
Une dernière chose !
Wasmer's clang peut même optimiser le fichier pour vous automatiquement en utilisant wasm-opt sous le capot (Clang détecte automatiquement si wasm-opt est utilisé, et il sera automatiquement appelé lors de l'optimisation du fichier).
Imaginez que vous puissiez utiliser Emscripten sans avoir besoin d'installer sa chaîne d'outils - ou mieux encore, imaginez que vous puissiez exécuter Emscripten dans le navigateur. Nous avons rendu cela possible grâce à l'écosystème WASIX 🎉.
Prochaines étapes
Nous sommes incroyablement excités par cette étape, car elle ouvre la voie à de nombreuses fonctionnalités à venir dont nous allons avoir besoin dans Wasmer et Wasmer Edge :
C'est le début d'un voyage impressionnant, nous sommes impatients de voir ce que vous allez créer.
Cela permet de compiler des programmes C depuis pratiquement n'importe où. Y compris Javascript et votre navigateur préféré ! (nous avons testé Chrome, Safari et Firefox et tout fonctionne comme un charme).
Pour ceux qui souhaitent le voir à l'œuvre, rendez-vous sur le site wasmer.sh pour essayer une démo en direct (attention : il faut télécharger 100 Mo) :
| Code : | Sélectionner tout |
1 2 3 | # NOTE: this will download the clang package (100Mb), so it might take a while...
wasmer run clang/clang example.c -o example.wasm
wasmer run example.wasm |
Pourquoi est-il utile d'utiliser clang avec Wasmer, quels sont les cas d'utilisation possibles ?
- Vous pouvez compiler du code C en WebAssembly facilement en utilisant l'interface de programmation Wasmer : aucune chaîne d'outils ou installation complexe n'est nécessaire, installez Wasmer et vous êtes prêt à partir !
- WASIX est maintenant auto-hébergé, ce qui signifie qu'il peut se compiler lui-même et compiler n'importe quel programme C.
- Vous pouvez compiler des projets C directement à partir de JavaScript !
- Les IDE en ligne pouraient commencer à adopter le SDK pour permettre à leurs utilisateurs de compiler et d'exécuter des programmes C dans le navigateur.
- Des constructions reproductibles partout (en utilisant la même version de Wasmer)
Exécuter Clang dans le navigateur en utilisant le runtime WebAssembly
Créez un fichier donut.c avec le contenu suivant (exemple tiré de l'excellent Donut Math) :
| Code : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | #include <stdio.h> #include <string.h> k;double sin() ,cos();main(){float A= 0,B=0,i,j,z[1760];char b[ 1760];printf("\x1b[2J");for(;; ){memset(b,32,1760);memset(z,0,7040) ;for(j=0;6.28>j;j+=0.07)for(i=0;6.28 >i;i+=0.02){float c=sin(i),d=cos(j),e= sin(A),f=sin(j),g=cos(A),h=d+2,D=1/(c* h*e+f*g+5),l=cos (i),m=cos(B),n=s\ in(B),t=c*h*g-f* e;int x=40+30*D* (l*h*m-t*n),y= 12+15*D*(l*h*n +t*m),o=x+80*y, N=8*((f*e-c*d*g )*m-c*d*e-f*g-l *d*n);if(22>y&& y>0&&x>0&&80>x&&D>z[o]){z[o]=D;;;b[o]= ".,-~:;=!*#$@"[N>0?N:0];}}/*#****!!-*/ printf("\x1b[H");for(k=0;1761>k;k++) putchar(k%80?b[k]:10);A+=0.04;B+= 0.02;}}/*****####*******!!=;:~ ~::==!!!**********!!!==::- .,~~;;;========;;;:~-. ..,--------,*/ |
Nous pouvons exécuter clang avec Wasmer et le compiler pour WASI et WASIX (assurez-vous d'avoir installé Wasmer localement !):
| Code : | Sélectionner tout |
1 2 | $ wasmer run clang/clang --dir=. -- -Wno-implicit-int donut.c -o donut.wasm
$ wasmer run donut.wasm |
Pour exécuter clang sur votre navigateur, vous pouvez essayer ce qui suit sur wasmer.sh (il a ajouté donut.c au répertoire /home pour qu'il soit plus facile à essayer) :
| Code : | Sélectionner tout |
1 2 | wasmer run clang/clang -Wno-implicit-int donut.c -o donut.wasm
wasmer run /home/donut.wasm |
La bonne nouvelle est que le paquetage clang peut compiler, non seulement l'exemple donut c, mais aussi tous les exemples compliqués de WASIX.
Et plus important encore... cela fonctionne parfaitement dans le navigateur ! (et aussi via le Wasmer Javascript SDK).
Note : le paquet clang/clang pèse actuellement environ 100Mo non compressé (car il nécessite les binaires clang + les bibliothèques système). Nous travaillons à réduire la taille du paquet et à le proposer en format compressé. Idéalement, il vous suffira de télécharger ~30Mo pour utiliser clang avec Wasmer : soit dans votre shell local, soit dans votre navigateur, soit dans votre projet Javascript !
Utilisation du SDK Javascript
Voulez-vous utiliser clang dans votre projet Javascript ? Grâce à notre nouveau SDK Wasmer JS, vous pouvez le faire facilement, à la fois dans le navigateur et dans Node.js/Bun etc :
| Code : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | import { init, Wasmer, Directory } from "https://unpkg.com/@wasmer/sdk@latest/dist/index.mjs"; await init(); const clang = await Wasmer.fromRegistry("clang/clang"); const project = new Directory(); await project.writeFile("example.c", `#include<stdio.h> int main() { printf("Hello World"); return 0; } `); let instance = await clang.entrypoint.run({ args: ["/project/example.c", "-o", "/project/example.wasm"], mount: { "/project": project }, }); const output = await instance.wait(); if (!output.ok) { throw new Error(`Clang failed. Exit: ${output.code}:`); } // The generated wasm file from clang let wasm = await project.readFile("example.wasm"); const example = await Wasmer.fromFile(wasm); const result = await example.entrypoint.run(); const outputExample = await result.wait(); // This should be "Hello World" console.log(outputExample.stdout); |
Une dernière chose !
Wasmer's clang peut même optimiser le fichier pour vous automatiquement en utilisant wasm-opt sous le capot (Clang détecte automatiquement si wasm-opt est utilisé, et il sera automatiquement appelé lors de l'optimisation du fichier).
Imaginez que vous puissiez utiliser Emscripten sans avoir besoin d'installer sa chaîne d'outils - ou mieux encore, imaginez que vous puissiez exécuter Emscripten dans le navigateur. Nous avons rendu cela possible grâce à l'écosystème WASIX 🎉.
Prochaines étapes
Nous sommes incroyablement excités par cette étape, car elle ouvre la voie à de nombreuses fonctionnalités à venir dont nous allons avoir besoin dans Wasmer et Wasmer Edge :
- Compilation de bibliothèques Python natives directement à partir de WASIX. Imaginez que PIP puisse compiler des choses dans Wasmer lors de l'installation, par exemple :
Code : Sélectionner tout wasmer run python --entrypoint pip -- install numpy # This compiles numpy to WASIX, all within Wasmer processes - Utiliser py2wasm avec un compilateur intégré
- Compiler Static Hermes vers WASIX, afin de pouvoir générer des fichiers Wasm natifs à partir de JS.
- Nouveaux outils (tout projet dépendant de LLVM peut maintenant être facilement compilé en WebAssembly !)
C'est le début d'un voyage impressionnant, nous sommes impatients de voir ce que vous allez créer.
Source : "Syrus Akbary Fondateur de Wasmer"
Et vous ?
Pensez-vous que cette méthode est crédible ou pertinente ? Quel est votre avis sur le sujet ?Voir aussi :
La version 3.0 de Wasmer, un runtime open source pour l'exécution de WebAssembly sur un serveur, est disponible. Elle apporte une simplification dans le fonctionnment des moteurs État de WebAssembly en 2023: Rust est le langage le plus utilisé. Les utilisateurs veulent une meilleure intégration hors navigateur, les threads et le garbage collection sont en phase de finalisation Est-il possible de remplacer le C ? Le créateur du langage C3 donne des raisons pour lesquelles ce type d'initiative est voué à l'échec au moment où le noyau Linux s'ouvre de plus en plus au Rust