ป้ายกำกับ: UI

MVC และลูก ๆMVC และลูก ๆ

MVC คือรูปแบบการออกแบบสถาปัตยกรรมซอฟต์แวร์ ที่ได้รับความนิยมอย่างมากในการพัฒนาแอปพลิเคชันและเว็บไซต์ หน้าที่หลักของมันคือการแบ่งแยกการทำงานของระบบออกเป็น 3 ส่วนหลัก ๆ เพื่อให้โค้ดเป็นระเบียบ จัดการง่าย และทำงานร่วมกันเป็นทีมได้สะดวกขึ้น

เพื่อให้เห็นภาพง่าย ๆ ลองนึกถึงการทำงานในร้านอาหาร

  • Model : เป็นส่วนที่จัดการกับข้อมูลและตรรกะทางธุรกิจ ทั้งหมด ติดต่อกับฐานข้อมูล คำนวณ และประมวลผลตามกฎเกณฑ์ของระบบ Model จะไม่สนใจเลยว่าหน้าตาแอปพลิเคชันจะออกมาเป็นอย่างไร
  • View : เป็นส่วนที่รับผิดชอบเรื่องการแสดงผล ทั้งหมด เป็นสิ่งที่ผู้ใช้งานมองเห็นและโต้ตอบด้วย View จะนำข้อมูลที่ได้มาแสดงผล แต่จะไม่มีการตัดสินใจหรือประมวลผลข้อมูลเอง
  • Controller : เป็นตัวกลางหรือผู้ประสานงาน เมื่อผู้ใช้งานกดปุ่มบน View Controller จะรับคำสั่งนั้น ไปบอก Model ให้ดึงข้อมูลหรือประมวลผล เมื่อ Model ทำเสร็จ Controller ก็จะนำผลลัพธ์ที่ได้ส่งกลับไปให้ View แสดงผลให้ผู้ใช้เห็น

ทำไมเราถึงควรใช้ MVC ?

  • แบ่งแยกหน้าที่ชัดเจน : คนทำหน้าเว็บ และคนทำระบบหลังบ้าน สามารถทำงานพร้อมกันได้โดยไม่ชนกัน
  • ดูแลรักษาง่าย : หากต้องการเปลี่ยนหน้าตาเว็บ ก็แก้แค่ส่วน View โดยไม่กระทบกับตรรกะใน Model
  • นำกลับมาใช้ใหม่ได้ : โค้ดส่วน Model สามารถถูกเรียกใช้จากหลาย ๆ View ได้ เช่น หน้าเว็บเพจ กับ แอปพลิเคชันบนมือถือ สามารถใช้ Model ตัวเดียวกันได้ และ view ก็สามารถ reused ได้โดยส่งค่าจากคนละ model ได้เหมือนกัน

ส่วนที่ต่อเนื่อง: การต่อยอดจาก MVC สู่ยุคปัจจุบัน

แม้ MVC จะเป็นรากฐานที่สำคัญ แต่เมื่อแอปพลิเคชันมีความซับซ้อนมากขึ้น โครงสร้างแบบเดิมอาจทำให้เกิดปัญหา “Massive Controller” หรือ Controller ที่มีขนาดใหญ่และซับซ้อนเกินไป วงการพัฒนาซอฟต์แวร์จึงได้คิดค้นสถาปัตยกรรมที่ต่อเนื่องและต่อยอดจาก MVC ขึ้นมา

  • MVP
    ถูกพัฒนาขึ้นมาเพื่อแก้ปัญหาของ MVC โดยตัดการเชื่อมต่อโดยตรงระหว่าง View และ Model ออกไปอย่างเด็ดขาด Presenter จะเข้ามาทำหน้าที่แทน Controller แต่จะผูกพันกับ View แบบ 1-ต่อ-1 ทำให้ง่ายต่อการเขียนโค้ดเพื่อทดสอบระบบ มักพบเห็นได้ในการพัฒนาแอปพลิเคชัน Android ยุคก่อน
  • MVVM
    รูปแบบที่ทันสมัยและได้รับความนิยมสูงสุดในปัจจุบัน โดยเฉพาะในฝั่ง Frontend และแอปพลิเคชันมือถือ
    • จุดเด่น: ใช้แนวคิดที่เรียกว่า Data Binding เมื่อข้อมูลใน ViewModel เปลี่ยนแปลง หน้าจอ จะอัปเดตตัวเองโดยอัตโนมัติ ไม่ต้องคอยสั่งงานแบบ Controller ช่วยลดปริมาณโค้ดลงไปได้มหาศาล
  • การแยก Frontend และ Backend
    ในยุคปัจจุบันของการทำเว็บ แนวคิด MVC มักจะถูกจับแยกออกจากกันทางกายภาพ
    • Backend จะทำหน้าที่เป็นแค่ Model + Controller โดยรอรับคำสั่งและส่งข้อมูลกลับไปเป็นก้อนข้อมูล ผ่าน API
    • Frontend จะทำหน้าที่เป็น View เดี่ยว ๆ ที่รับข้อมูล JSON นั้นมาเรนเดอร์และสร้างหน้าตาเว็บให้ผู้ใช้เห็น

อ่านเพิ่มเติม