Français

Tutoriel WebAssembly

WebAssembly - Travailler avec Go

Bonjour là-bas, futurs superstars du codage ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde de WebAssembly en utilisant Go. Ne vous inquiétez pas si ces termes vous semblent comme des langues extraterrestres - d'ici la fin de ce tutoriel, vous les parlerez couramment !

WebAssembly - Working with Go

Qu'est-ce que WebAssembly ?

Avant de plonger dans le code, comprenons ce qu'est WebAssembly. Imaginez que vous avez une super-véhicule de course (c'est WebAssembly) qui peut courir sur n'importe quel circuit (les navigateurs web) à des vitesses incroyables. Il s'agit d'une manière d'exécuter des programmes écrits dans des langages comme Go, C++ ou Rust directement dans les navigateurs web, rendant les applications web plus rapides et plus puissantes.

Pourquoi choisir WebAssembly avec Go ?

Go, notre langage de choix aujourd'hui, est comme un couteau suisse dans le monde de la programmation. Il est simple, efficace, et maintenant il peut s'exécuter dans les navigateurs web grâce à WebAssembly. C'est comme donner des superpuissances à vos applications web !

Configuration de notre environnement Go

Premiers soins, nous devons configurer notre environnement Go. C'est comme préparer notre cuisine avant de commencer à cuire un repas délicieux.

  1. Installez Go à partir du site officiel (https://golang.org/)
  2. Configurez votre GOPATH (Go vous guidera à travers cela pendant l'installation)
  3. Installez un éditeur de code (je recommande Visual Studio Code, mais utilisez celui avec lequel vous êtes à l'aise)

Notre premier programme WebAssembly en Go

Commençons par un simple programme "Hello, WebAssembly !". Ne vous inquiétez pas si vous ne comprenez pas tout de suite - nous allons le décomposer étape par étape.

package main

import (
"fmt"
"syscall/js"
)

func main() {
fmt.Println("Hello, WebAssembly!")
js.Global().Set("greet", js.FuncOf(greet))
<-make(chan bool)
}

func greet(this js.Value, args []js.Value) interface{} {
name := args[0].String()
message := fmt.Sprintf("Hello, %s! Welcome to WebAssembly.", name)
js.Global().Get("document").Call("getElementById", "greeting").Set("innerText", message)
return nil
}

Décomposons cela :

  1. package main: Cela indique à Go que ceci est le paquet principal de notre programme.
  2. import: Nous importons deux paquets - fmt pour l'affichage et syscall/js pour interagir avec JavaScript.
  3. func main(): C'est le point d'entrée de notre programme.
  4. js.Global().Set("greet", js.FuncOf(greet)): Cela rend notre fonction greet disponible pour JavaScript.
  5. <-make(chan bool): Cela garde notre programme en cours d'exécution, en attendant les appels JavaScript.
  6. func greet: Cette fonction prend un nom et met à jour un élément HTML avec un salut.

Compilation de notre programme Go en WebAssembly

Maintenant, transformons notre code Go en WebAssembly. Ouvrez votre terminal et exécutez :

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

Cette commande indique à Go de compiler notre programme pour JavaScript (GOOS=js) et WebAssembly (GOARCH=wasm).

Création d'une page HTML pour exécuter notre WebAssembly

Nous avons besoin d'une page HTML pour charger et exécuter notre WebAssembly. Voici une simple :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Go WebAssembly</title>
</head>
<body>
<h1>Go WebAssembly Demo</h1>
<input id="name" type="text" placeholder="Enter your name">
<button onclick="greet(document.getElementById('name').value)">Greet</button>
<p id="greeting"></p>
<script src="wasm_exec.js"></script>
<script>
const go = new Go();
WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject).then((result) => {
go.run(result.instance);
});
</script>
</body>
</html>

Cette page HTML :

  1. Crée un champ d'entrée pour un nom
  2. A un bouton qui appelle notre fonction greet
  3. Charge le runtime WebAssembly (wasm_exec.js)
  4. Charge et exécute notre fichier WebAssembly (main.wasm)

Exécution de notre application WebAssembly

Pour exécuter cela, nous avons besoin d'un serveur web. Voici une simple commande Python pour en démarrer un :

python -m http.server

Maintenant, ouvrez votre navigateur et allez à http://localhost:8000. Vous devriez voir notre page !

Comprendre la sortie

Lorsque vous saisissez votre nom et cliquez sur "Greet", vous verrez un salut personnalisé apparaître. C'est notre fonction Go s'exécutant dans le navigateur, grâce à WebAssembly !

Conclusion

Félicitations ! Vous venez de créer votre première application WebAssembly en Go. Nous n'avons touché que la surface ici, mais j'espère que cela a piqué votre curiosité pour explorer davantage.

N'oubliez pas, apprendre à coder est comme apprendre une nouvelle langue ou un instrument. Cela nécessite de la pratique, de la patience et de la persévérance. Mais avec chaque étape, vous déverrouillez de nouvelles possibilités et étendez votre potentiel créatif.

Continuez à coder, continuez à explorer, et surtout, amusez-vous !

Méthode Description
js.Global() Accède à l'objet JavaScript global
js.FuncOf() Convertit une fonction Go en fonction JavaScript
js.Value Représente une valeur JavaScript
Call() Appelle une méthode JavaScript
Set() Définit une propriété JavaScript
Get() Obtient une propriété JavaScript
String() Convertit une valeur JavaScript en chaîne Go

Ce tableau résume les méthodes clés que nous avons utilisées pour interagir entre Go et JavaScript. Alors que vous continuez votre voyage WebAssembly, vous trouverez ces méthodes incroyablement utiles !

Credits: Image by storyset

Tutoriel précédent:
WebAssembly - Travailler avec Rust
Tutoriel suivant:
WebAssembly - Travailler avec Node.js