Travailler avec WebAssembly et Go : créer des applications web rapides

Introduction à WebAssembly et Go

WebAssembly (Wasm) est un format d'instructions binaires de bas niveau qui s'exécute dans le navigateur à une vitesse quasi native. Combiné au langage Go (Golang), vous obtenez un outil puissant pour créer des applications web hautes performances. Go se compile en WebAssembly, permettant de transférer des calculs complexes, des algorithmes et même des jeux directement dans le navigateur, sans sacrifier les performances.

Dans cet article, nous allons voir comment configurer l'environnement, écrire un module simple en Go, le compiler en Wasm et l'intégrer avec JavaScript. Vous découvrirez les packages clés, les limitations et les meilleures pratiques.

Configuration de l'environnement pour la compilation Go en Wasm

Installation de Go et des dépendances WebAssembly

Avant tout, assurez-vous d'avoir installé Go version 1.11 ou plus récente (1.21+ recommandé). WebAssembly est pris en charge nativement. Pour la compilation, on utilise les variables d'environnement GOOS=wasm GOARCH=wasm.

Vous aurez également besoin du fichier de support wasm_exec.js, fourni avec Go. Copiez-le à la racine du projet :

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

Structure du projet

Créons une structure simple :

my-wasm-app/├── main.go├── wasm_exec.js├── index.html└── main.wasm (sera créé après compilation)

Écriture d'un module Go pour WebAssembly

Exemple simple : une fonction d'addition

Créez un fichier main.go avec le contenu suivant :

package main

import (    "syscall/js")

func add(this js.Value, args []js.Value) interface{} {    if len(args) < 2 {        return 0    }    a := args[0].Int()    b := args[1].Int()    return a + b}

func main() {    c := make(chan struct{}, 0)

    js.Global().Set("goAdd", js.FuncOf(add))

    <-c}

Ici, nous utilisons le package syscall/js pour interagir avec JavaScript. La fonction add prend deux arguments et retourne leur somme. Le canal c bloque la fin du programme pour que le module reste actif.

Compilation en Wasm

Exécutez la commande :

GOOS=wasm GOARCH=wasm go build -o main.wasm main.go

Vous obtiendrez un fichier main.wasm d'environ 1 à 2 Mo (pour un exemple simple). En production, utilisez le flag -ldflags="-s -w" pour réduire la taille.

Intégration avec HTML et JavaScript

Création de la page HTML

Créez un fichier index.html :

<!DOCTYPE html><html lang="fr"><head>    <meta charset="UTF-8">    <title>Go + WebAssembly</title>    <script src="wasm_exec.js"></script></head><body>    <h2>Calculatrice Go dans le navigateur</h2>    <input type="number" id="num1" value="5">    <input type="number" id="num2" value="10">    <button onclick="calculate()">Additionner</button>    <p>Résultat : <span id="result">0</span></p>

    <script>        const go = new Go();        WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject)            .then((result) => {                go.run(result.instance);                console.log("Module WebAssembly chargé");            });

        function calculate() {            const a = parseInt(document.getElementById('num1').value);            const b = parseInt(document.getElementById('num2').value);            const sum = goAdd(a, b);            document.getElementById('result').innerText = sum;        }    </script></body></html>

Notez que la fonction goAdd devient globale grâce à l'appel js.Global().Set("goAdd", ...) dans le code Go.

Lancement du serveur local