Blazor Hybrid-Apps: Web und Desktop vereint

Blazor Hybrid-Apps: Web und Desktop vereint

- Matt

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 ist dann interessant, wenn eine Weboberfläche schon existiert und daneben eine Desktop- oder Mobil-App entstehen soll. Gerendert wird weiterhin HTML in einer WebView. Man bekommt also keine native Oberfläche, sondern eine geteilte.

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