Travailler avec WebAssembly et Go : de A à Z — guide complet

Introduction à WebAssembly et Go

WebAssembly (WASM) est un format binaire bas niveau qui permet d'exécuter du code écrit dans des langages autres que JavaScript directement dans le navigateur. Go (Golang), avec sa puissante bibliothèque standard et son excellent support de la concurrence, est devenu l'un des meilleurs candidats pour la compilation en WASM. Dans cet article, nous allons détailler le processus de travail avec WebAssembly en Go, de l'installation des outils au déploiement d'une solution prête à l'emploi.

Les applications web modernes nécessitent des performances élevées, et WebAssembly offre la possibilité d'exécuter du code écrit en Go avec une vitesse quasi native. Cela ouvre la voie au transfert de calculs lourds, de moteurs de jeux et de systèmes de traitement de données directement dans le navigateur.

Installation et configuration de l'environnement

Avant de commencer, assurez-vous d'avoir installé la dernière version de Go (1.21+). Pour travailler avec WebAssembly, vous aurez besoin du compilateur tinygo (optionnel, pour réduire la taille des binaires) ou du compilateur standard go build.

Prérequis de base

\n
• Go 1.21 ou plus récent
\n
• Un navigateur prenant en charge WebAssembly (Chrome, Firefox, Safari, Edge)
\n
• Une compréhension de base de JavaScript
\n

Configuration des variables d'environnement

# Définir GOOS et GOARCH pour la compilation croisée\nexport GOOS=js\nexport GOARCH=wasm\n\n# Vérifier que tout est correctement configuré\ngo env GOOS GOARCH\n# Devrait afficher : js wasm

Il est également nécessaire de copier le fichier de support wasm_exec.js depuis la bibliothèque standard de Go :

cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" ./

Écriture et compilation du premier module WASM

Créons un module simple qui exportera une fonction pour additionner deux nombres et affichera un message dans la console du navigateur.

Code en Go

package main\n\nimport "syscall/js"\n\nfunc add(this js.Value, args []js.Value) interface{} {\n    if len(args) < 2 {\n        return "Erreur : besoin de deux arguments"\n    }\n    a := args[0].Int()\n    b := args[1].Int()\n    return a + b\n}\n\nfunc main() {\n    // Enregistrer la fonction dans l'objet global\n    js.Global().Set("goAdd", js.FuncOf(add))\n    \n    // Bloquer la goroutine pour que WASM ne se termine pas\n    select {}\n}

Compilation en WASM

go build -o main.wasm main.go

Après la compilation, vous obtiendrez un fichier main.wasm d'environ 2-3 Mo (avec le compilateur standard). Pour la production, il est recommandé d'utiliser TinyGo, qui réduit la taille à 10-50 Ko.

Intégration avec JavaScript et HTML

Créons maintenant une page HTML qui charge et utilise notre module WASM.

Modèle HTML

<!DOCTYPE html>\n<html>\n<head>\n    <meta charset="utf-8">\n    <title>Démo Go WebAssembly</title>\n</head>\n<body>\n    <h1>Go + WebAssembly</h1>\n    <input type="number" id="num1" value="10">\n    <input type="number" id="num2" value="20">\n    <button onclick="calculer()">Additionner</button>\n    <p>Résultat : <span id="resultat">0</span></p>\n\n    <script src="wasm_exec.js"></script>\n    <script>\n        const go = new Go();\n        \n        WebAssembly.instantiateStreaming(\n            fetch("main.wasm"), \n            go.importObject\n        ).then((result) => {\n            go.run(result.instance);\n            console.log("WASM chargé !");\n        });\n\n        function calculer() {\n            const a = parseInt(document.getElementById('num1').value);\n            const b = parseInt(document.getElementById('num2').value);\n            const resultat = goAdd(a, b);\n            document.getElementById('resultat').textContent = resultat;\n        }\n    </script>\n</body>\n</html>

Gestion de la mémoire et complex