ทำไมต้องใช้ MVVM Design pattern สำหรับ การพัฒนา Application

การพัฒนา Application ในปัจจุบัน โดยเฉพาะ Application ประเภท Web application นิยมนำ MVC (Model View Controller) Design Pattern มาปรับใช้ เพิื่อความสะดวกในการ เพิ่มเติม หรือ แก้ไข ในส่วนต่าง ๆ ของ Application  โดยการปรับใช้  MVC สามารถอธิบายได้ดังนี้

1. Model – เป็นส่วนเกี่ยวกับการจัดการข้อมูลทั่วไป ได้แก่ ส่วนที่จัดการเกี่ยวกับ Database, File, Web Service เป็นต้น

2. View – เป็นส่วนที่ติดต่อกับผู้ใช้งาน โดยการแสดงข้อมูลที่นำมาจาก Model หรือ Controllerและ เป็นส่วนที่รับการตอบสนองต่าง ๆ จาก User เช่น การกดเลือกเมนู การ Submit Form ส่วนนี้ได้แก่ หน้าจอแบบต่าง ๆ ของ Application เช่น หน้าเว็บ, Windows Form เป็นต้น

3. Controller – เป็นส่วนสำหรับการทำงานของ Application ตาม Business Logic ที่ได้กำหนดไว้ โดยส่วนนี้จะติดต่อกับ View เพื่อรับข้อมูล และ ส่งข้อมูลกลับไปเมื่อ Controller ทำงานเสร็จ อีกทั้ง ยังติดต่อกับส่วน Model เพื่อดึงข้อมูลสำหรับการทำงาน และ บันทึกหรือเปลี่ยนแปลงข้อมูล ภายหลังการทำงานเสร็จ ในส่วนนี้ สามารถยกตัวอย่างได้ เช่น Servlet (ในเทคโนโลยีกลุ่ม Java), Action (ใน Struts Web Framework) เป็นต้น

MVC Design pattern ยอมให้ View สามารถติดต่อกับ Model ได้โดยตรง เพื่อความสะดวกในการ ดึงข้อมูล บันทึกข้อมูล หรือ แก้ไขข้อมูล โดยไม่ต้องพึ่งพา Controller แต่อย่างใด จึงทำให้ Developer เลือกที่จะเขียน Code เพื่อที่จะ รับ/ส่ง ข้อมูลโดยตรง ระหว่าง View และ Model ขอยกกรณีตัวอย่างเช่น

การเขียน Code ให้เมื่อมีการ Submit Form เกิดขึ้น จะมีการสร้าง Request ไปยังส่วนบันทึกข้อมูล เพื่อรันคำสั่ง SQL ให้บันทึกข้อมูลที่รับมาจาก User  และให้ View ทำการแสดงข้อมูลที่บันทึกแล้ว และ แสดงข้อความสถานะว่า บันทึกข้อมูลเรียบร้อยแล้ว ภายหลัง บันทึกข้อมูลเสร็จสิ้น

จากกรณีดังกล่าว มีข้อเสียเปรียบดังนี้
1. หากมีการแก้ไขการทำงาน ของ Model จำเป็นต้องแก้ไข View ด้วย
2. Developer จำเป็นต้องเขียน Code ในส่วน View เพื่อควบคุมการแสดงผลข้อมูล เมื่อมีการกระทำใด ๆ ระหว่าง View และ Model

และเพื่อลดข้อเสียเปรียบดังกล่าว จึงได้มีการพัฒนา  MVVM(Model View Viewmodel) Design Pattern ซึ่งต่อยอดมาจาก MVC Design pattern โดยมีจุดประสงค์ดังนี้

1. ไม่ยอมให้ View สามารถติดต่อกับ Model โดยตรง
2. ลด Code ในส่วนการควบคุมการแสดงผลของหน้า View เมื่อมีการเปลี่ยนแปลงของ Model ให้ได้มากที่สุด
3. หาก View ต้องการดึงข้อมูล จะต้องกระทำผ่าน ViewModel เท่านั้น

MVVM Design Pattern จะตัดความสัมพันธ์โดยตรงระหว่าง View และ Model เพื่อความเป็นระเบียบในการจัดการข้อมูลต่าง ๆ ใน Model และ เพิ่มความสามารถของ Controller ให้สามารถจัดการการรับข้อมูลจาก View และการแสดงผลข้อมูลในส่วนของ View  Controller ที่ถูกเพิ่มความสามารถนี้ เรียกว่า ViewModel สามารถอธิบายได้ดังแผนภาพต่อไปนี้

ในการทำงานของ Application ที่ถูกพัฒนาด้วย MVVM นั้น เมื่อมีการเปลี่ยนแปลงในส่วน　View เกิดขึ้น จะมีการแจ้งไปยัง ViewModel ว่ามีการเปลี่ยนแปลงแบบใดบ้าง และ ViewModel จะตอบสนองต่อการเปลี่ยนแปลงนั้น ๆ

และในทางปฏิบัติ จะต้องมี Binder อยู่ระหว่าง View และ ViewModel เพื่อควบคุมการติดต่อระหว่างสองส่วนนี้ให้มีความถูกต้องแม่นยำ โดยที่ Binder จะจับตาการเปลี่ยนแปลงของ View และ ViewModel และเมื่อมีการเปลี่ยนแปลง จะมีการแจ้งข้อมูลการเปลี่ยนแปลงถึงกันและกัน

ขอยกกรณีตัวอย่างเช่น

Application สำหรับเก็บข้อมูลลูกค้า เมื่อมีการเลือกจังหวัดใน Form แล้วจะต้องแสดง ตัวเลือกอำเภอ ให้ผู้ใช้งานเลือก

สามารถอธิบายการทำงานได้ดังนี้

เมื่อ ผู้ใช้งานเลือกจังหวัดใน Form เช่น จังหวัดเชียงราย ซึ่งอยู่ในส่วน View แล้ว จะมีการแจ้งเตือนไปยัง ViewModel ว่ามีการเปลี่ยนแปลงให้หน้า View  คือมีการเปลี่ยนแปลงจังหวัดที่เลือก เป็น จังหวัดเชียงราย เมื่อ ViewModel ได้รับข้อมูลแล้ว จะแจ้งให้ Modelทำการ Query ข้อมูลอำเภอ ของจังหวัดเชียงราย และส่งกลับไปยัง ViewModel จากนั้น ViewModel จะแจ้งให้ View เพื่อให้เปลี่ยนแปลงตัวเลือก อำเภอ ให้เป็นรายชื่ออำเภอในจังหวัดเชียงราย


Framework สำหรับการพัฒนา Application โดยใช้ MVVM ที่นิยมใช้กันทั่วไป ได้แก่ ZK Framework สำหรับ Java WebApplication, WPF(Window Presentation Foundation) สำหรับ การพัฒนา Application โดยใช้เทคโนโลยีของ Microsoft, Knocout เป็น Javascript สำหรับพัฒนา Web Application แบบ MVVM

ข้อดีของการพัฒนา Application โดยใช้ MVVM สามารถสรุปได้ดังนี้คือ

1. สามารถสร้างหน้า View ได้หลากหลายรูปแบบ เช่น สำหรับ Desktop หรือ สำหรับ Mobile ได้โดยใช้ ViewModel   เดียวกันได้

2. เหมาะสำหรับการพัฒนา Application ที่มีการเปลี่ยนแปลง User Interface บ่อยครั้ง เนื่องจากทุกการเปลี่ยนแปลงในส่วนนี้ จะไม่กระทบต่อ ViewModel

3. ไม่จำเป็นต้องเขียน Code ในการควบคุม View เพื่อรองรับ การเปลี่ยนแปลงของข้อมูลใน View หรือใน ViewModel เนื่องจาก มี Binder ช่วยจัดการให้แล้ว

4. รองรับการพัฒนา Application เพื่อให้ตอบสนองกับ User แบบ Real-time ได้ง่ายเนื่องจาก ทุกการกระทำในส่วนของ View จะถูกแจ้งไปยัง ViewModel

5. เหมาะสำหรับการพัฒนา Application ที่ต้องบันทึกการกระทำของ User ในส่วนของ View เช่น Application สำหรับการชำระเงินผ่าน Internet


แต่อย่างไรก็ตาม MVVM ยังมีข้อด้อยคือ

1. Client ต้องส่ง Request ไปยัง Server บ่อยครั้งเพื่อแจ้งให้ ViewModel ทราบถึงการกระทำในฝั่ง Client


การพัฒนา Application ในปัจจุบันนี้ จำเป็นต้องตอบสนองการเปลี่ยนแปลงที่เกิดขึ้นบ่อยครั้ง โดยเฉพาะในสิ่งที่เกี่ยวกับ User Interface และ User Experience ให้ได้รวดเร็วที่สุด และ Application ที่จะถูกพัฒนาในอนาคตจะต้องสามารถตอบสนองต่อ User แบบ Real-time ได้ ดังนั้นแล้ว MVVM Design pattern อาจเป็นสิ่งหนึ่งที่จะต้องถูกพิจารณาสำหรับการพัฒนา Application ในลำดับถัดไป