~/VibeHandbook
$39

Chapter 11 · 02

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.

Want it offline?

Get the PDF + EPUB + downloadable prompt library + version updates.

$ Get the PDF — $39