Strategie Wizards mit Blazor

Erstellt am: 25.05.2022

Entwicklung von einheitlichen Web-Anwendungen mit Blazor

Unterschiedliche Teams sollen ähnliche Wizards entwickeln, die jeweils bis zu 15 Formulare umfassen und ein einheitliches Design haben. Dieser Leitfaden beschreibt, wie man standardisierte Vorgaben definieren kann, um konsistente Ergebnisse zu gewährleisten, und wie man bestehende Frameworks oder eigene Frameworks nutzt.

Vorgehensweise und Vorgaben für die Teams

1. Zentrale Anforderungen definieren:

• Identifiziere gemeinsame Anforderungen an die Wizards (z. B. Design, Navigation, Validierung, Logik).
• Dokumentiere die Struktur der Wizards (z. B. mehrere Schritte mit validierbaren Formularfeldern).

2. UI/UX-Design abstimmen:

• Entwickle zentrale Designrichtlinien (z. B. Farben, Abstände, Schriftarten).
• Erstelle ein Design-System oder Style Guide mit wiederverwendbaren UI-Komponenten (z. B. für Formulare, Buttons, Fortschrittsanzeigen).

3. Wiederverwendbare Architektur festlegen:

• Definiere Standards für Architektur und Projektstruktur (z. B. Ordnerstruktur, Namenskonventionen).
• Entwickle eine Basiskomponente für Wizards, die spezialisiert erweitert werden kann.

4. Code-Richtlinien und Dokumentation:

• Erstelle Best Practices für die Programmierung mit Blazor (z. B. Code-Stil, Datenbindung).
• Biete Dokumentation und Beispielanwendungen als Vorlagen an.
• Definiere Muster für Fehlerbehandlung, Validierungen und State-Management.

5. Tooling und Fertigungshilfen:

• Stelle Vorlagen (Templates) für neue Projekte bereit (z. B. mit dotnet new).
• Automatisiere repetitive Aufgaben, wie die Code-Generierung.

Vorhandene Frameworks

Hier sind einige Frameworks, die Blazor-kompatibel sind und sich für die Entwicklung von Wizards und Formularen eignen:

1. Blazorise:

• UI-Komponentenbibliothek, unterstützt mehrere Design-Systeme (Bootstrap, Material Design).
• Enthält vorgefertigte Formularelemente und Standard-Layouts.
• https://blazorise.com[Blazorise Website]

2. MudBlazor:

• UI-Framework auf Basis von Material Design.
• Bietet Wizard-Komponenten, Validierungen und modernes Design.
• https://mudblazor.com[MudBlazor Website]

3. Radzen Blazor Components:

• Umfassendes Framework mit freien und kommerziellen UI-Komponenten.
• Unterstützt Wizards, Widgets und Datenvisualisierung.
• https://blazor.radzen.com[Radzen Blazor Components Website]

4. Syncfusion Blazor Components:

• Robuste Sammlung von UI-Komponenten mit Fokus auf Formular-Handling und Workflow-Prozesse.
• https://www.syncfusion.com/blazor-components[Syncfusion Website]

5. Bootstrap Framework (mit Blazor):

• Einfache Integration über Drittanbieter-Bibliotheken, z. B. Blazored-Wrapper.
• Eignet sich bei weniger komplexen Anforderungen.

Eigenes Framework erstellen

Sollten bestehende Frameworks nicht alle Anforderungen abdecken, kann ein leichtgewichtiges eigenes Framework entwickelt werden:

Schritte zur Entwicklung eines eigenen Frameworks

1. Definition von Basiskomponenten:

• Entwickle wiederverwendbare Basiskomponenten für:
• Wizards: Zentrale Logik mit Navigation und mehreren Schritten.
• Formulare: Eingabefelder, Validierungen und dynamisch generierbare Felder.
• Navigationselemente: Fortschrittsanzeigen, Tabs oder Buttons.
• Nutze generische Methoden zur flexiblen Erweiterung von Formularen und Validierungen.

2. State-Verwaltung vereinheitlichen:

• Implementiere zentrales State-Management mit Dependency Injection oder Stores (z. B. Fluxor).
• Lege Schnittstellungen für Daten zwischen Formularschritten fest.

3. Theming und Design:

• Erstelle ein zentrales CSS- oder SCSS-Theme für alle Komponenten.
• Unterstütze Multiple-Themes (z. B. Dunkel- und Hellmodus).

4. Zusätzliche Funktionen einbauen:

• Formular-Builder: Dynamische Erstellung von Formularen aus JSON oder Konfigurationen.
• Validierungs-Framework: Definiere Regeln für Validierungen (z. B. FluentValidation).
• Internationalisierung: Integration für Übersetzungen (z. B. mit IStringLocalizer).

5. Verbreitung und Wartung:

• Veröffentliche das Framework als NuGet-Bibliothek.
• Schreibe ausführliche Anleitungen und Wartungsrichtlinien.

=== Wizard-Beispiel in C# mit Blazor

ist ein Beispiel für einen einfachen Wizard:

@using System.ComponentModel.DataAnnotations;

<WizardBase>
    <WizardStep Title="Persönliche Daten">
        <EditForm Model="@personalData" OnValidSubmit="@HandleFirstStep">
            <DataAnnotationsValidator />
            <ValidationSummary />
            <label for="name">Name</label>
            <InputText id="name" @bind-Value="personalData.Name" />
            <span>@(context.GetError(nameof(personalData.Name)))</span>
            <button type="submit">Weiter</button>
        </EditForm>
    </WizardStep>
    <WizardStep Title="Zusammenfassung">
        <h3>Vielen Dank!</h3>
    </WizardStep>
</WizardBase>

@code {
    private PersonalData personalData = new();

    private void HandleFirstStep()
    {
        Console.WriteLine("Daten aufgenommen");
    }

    public class PersonalData
    {
        [Required]
        [StringLength(50)]
        public string Name { get; set; }
    }
}

Mit WizardBase und WizardStep können weitere Wizards auf derselben Basis aufgebaut werden.

Fazit

Für die konsistente Entwicklung von Wizards bietet es sich an, entweder bestehende Frameworks wie MudBlazor oder Blazorise zu verwenden oder ein eigenes Framework zu entwickeln. Eine gute Dokumentation, vorgefertigte Templates und wiederverwendbare Komponenten stellen sicher, dass verschiedene Teams einheitlich arbeiten und schnell Ergebnisse erzielen können. Das Framework kann auf langfristige Wiederverwendung und Erweiterungsmöglichkeiten ausgelegt werden.

#Blazor #Design #Development