หัวข้อ 3: กระบวนทัศน์ Client-Side, Server-Side และ Full-Stack

แนวคิดหลัก

เว็บแอปพลิเคชันประกอบด้วยส่วนที่ทำงานบนเครื่องผู้ใช้และส่วนที่ทำงานบน server นักพัฒนาจึงต้องเข้าใจว่า logic ใดควรอยู่ฝั่ง client logic ใดควรอยู่ฝั่ง server และการทำงานทั้งสองฝั่งเชื่อมกันอย่างไร

Client-Side

Client-Side คือโค้ดที่ทำงานบนเบราว์เซอร์ของผู้ใช้ เช่น HTML, CSS และ JavaScript

งานที่มักอยู่ฝั่ง client ได้แก่

  1. แสดงหน้าจอและจัด layout
  2. โต้ตอบกับผู้ใช้ เช่น click, input, drag/drop
  3. ตรวจสอบข้อมูลเบื้องต้นก่อนส่งไป server
  4. เรียก API และนำข้อมูลมาแสดงผล
  5. จัดการ state ของหน้าเว็บบางส่วน

ข้อดีคือทำให้เว็บตอบสนองเร็วและลดภาระ server บางส่วน แต่ข้อจำกัดคือโค้ดฝั่ง client ถูกมองเห็นได้ จึงไม่ควรวาง secret หรือ logic สำคัญด้านความปลอดภัยไว้บน client

Server-Side

Server-Side คือโค้ดที่ทำงานบน server ก่อนส่งผลลัพธ์หรือข้อมูลให้ผู้ใช้ เทคโนโลยีที่พบได้บ่อย เช่น Node.js, PHP, Python, Ruby, Java และ .NET

งานที่มักอยู่ฝั่ง server ได้แก่

  1. Authentication และ authorization
  2. ติดต่อฐานข้อมูล
  3. ประมวลผล business logic
  4. ตรวจสอบความถูกต้องของข้อมูลแบบจริงจัง
  5. สร้าง API ให้ frontend เรียกใช้
  6. จัดการไฟล์และระบบหลังบ้าน

Full-Stack

Full-Stack คือการพัฒนาทั้ง Frontend และ Backend ในโปรเจกต์เดียว ผู้พัฒนาต้องเข้าใจตั้งแต่ UI, client logic, API, database, security และ deployment

ตัวอย่าง stack:

Angular Frontend -> Express API -> PostgreSQL Database

เปรียบเทียบด้านประสิทธิภาพ ความปลอดภัย และ Scalability

ประเด็น Client-Side Server-Side Full-Stack
ประสิทธิภาพ ตอบสนองไวเมื่อโหลดแล้ว ควบคุมการประมวลผลรวมศูนย์ ปรับสมดุลทั้งสองฝั่ง
ความปลอดภัย ไม่ควรเก็บ secret เหมาะกับ logic สำคัญ ต้องออกแบบ boundary ให้ชัด
Scalability ลดงานบางส่วนจาก server ต้อง scale server/API scale ได้หลายชั้น
ประสบการณ์ผู้ใช้ โต้ตอบลื่น โหลดข้อมูลจาก server ทำได้ครบทั้ง UX และ data

กิจกรรม

เลือกฟีเจอร์ “ระบบเข้าสู่ระบบ” แล้วระบุว่าส่วนใดควรอยู่ Client-Side และส่วนใดควรอยู่ Server-Side พร้อมเหตุผล

แบบทดสอบหลังเรียน

  1. Client-Side code ทำงานที่ใด
  2. เพราะเหตุใดไม่ควรเก็บ API secret ใน JavaScript ฝั่ง browser
  3. Server-Side เหมาะกับงานประเภทใด
  4. Full-Stack Developer ต้องเข้าใจส่วนใดบ้าง
  5. ยกตัวอย่างงานที่ควรทำทั้งฝั่ง client และ server อย่างละ 1 งาน

กลับสัปดาห์ที่ 1