POC très rapide démontrant l'exécution de modules Wasm dans le navigateur via Wasmer-JS SDK, sans backend ni build complexe.
- Le projet utilise "wasmer", qui dispose d'un registre de wasm prêt à l'emploi (https://wasmer.io/products/registry).
- J'utilise la partie SDK JS: https://docs.wasmer.io/sdk/wasmer-js qui est la plus intéréssante car on peux la packager dans n'importe quel page html, même sur github pages.
- J'ai configuré vite mais il n'est pas nécessaire, l'idée est de montrer simplement qu'il n'y pas besoin de compilation moderne (typescript, webpack, etc) ni de déploiement spécifique pour utiliser du WASM.
Cela fait près de 10 ans que le WASM est en cours de développement, mais ce n'est que récemment que nous avons des applications plus matures pour être utiliser dans les navigateurs web. Son usage viendra compléter la containerisation qui succède à la virtualisation. Offrant dans le futur d'avantage de facilité pour prévisualiser dans son navigateur une maquette, une snapshot, ou même disposé d'une interface de gestion découplée directement depuis le dépot Github (d'où ce POC).
| Demo | Statut | Lien Wasmer |
|---|---|---|
| PHP | ✅ Fonctionnel | wasmer.io/php/php |
| Python | ✅ Fonctionnel | wasmer.io/python/python |
| WordPress | wasmer.io/wasmer-examples/php-wasmer-starter |
- 🚀 Zéro configuration / compilation - Fonctionne avec du HTML/JS pur.
- 📦 Dépendances incluses - Wasmer-JS embarqué localement.
- 🔥 3 démos intégrées :
- PHP (via WASM)
- Python (via WASM)
- WordPress (limité par la configuration réseau)
- 🌐 Testable immédiatement (via GitHub Pages) - grâce à "Github Actions" + le workaround "coi-serviceworker" afin de permettre la compliance CORS nécessaire pour executer Wasmer.
Utilise bun.sh pour remplacer npm et mise.jdx.dev pour setup l'environement.
- Installer les outils et dépendances Node :
mise install && mise r install - Avec Vite (recommandé) :
mise r vite - Avec Caddy (alternative):
mise r caddy - ( Exemple dist-build sans rollup:
bun run build)
Le projet est pré-configuré pour GitHub Pages. Un workflow s'occupe d'installer les dépendances et publier le rendu statique : https://github.com/nnosal/testwasmerjs
- WordPress nécessite l'option
--netqui n'est pas encore disponible dans Wasmer-JS (issue #4406).- Pour tester WordPress en local, il faut encore utiliser la CLI Wasmer :
wasmer run wasmer-examples/php-wasmer-starter --net.
- Pour tester WordPress en local, il faut encore utiliser la CLI Wasmer :
- La version CDN via unpkg "https://unpkg.com/@wasmer/[email protected]/dist/index.mjs" peut causer des timeouts Cloudflare d'où l'import via npm.
- Testé non fonctionnel sur Firefox de mon côté, tout les moteurs Webkit sont OK.
- "container2wasm/container2wasm" : Convertir des containeurs sous format WASM.
- "soyuka/php-wasm": Compiler via docker son propre WASM pour PHP, voir son intégration réussie dans la doc de PHP: php/web-php/pull/1097 ou bien son usage avancé sur seanmorris/php-wasm.
- Pour la compilation en WASM:
- Multi: "WebAssembly/binaryen": dispose de multiples outils dans divers langages.
- C: "emscripten-core/emscripten", voir par exemple sql.js.
- .NET: "dev-wasm/dev-wasm-dotnet"
- Python "RustPython/RustPython", voir la demo web.
- Go: "tinygo-org/tinygo", voir aussi "maxence-charriere/go-app".
- Rust: "rustwasm/wasm-pack" ou "yewstack/yew"
- Flutter, il suffit de faire
flutter build web --wasmmais beaucoup de module ne le supporte pas. - Plus? provenant de wasm3: Cookbook.md ou bien les démos : Demos.md
- Wordpress:
- Le WASM officiel "WordPress/wordpress-playground" qui marche avec des blueprints / plugin as snapshot.
- Exemple de mise à jour via PR: "wp-wasm-deploy-preview-example"
- D'autres choses utiles: brendandburns/caddy-wasm : Un plugin pour caddy-wasm ou bien "wasmerio/winterjs" un serveur JS optimisé pour WASM, c'est le moteur de déploiement "edge" de wasmer, à tester s'il peux packager des app Nodejs ?
MIT License - Nicolas NOSAL - 2025