คำขอไหลผ่านอย่างไร

ทีนี้มาผูกทุกอย่างเข้าด้วยกัน ลองตามรอยผู้ใช้ที่คลิก "บันทึกโปรไฟล์" ผ่านทุกชิ้นส่วนที่คุณเพิ่งรู้จักไป นี่คือโมเดลความคิดที่มีประโยชน์ที่สุดเพียงหนึ่งเดียวในหนังสือเล่มนี้ ถ้าคุณจะจำแผนภาพเดียว ให้จำอันนี้

1. USER clicks "Save profile"
        │
        ▼
2. FRONTEND (HTML form, JavaScript reads the values)
        │   sends an HTTP request:  "POST /profile  { name: 'Ada' }"
        ▼
3. HOSTING routes the request to your running BACKEND
        │
        ▼
4. BACKEND
     ├─ is this user logged in?        (no  → respond 401, stop)
     ├─ is the data valid?             (no  → respond 400, stop)
     └─ all good → save to the DATABASE
        │
        ▼
5. DATABASE writes the row, confirms back to the BACKEND
        │
        ▼
6. BACKEND responds:  "200 OK  { saved: true }"
        │
        ▼
7. FRONTEND receives the response, updates the DOM
        │   ("Profile saved ✓") — the user sees it
        ▼
   DONE

ลองไล่ดูว่าแต่ละชั้นทำอะไรบ้าง: ฟรอนต์เอนด์ รวบรวมข้อมูลนำเข้าและส่งมันไป; โฮสติง ทำให้คำขอไปถึงที่ที่ถูกต้อง; แบ็กเอนด์ บังคับใช้กฎ (ล็อกอิน การตรวจสอบความถูกต้อง) และตัดสินใจ; ฐานข้อมูล ทำให้มันคงอยู่ถาวร; และคำตอบไหลย้อนกลับมาทั้งหมดเพื่อให้ ฟรอนต์เอนด์ อัปเดตหน้าจอได้ ทุกแอปคือการแปรผันของลูปนี้ ที่ถูกรันหลายพันครั้งต่อวินาที

สังเกตว่าการตรวจสอบทั้งหมดเกิดขึ้นในแบ็กเอนด์ ไม่ใช่ในฟรอนต์เอนด์เลย — นี่คือกฎจากส่วนแรก ที่กำลังทำงานจริง: ฟรอนต์เอนด์มีไว้เพื่อผู้ใช้ แบ็กเอนด์มีไว้เพื่อความจริง เมื่อคุณรู้ว่าแต่ละขั้นตอนเกิดขึ้น ที่ไหน คุณจะสามารถอธิบายฟีเจอร์หนึ่งได้อย่างแม่นยำ ("ตรวจสอบอีเมลที่แบ็กเอนด์ก่อนบันทึก") แทนที่จะอธิบายอย่างคลุมเครือ ("ทำให้ฟอร์มทำงาน") — และความแม่นยำคือเกมทั้งหมด