"Vertical Slice" คืออะไร

Vertical slice (ชิ้นส่วนแนวตั้ง) คือชิ้นบาง ๆ ของฟีเจอร์ที่ทะลุผ่านแอปของคุณตลอดทั้งสาย — มี UI นิดหน่อย มีตรรกะนิดหน่อย มีข้อมูลนิดหน่อย — แทนที่จะสร้างทีละชั้นทั้งชั้น

แนวทางที่น่าดึงดูดแต่ผิด (แนวนอน — horizontal):

• สร้างสคีมาฐานข้อมูลทั้งหมดก่อน
• แล้วสร้างตรรกะฝั่งเซิร์ฟเวอร์ (backend) ทั้งหมด
• แล้วสร้าง UI ทั้งหน้า

คุณจะรัน อะไรไม่ได้เลย จนกว่าทั้งสามอย่างจะเสร็จ ดังนั้นคุณจึงจับปัญหาแต่เนิ่น ๆ ไม่ได้

แนวทางที่ดีกว่า (แนวตั้ง — vertical):

• ขั้นตอนที่ 1: ปุ่มที่ทำเวอร์ชันง่ายที่สุดของสิ่งนั้น โดยใช้ข้อมูลปลอม
• ขั้นตอนที่ 2: ให้มันใช้ข้อมูลจริง
• ขั้นตอนที่ 3: จัดการกรณีขอบ (edge case)

ความต่างนี้เห็นได้ชัดที่สุดเมื่อวางเทียบกัน แนวนอนสร้างทีละชั้นเต็มชั้นและไม่รันอะไรเลยจนกว่าจะจบ ส่วนแนวตั้งสร้างแถบบาง ๆ ที่รันได้ทะลุทุกชั้นในแต่ละขั้นตอน:

        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

แต่ละ slice รันได้ นั่นแหละคือสิ่งที่ทำให้แอปทำงานได้อยู่เสมอ

ทดสอบง่าย ๆ ว่า slice ดีหรือไม่: คุณเดโมมันได้ไหม? ถ้าคุณชี้ไปที่หน้าจอแล้วพูดว่า "ดูสิ" ได้ นั่นคือ vertical slice ตัวจริง แต่ถ้าเดโมที่ซื่อสัตย์ที่สุดที่ทำได้คือ "เอ่อ สคีมาถูกวางไว้แล้วนะ" แสดงว่าคุณสร้างชั้นแนวนอนขึ้นมา และคุณจะไม่รู้ว่ามันถูกต้องหรือไม่จนกว่าจะถึงทีหลังมาก — มักจะเป็นช่วงเวลาที่แย่ที่สุด