WebAssembly (WASM) lernen: Eine Einführung in 100 Minuten // deutsch

0:00:00 – Einleitung
0:01:38 – Was ist WebAssembly (WASM)?
0:05:05 – Das WebAssembly Binary Toolkit (WABT)
0:05:55 – Das npm-Modul wabt
0:08:01 – Ein erstes WASM-Modul
0:09:38 – WebAssembly (WASM) kompilieren
0:12:57 – Funktionen definieren und exportieren
0:15:15 – Kommentare schreiben
0:23:16 – Funktionswerte zurückgeben
0:28:05 – WebAssembly nach C-Pseudocode disassemblieren
0:29:54 – Funktionsparameter und Argumente
0:32:20 – Den Stack verwenden
0:34:55 – Funktionen und Parameter benennen
0:37:36 – Mehrere Rückgabewerte zurückgeben
0:39:47 – Addition, Multiplikation und Subtraktion
0:42:04 — Division für Ganz- und Fließkommazahlen
0:45:19 – Die Modulo-Division
0:48:04 – Die Fakultät berechnen
0:52:07 – Verzweigungen und Rekursion
1:02:10 – WASM-Code mit Unit-Tests testen
1:09:12 – WebAssembly mit JavaScript im Speicher kompilieren
1:18:39 – Fibonacci iterativ (mit Schleifen) berechnen
1:34:55 – WASM-Module im Webbrowser laden und ausführen
1:40:28 – Warum ein grundlegendes Verständnis von WebAssembly wichtig ist

────────────────────

Über the native web 🦄

Wir sind ein Beratungs-, Schulungs- und Entwicklungsunternehmen, das sich auf Web- und Cloud-Technologien spezialisiert hat. Wir streben nach intelligenten und eleganten Lösungen für komplexe Probleme, und wir glauben, dass Softwareentwicklung kein Selbstzweck ist. Stattdessen sollte Software tatsächliche Probleme der realen Welt lösen.

Wir glauben, dass native Web- und Cloud-Technologien das Fundament sind, auf dem die Zukunft aufbaut. Unsere Kernkompetenz ist der Entwurf und die Entwicklung verteilter Web- und Cloud-Anwendungen unter Verwendung dieser Technologien in interdisziplinären Teams. Wir entwickeln auch unser eigenes Open-Source-Framework namens wolkenkit. Und wir lieben es, unser Wissen in Schulungen und Workshops, auf Konferenzen und bei Usergroups zu teilen.

────────────────────

Weiterführende Links 🌍

[comedyclub]

Ich bi nvor kurzem auf euren Kanal gestoßen. Hammer! Weiter so!

[coolchop]

Danke für die ausführliche Einführung. Fand ich sehr interessant.

[yt]

Danke für die ausführliche Einführung in WASM. Wieder was dazu gelernt. :-) Bei der multiple result swap function erhalte ich übrigens eine Fehlermeldung:
"(node:24480) CompileError: WebAssembly.instantiate(): return count of 2 exceeds internal limit of 1 @+27"
Alles andere hat funktioniert.

[SuperDuperDevelopersClub]

Hat uns sehr gut gefallen. Danke Golo.

[DerRobert]

Klasse Tutorial. Hat Spaß gemacht, mitzumachen. Nur zur Info, ist aber vielleicht irelevant auf das Gesamt-Thema: Bei etwa 1:01:50 zeigst du, dass die Fakultät von 32 negativ ist, wegen Überlauf. Das fängt schon viel früher an, und zwar bei Fakultät von 13, die ist nämlch 6.227.020.800. ich hab nämlich als zweite funkiton die fakultät mit datentyp f64 implementiert. für 12! zeigt er bei i32 und f64 jeweils richtigerweise 479.001.600 an. bei 13! kommt als integer 1.932.053.504, und bei float richtigerweise 6.227.020.800 heraus. 😉

[christianhorauf]

Bisher die ausführlichste Einführung zu WASM im web. Zwischenzeitlich bin ich abgebogen und hab Fibonacci selber rekursiv implementiert. Das hat soviel Spaß gemacht, das ich nicht übel Lust hätte noch fizzbuzz in WASM zu schreiben. Aber da geht's dann ja los mit der Handhabe von Strings.
Lieber Golo, 🤩 machst du noch eine zweite WASM Folge für Fortgeschrittene? 🤗

Hi Godo,
Super Video und an dieser Stelle auch ein Danke für die super Erklärungen die du immer machst.
Eine Frage hätte ich jedoch, beim Umgang mit Strings würde ja man dann mit den einzelnen Chars als Int arbeiten, ist das richtig?

[thomasschorn]

DIN Seitenverhältnis ist 1 zu sqrt(2). Der Goldene Schnitt ist (lt Wikip) 1 zu (1+sqrt(5))/2

[thomas]

Wieder ein gutes Video! Wie du selbst schon sagtest: ist nur zum Begreifen der Sprache. Interessant fände ich die Unterschiede in den runtimes. Außerdem: wie denkst du über die Auswirkungen aufgrund der Unterschiede zwischen den Sprachen (bspw striktes Typsystem in wasm vs js Typsystem oder Garbage Collection und Memory Model in einer wasm runtime)? Ach ja: sieht man mit c++ dann die vtables in wat? Und was ist dann mit 3rd party Bibliotheken wie bspw boost? Muss man die nach wasm kompilieren?

[pinkeHelga]

Welche Möglichkeiten gibt es für Unit-Tests innerhalb von WASM, also internen Code ohne Export?

[pinkeHelga]

Sind die $Bezeichner "kostenlos", also nur für den Transpiler vorhanden? Oder erzeugt das auch Laufzeitressourcenkosten?

[lollo]

(WASM im Browser laden) Ich würde gerne OHNE Webserver / einfach als (lokales) file:// starten können.

[pinkeHelga]

Einfach top Video! Sieht auf den ersten Blick jedenfalls sehr unkompliziert aus und erinnert stark, wie der Name schon sagt, an Maschinencode-Assembler.
Wenn man Bibliotheken aus C/C++ übersetzt und dann in WASM optimieren/weiterverarbeiten möchte, wie würde man dann die Funktionen wiederfinden? Gibt es da Möglichkeiten, wenn man die nicht als Export kennzeichnet?

[pinkeHelga]

Kann man bei WebAssembly auch ähnlich wie in Assembler indirek/indiziert adressieren?
Und geht Stackzugriff auch ohne pop/shift?
Wie würdest Du den JS-Algo dann in WASM schreiben?:

const fibonacci = (n) =>
{
let numbers = [0, 1], idx = 0;

while(n-- >0)
numbers[idx ^= 1] = numbers[0] + numbers[1];

return numbers[idx];
}

[itvbfk]

Kann es sein, dass die Fakultät von 30 und 31 falsch berechnet wird?
zum Vergleich: 
30!
31!:

irgendwie schräg..

[ahmadumar]

ne frage, wirst du die Beispiele mit TS und Rust vorfuehren?