Blazor Hybrid-Apps: Web und Desktop vereint

05 Nov 2021 - Matthias Voigt

Blazor hat sich schnell zu einem beliebten Framework für die Entwicklung von Webanwendungen entwickelt. Mit der Einführung von Blazor Hybrid-Apps bietet Microsoft nun die Möglichkeit, Web- und Desktop-Anwendungen zu kombinieren. In diesem Artikel werfen wir einen Blick auf die Vorteile und die Implementierung von Blazor Hybrid-Apps.

Was sind Blazor Hybrid-Apps?

Blazor Hybrid-Apps ermöglichen es Entwicklern, eine einzige Codebasis zu verwenden, um sowohl Web- als auch Desktop-Anwendungen zu erstellen. Dies wird durch die Integration von Blazor in .NET MAUI (Multi-platform App UI) erreicht, das plattformübergreifende Anwendungen für Android, iOS, macOS und Windows unterstützt.

Vorteile von Blazor Hybrid-Apps

1. Wiederverwendbarer Code: Mit Blazor Hybrid-Apps können Entwickler denselben Code für Web- und Desktop-Anwendungen verwenden, was die Entwicklungszeit verkürzt und die Wartung vereinfacht.
2. Plattformunabhängigkeit: Blazor Hybrid-Apps können auf verschiedenen Plattformen ausgeführt werden, ohne dass spezifische Anpassungen erforderlich sind.
3. Modernes UI: Durch die Kombination von Blazor und .NET MAUI können Entwickler moderne, ansprechende Benutzeroberflächen erstellen.

Ein einfaches Blazor Hybrid-Projekt

Schritt 1: Projekt einrichten

Um ein Blazor Hybrid-Projekt zu erstellen, benötigst du Visual Studio 2022 und das .NET 6 SDK. Erstelle ein neues .NET MAUI-Projekt und füge Blazor-Komponenten hinzu.

Schritt 2: Blazor in .NET MAUI integrieren

Füge Blazor-Komponenten zu deinem .NET MAUI-Projekt hinzu, indem du eine neue Razor-Komponente erstellst:

// Main.razor
@page "/"

<h1>Hello, Blazor Hybrid!</h1>
<p>This is a Blazor component running in a .NET MAUI application.</p>

Schritt 3: BlazorWebView in die MAUI-App einfügen

Füge das BlazorWebView-Element zu deiner .NET MAUI-App hinzu, um die Razor-Komponenten anzuzeigen:

// MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourNamespace"
             xmlns:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Maui;assembly=Microsoft.AspNetCore.Components.WebView.Maui"
             x:Class="YourNamespace.MainPage">

    <blazor:BlazorWebView HostPage="wwwroot/index.html">
        <blazor:BlazorWebView.RootComponents>
            <blazor:RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
        </blazor:BlazorWebView.RootComponents>
    </blazor:BlazorWebView>

</ContentPage>

Schritt 4: App ausführen

Starte die Anwendung, um zu sehen, wie deine Blazor-Komponente innerhalb der .NET MAUI-App ausgeführt wird. Du kannst nun dieselbe Blazor-Komponente sowohl in einer Webanwendung als auch in einer Desktop-Anwendung verwenden.

Fazit

Blazor Hybrid-Apps bieten eine leistungsstarke Möglichkeit, plattformübergreifende Anwendungen zu erstellen, die sowohl im Web als auch auf dem Desktop ausgeführt werden können. Mit der Kombination von Blazor und .NET MAUI können Entwickler moderne, effiziente und wiederverwendbare Anwendungen erstellen. Es lohnt sich, diese neuen Möglichkeiten zu erkunden und in zukünftigen Projekten zu nutzen.

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