CRUD-Slices
CRUD klingt nach Standard.
Ein bisschen GET.
Ein bisschen POST.
Ein bisschen PUT.
Ein bisschen DELETE.
Fertig.
In echten Frontends ist genau das oft der Anfang von unübersichtlichem Code.
Denn Lesen, Schreiben, Bearbeiten und Löschen sind nicht einfach vier HTTP-Methoden. Es sind vier unterschiedliche fachliche Flows mit unterschiedlichen Verantwortungen.
Ein Retrieve-Flow baut ein Modell für Anzeige.
Ein Create-Flow sendet eine neue Absicht ins System.
Ein Update-Flow verändert etwas Bestehendes.
Ein Delete-Flow ist eine destruktive Entscheidung.
Diese Artikel zeigen, wie solche Flows konkret im Code geschnitten werden können — als vertikale Slices von der API-Grenze bis zur Komponente.
Was ein Slice ist
Abschnitt betitelt „Was ein Slice ist“Ein Slice ist kein Layer.
Ein Layer ist eine horizontale Schicht:
alle Komponentenalle Storesalle Servicesalle MapperEin Slice ist ein vertikaler Schnitt durch einen fachlichen Flow.
Er enthält genau die Dateien, die zusammengehören, um eine fachliche Operation umzusetzen:
API-Grenze → Mapper → Entity / Command → Store / Event Handler → Facade → KomponenteDer Slice beantwortet konkrete Fragen:
- Was darf die Komponente wissen?
- Wo entsteht ein ViewModel?
- Wo entsteht ein Command?
- Wo wird ein DTO gebaut?
- Wo wird auf Success oder Error reagiert?
- Wo endet UI-Logik und wo beginnt Infrastruktur?
Es geht nicht darum, möglichst viele Ordner zu erzeugen.
Es geht darum, Verantwortung sichtbar zu machen.
Die vier Grundflows
Abschnitt betitelt „Die vier Grundflows“Retrieve
Abschnitt betitelt „Retrieve“Daten laden ist kein GET im Template.
Ein Retrieve-Slice schützt die UI vor API-Leakage und baut ein ViewModel für die Anzeige.
Retrieve Slice: Daten laden ohne Komponentenlogik
Daten anlegen ist kein POST aus der Komponente.
Ein Create-Slice sendet einen Intent, führt einen Command aus und lässt unabhängige Reaktionen auf Success oder Error entstehen.
Create Slice: Schreiben als Command Flow
Daten bearbeiten ist kein Formular, das zufällig ein DTO abschickt.
Ein Update-Slice trennt Form-State, Änderungsabsicht, API-DTO und Folgeaktionen.
Update Slice: Formularzustand ist kein DTO
Daten löschen ist kein schneller Button mit http.delete().
Ein Delete-Slice behandelt Löschen als destruktive fachliche Entscheidung und hält Reload, Notification und Fehlerreaktionen entkoppelt.
Delete Slice: Löschen ist eine fachliche Entscheidung
Ziel der Serie
Abschnitt betitelt „Ziel der Serie“Diese Artikel sind kein Pattern-Katalog.
Sie zeigen konkrete Code-Schnitte.
Nicht perfekt für jedes Projekt.
Nicht als Dogma.
Sondern als Arbeitsmaterial für Teams, die Frontend-Code nicht nur schreiben, sondern bewusst schneiden wollen.