Die perfekte Architektur: So kombinieren Sie ein Blazor Project gekonnt mit einer Blazor Class Library!

In der dynamischen Welt der Webentwicklung ist es eine ständige Herausforderung, Anwendungen zu schaffen, die nicht nur funktional und performant sind, sondern auch langfristig wartbar, erweiterbar und skalierbar bleiben. Mit dem Aufkommen von Blazor hat Microsoft einen revolutionären Ansatz für die Erstellung interaktiver Web-UIs mit C# eingeführt, der es .NET-Entwicklern ermöglicht, das Beste aus ihrer bestehenden Expertise herauszuholen. Doch selbst mit einer so mächtigen Technologie kann ein unstrukturiertes Projekt schnell zu einem unübersichtlichen Monolithen werden, der schwer zu pflegen ist.

Hier kommt die **Blazor Class Library** ins Spiel – ein oft unterschätztes, aber unglaublich mächtiges Werkzeug, das die Art und Weise revolutionieren kann, wie Sie Ihre Blazor-Anwendungen konzipieren und entwickeln. Dieser Artikel führt Sie durch die Vorteile, die Implementierung und die Best Practices, um Ihre Blazor-Projekte mit Class Libraries in eine Architektur zu verwandeln, die den höchsten Standards an **Modularität**, **Wiederverwendbarkeit** und **Wartbarkeit** gerecht wird. Bereiten Sie sich darauf vor, Ihre Blazor-Entwicklung auf das nächste Level zu heben!

Warum eine Blazor Class Library – Die Grundpfeiler einer robusten Architektur

Bevor wir ins Detail gehen, lassen Sie uns klären, warum Blazor Class Libraries ein so essenzieller Bestandteil einer modernen Blazor-Architektur sind. Stellen Sie sich vor, Sie entwickeln eine große Anwendung oder mehrere Anwendungen, die ähnliche Funktionen oder UI-Elemente benötigen. Ohne eine geeignete Struktur müssten Sie Code kopieren und einfügen – ein Albtraum für die Wartung, der schnell zu Inkonsistenzen und Fehlern führt.

Eine **Blazor Class Library** (technisch oft als **Razor Class Library** bezeichnet, da sie Razor-Komponenten enthält) ist im Wesentlichen ein standardmäßiges .NET-Klassenbibliotheksprojekt, das jedoch Blazor-Komponenten, statische Assets (wie CSS und JavaScript), Shared Services, Models und andere logische Einheiten kapseln kann. Ihre Hauptvorteile sind:

• Modularisierung: Blazor Class Libraries ermöglichen es Ihnen, Ihre Anwendung in logische, voneinander unabhängige Module aufzuteilen. Jedes Modul kann eine spezifische Funktionalität oder eine Sammlung verwandter Komponenten bereitstellen. Das macht den Code übersichtlicher und leichter verständlich.
• Wiederverwendbarkeit: Dies ist vielleicht der größte Vorteil. Einmal entwickelte UI-Komponenten, Business-Logik oder Datenmodelle können in mehreren Blazor-Projekten (sei es Blazor Server, Blazor WebAssembly oder sogar .NET MAUI Blazor) wiederverwendet werden. Denken Sie an gemeinsame Designsysteme, Authentifizierungsmodule oder API-Clients.
• Wartbarkeit: Wenn Sie Änderungen an einer gemeinsam genutzten Komponente vornehmen müssen, tun Sie dies nur an einer zentralen Stelle – in der Class Library. Alle Projekte, die diese Bibliothek referenzieren, profitieren automatisch von den Updates. Dies reduziert den Aufwand und minimiert das Risiko von Fehlern.
• Skalierbarkeit: Große Anwendungen oder Teams profitieren enorm. Verschiedene Teams können an unterschiedlichen Class Libraries arbeiten, ohne sich gegenseitig in die Quere zu kommen. Dies fördert parallele Entwicklung und beschleunigt den Entwicklungszyklus.
• Konsistenz: Durch die zentrale Bereitstellung von Komponenten und Stilen gewährleisten Sie eine einheitliche Benutzererfahrung und ein konsistentes Look-and-Feel über alle Ihre Anwendungen hinweg.
• Testbarkeit: Einzelne Class Libraries sind einfacher isoliert zu testen. Sie können Unit-Tests für Komponenten und Services innerhalb der Bibliothek schreiben, was die Qualität des Codes erheblich verbessert.

Kurz gesagt: Eine Blazor Class Library ist der Schlüssel zu einer **sauberen, effizienten und zukunftsfähigen Blazor-Architektur**.

Anatomie einer Perfekten Blazor-Architektur

Eine perfekt strukturierte Blazor-Anwendung besteht in der Regel aus einem Haupt-Blazor-Projekt (dem Host-Projekt) und mehreren spezialisierten Blazor Class Libraries. Die Aufteilung hängt von der Größe und Komplexität Ihrer Anwendung ab, aber typische Kategorien für Class Libraries umfassen:

• `[YourApp].UI.Components` (oder `[YourApp].Shared.UI`): Diese Bibliothek beherbergt wiederverwendbare Blazor-Komponenten, die keine spezifische Geschäftslogik enthalten, sondern generische UI-Elemente wie Schaltflächen, Formulareingaben, Ladeindikatoren, Navigationsmenüs oder komplexe Layout-Strukturen. Hier können auch gemeinsame CSS-Dateien oder JavaScript-Interoperabilitätsdateien liegen.
• `[YourApp].Application.Services` (oder `[YourApp].Domain.Services`): Diese Bibliothek ist für die Geschäftslogik und die Interaktion mit externen Diensten zuständig. Hier finden Sie Services für API-Aufrufe, Datenmanipulation, Authentifizierung, Autorisierung und andere domänenspezifische Operationen. Diese Services werden oft über **Dependency Injection** in die Komponenten im Hauptprojekt oder in den UI-Komponentenbibliotheken bereitgestellt.
• `[YourApp].Shared.Models` (oder `[YourApp].Domain.Models`): Eine Bibliothek speziell für geteilte Datenstrukturen, DTOs (Data Transfer Objects), Enums und möglicherweise Validierungsregeln. Diese Modelle werden sowohl von den Services als auch von den UI-Komponenten verwendet, um Daten zwischen den Schichten zu übertragen und darzustellen.
• `[YourApp].Utilities` (oder `[YourApp].Common`): Für allgemeine Hilfsfunktionen, Erweiterungsmethoden, Konvertierungshilfen oder andere nicht-domänenspezifische Dienstprogramme, die in verschiedenen Teilen der Anwendung benötigt werden.
• `[YourApp].Themes` (optional): Wenn Sie eine komplexere Theming-Strategie verfolgen, könnten Sie eine separate Bibliothek für globale Stildefinitionen, SCSS-Variablen oder Blazor-spezifische Theming-Komponenten in Erwägung ziehen.

Diese Trennung schafft klare Verantwortlichkeiten und minimiert Abhängigkeiten zwischen den Modulen, was zu einer **sauberen Schichtentrennung** führt.

Praktische Schritte: So erstellen und integrieren Sie eine Blazor Class Library

Nun gehen wir ins Eingemachte und erstellen eine Blazor Class Library sowie binden diese in ein bestehendes Blazor-Projekt ein.

Schritt 1: Erstellen einer Blazor Class Library

Sie können dies entweder über Visual Studio oder über die .NET CLI tun.

Via Visual Studio:

1. Öffnen Sie Ihre Lösung (oder erstellen Sie eine neue).
2. Rechtsklick auf Ihre Lösung im Projektmappen-Explorer -> „Hinzufügen” -> „Neues Projekt…”.
3. Suchen Sie nach „Razor Class Library” (oder „Blazor Class Library” in neueren Versionen).
4. Wählen Sie die Vorlage aus und klicken Sie auf „Weiter”.
5. Geben Sie dem Projekt einen aussagekräftigen Namen, z.B. `MyApp.UI.Components` und klicken Sie auf „Erstellen”.

Via .NET CLI:
Navigieren Sie zum Root-Verzeichnis Ihrer Lösung im Terminal und führen Sie aus:
„`bash
dotnet new razorclasslib -n MyApp.UI.Components
„`
Danach fügen Sie das Projekt Ihrer Lösung hinzu:
„`bash
dotnet sln add MyApp.UI.Components/MyApp.UI.Components.csproj
„`

Das neu erstellte Projekt enthält standardmäßig:

• `Component1.razor` und `Component1.razor.cs`: Eine Beispiel-Razor-Komponente.
• `wwwroot/exampleJsInterop.js`: Ein Beispiel für JavaScript-Interoperabilität.
• `wwwroot/background.png` und `wwwroot/component1.css`: Beispiel für statische Assets.
• `_Imports.razor`: Für globale `@using` Direktiven innerhalb der Bibliothek.

Schritt 2: Komponenten in der Class Library entwickeln

Entfernen Sie die Beispielkomponenten und erstellen Sie Ihre eigenen. Lassen Sie uns eine einfache `CustomButton.razor`-Komponente erstellen:

„`csharp


@ChildContent

@code {
[Parameter]
public string ButtonCssClass { get; set; } = „btn btn-primary”;

[Parameter]
public RenderFragment ChildContent { get; set; }

[Parameter]
public EventCallback OnClickCallback { get; set; }
}
„`

Für wiederverwendbare Services, erstellen Sie eine Klasse in der Bibliothek:

„`csharp
// MyApp.Application.Services/WeatherService.cs
using System.Net.Http;
using System.Text.Json;
using System.Threading.Tasks;

namespace MyApp.Application.Services
{
public class WeatherForecast
{
public DateTime Date { get; set; }
public int TemperatureC { get; set; }
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
public string Summary { get; set; }
}

public class WeatherService
{
private readonly HttpClient _httpClient;

public WeatherService(HttpClient httpClient)
{
_httpClient = httpClient;
}

public async Task GetForecastAsync()
{
// In einem realen Szenario hier Ihre API-URL
return await _httpClient.GetFromJsonAsync(„/sample-data/weather.json”);
}
}
}
„`

Schritt 3: Statische Assets hinzufügen und nutzen

Statische Dateien wie CSS, JavaScript und Bilder, die Sie in Ihrer Class Library ablegen (im `wwwroot`-Ordner), werden automatisch in das Hauptprojekt eingebettet. Um sie zu referenzieren, verwenden Sie einen speziellen Pfad: `_content//`.

Zum Beispiel, wenn Sie `MyApp.UI.Components/wwwroot/css/custom.css` haben, würden Sie es in Ihrer Blazor-Host-App so referenzieren:

„`html
„`

Schritt 4: Referenzierung im Hauptprojekt

Damit Ihr Haupt-Blazor-Projekt die Komponenten und Services der Class Library nutzen kann, müssen Sie eine Referenz hinzufügen.

Via Visual Studio:

1. Rechtsklick auf Ihr Haupt-Blazor-Projekt im Projektmappen-Explorer.
2. Wählen Sie „Hinzufügen” -> „Projektverweis…”.
3. Wählen Sie Ihre `MyApp.UI.Components` und `MyApp.Application.Services` Projekte aus der Liste aus und klicken Sie auf „OK”.

Via .NET CLI:
Navigieren Sie zum Verzeichnis Ihres Haupt-Blazor-Projekts im Terminal und führen Sie aus:
„`bash
dotnet add reference ../MyApp.UI.Components/MyApp.UI.Components.csproj
dotnet add reference ../MyApp.Application.Services/MyApp.Application.Services.csproj
„`

Schritt 5: Nutzung der Komponenten und Services

Nachdem Sie die Referenzen hinzugefügt haben, können Sie Ihre Bibliothekselemente verwenden.

Komponenten nutzen:
Um die `CustomButton`-Komponente zu nutzen, fügen Sie die `@using`-Direktive für den Namespace der Komponente (oder der Bibliothek) zu `_Imports.razor` Ihres Hauptprojekts hinzu, oder direkt in der Razor-Datei:

„`csharp

@using MyApp.UI.Components

@using MyApp.UI.Components

Dies ist ein Button aus der Class Library:

Klicken Sie mich!

@code {
private void HandleButtonClick()
{
Console.WriteLine(„Button geklickt!”);
}
}
„`

Services über Dependency Injection nutzen:
Fügen Sie Ihre Services in der `Program.cs` Ihres Hauptprojekts (oder `Startup.cs` bei Blazor Server) zur Dependency Injection hinzu.

„`csharp
// Program.cs des Hauptprojekts
using MyApp.Application.Services; // Wichtig: Namespace des Services

var builder = WebApplication.CreateBuilder(args);

// Fügen Sie Services zum DI-Container hinzu
builder.Services.AddHttpClient(client =>
{
// Basis-URL für Ihre API, oder leere HttpClient, wenn Pfade absolut sind
client.BaseAddress = new Uri(builder.Configuration[„BackendApi:BaseUrl”] ?? „https://localhost:7001”);
});

builder.Services.AddScoped(); // Beispiel für einen Scoped Service
// … weitere Konfiguration …

var app = builder.Build();
// …
app.Run();
„`

Danach können Sie den Service in jeder Komponente Ihres Hauptprojekts injizieren:

„`csharp

@page „/fetchdata”
@using MyApp.Application.Services // Namespace des Services
@inject WeatherService WeatherService

Wettervorhersage

@if (forecasts == null)
{

Wird geladen…

}
else
{

}

}

@code {
private WeatherForecast[]? forecasts;

protected override async Task OnInitializedAsync()
{
forecasts = await WeatherService.GetForecastAsync();
}
}
„`

Best Practices und Advanced Konzepte

Um das Beste aus Ihrer Architektur herauszuholen, sollten Sie einige Best Practices beachten:

• Klare Benennung (Naming Conventions): Verwenden Sie konsistente und aussagekräftige Namen für Ihre Bibliotheken, die deren Zweck klar widerspiegeln (z.B. `CompanyName.ProductName.Feature.LibraryType`).
• Minimale Abhängigkeiten: Jede Class Library sollte so unabhängig wie möglich sein. Vermeiden Sie zirkuläre Abhängigkeiten. Wenn eine Bibliothek A eine Bibliothek B benötigt, sollte B A nicht benötigen.
• Fokus und Kohäsion: Jede Bibliothek sollte eine klar definierte Aufgabe haben und eng zusammengehörige Funktionalitäten enthalten (**Single Responsibility Principle**). Eine UI-Komponentenbibliothek sollte keine Business-Logik enthalten, die nicht direkt die UI betrifft.
• Versionsverwaltung: Wenn Sie Class Libraries in verschiedenen Projekten oder Organisationen teilen, ist es ratsam, diese als **NuGet-Pakete** zu veröffentlichen. Das erleichtert die Versionsverwaltung und Verteilung.
• Theming und Styling: Nutzen Sie Blazor’s CSS Isolation (`Component.razor.css`) innerhalb Ihrer Komponentenbibliotheken, um Stile zu kapseln. Für globale Themen können Sie zentrale CSS-Dateien in einer dedizierten `Themes`-Bibliothek ablegen.
• Teststrategie: Schreiben Sie dedizierte Unit-Tests für die Komponenten und Services innerhalb Ihrer Class Libraries. Dies stellt sicher, dass Ihre wiederverwendbaren Bausteine robust sind. Tools wie bUnit sind hierfür hervorragend geeignet.
• Monorepo vs. Multirepo: Für kleinere bis mittlere Anwendungen kann ein **Monorepo** (alle Projekte in einem einzigen Git-Repository) die Verwaltung erleichtern. Bei sehr großen, verteilten Anwendungen könnten separate Repositories für jede Bibliothek sinnvoll sein.

Herausforderungen und Lösungen

Auch wenn Class Libraries immense Vorteile bieten, gibt es einige Aspekte, die man beachten sollte:

• Initialer Overhead: Der Aufbau einer gut strukturierten Architektur erfordert anfangs etwas mehr Planung und Projektmanagement. Die Lösung ist, diesen Overhead als Investition in die langfristige Gesundheit Ihres Projekts zu sehen. Die Gewinne an Wartbarkeit und Skalierbarkeit überwiegen bei weitem.
• Komplexität: Mehr Projekte in der Lösung können die Übersichtlichkeit beeinträchtigen. Eine konsequente Benennung und eine logische Gruppierung im Projektmappen-Explorer (z.B. durch Solution Folders) können hier Abhilfe schaffen.
• Abhängigkeitsmanagement: Das Hinzufügen vieler Referenzen kann zu Verwirrung führen. Ein Tool wie NuGet ist hier unerlässlich, insbesondere bei der Nutzung von externen oder organisationsweiten Bibliotheken. Stellen Sie sicher, dass Sie ein klares Verständnis davon haben, welche Bibliothek von welcher anderen abhängt.

Fazit

Die Kombination eines Blazor-Projekts mit einer oder mehreren Blazor Class Libraries ist nicht nur eine gute Idee, sondern eine **fundamentale Best Practice** für jeden ernsthaften Blazor-Entwickler. Sie legt das Fundament für eine **robuste, modulare und wartbare Anwendung**, die mit Ihren Anforderungen wachsen kann. Durch die konsequente Trennung von Belangen, die Maximierung der **Wiederverwendbarkeit** und die Einhaltung bewährter Architekturentwürfe schaffen Sie ein System, das sowohl Entwickler als auch Benutzer gleichermaßen schätzen werden.

Investieren Sie Zeit in die Strukturierung Ihrer Blazor-Anwendungen mit Class Libraries. Es ist eine Investition, die sich in kürzeren Entwicklungszeiten, höherer Codequalität und einer geringeren Fehleranfälligkeit mehr als bezahlt macht. Beginnen Sie noch heute damit, Ihre Blazor-Projekte zu modularisieren, und erleben Sie die wahre Kraft einer perfekt orchestrierten Architektur!