CRUD slices

CRUD sounds standard.

A bit of GET.

A bit of POST.

A bit of PUT.

A bit of DELETE.

Done.

In real frontends, that’s often exactly where messy code begins.

Because reading, creating, editing, and deleting aren’t just four HTTP methods. They’re four different domain flows with different responsibilities.

A retrieve flow builds a model for display.

A create flow sends a new intent into the system.

An update flow changes something that already exists.

A delete flow is a destructive decision.

These articles show how to structure those flows as vertical slices, from the API boundary all the way to the component.

---

What a slice is

A slice is not a layer.

A layer is a horizontal tier:

all components
all stores
all services
all mappers

A slice follows one domain flow vertically through the application.

It contains exactly the files that belong together to implement one domain operation:

API boundary
  → mapper
  → entity / command
  → store / event handler
  → facade
  → component

The slice answers concrete questions:

• What is the component allowed to know?
• Where does a ViewModel come from?
• Where does a command come from?
• Where does a DTO get built?
• Where does something react to success or error?
• Where does UI logic end and infrastructure begin?

The point isn’t to create as many folders as possible.

The point is to make responsibility visible.

---

The four basic flows

Retrieve

Loading data isn’t a GET in the template.

A retrieve slice protects the UI from API leakage and builds a ViewModel for display.

Retrieve Slice: Loading data without component logic

Create

Creating data isn’t a POST from the component.

A create slice sends an intent, executes a command, and lets independent reactions to success or error emerge.

Create Slice: Writing as a command flow

Update

Editing data isn’t a form that happens to submit a DTO.

An update slice separates form state, change intent, API DTO, and follow-up actions.

Update Slice: Form state is not a DTO

Delete

Deleting data isn’t a quick button with http.delete().

A delete slice treats deletion as a destructive domain decision and keeps reload, notification, and error reactions decoupled.

Delete Slice: Deletion is a domain decision

---

Goal of the series

These articles are not a pattern catalog.

They show concrete implementation slices.

Not perfect for every project.

Not dogma.

They are working material for teams that want to structure frontend code deliberately rather than merely make it work.