Deutsch

WebAssembly Tutorial

WebAssembly - Arbeit mit Go

Hallo da draußen, zukünftige Codingsuperstars! Heute begeben wir uns auf eine aufregende Reise in die Welt von WebAssembly mit Go. Keine Sorge, wenn diese Begriffe derzeit wie Außerirdische Sprachen klingen - bis zum Ende dieses Tutorials wirst du sie fließend sprechen!

WebAssembly - Working with Go

Was ist WebAssembly?

Bevor wir uns in den Code stürzen, lassen wir uns anschauen, was WebAssembly ist. Stell dir vor, du hast ein superstarkes Rennauto (das ist WebAssembly), das auf jeder Strecke (Webbrowser) mit unglaublicher Geschwindigkeit fahren kann. Es ist eine Möglichkeit, Programme, die in Sprachen wie Go, C++ oder Rust geschrieben sind, direkt in Webbrowsern auszuführen, was Webanwendungen schneller und leistungsfähiger macht.

Warum Go mit WebAssembly?

Go, unsere heutige Sprache der Wahl, ist wie ein Schweizer Army Knife in der Programmierungswelt. Es ist einfach, effizient und kann jetzt dank WebAssembly in Webbrowsern ausgeführt werden. Es ist, als würde man deinen Webanwendungen Superkräfte verleihen!

Einrichtung unserer Go-Umgebung

Zuerst einmal müssen wir unsere Go-Umgebung einrichten. Das ist so, als würden wir unsere Küche vorbereiten, bevor wir ein köstliches Gericht zubereiten.

  1. Installiere Go von der offiziellen Website (https://golang.org/)
  2. Richte deinen GOPATH ein (Go wird dich während der Installation durchführen)
  3. Installiere einen Code-Editor (ich empfehle Visual Studio Code, aber verwende, was dir舒服 ist)

Unser erstes Go WebAssembly Programm

Lassen wir mit einem einfachen "Hallo, WebAssembly!" Programm beginnen. Keine Sorge, wenn du noch nicht alles verstehst - wir werden es Schritt für Schritt auseinandernehmen.

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
}

Lassen wir das auseinandernehmen:

  1. package main: Das tells Go, dass dies das Hauptpaket unseres Programms ist.
  2. import: Wir importieren zwei Pakete - fmt zum Drucken und syscall/js zur Interaktion mit JavaScript.
  3. func main(): Dies ist der Einstiegspunkt unseres Programms.
  4. js.Global().Set("greet", js.FuncOf(greet)): Das macht unsere greet Funktion JavaScript zugänglich.
  5. <-make(chan bool): Das hält unser Programm am Laufen, wartend auf JavaScript-Aufrufe.
  6. func greet: Diese Funktion nimmt einen Namen und aktualisiert ein HTML-Element mit einer Begrüßung.

Kompilieren unseres Go-Programms in WebAssembly

Jetzt lassen wir unsere Go-Sprache in WebAssembly umwandeln. Öffne dein Terminal und führe aus:

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

Dieser Befehlweist Go an, unser Programm für JavaScript (GOOS=js) und WebAssembly (GOARCH=wasm) zu kompilieren.

Erstellen einer HTML-Seite, um unsere WebAssembly auszuführen

Wir benötigen eine HTML-Seite, um unsere WebAssembly zu laden und auszuführen. Hier ist eine einfache:

<!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>

Diese HTML-Datei:

  1. Erzeugt ein Eingabefeld für einen Namen
  2. Hat einen Button, der unsere greet Funktion aufruft
  3. Lädt die WebAssembly Runtime (wasm_exec.js)
  4. Lädt und führt unsere WebAssembly-Datei (main.wasm) aus

Ausführen unserer WebAssembly-Anwendung

Um dies auszuführen, benötigen wir einen Webserver. Hier ist ein einfaches Python-Kommando, um einen zu starten:

python -m http.server

Nun öffne deinen Browser und gehe zu http://localhost:8000. Du solltest unsere Seite sehen!

Verständnis des Outputs

Wenn du deinen Namen eingibst und auf "Greet" klickst, wirst du eine personalisierte Begrüßung sehen. Das ist unsere Go-Funktion, die im Browser läuft, dank WebAssembly!

Schlussfolgerung

Glückwunsch! Du hast gerade deine erste Go WebAssembly-Anwendung erstellt. Wir haben hier nur die Oberfläche gekratzt, aber ich hoffe, das hat dein Interesse geweckt, mehr zu erkunden.

Denke daran, das Lernen zu programmieren ist wie das Lernen einer neuen Sprache oder eines Instruments. Es erfordert Übung, Geduld und Ausdauer. Aber mit jedem Schritt lösest du neue Möglichkeiten und erweiterst dein kreatives Potenzial.

Weiter codieren, weiter erkunden und vor allem: Spaß haben!

Credits: Image by storyset

Vorheriges Tutorial:
WebAssembly - Arbeiten mit Rust
Nächstes Tutorial:
WebAssembly - Arbeiten mit Node.js