Seite 2: Praxisnahes Fallbeispiel "MiracleList"

Inhaltsverzeichnis

MiracleList ist ein praxisnahes Fallbeispiel einer Single-Page-Web-Application zur Aufgabenverwaltung (Bild 3), das der Autor dieses Beitrags in seinen Büchern zu Blazor und Vue.js verwendet. Das Fallbeispiel zeigt viele User Experience-Aspekte moderner Webanwendungen, beispielsweise Responsive Webdesign, modale Dialoge, Drag&Drag , Kontextmenüs, Push-Nachrichten mit Toast-Benachrichtigungen sowie Progressive Web Apps.

Es gibt vier Implementierungen des MiracleList-Frontends mit verschiedenen Blazor-Varianten:

• MiracleList_BW: MiracleList mit Blazor WebAssembly (3-Tier, mit Zugriff auf die Daten über einen WebAPI-basierten Application Server)
• MiracleList_BS: MiracleList mit Blazor Server (2-Tier, mit Direktzugriff auf die Datenbank)
• MiracleList_BD: MiracleList mit Blazor Desktop in einer WPF-Rahmenanwendung (2-Tier mit Direktzugriff auf die Datenbank)
• MiracleList_BM: MiracleList mit Blazor MAUI (3-Tier mit Zugriff auf die Daten über einen WebAPI-basierten Application Server)

Diese vier Blazor-Implementierungen der MiracleList teilen sich eine gemeinsame Benutzeroberfläche, die in einer Razor Class Library realisiert ist. Im Architekturschaubild in Bild 4 zeigt die oberste Reihe die vier Kopfprojekte für die vier Blazor-Arten. Hier befinden sich der Startcode und der Anwendungszustand sowie eine Authentifizierungsklasse. Darunter folgen die gemeinsame Razor Class Library "MLBlazorRCL"sowie die 2-Tier/3-Tier-Abstraktion.

Vier Kopfprojekte für vier Blazor-Arten

Alle wesentlichen Razor Components der Anwendung stecken in der Razor Class Library MLRazorRCL. Für alle vier Blazor-Arten gibt es zusätzlich jeweils ein Kopfprojekt (siehe Bild 4), das diese Razor Class Library referenziert. In den Kopfprojekten gibt es jeweils folgende Inhalte:

• App.razor: Startkomponente der Blazor-Anwendung
• index.html beziehungsweise _Host.cshtml: HTML-Startseite, die die Blazor-Anwendung sowie (bei Bedarf) CSS- und eigene JavaScript-Dateien lädt
• AppState.cs: Eine Klasse, die komponentenübergreifende Daten verwaltet. Dazu gehören Konfigurationsdaten und der Anwendungszustand (insbesondere der angemeldete Benutzer).
• Ein Authentication State Provider für die Benutzeranmeldung und -abmeldung. MiracleList_BW und MiracleList_BM verwenden dabei eine gemeinsame Klasse MLAuthenticationStateProvider3Tier; ebenso verwenden MiracleList_BS und MiracleList_BD eine gemeinsame Klasse MLAuthenticationStateProvider2Tier. Diese gemeinsamen Klassen sind bewusst nicht in einer weitere DLL ausgelagert (um nicht noch mehr Projekte erzeugen zu müssen), sondern das Code Sharing erfolgt durch Verlinkung in den Projektdateien (siehe <Compile Include="…" Link=…"> in der .csproj-Datei).
• Optional können die Kopfprojekte zusätzliche Razor Components implementieren, die von den Razor Components in MLBlazorRCL an ausgewählten Stellen in die Oberfläche integriert werden. Das ist Export.razor. Diese Komponente realisiert einen Export von Aufgaben ins Dateisystem und das Generieren eines Microsoft Word-Dokuments bei MiracleList_BD und MiracleList_BM, wobei die Word-Dokumentengenerierung nur auf Windows möglich ist.