GoWM : charger des modules WebAssembly Go sans bricoler

J'ai créé GoWM après avoir répété les mêmes étapes pour charger des modules WebAssembly Go : trouver le bon binaire, initialiser le runtime et exposer les fonctions côté JavaScript. L'outil réduit ce travail répétitif et rend le point d'intégration visible.

GoWM (Go WebAssembly Manager) fournit une couche de chargement pour des modules Go déjà compilés. Il ne remplace pas la compilation et ne rend pas un module sûr par magie : il simplifie surtout le chargement, le cache et l'appel depuis un environnement JavaScript.

WebAssembly : quand le module vaut le détour

Avant de regarder GoWM, rappelons le cas d'usage. WebAssembly peut réduire le coût de tâches de calcul intensif, mais le résultat dépend du module, des échanges avec JavaScript et du navigateur. Pour une validation ou un traitement d'image partagé avec un service Go, cette contrainte peut être acceptable.

Mais attention, c'est pas magique non plus ! JavaScript reste le roi pour la manipulation du DOM et les interactions utilisateur simples. L'idée, c'est de faire bosser les deux ensemble : JS pour l'interface et les interactions, WASM pour la puissance de calcul.

GoWM : La solution qui change tout

Le problème qu'on connaît tous

Intégrer des modules WebAssembly dans un projet web, c'est souvent un parcours du combattant :

• Configuration complexe de l'environnement de build

• Gestion manuelle des fichiers .wasm et wasm_exec.js

• Problèmes de compatibilité entre navigateurs

• Absence d'outils standardisés pour le chargement

La Réponse : GoWM

GoWM v1.0.7 propose un chargement direct depuis GitHub, des points d'intégration React et Vue, et une configuration courte. Les modules doivent toutefois être compilés et publiés correctement ; GoWM ne supprime pas cette étape, il la déplace en amont.

Les bien-pouvoirs de GoWM

Chargement GitHub direct : Tes modules WASM directement depuis les repos Cross-Platform : Compatible navigateur (exports.browser), Node.js (exports.node) et environnements edge React & Vue natifs : Hooks (gowm/hooks) et composables (gowm/composables) intégrés TypeScript ready : Support complet avec autocomplétion via types/index.d.ts Gestion d'erreurs : retry automatique et gestion d'état Performance optimisée : Cache intelligent et chargement asynchrone

L'écosystème de modules : Un arsenal complet

GoWM est un gestionnaire accompagné de modules prêts à l'emploi. La collection est disponible sur gowm.vercel.app, avec sa documentation et ses exemples.

PDF-WASM : Génération et manipulation PDF

Fonctions disponibles : createPDF, addPage, extractText, mergePDFs, splitPDF, addWatermark, generateReport, compressPDF Bibliothèque : GoFPDF pour génération native Sortie : PDF Base64 prêt au téléchargement

Copier
const pdf = await loadFromGitHub('benoitpetit/wasm-modules-repository', {
  branch: 'master',
  name: 'pdf-wasm'
});

// Création PDF simple
const pages = [{
  width: 210, height: 297, margin: 20,
  content: "Document généré avec GoWM\n\nPDF-WASM permet la création rapide de documents professionnels."
}];

const metadata = {
  title: "Document GoWM",
  author: "DevByBen"
};

const pdfResult = pdf.call('createPDF', JSON.stringify(pages), JSON.stringify(metadata));
if (!pdfResult.error) {
  console.log('PDF créé:', pdfResult.size, 'bytes');
  
  // Téléchargement direct
  const link = document.createElement('a');
  link.href = 'data:application/pdf;base64,' + pdfResult.pdfData;
  link.download = 'document.pdf';
  link.click();
}

// Génération de rapport
const reportData = {
  type: "report",
  data: { title: "Rapport GoWM", content: "Statistiques WebAssembly" }
};
const reportResult = pdf.call('generateReport', JSON.stringify(reportData));
console.log('Rapport généré:', reportResult.templateType);

// Compression PDF
const compressResult = pdf.call('compressPDF', pdfResult.pdfData, 'medium');
console.log('Compression:', compressResult.compressionRatio + '%');

Crypto-WASM : Sécurité

Fonctions disponibles : hashSHA256, generateAESKey, encryptAES, decryptAES, generateRSAKeyPair, generateJWT Retour structuré : Objets avec métadonnées complètes Sécurité : Algorithmes cryptographiques standards

Copier
const crypto = await loadFromGitHub('benoitpetit/wasm-modules-repository', {
  branch: 'master',
  name: 'crypto-wasm'
});

// Hash SHA256 avec métadonnées
const hashResult = crypto.call('hashSHA256', 'Hello World');
if (hashResult.error) {
  console.error('Erreur hash:', hashResult.error);
} else {
  console.log('Hash:', hashResult.hash);
  console.log('Algorithme:', hashResult.algorithm); // "SHA256"
}

// Génération et utilisation clé AES
const keyResult = crypto.call('generateAESKey', 32); // 256-bit
if (!keyResult.error) {
  console.log('Clé générée:', keyResult.key);
  console.log('Taille:', keyResult.keySize, 'bits');
  
  // Chiffrement AES
  const encryptResult = crypto.call('encryptAES', 'Message secret', keyResult.key);
  if (!encryptResult.error) {
    console.log('Données chiffrées:', encryptResult.encryptedData);
    console.log('Algorithme:', encryptResult.algorithm);
    
    // Déchiffrement
    const decryptResult = crypto.call('decryptAES', encryptResult.encryptedData, keyResult.key);
    console.log('Déchiffré:', decryptResult.decryptedData); // "Message secret"
  }
}

Image-WASM : Traitement d'images

Fonctions disponibles : compressJPEG, compressPNG, convertToWebP, resizeImage Optimisation : Compression intelligente avec ratio de qualité Formats : Support JPEG, PNG, WebP

Copier
const image = await loadFromGitHub('benoitpetit/wasm-modules-repository', {
  branch: 'master',
  name: 'image-wasm'
});

// Compression JPEG avec contrôle qualité
const compressResult = image.call('compressJPEG', imageData, 80);
if (!compressResult.error) {
  console.log('Taille compressée:', compressResult.size);
  console.log('Qualité:', compressResult.quality);
  console.log('Ratio de compression:', compressResult.compressionRatio);
  console.log('Format:', compressResult.format); // "JPEG"
}

// Redimensionnement d'image
const resizeResult = image.call('resizeImage', imageData, 800, 600);
if (!resizeResult.error) {
  console.log('Nouvelles dimensions:', resizeResult.width, 'x', resizeResult.height);
}

QR-WASM : Génération QR codes & codes-barres

Fonctions disponibles : generateQRCode, generateVCard, generateWiFiQR, generateBarcode Formats : QR codes, vCards, WiFi, codes-barres EAN/UPC Sortie : Images Base64 prêtes à l'usage

Copier
const qr = await loadFromGitHub('benoitpetit/wasm-modules-repository', {
  branch: 'master',
  name: 'qr-wasm'
});

// Mode silencieux pour production
qr.call('setSilentMode', true);

// QR code basique
const qrResult = qr.call('generateQRCode', 'https://gowm.vercel.app', 256, 'HIGH');
if (!qrResult.error) {
  console.log('QR généré:', qrResult.base64Image);
  
  // Affichage direct dans le DOM
  const img = document.createElement('img');
  img.src = 'data:image/png;base64,' + qrResult.base64Image;
  document.body.appendChild(img);
}

// vCard contact professionnel
const contact = {
  name: 'DevByBen',
  organization: 'GoWM Team',
  phone: '+33123456789',
  email: 'dev@gowm.io',
  url: 'https://gowm.vercel.app'
};
const vCardResult = qr.call('generateVCard', contact, 300);
console.log('vCard QR:', vCardResult.base64Image);

// QR WiFi pour partage réseau
const wifi = {
  ssid: 'DevNetwork',
  password: 'SuperSecure123',
  security: 'WPA',
  hidden: false
};
const wifiResult = qr.call('generateWiFiQR', wifi, 256);
console.log('WiFi QR:', wifiResult.base64Image);

Goxios-WASM : client HTTP pour WebAssembly

Fonctions disponibles : get, post, put, delete, patch, request, create API : Interface similaire à Axios Configuration : Headers, timeout, retry automatique

Copier
const goxios = await loadFromGitHub('benoitpetit/wasm-modules-repository', {
  branch: 'master',
  name: 'goxios-wasm'
});

// Requête GET simple
const response = goxios.call('get', 'https://api.github.com/users/octocat');
if (!response.error) {
  console.log('Status:', response.status);
  console.log('Headers:', response.headers);
  console.log('Data:', JSON.parse(response.data));
}

// Requête POST avec données
const postData = { name: 'John', email: 'john@example.com' };
const postResponse = goxios.call('post', 'https://api.example.com/users', JSON.stringify(postData));
console.log('Création utilisateur:', postResponse);

Découvre Tous les Modules Disponibles

Tu veux explorer l'écosystème complet des modules WebAssembly ?

**** Découvrir tous les modules sur gowm.vercel.app/modules

Sur cette page, tu trouveras :

• Statistiques complètes : nombre de modules, fonctions, taille totale

• Recherche et filtres : trouve rapidement le module parfait

• Documentation interactive : exemples et API pour chaque module

• ⭐ Informations GitHub : stars, forks, dernières mises à jour

• Interface moderne : navigation intuitive en grid ou liste

Chaque module est documenté avec des exemples React, Vue et JavaScript vanilla. Pars de ces exemples, puis mesure le chargement et le coût des échanges dans ton application.

Créer tes propres modules WASM

Tu veux créer tes propres modules WebAssembly optimisés pour GoWM ? C'est possible et plus simple que tu ne le penses !

Guide complet de création de modules WASM

Le guide officiel couvre :

• Setup de l'environnement Go pour WebAssembly

• Patterns de développement GoWM-compatibles

• Export de fonctions avec gestion d'erreurs

• Compilation optimisée avec TinyGo

• Publication et intégration GitHub

• Tests et validation des modules

Copier
// Exemple de module Go simple
package main

import (
    "syscall/js"
)

var silentMode = false

//go:export add
func add(a, b int) int {
    return a + b
}

//go:export subtract
func subtract(a, b int) int {
    return a - b
}

//go:export setSilentMode
func setSilentMode(enabled bool) bool {
    silentMode = enabled
    return silentMode
}

//go:export getAvailableFunctions
func getAvailableFunctions() []string {
    return []string{"add", "subtract", "setSilentMode", "getAvailableFunctions"}
}

func main() {
    c := make(chan struct{}, 0)
    <-c // Keep alive
}

Compilation optimisée :

Copier
#!/bin/bash
# build.sh - Script de compilation optimisée pour modules WASM

set -e

# Configuration environnement WebAssembly
export GOOS=js
export GOARCH=wasm
export CGO_ENABLED=0

# Récupération des dépendances
go mod download
go mod tidy

# Flags d'optimisation
BUILD_FLAGS=(
    -ldflags="-s -w"           # Supprime debug et symbol table
    -trimpath                  # Supprime les chemins de fichiers
    -buildmode=default         # Mode de build standard
)

# Compilation WASM optimisée
go build "${BUILD_FLAGS[@]}" -o main.wasm main.go

# Optimisation avec wasm-opt (si disponible)
if command -v wasm-opt &> /dev/null; then
    wasm-opt -Oz --enable-bulk-memory main.wasm -o main.wasm
fi

# Compression gzip
gzip -9 -k main.wasm

# Génération hash d'intégrité
sha256sum main.wasm | cut -d' ' -f1 > main.wasm.integrity

echo "✅ Module WASM optimisé et prêt pour GoWM!"

Performances : Les chiffres qui parlent

Les benchmarks montrent des résultats impressionnants selon le type de tâche :

Quand WebAssembly domine

• Calculs intensifs : Jusqu'à 10× plus rapide

• Cryptographie : Entre 2× et 10× de gain

• Traitement d'images : 2× à 5× plus performant

• Applications scientifiques : Gains substantiels

Quand javascript reste roi

• Manipulation DOM : Accès natif vs passage par JS

• Applications légères : Overhead de chargement WASM

• Interactions utilisateur : Réactivité immédiate

Architecture GitHub : L'innovation qui change Tout

GoWM simplifie l'approche traditionnelle avec son système de chargement GitHub direct. Il évite surtout de réécrire la même logique de chargement :

• Configurer un serveur local

• Gérer les fichiers WASM manuellement

• S'embêter avec les CORS

• Maintenir des versions locales

Auto-Discovery Intelligent

GoWM scanne automatiquement les dépôts GitHub pour trouver tes modules :

• Dossiers wasm/, dist/, build/

• Fichiers main.wasm, index.wasm, {repo-name}.wasm

• GitHub releases avec assets WASM

• Chemins personnalisés

Copier
// Basic loading - automatic file discovery
const math = await loadFromGitHub('benoitpetit/wasm-modules-repository');

// Advanced loading with specific options
const imageProcessor = await loadFromGitHub('image-corp/wasm-image', {
  branch: 'develop',        // Use develop branch
  path: 'dist',            // Look in dist folder
  filename: 'image.wasm',  // Specific filename
  name: 'image-processor'  // Module name
});

// Load from specific tag/release
const stableVersion = await loadFromGitHub('company/wasm-lib', {
  tag: 'v1.2.0',           // Use specific tag
  name: 'stable'
});

React integration : Hooks natifs

Copier
import React, { useState, useEffect } from 'react';
import { useWasmFromGitHub } from 'gowm/hooks/useWasm';

function CalculatorComponent() {
  const { wasm, loading, error } = useWasmFromGitHub('benoitpetit/wasm-modules-repository', {
    branch: 'master',
    name: 'math-wasm'
  });
  const [result, setResult] = useState(null);
  const [functions, setFunctions] = useState([]);

  useEffect(() => {
    if (wasm) {
      // Enable silent mode for cleaner output
      wasm.call('setSilentMode', true);
      
      // Get available functions
      const availableFunctions = wasm.call('getAvailableFunctions');
      setFunctions(availableFunctions);
    }
  }, [wasm]);

  const calculate = async (operation, a, b) => {
    if (!wasm) return;
    
    try {
      const result = await wasm.callAsync(operation, a, b);
      
      // Handle different return types
      if (typeof result === 'string' && result.includes('Erreur')) {
        setResult(`Error: ${result}`);
      } else {
        setResult(result);
      }
    } catch (err) {
      setResult(`Error: ${err.message}`);
    }
  };

  if (loading) return <div>Loading WASM module...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h3>Available Functions: {functions.join(', ')}</h3>
      <button onClick={() => calculate('add', 5, 3)}>5 + 3</button>
      <button onClick={() => calculate('multiply', 4, 7)}>4 × 7</button>
      <button onClick={() => calculate('factorial', 5)}>5!</button>
      {result !== null && <div>Result: {result}</div>}
    </div>
  );
}

Vue 3 integration : Composables réactifs

Copier
<template>
  <div class="calculator">
    <div v-if="loading">Loading WASM module...</div>
    <div v-else-if="error">Error: {{ error.message }}</div>
    <div v-else>
      <h3>Available Functions: {{ functions.join(', ') }}</h3>
      <input v-model.number="num1" type="number" placeholder="First number" />
      <input v-model.number="num2" type="number" placeholder="Second number" />
      <button @click="calculate('add')">Add</button>
      <button @click="calculate('multiply')">Multiply</button>
      <div v-if="result !== null">Result: {{ result }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useWasmFromGitHub } from 'gowm/composables/useWasm';

const { wasm, loading, error } = useWasmFromGitHub('benoitpetit/wasm-modules-repository', {
  branch: 'master',
  name: 'math-wasm'
});

const num1 = ref(10);
const num2 = ref(20);
const result = ref(null);
const functions = ref([]);

// Watch for wasm module ready
watch(wasm, (newWasm) => {
  if (newWasm) {
    // Configure module
    newWasm.call('setSilentMode', true);
    
    // Get available functions
    functions.value = newWasm.call('getAvailableFunctions');
  }
}, { immediate: true });

const calculate = async (operation) => {
  if (!wasm.value) return;
  
  try {
    const calcResult = await wasm.value.callAsync(operation, num1.value, num2.value);
    
    // Handle error strings
    if (typeof calcResult === 'string' && calcResult.includes('Erreur')) {
      result.value = `Error: ${calcResult}`;
    } else {
      result.value = calcResult;
    }
  } catch (err) {
    result.value = `Error: ${err.message}`;
  }
};
</script>

Sécurité et Compatibilité : Du solide

Sandboxing WebAssembly

WebAssembly s'exécute dans un environnement sandboxé sécurisé, protégeant le système hôte. GoWM respecte ces garanties tout en ajoutant ses propres couches de protection.

Support Universel

• Navigateurs : Chrome 57+, Firefox 52+, Safari 11+, Edge 16+

• Runtimes : Node.js 14+, Deno, Bun

• Environnements : Browser, server-side, edge computing

WASM manager : Le site compagnon

Découvre WASM Manager, le site compagnon qui référence tous les modules disponibles :

• Découverte de modules : Browse et search dans la collection

• Intégration GitHub : Infos automatiques depuis les repos

• Exemples d'intégration : Code ready-to-use pour chaque framework

• Documentation complète : Fonctions, paramètres et exemples

• Interface moderne : UI responsive avec dark mode

L'Avenir du WebAssembly avec GoWM

Les versions de Go et des navigateurs continueront de faire évoluer WebAssembly. GoWM reste un outil ciblé, utile quand son modèle de chargement correspond au projet, pas une couche obligatoire pour tous les modules WASM.

Des entreprises comme Figma, Autodesk et Blender utilisent déjà WASM pour des performances spectaculaires. GoWM démocratise cet accès pour tous les développeurs JavaScript.

Ce que GoWM apporte

Open source : code sous licence MIT. Frontière explicite : le module est chargé et appelé depuis une API connue. Multi-runtime : navigateur et Node.js avec les mêmes options de chargement. Documentation : exemples, guides et référence d'API. Cache : réutilisation des modules déjà chargés quand le contexte le permet.

Conclusion

GoWM est utile si tu charges régulièrement des modules WASM Go et que tu veux uniformiser cette étape. Si tu n'as qu'un module, l'API native et le fichier wasm_exec.js peuvent être plus simples. C'est ce genre d'arbitrage que je veux rendre clair avec le projet.

Liens utiles :

• Package NPM

• Repository GitHub

• WASM Module

• Documentation complète

Pour voir un cas concret, lis aussi l'exemple de validation de formulaire avec Go, React et GoWM.

Article co-écrit avec l'IA · Images générées avec l'IA.