ปัญหา ???….
แย่จัง!…ไม่…
ในการเขียนโปรแกรม…โปรแกรมเมอร์ส่วนใหญ่…
หลังจากที่ตกลงความต้องการ…
ของโปรแกรมเป็นที่เรียบร้อยแล้ว…
สิ่งแรกที่…โปรแกรมคุ้นเคยกัน…
คือการคลิก-ลาก-วาง คอนโทรล…
เพื่อออกแบบหน้าจอโปรแกรม(UI)…
แล้วดับเบิ้ลคลิก…เพื่อเขียนโค้ด…ลงไป…
ในนั้น(Event)…
…เขียนทุกอย่างลงไป…
ประกาศตัวแปล…
ติดต่อฐานข้อมูล…
การตรวจสอบข้อมูล…
การคิวรี่ข้อมูล…
การจัดการข้อมูล…
การผูกข้อมูล…
อื่นๆ…ไม่รู้จบ…
โค้ดทุกอย่าง…ยำรวมมิตร…อยู่บนจานเดียวกัน…
มัน…เผ็ดร้อน…ทุกครั้งที่…กลับไปชิม…
เพื่อจะปรับปรุง…หรือเปลี่ยนแปรงมัน…
และถ้าเป็นยำรวมมิตรที่โปรแกรมเมอร์…ก่อนหน้า…
ได้ทำไว้…เรามักจะบอกเป็นเสียงเดียวกันว่า…
ไม่ขอยุ่ง…เสียเวลา…ขอทำใหม่เร็วกว่า…
…แล้วเราก็เริ่ม…ปรุงยำรวมมิตรจานใหม่ของเราเอง…
เราทำเอง…กินเอง…โอ้วว้าวว…มันเยี่ยมยอด…มันเป็น…
สิ่งที่ค้นหามานานแล้ว…
เป็นสิ่งที่เรามักสื่อสารออกไปให้คนรอบข้างเห็น…เช่นนั้น…
ยำรวมมิตร…คนแล้วคนเล่า…
โค้ดยำรวมกันอย่างแยกไม่ออก…
ไม่ว่าจะเป็น…
หน้าจอโปรแกรม (UI)…
PL (Presentation Layer)…
BLL (Business Logic Layer)…
DAL (Data Access Layer)…
หน้าจอ User Interface และ Code-Behind…
ผูกติดแน่นจนกลายเป็นเนื้อเดียวกัน…
ปรับเปลี่ยนแต่ละครั้ง กระทบทั้งโมดูล…
ยากในการปรับเปลี่ยน…
ทำงานได้คนเดียว…
ไม่สามารถแบ่งงานได้…คุณคือพระเอก…ในงานนี้…จริงหรือ?…
หลายท่านจึงแก้ปัญหา…
โดยแบ่งกลุ่มของโค้ดออกตามหน้าที่
PL…
BLL…
DAL…
ช่วยลดความสัมพันธ์ของโค้ดได้บ้างส่วนหนึ่ง…
ใครถนัดออกแบบหน้าจอ…เอา PL ไป…
ใครถนัดโค้ดดิ้งหนักๆ…
เข้าใจกระบวนการธุรกิจดี…เอา BLL ไป….
ใครถนัด SQL, Stored Procedure…เอา DAL ไป…
คุณเริ่มแบ่งงาน…ได้ชัดเจนมากขึ้น…
แต่ในส่วนของ PL…
หน้าจอโปรแกรม (UI) และ Code-Behind…
ยังคงผูกติดแน่นเช่นเดิม…
ยังหนีไม่พ้นอีเว้นต์ Click (…)…แล้วเขียนโค้ดเช่นเดิม…
ยำรวมมิตร…จานเดิม…ยังคงกลิ่นคาวอยู่…
แล้ว…ไง…???…
จะแก้ปัญหาอย่างไร…
ในที่การจะแยก UI ออกจาก Code-Behind…
อย่างอิสระ…
Model-View-ViewModel (MVVM) Design Pattern
เยี่ยม!…ตรูทำได้…
MVVM จึงเป็นแพตเทิร์นที่ไมโครซอฟท์พัฒนามาต่อยอดมาจาก… MVC (Model-View-Controller)…และ…
MVP (Model-View-Presenter)…
เพื่อช่วยแยก UI ออกจาก Code-Behind ให้ออกจากกันได้อย่างอิสระ…อย่างเห็นได้ชัด…เนื้อเป็นเนื้อ…น้ำเป็นน้ำ…
โดย MVVM จะมาแบ่งชั้นของ PL…
ให้ UI และ Code-Behind…
สามารถแยกออกกันอย่างชัดเจน ดังรูป
รูปที่ 1 MVVM = PL
และเมื่อเราตัดเฉพาะส่วน MVVM ไปแจงรายละเอียด…
คุณจะได้ดังรูปที่ 2 MVVM Design Pattern
รูปที่2 MVVM Design Pattern
The View
View คือหน้าจอโปรแกรมที่เป็นไฟล์ *.xaml…ทั้งหลาย…
โดยเครื่องมือที่ใช้ในการออกแบบคือ Expression Blend…
รูปที่3 The View
The ViewModel
ทำหน้าที่เป็นตัวกลาง…
การโต้ตอบ…ข้อมูล…การทำงาน…ระหว่าง View และ Model
เช่น
จัดเตรียมข้อมูลที่นำไปแสดงบน View…
เตรียมชุดคำสั่ง(Command) สำหรับใช้งานใน View…
อิมพลิเมนต์อินเทอร์เฟซ INotifyPropertyChanged…
หรือ เป็นคลาส DataBinding…
โดยเครื่องมือที่ใช้พัฒนาจะใช้ Visual Studio…
รูปที่4 The ViewModel
The Model
เป็นคลาสที่อธิบายถึงสิ่งที่เป็นอยู่จริงในระบบธุรกิจ
• เช่น ข้อมูลลูกค้าข้อมูลตัวแทนจำหน่าย…
• เป็นอ็อบเจ็กต์ของข้อมูล…
เช่น คลาสของ Customer
โดยเครื่องมือที่ใช้พัฒนาจะใช้ Visual Studio
รูปที่ 5 The Model
Compare the Layers in the MVVM
หากจะเปรียบเทียบ MVVM กับ Layers…
จะได้ดังนี้:
· Model = Business Logic Tier
· View Model = Data Tier
· View = Presentation Tier
แสดงดังรูป…
รูปที่ 6 Compare the Layers in the MVVM
Why Use MVVM Model ?
แล้วทำไมเราจึงต้องใช้ MVVM ?…
แน่นอนว่าเมื่อคุณพัฒนาโปรแกรมที่มีระบบใหญ่…
มีหลากหลายโมดูล…เกี่ยวข้องหลากหลายส่วนงาน…
หากเราจะยังคงใช้วิธียำรวมมิตร…ทุกอย่างอยู่บนจานเดียว…
รับประกันได้เลยว่า…เราจะรับประทานได้แต่เพียงผู้เดียว…
และมันจะตายไปพร้อมกับเรา(เมื่อลาออก)…
เพราะไม่มีใครสามารถสานต่อในความสามารถของคุณได้…
แน่นอนคุณจะเป็นพระเอก…เมื่อจานยำรวมมิตยังอยู่บนมือคุณ…
คุณจะต้องทำทุกอย่างด้วยตัวเอง…
ยิ่งดูเหมือว่าคุณคือบุคคลสำคัญที่คุณองค์กร…จะขาดคุณเสียมิได้…
แต่แล้ววันหนึ่ง..คุณจะเริ่มรู้สึกว่า…
ความเป็นพระเอก… ความเป็นบุคคลสำคัญ…
มิได้มีประโยชน์ใดๆ ต่อการดำรงอยู่…
การดำรงชีวิตประจำวันของคุณเลย…
เนื่องจากปัญหาด้านธุรกิจ…
มิได้แก้ปัญหาได้ด้วยความป็นมืออาชีพ…การเป็นบุคคลสำคัญ…
การทำคนเดียวได้ทุกอย่าง…มิได้ช่วยให้งานคุณเสร็จเร้วขึ้น…
คุณมักจะบอกว่า…ทำได้…แต่ขอเวลาหน่อย…
ซึ่งโอกาศทางธุรกิจไม่เคยรอใคร…ไม่เคยมองว่าใครสำคัญ…
ปัญหาทางธุรกิจ…ต้องแก้ทันที…ทันเวลา…
องค์กรจึงมีโอกาศอยู่เบื้องหน้าของถนนธุรกิจสายนั้น…
ความเป็นมืออาชีพแท้จริง…มิใช่คนเก่งทุกเรื่อง…(แต่ช้า)…
แต่มิออาชีพคือคนที่ไม่เก่ง…อาจทำไม่ได้ทุกเรื่อง…แต่มีบริวาร…
มีชุมชน…มีเพื่อนฝูง…มีวิธีการหาข้อมูล…
เพียงพอที่จะแก้ไขปัญหาทันทีทันเวลา…เมื่อเกิดปัญหา…
บางครั้งเขาจะยอมโง่ในเรื่องล็กน้อย…
เพื่อได้ข้อมูลที่จะแก้ไขปัญหาตรงหน้าได้ทันที…
MVVM จะเข้ามาช่วยแบ่งชิ้นงานออกเป็นส่วนงานได้อย่างชัดเจน…
คุณจะไม่ใช่คนเก่งที่ทำคนเดียวได้ทุกเรื่อง…
แต่ MVVM จะช่วยให้คุณมีเพื่อน…มีทีม…มีบริวาร…
ที่จะรุ่มช่วยกันทำงาน…ตามส่วนงานที่แต่ละคนชำนาญ…ช่วยให้งานเสร็จเร็วขึ้น…แก้ไข…ปรับปรุงได้ง่าย…
แต่ละส่วนงานแยกกันอยู่อย่างชัดเจน…ไม่กระทบกันและกัน
เช่น:…
View…
หรือหน้าจอโปรแกรม สามารถแยกส่วนงานออกไปให้นักออกแบบทำงานอย่างอิสระ โดยใช้เครื่องในการออกแบบ Expression Blend
ViewModel และ Model…
นักพัฒนาสามารเขียนโปรแกรมได้อิสระ สามารถทดสอบ(Unit test) ได้โดยไม่กระทบหน้าจอโปรแกรม โดยใช้เครื่องมือ Visual Studio
ดังแสดงในรูปที่ 7
รูปที่ 7 Why Use MVVM Model ?
ก่อนที่จะเบื่อกันมากกว่านี้…
ขอจบตอนที่ 1 เพียงเท่านี้ก่อน…
พักเหนื่อยแล้วค่อยไปพบกันในตอนต่อๆ ไปครับ…
ปล.
ส่วนหนึ่งของเนื้อหาหลักสูตร GF250:
Silverlight 4 Business Application :>
http://greatfriends.biz/training/course.aspx?code=GF250-01
แหล่งข้อมูลดาวน์โหลด:…
https://skydrive.live.com/embedicon.aspx/SourcesCode/2011/MVVM%20Design%20Pattern%20%20Part%201.pdf?cid=7d608959d854cb28&sc=documents
ผู้เขียน
** รู้จักกับผู้สอน อ.นุชิต **
JANAWAT Blog: https://janawat.wordpress.com
Nuchit’s Profile @microsoft https://mvp.support.microsoft.com/profile/nuchit
Facebook: https://www.facebook.com/nuchit
Twitter: http://twitter.com/janawat
Seasoned Senior System Analyst & Developer with over a decade of experience in designing, analyzing, and developing highperformance, scalable applications using a wide range of technologies, including Java, Spring Boot, C#, ASP.NET, MVC, React.js, Kubernetes, Microservices, PostgreSQL, MySQL, Oracle, and Microsoft SQL. Notable Achievements: Consistently delivered projects on time and within budget, ensuring client satisfaction and project success. Demonstrated versatility in working both independently and as a valuable team member, contributing to collaborative achievements. Honored with the prestigious "Employee of the Year" award in 2012 for exceptional dedication and outstanding performance. Recognized as a Microsoft Most Valuable Professional (MVP) for significant contributions to the software development community. My Commitment: I am committed to innovation, excellence, and solving complex technical challenges. I take pride in my ability to consistently deliver robust and efficient software solutions that meet and exceed the expectations of clients and stakeholders.
JANAWAT 
โฮ่! ยอดเยี่ยมมากเลยครับ
ขอบคุณมากครับ เป็นประโยชน์มากเลยครับ
great blog here
[…] บทความ MVVM Design Pattern Part 1 […]