Frontend​ ​Development​ ​คือ​อะไร​ ​และ​มีหน้า​ที่​อะไร​ใน​ระบบ​ซอฟต์แวร์

Frontend Development คือการพัฒนาส่วนของเว็บไซต์หรือแอปที่ผู้ใช้เห็นและใช้งานผ่าน Browser ครอบคลุมโครงสร้างเนื้อหา รูปแบบภาพ การโต้ตอบ และวิธีแสดงข้อมูลจากระบบเบื้องหลัง หน้าที่ไม่ได้จบที่ทำหน้าจอให้สวย แต่ต้องทำให้ผู้ใช้เข้าใจ ทำงานสำเร็จ และรู้ว่าจะทำอย่างไรเมื่อเกิดปัญหา

องค์ประกอบหลัก

HTML ให้โครงสร้างและความหมายของเนื้อหา CSS จัดรูปแบบและการแสดงผลหลายขนาดหน้าจอ JavaScript จัดการการโต้ตอบและข้อมูลที่เปลี่ยนตามการใช้งาน Framework อาจช่วยจัดส่วนประกอบของหน้าจอ แต่ไม่แทนพื้นฐานเรื่องการเข้าถึง การใช้แป้นพิมพ์ การแสดงข้อผิดพลาด และประสิทธิภาพ

ภาพที่ 1: Frontend รับการกระทำ ส่งคำขอที่จำเป็น และแสดงผลสำเร็จหรือผิดพลาดให้ผู้ใช้เข้าใจ

ตัวอย่างสมมติ: แบบฟอร์มส่งคำขอ

Frontend แสดงป้ายกำกับช่องกรอก ตรวจข้อมูลเบื้องต้น ส่งคำขอไปยัง API แล้วแสดงเลขอ้างอิงเมื่อสำเร็จ ถ้าเครือข่ายขาด ต้องบอกว่ารายการถูกส่งหรือยังและหลีกเลี่ยงการส่งซ้ำโดยไม่ตั้งใจ ส่วน Backend ยังต้องตรวจข้อมูลและสิทธิ์ซ้ำ เพราะการตรวจใน Browser ถูกข้ามได้

ขอบเขตที่ต้องทำงานร่วมกัน

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

ใช้ในรายงาน

แสดงหน้าที่ของ Frontend ผ่านเส้นทางงานหนึ่งเส้น ระบุข้อมูลเข้า ผลบนหน้าจอ และขอบเขตที่ Backend รับผิดชอบ แยกสิ่งที่ทดสอบจาก Browser ออกจากสิ่งที่พิสูจน์ด้วยการทดสอบ API เพราะความปลอดภัยของข้อมูลไม่อาจสรุปจากการซ่อนปุ่มเพียงอย่างเดียว

อ่าน Frontend Framework และ REST API หรือดู บริการพัฒนา Web Application

วิเคราะห์กรณีศึกษาเพื่อนำไปเขียนรายงาน

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

หลักฐานที่ควรแสดงคือ โครง UI, การตรวจข้อมูลเบื้องต้น, สถานะโหลด และข้อความผิดพลาด ควรอธิบายสัญลักษณ์ คำย่อ หรือเงื่อนไขในหลักฐานนั้นให้ผู้อ่านที่ไม่อยู่ในทีมเข้าใจ และบอกว่ามันเชื่อมกับ Requirement ข้อใด ถ้ามีหลายทางเลือก ให้ระบุเหตุผลที่เลือกทางหนึ่งและผลกระทบต่อผู้ใช้ ทีมพัฒนา หรือผู้ดูแลระบบ แทนการเขียนเพียงว่าใช้แนวทางที่ “ดีที่สุด” โดยไม่มีเกณฑ์เปรียบเทียบ

เกณฑ์ประเมินตัวอย่างคือ ผู้ใช้ทำงานหลักได้ด้วยคีย์บอร์ดและเข้าใจผลตอบกลับ ส่วนข้อจำกัดที่ต้องระบุคือ การตรวจข้อมูลบน Frontend ไม่แทนการตรวจซ้ำบน Backend หากยังไม่ได้ทดลองกับผู้ใช้หรือข้อมูลจริง ให้เขียนว่าเป็นข้อเสนอเชิงออกแบบ ไม่สรุปเป็นผลที่พิสูจน์แล้ว การมีทั้งเกณฑ์และข้อจำกัดช่วยให้รายงานตรวจสอบเหตุผลได้ และเปิดทางให้ผู้อื่นนำกรณีเดียวกันไปทดสอบซ้ำในบริบทของตน

แหล่งข้อมูลประกอบ

• MDN: Learn web development — พื้นฐานโครงสร้าง รูปแบบ และการโต้ตอบของเว็บ
• React: Describing the UI — ตัวอย่างการจัด UI เป็นส่วนประกอบ