Ziele, Schlüsselkonzepte und Anwendungsfälle

Haben Sie sich jemals gefragt, welche grundlegenden Ideen und Einsatzbereiche hinter WASM stecken? Falls nicht, sind Sie hier genau richtig!

WebAssembly (WASM) stellt eine neue, niedrigschwellige Programmiersprache dar, die es ermöglicht, im Web eine nahezu native Performance zu erreichen.

In „WebAssembly für Einsteiger – Teil 1“ haben wir WASM aus der Perspektive eines Neulings betrachtet und dessen Definition sowie Grenzen erläutert. Zusätzlich haben wir uns mit den WebAssembly-Funktionen, der WASM-Roadmap und der Interaktion zwischen JavaScript und WebAssembly befasst, wobei wir die Zusammenarbeit und nicht den Wettbewerb in den Vordergrund gestellt haben.

In diesem Beitrag beleuchten wir WebAssembly detaillierter, indem wir die Ziele, Hauptkonzepte und Anwendungsfälle von WASM untersuchen. Wir werfen auch einen Blick auf einige faszinierende Projekte, die auf dieser Technologie basieren.

Lassen Sie uns beginnen.

Ziele von WebAssembly

Um die Kernkonzepte von WebAssembly zu begreifen, müssen wir uns zunächst mit den Zielen auseinandersetzen, die diese Technologie verfolgt. Zu diesen Zielen gehören:

• Die Fähigkeit, die vorhandene Hardware optimal zu nutzen, indem ein binäres Format verwendet wird, das eine schnelle Ladezeit und geringe Dateigröße ermöglicht. Einfach ausgedrückt, verwendet WASM einen abstrakten Syntaxbaum (AST) im Binärformat, der eine zügige Kompilierung und Ausführung unterstützt. Durch diesen Ansatz kann WASM auf diversen Geräten, einschließlich IoT, Web und Mobilgeräten, laufen.
• Das Bestreben von WASM ist es nicht, die bestehende Webplattform zu verändern oder gar zu ersetzen. Dieser Ansatz ermöglicht es, WebAssembly problemlos in das aktuelle und zukünftige Web zu integrieren. Zudem ist eine nahtlose Zusammenarbeit mit JavaScript gegeben, einschließlich der parallelen Ausführung oder der synchronen Aufrufe aus JavaScript.
• Die Einhaltung von Sicherheitsrichtlinien und der Same-Origin-Policy wird sichergestellt.
• Entwickler sollen die Möglichkeit haben, ihre Lösungen so zu gestalten, dass sie auch außerhalb des Browsers eingesetzt werden können.
• Darüber hinaus wird ein menschenlesbares Textformat bereitgestellt, das es Entwicklern ermöglicht, effizient mit dem WebAssembly-Quellcode zu arbeiten.

Kernkonzepte von WebAssembly

Im Inneren folgt WebAssembly im Wesentlichen diesen Schritten:

• Zunächst wird Code in einer statisch typisierten Programmiersprache mit definierten Datentypen verfasst.
• Anschließend wird ein vorkompiliertes WASM-Modul erzeugt und der Code an den Compiler der Engine übergeben.
• Der oben genannte Schritt stellt sicher, dass WASM die Analyse überspringt und der Code für die Wiedergabe im Webbrowser vorbereitet wird.

Die zentralen Konzepte von WebAssembly, die bei der Ausführung im Webbrowser relevant sind, umfassen:

• Speicher: Die Speicherverwaltung in WebAssembly erfolgt durch Low-Level-Speicherzugriffsanweisungen. Technisch gesehen ist der Speicher ein in der Größe veränderbarer ArrayBuffer und enthält ein Array von Speicher-Bytes.
• Modul: Das Modul in WebAssembly ist kompilierter, ausführbarer Computercode. Da es zustandslos ist, kann es vom Webbrowser kompiliert und zwischen Fenstern und Workern geteilt werden. Es speichert und deklariert Importe und Exporte, zusätzlich zu den Funktionen, Tabellen, Typen, globalen Variablen und dem Speicher.
• Tabelle: Eine Tabelle beinhaltet alle Referenzen und Funktionen, die ein in der Größe veränderbares typisiertes Array verwenden. Dadurch wird die Notwendigkeit der Speicherung von Rohbytes im Speicher vermieden.
• Instanz: In WASM ist eine Instanz ein Modul, bei dem alle Zustände während der Laufzeit zusammengefasst sind. Diese Zustände umfassen Tabelle, Speicher und andere importierte Wertesätze.

Wichtige WASM-Konzepte

Als Webentwickler können Sie die JavaScript-API nutzen, um Module, Tabellen, Instanzen und Tabellen zu initialisieren und zu verwenden. Zudem können Sie JavaScript nutzen, um WASM-Exporte synchron innerhalb von JavaScript-Funktionen aufzurufen. Daher arbeitet JavaScript reibungslos mit WebAssembly zusammen, wodurch Sie WASM nutzen können, um performante Anwendungen im Browser zu entwickeln.

WASM-Objekte

Bei der Arbeit mit WebAssembly sind acht WASM-Objekte von Bedeutung. Diese Objekte sind:

• WebAssembly.Global – Das Global-Objekt ist eine globale Variableninstanz, die sowohl über WebAssembly.Module als auch über JavaScript zugänglich ist.
• WebAssembly.Module – Das Module-Objekt enthält den zustandslosen WASM-Code, der vorkompiliert ist.
• WebAssembly.Instance – WebAssembly.Instance ist die ausführbare, zustandsbehaftete Instanz von WebAssembly.Module.
• WebAssembly.Table – Das Table-Objekt enthält Funktionsreferenzen und dient als JavaScript-Wrapper.
• WebAssembly.CompileError – Das CompileError-Objekt beinhaltet alle Fehler, die während der Validierung und Dekodierung auftreten.
• WebAssembly.RuntimeError – Das RuntimeError-Objekt listet alle Fehler auf, die während der Laufzeit entstehen.
• WebAssembly.LinkError – Das LinkError-Objekt beinhaltet Fehler, die während der Modulinstanziierung auftreten.

WASM-Anwendungsfälle und Projekte

Wir wissen bereits, dass WebAssembly eine nahezu native Leistung im Webbrowser ermöglicht. Um jedoch wirklich zu verstehen, wo es eingesetzt werden kann, ist es wichtig, sich die konkreten Anwendungsfälle anzusehen. Nachfolgend sind einige der WASM-Anwendungsfälle aufgeführt.

Die Einsatzmöglichkeiten von WebAssembly erstrecken sich sowohl innerhalb als auch außerhalb des Browsers. Wenn Sie WASM beispielsweise im Browser verwenden möchten, stehen Ihnen viele Möglichkeiten offen:

• Video- oder Audiobearbeitung, wie zum Beispiel das ffmpegwasm-Projekt.
• Videospiele im Webbrowser, einschließlich anspruchsvoller, hochleistungsfähiger Spiele.
• Wissenschaftliche Visualisierung und Simulation
• Plattformemulation/-simulation wie DOSBox, MAME usw.
• Verschlüsselung
• Remotedesktop
• Entwicklungswerkzeuge

Anwendungsfälle

Aus allgemeiner Sicht gehören zu den überzeugenden Anwendungsfällen von WebAssembly:

• Die Möglichkeit, schnelleren Code zu schreiben, der die zugrunde liegende Hardware optimal nutzt.
• Darüber hinaus können Sie auch eine clientseitige Komprimierung durchführen, was zu kürzeren Ladezeiten und einer geringeren Bandbreitenbelastung führt. Der Client nutzt also seine CPU oder die Hardware, um zu komprimieren und zu dekomprimieren, wodurch Serverressourcen geschont werden.
• Darüber hinaus können Sie andere Programmiersprachen als JavaScript verwenden, um Code für das Web zu schreiben. Sie können beispielsweise Rust, C oder C++ nutzen, um hochperformanten Code für spezielle Aufgabenbereiche Ihrer Webanwendungen zu entwickeln.

Projekte

Betrachten wir einige praxisnahe Beispiele, sind die folgenden Projekte besonders erwähnenswert:

• Figma hat die Leistung seiner Webanwendung durch den Einsatz von WebAssembly deutlich verbessert. Sie konnten die Ladezeiten während der App-Initialisierung, des Renderns des Designs und sogar des Herunterladens von Designdateien reduzieren. Wie bereits erwähnt, eignet sich WebAssembly hervorragend zur Komprimierung. Figma nutzte WASM, um die Downloadgröße zu verringern.
• Pyodide: Ein weiteres spannendes WASM-Projekt ist Pyodide, das von Mozilla veröffentlicht wurde. Es ermöglicht Forschern, den wissenschaftlichen Python-Stack für WebAssembly zu kompilieren, einschließlich NumPy, SciPy, Scikit-learn usw., für den Browser. Pyodide bietet eine transparente Objektkonvertierung zwischen Python und JavaScript. Darüber hinaus können Entwickler Web-APIs mit Python verwenden.
• Brazor WebAssembly: Mit dem Brazor WebAssembly-Framework können Entwickler mit .NET einseitige, clientseitige und interaktive Web-Apps erstellen. Sie können diese Anwendungen mit der WebAssembly-basierten .NET-Laufzeit im Browser hosten. Über die JavaScript-APIs von WebAssembly erhalten Entwickler in ihrem .NET-Code Zugriff auf Browserfunktionen.

Quelle: Figma

Es gibt viele weitere bekannte und wertvolle Projekte, die WebAssembly nutzen, darunter Binaryen, Cheerp, Forest, Grain und andere.

Abschließende Gedanken

WebAssembly ist vielleicht nicht ganz einfach zu erlernen. Wenn Sie sich jedoch mit den Anwendungsfällen und Kernkonzepten auseinandersetzen, können Sie sein Potenzial klar erkennen.

Angesichts der spannenden Projekte, die derzeit realisiert werden, ist es der ideale Zeitpunkt, sich mit WebAssembly zu beschäftigen, insbesondere wenn Sie im Bereich der Webentwicklung tätig sind. Die Fähigkeit von WASM, auch außerhalb des Browsers eingesetzt zu werden, macht es zu einer ausgezeichneten Wahl für die Entwicklung von leistungsstarken Anwendungen.

Hat Ihnen dieser Artikel gefallen? Teilen Sie ihn gerne mit der Welt!