Arbeiten mit WebAssembly und C#: von A bis Z in .NET

Einleitung: Warum WebAssembly die Spielregeln für C#-Entwickler ändert

Lange Zeit war die Webentwicklung ein Monopol von JavaScript. Mit dem Aufkommen von WebAssembly (Wasm) hat sich die Situation jedoch grundlegend geändert. Jetzt können C#-Entwickler ihren Code in ein binäres Format kompilieren, das im Browser mit nahezu nativer Geschwindigkeit ausgeführt wird. Dies eröffnet enorme Möglichkeiten: von der Portierung schwerer Algorithmen bis hin zur Erstellung vollwertiger SPA-Anwendungen mit Blazor.

In diesem Artikel werden wir untersuchen, wie WebAssembly in Verbindung mit C# und .NET funktioniert, die wichtigsten Tools (Blazor, Wasmtime, Mono) betrachten und praktische Beispiele schreiben. Am Ende können Sie selbstständig C#-Code im Browser oder auf dem Server mit Wasm ausführen.

Grundlagen von WebAssembly und seine Integration mit C#

Was ist WebAssembly in einfachen Worten

WebAssembly ist ein Low-Level-Bytecode, der in einer virtuellen Maschine des Browsers ausgeführt wird. Es ersetzt JavaScript nicht, sondern arbeitet mit ihm zusammen. Die Hauptvorteile:

\n
• Leistung: Binärcode wird 30-50% schneller ausgeführt als JS.
\n
• Sicherheit: Isolierte Ausführungsumgebung.
\n
• Portabilität: Dieselbe .wasm-Datei funktioniert in Chrome, Firefox, Safari und Edge.
\n

Für C# wird die WebAssembly-Ökosystem durch mehrere Projekte realisiert: Blazor WebAssembly (Framework für UI), Mono Wasm Runtime (führt IL-Code aus) und Wasmtime (für serverseitige Szenarien).

Wie C# in WebAssembly kompiliert wird

Der Prozess sieht so aus:

\n
1. Sie schreiben Code in C#.
\n
2. Der Compiler Roslyn wandelt ihn in IL (Intermediate Language) um.
\n
3. Die Mono Runtime (oder NativeAOT) übersetzt IL in WebAssembly.
\n
4. Der Browser lädt die .wasm-Datei und führt sie aus.
\n

Wichtig: Es gibt zwei Ansätze – Interpretation über Mono (langsamer, aber einfacher) und AOT-Kompilierung (schneller, erfordert aber Konfiguration).

Praxis: Drei Möglichkeiten, C# in WebAssembly auszuführen

1. Blazor WebAssembly – für Weboberflächen

Blazor ermöglicht es, den Client-Teil in C# statt JavaScript zu schreiben. Der gesamte UI-Code und die Geschäftslogik werden in Wasm kompiliert.

Beispiel einer einfachen Komponente:

@page "/counter"\n<h3>Zähler: @currentCount</h3>\n<button @onclick="IncrementCount">+1</button>\n\n@code {\n    private int currentCount = 0;\n\n    private void IncrementCount()\n    {\n        currentCount++;\n    }\n}

Dieser Code wird im Browser ausgeführt. Blazor lädt automatisch die Mono Wasm Runtime und Ihre .wasm-Datei. Erstellen Sie zum Start ein Projekt:

dotnet new blazorwasm -o MyBlazorApp\ncd MyBlazorApp\ndotnet run

Ergebnis: Eine vollwertige SPA-Anwendung ohne eine einzige Zeile JavaScript.

2. Direkte Kompilierung in .wasm mit NativeAOT

Wenn Sie eine bestimmte Funktion (kein UI) ausführen müssen, verwenden Sie NativeAOT – es kompiliert C# direkt in natives WebAssembly ohne Mono Runtime.

Schritte:

\n
1. Installieren Sie das SDK .NET 8+ und das Workload: dotnet workload install wasm-tools
\n
2. Erstellen Sie eine Konsolenanwendung:
\n

dotnet new console -n WasmDemo\ncd WasmDemo

\n
3. Ändern Sie die .csproj-Datei, indem Sie die Wasm-Unterstützung hinzufügen:
\n

<PropertyGroup>\n    <OutputType>Exe</OutputType>\n    <TargetFramework>net8.0</TargetFramework>\n    <RuntimeIdentifier>browser-wasm</RuntimeIdentifier>\n    <UseNativeAot>true</UseNativeAot>\n</PropertyGroup>

\n
4. Schreiben Sie den Code:
\n

using System;\n\npublic class Program\n{\n    public static void Main()\n    {\n