What "Vertical Slice" Means
A vertical slice is a thin piece of the feature that goes all the way through your app — a bit of UI, a bit of logic, a bit of data — instead of building one whole layer at a time.
Tempting but wrong approach (horizontal):
- Build the entire schema.
- Then build all the logic.
- Then build the whole UI.
You can't run anything until all three are done, so you can't catch problems early.
Better approach (vertical):
- Step 1: a button that does the simplest possible version of the thing, with fake data.
- Step 2: make it use real data.
- Step 3: handle the cases.
The difference is easiest to see side by side. Horizontal builds one whole layer at a time and runs nothing until the end; vertical builds a thin runnable strip through every layer each step:
HORIZONTAL (risky) VERTICAL (safe)
run? ▼
┌──────────────────────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐
│ UI │ │ UI │ │ UI │ │ UI │ │ UI │
├──────────────────────┤ ├────┤ ├────┤ ├────┤ ├────┤
│ LOGIC │ │logic││logic││logic││logic│
├──────────────────────┤ ├────┤ ├────┤ ├────┤ ├────┤
│ DATA │ │data│ │data│ │data│ │data│
└──────────────────────┘ └────┘ └────┘ └────┘ └────┘
build all 3, THEN run step1 step2 step3 step4
(can't run till the end) each step runs on its own
Each slice is runnable. That's what keeps the app always-working.
A useful test for a good slice: can you demo it? If you can point at the screen and say "watch this," it's a real vertical slice. If the only honest demo is "well, the schema is in place now," you've built a horizontal layer and you won't know if it's right until much later — usually at the worst possible time.