Einführung in Blazor WebAssembly

Freitag, 18. November 2022 - Matt

Blazor WebAssembly erlaubt es, Single-Page-Anwendungen vollständig in C# zu schreiben und im Browser auszuführen. Den umgekehrten Weg, dieselbe Oberfläche als Desktop-App, habe ich in Blazor Hybrid-Apps beschrieben. In diesem Artikel gebe ich eine Einführung in Blazor WebAssembly, erkläre seine Vorteile und zeige, wie man eine einfache Blazor WebAssembly-Anwendung erstellt.

Was ist Blazor WebAssembly?

Blazor WebAssembly ist ein Framework zur Erstellung von interaktiven Webanwendungen mit .NET und C#. Es verwendet WebAssembly, um .NET-Code im Browser auszuführen, was bedeutet, dass Entwickler ihre gesamte Anwendungslogik in C# schreiben können, ohne JavaScript verwenden zu müssen.

Vorteile von Blazor WebAssembly

Einheitliche Sprache: Da sowohl Client- als auch Servercode in C# geschrieben werden, können Entwickler eine einheitliche Sprache und Codebasis verwenden.
Wiederverwendbarkeit von .NET-Bibliotheken: Entwickler können bestehende .NET-Bibliotheken und -Tools wiederverwenden, was die Entwicklung beschleunigt und vereinfacht.
Leistung: WebAssembly bietet eine nahezu native Ausführungsgeschwindigkeit im Browser.
Sicherheit: Blazor WebAssembly läuft in einer sicheren Sandbox-Umgebung, ähnlich wie JavaScript.

Einrichtung einer Blazor WebAssembly-Anwendung

Schritt 1: .NET SDK installieren

Stelle sicher, dass das .NET SDK 3.1 oder höher installiert ist. Du kannst es von der offiziellen .NET-Website herunterladen.

Schritt 2: Blazor WebAssembly-Projekt erstellen

Erstelle ein neues Blazor WebAssembly-Projekt mit dem .NET CLI:

dotnet new blazorwasm -o BlazorApp
cd BlazorApp
code .

Schritt 3: Projektstruktur verstehen

Ein Blazor WebAssembly-Projekt besteht aus folgenden Hauptkomponenten:

Program.cs: Der Einstiegspunkt der Anwendung.
App.razor: Die Hauptkomponente der Anwendung.
wwwroot: Enthält statische Dateien wie HTML, CSS und JavaScript.
Pages: Enthält die Razor-Komponenten (Seiten) der Anwendung.

Schritt 4: Eine einfache Komponente erstellen

Erstelle eine neue Razor-Komponente namens HelloWorld.razor im Pages-Verzeichnis:

@page "/hello"
<h3>Hello, World!</h3>

<p>Welcome to your new Blazor WebAssembly app.</p>

Füge die neue Komponente zur Navigation in NavMenu.razor hinzu:

<li class="nav-item px-3">
    <NavLink class="nav-link" href="hello">
        <span class="oi oi-plus" aria-hidden="true"></span> Hello World
    </NavLink>
</li>

Schritt 5: Anwendung ausführen

Führe die Anwendung mit dem .NET CLI-Befehl dotnet run aus und öffne https://localhost:5001 in deinem Browser. Du solltest die neue “Hello World”-Seite in der Navigation sehen und darauf zugreifen können.

Fazit

Blazor WebAssembly nimmt einem JavaScript ab, nicht aber die Eigenheiten des Browsers. Man tauscht eine vertraute Sprache gegen eine spürbare Startzeit, weil die Runtime erst geladen werden muss. Für interne Anwendungen ist das meist verschmerzbar, für eine öffentliche Startseite eher nicht.

Für weitere Details und eine ausführliche Anleitung besuche die offizielle Microsoft-Dokumentation.

Der offizielle Einstieg: Blazor-Grundlagen.