.NET MAUI Blazor Hybrid

Prof. Dr. Robin Nunkesser

.NET MAUI Blazor Hybrid

Einführung

  • MAUI basiertes Cross-platform Entwicklungsframework für hybride Apps

Vorteile von .NET MAUI Blazor Hybrid

  • Gemeinsamer Code für Web und Mobile
  • Nutzung von Blazor-Komponenten in nativen Apps
  • Zugriff auf native APIs und Gerätefunktionen
  • Unterstützung für mehrere Plattformen (iOS, Android, Windows, macOS)

Architektur

  • .NET MAUI als Basis für plattformübergreifende UI
  • Blazor für die Web-Komponenten
  • Hybrid-Rendering: Kombination aus nativer und Web-Darstellung

Anwendungsfälle

  • Unternehmensanwendungen mit plattformübergreifender Unterstützung
  • Apps mit wiederverwendbaren Web-Komponenten
  • Migration bestehender Blazor-Webanwendungen zu mobilen Plattformen

Tutorials

Standardbeispiel

Tutorial

ToDo App

ToDo App

Agent-generated Example: MAUI Blazor Hybrid Todo

Kontext

  • Instructions: artifacts/consumers/education/artifacts-consumers-education.instructions.md
  • Prompt: Kurzvariante aus agent-workbench/prompts/recurring/agent-generated-education-example.md
  • Thema: .NET MAUI Blazor Hybrid — Todo-Anwendung
  • Kein manuelles Beispiel vorhanden → Agent-Beispiel ist Erstimplementierung

Architektur-Entscheidung

  • Kein MVVM: Blazor nutzt das Component Model (@bind, @inject, StateHasChanged) — kein XAML, kein ViewModel nötig
  • Kein Core/Infrastructure: Direkte Service-Schicht ausreichend
  • Services-Klassenbibliothek (BlazorHybrid.Services, TFM net10.0): TodoItem + TodoService — ermöglicht Referenz aus Test-Projekt ohne MAUI-TFM
  • MSTest-Tests (BlazorHybrid.Tests, TFM net10.0): 6 Tests gegen TodoService
  • DI: AddSingleton<TodoService>() — State wird über Blazor-Seiten hinweg geteilt

Projektstruktur

BlazorHybrid.sln
├── BlazorHybrid/               # MAUI Blazor Hybrid App (net10.0-android/ios/maccatalyst/windows)
│   ├── Components/Pages/Todo.razor
│   ├── Components/Layout/NavMenu.razor
│   └── MauiProgram.cs
├── BlazorHybrid.Services/      # Klassenbibliothek (net10.0)
│   ├── TodoItem.cs
│   └── TodoService.cs
└── BlazorHybrid.Tests/         # MSTest (net10.0)
    └── Test1.cs

Blazor Component Model vs. XAML-MVVM

  • XAML-MAUI: ViewModel mit [ObservableProperty], ICommand, x:DataType Compiled Bindings
  • Blazor Hybrid: Razor-Komponente mit @inject, @bind, @onclick, @foreach im @code-Block
  • Lehrpunkt: Derselbe Service (TodoService) kann beiden Ansätzen zugrunde liegen — der UI-Layer unterscheidet sich fundamental

Ergebnis

  • Build: Android 0 Fehler, Tests: 6/6 bestanden
  • Pfad: artifacts/consumers/education/csharp-maui-blazor-hybrid/