Web Application Structure

Frontend ทำงานในฝั่งผู้ใช้เพื่อแสดงข้อมูลและรับการกระทำ Backend รับคำขอ ตรวจสิทธิ์ ใช้กฎธุรกิจ และเข้าถึงข้อมูล ความลับและกฎอนุญาตต้องบังคับฝั่ง backend เพราะผู้ใช้แก้โค้ดฝั่งเครื่องตนเองได้

ปุ่มลบที่ซ่อนจากหน้าจอไม่ใช่การป้องกัน API หากผู้ใช้ส่ง DELETE เอง เซิร์ฟเวอร์ยังต้องตรวจว่าใครเป็นเจ้าของรายการก่อนลบ ฐานข้อมูลไม่ควรเปิดให้เบราว์เซอร์ต่อด้วยรหัสผ่านของระบบโดยตรง

HTML บอกโครงสร้างและความหมาย CSS บอกการจัดวางและรูปลักษณ์ JavaScript เพิ่มพฤติกรรม ทั้งสามอาจทำงานร่วมกันแต่ไม่ได้ทดแทนกัน เบราว์เซอร์สร้าง DOM ซึ่งเป็นโครงสร้างเอกสารในหน่วยความจำให้โค้ดเข้าถึง

ในแบบฟอร์ม HTML สร้าง label กับช่องกรอก CSS จัดระยะและสี JavaScript ตรวจความครบแล้วส่งคำขอ หากปิด JavaScript เนื้อหาและการใช้งานพื้นฐานที่ออกแบบไว้ยังควรอ่านได้

API กำหนดวิธีที่โปรแกรมหนึ่งเรียกความสามารถของอีกโปรแกรม เช่น endpoint, method, รูปแบบ request และ response JSON เป็นรูปแบบข้อความเก็บ object, array, string, number, boolean และ null ไม่ใช่ฐานข้อมูลหรือโปรโตคอลเครือข่าย

GET /devices อาจตอบ {"devices":[{"id":7,"status":"online"}]} โปรแกรมต้องตรวจ status ก่อน parse JSON และต้องรับมือข้อมูลไม่ตรง schema คำตอบผิดพลาดอาจเป็น HTML แม้คาดหวัง JSON

Static content ส่งไฟล์ที่เตรียมไว้ ส่วน dynamic content เกิดจากการประมวลผลตาม request เช่นผู้ใช้หรือข้อมูลล่าสุด เว็บหนึ่งใช้ทั้งคู่ได้ และเว็บ static ก็เรียก API เพื่อแสดงข้อมูลที่เปลี่ยนได้

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