MVVM Design Pattern Part 1


ปัญหา ???….

clip_image001
แย่จัง!…ไม่…

ในการเขียนโปรแกรม…โปรแกรมเมอร์ส่วนใหญ่…
หลังจากที่ตกลงความต้องการ…
ของโปรแกรมเป็นที่เรียบร้อยแล้ว…
สิ่งแรกที่…โปรแกรมคุ้นเคยกัน…

คือการคลิก-ลาก-วาง คอนโทรล…
เพื่อออกแบบหน้าจอโปรแกรม(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

clip_image002

เยี่ยม!…ตรูทำได้…

MVVM จึงเป็นแพตเทิร์นที่ไมโครซอฟท์พัฒนามาต่อยอดมาจาก… MVC (Model-View-Controller)…และ…
MVP (Model-View-Presenter)…

เพื่อช่วยแยก UI ออกจาก Code-Behind ให้ออกจากกันได้อย่างอิสระ…อย่างเห็นได้ชัด…เนื้อเป็นเนื้อ…น้ำเป็นน้ำ…

โดย MVVM จะมาแบ่งชั้นของ PL…
ให้ UI และ Code-Behind…
สามารถแยกออกกันอย่างชัดเจน ดังรูป

clip_image003

รูปที่ 1 MVVM = PL

และเมื่อเราตัดเฉพาะส่วน MVVM ไปแจงรายละเอียด…
คุณจะได้ดังรูปที่ 2 MVVM Design Pattern

clip_image005

รูปที่2 MVVM Design Pattern

The View

View คือหน้าจอโปรแกรมที่เป็นไฟล์ *.xaml…ทั้งหลาย…
โดยเครื่องมือที่ใช้ในการออกแบบคือ Expression Blend…

clip_image007

รูปที่3 The View

The ViewModel

ทำหน้าที่เป็นตัวกลาง…
การโต้ตอบ…ข้อมูล…การทำงาน…ระหว่าง View และ Model

เช่น

จัดเตรียมข้อมูลที่นำไปแสดงบน View…
เตรียมชุดคำสั่ง(Command) สำหรับใช้งานใน View…
อิมพลิเมนต์อินเทอร์เฟซ INotifyPropertyChanged…
หรือ เป็นคลาส DataBinding…

โดยเครื่องมือที่ใช้พัฒนาจะใช้ Visual Studio…

clip_image009

รูปที่4 The ViewModel

The Model

เป็นคลาสที่อธิบายถึงสิ่งที่เป็นอยู่จริงในระบบธุรกิจ

• เช่น ข้อมูลลูกค้าข้อมูลตัวแทนจำหน่าย…

• เป็นอ็อบเจ็กต์ของข้อมูล…

เช่น คลาสของ Customer

clip_image011

โดยเครื่องมือที่ใช้พัฒนาจะใช้ Visual Studio

clip_image013

รูปที่ 5 The Model

Compare the Layers in the MVVM

หากจะเปรียบเทียบ MVVM กับ Layers…

จะได้ดังนี้:

· Model = Business Logic Tier

· View Model = Data Tier

· View = Presentation Tier

แสดงดังรูป…

clip_image015

รูปที่ 6 Compare the Layers in the MVVM

Why Use MVVM Model ?

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

แต่แล้ววันหนึ่ง..คุณจะเริ่มรู้สึกว่า…
ความเป็นพระเอก… ความเป็นบุคคลสำคัญ…
มิได้มีประโยชน์ใดๆ ต่อการดำรงอยู่…
การดำรงชีวิตประจำวันของคุณเลย…
เนื่องจากปัญหาด้านธุรกิจ…
มิได้แก้ปัญหาได้ด้วยความป็นมืออาชีพ…การเป็นบุคคลสำคัญ…
การทำคนเดียวได้ทุกอย่าง…มิได้ช่วยให้งานคุณเสร็จเร้วขึ้น…
คุณมักจะบอกว่า…ทำได้…แต่ขอเวลาหน่อย…
ซึ่งโอกาศทางธุรกิจไม่เคยรอใคร…ไม่เคยมองว่าใครสำคัญ…

ปัญหาทางธุรกิจ…ต้องแก้ทันที…ทันเวลา…
องค์กรจึงมีโอกาศอยู่เบื้องหน้าของถนนธุรกิจสายนั้น…

ความเป็นมืออาชีพแท้จริง…มิใช่คนเก่งทุกเรื่อง…(แต่ช้า)…
แต่มิออาชีพคือคนที่ไม่เก่ง…อาจทำไม่ได้ทุกเรื่อง…แต่มีบริวาร…
มีชุมชน…มีเพื่อนฝูง…มีวิธีการหาข้อมูล…
เพียงพอที่จะแก้ไขปัญหาทันทีทันเวลา…เมื่อเกิดปัญหา…
บางครั้งเขาจะยอมโง่ในเรื่องล็กน้อย…
เพื่อได้ข้อมูลที่จะแก้ไขปัญหาตรงหน้าได้ทันที…

MVVM จะเข้ามาช่วยแบ่งชิ้นงานออกเป็นส่วนงานได้อย่างชัดเจน…
คุณจะไม่ใช่คนเก่งที่ทำคนเดียวได้ทุกเรื่อง…
แต่ MVVM จะช่วยให้คุณมีเพื่อน…มีทีม…มีบริวาร…
ที่จะรุ่มช่วยกันทำงาน…ตามส่วนงานที่แต่ละคนชำนาญ…ช่วยให้งานเสร็จเร็วขึ้น…แก้ไข…ปรับปรุงได้ง่าย…
แต่ละส่วนงานแยกกันอยู่อย่างชัดเจน…ไม่กระทบกันและกัน

เช่น:…

View…
หรือหน้าจอโปรแกรม สามารถแยกส่วนงานออกไปให้นักออกแบบทำงานอย่างอิสระ โดยใช้เครื่องในการออกแบบ Expression Blend

ViewModel และ Model
นักพัฒนาสามารเขียนโปรแกรมได้อิสระ สามารถทดสอบ(Unit test) ได้โดยไม่กระทบหน้าจอโปรแกรม โดยใช้เครื่องมือ Visual Studio

ดังแสดงในรูปที่ 7

clip_image017

รูปที่ 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

 


ผู้เขียน

clip_image019

** รู้จักกับผู้สอน อ.นุชิต **
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

Advertisements
เกี่ยวกับ

Nuchit Atjanawat is a Microsoft MVP, GreatFriends Community Leader, WindowsITPro Columnist(Mr.Nano), Silverlight Business Application Instructor, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession. He has a very good skill over Silverlight, LightSwitch, C#, XAML & Blend. He shares his technical findings, tutorials in his technical blog. Follow his Blog and Facebook page to be updated on latest articles. - Technical Blog: https://janawat.wordpress.com - WindowsITPro Columnist(Mr.Nano): http://windowsitpro.net - The GreatFriends.Biz Community Discussion Board (nano): http://greatfriends.biz - witter: https://twitter.com/janawat - Facebook Page: https://www.facebook.com/nuchit - Instructor: http://bit.ly/GF250-01, http://bit.ly/GF150-02

เขียนใน MVVM, RIA Services, Silverlight
3 comments on “MVVM Design Pattern Part 1
  1. narinch พูดว่า:

    โฮ่! ยอดเยี่ยมมากเลยครับ

  2. Chatchai Sukkeerod พูดว่า:

    ขอบคุณมากครับ เป็นประโยชน์มากเลยครับ

  3. web design พูดว่า:

    great blog here

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

In Archive
%d bloggers like this: