MVVM (Model-View-ViewModel)

ได้อ่านบทความจาก objc.io แล้วอยากเขียนให้อ่านกัน ผมก็ได้ลองเขียนเล่นๆ แล้ว MVVM มันก็เป็นแนวคิดที่เข้าใจได้ดี และว่าจะลองใช้ในงานจริง งานต่อไปด้วย

ในการเขียนโปรแกรมบน iOS ในปัจจุบัน เราน่ารู้จักแนวคิด MVC (Model View-Controller) กันดีนะครับ หรือบางคนอาจจะเรียกมันว่า Massive View Controller ก็ตามที โดยการทำงานต่างๆ ในโปรแกรมที่เราเขียนจะเป็นไปตาม Diagram นี้

มองง่ายๆ ก็คือ Model จะเป็นเลเยอร์ของข้อมูล ที่จะส่งต่อไปแสดงผ่าน View โดยมี Controller นั้นเป็นตัวกลางในการรับส่งข้อมูล และทำการปรับตั้งค่าต่างๆ ก่อนแสดงบน View (Formatting)

แม้ว่า Controller และ View จะดูเหมือนเป็นอะไรที่แยกขาดจากกัน แต่จริงๆ แล้วบน iOS นั้น แทบจะเป็นพี่น้องที่สนิทกันมาก ทำหน้าที่อะไรหลายๆ อย่างร่วมกัน ถ้าให้ชัดเจนขึ้น โค้ดที่เราเขียนกันทุกวันจะอยู่ในรูปแบบตาม diagram นี้
ใน iOS App ที่เราเขียนด้วยแนวคิด MVC นั้น ถ้าใครรู้สึกได้ จะเห็นได้ว่ามีลอจิคมากมาย ถูกเขียนอยู่บน Controller มีบ้างที่เกี่ยวกับ Controller จริงๆ และมีอีกมากคือสิ่งที่เราเรียกว่า View Logic หรือ Presentation Logic ถ้าใครยังนึกไม่ออก หนึ่งในตัวอย่างคือการทำ Formatting ให้ข้อมูลอะไรสักอย่างก่อนแสดง เช่นข้อมูลมาเป็น NSDate แต่เราต้องแปลงเป็น NSString เพื่อนำไปแสดงบน Label

แล้วจริงๆ MVVM คืออะไร ? ลองดู diagram นี้แล้วคิดดูนะครับ

ดูดีขึ้นใช่ไหม ?! พอเปรียบเทียบ diagram สองรูปล่าสุดก็จะเห็นว่ามีเลเยอร์ของ View Model เพิ่มเข้ามา ซึ่งจะทำหน้าที่จัดการ Presentation Logic ที่เคยอยู่บน Controller โดยเจ้า View Model เนี่ยก็เป็นเพียง Object ธรรมดาๆ เท่านั้น อาจจะดูสับสนในตอนนี้ แต่ MVVM ก็เป็นเพียงการที่เราเพิ่มอะไรสักอย่างเข้าไปบนโค้ดที่เป็น MVC ที่เราคุ้นเคยนั่นแหละ (ข่าวดี)

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

ประเด็นสำคัญ 3 ข้อของ MVVM ที่ต้องรู้

  • MVVM นั่นเป็นแนวคิดที่เข้ากันได้กับโค้ดที่เขียนด้วย MVC อยู่แล้ว
  • MVVM จะทำให้คุณเทสแอปง่ายขึ้น
  • MVVM ทำงานได้ดีมากในงานที่ซับซ้อน
โอเค มาดู Code แบบ MVC ที่เราเคยเขียนมากันก่อน ถ้าเรามี Person Model แล้วมีหน้า Profile ที่เราต้องจัดการแสดงข้อมูลของคนคนหนึ่ง เราอาจจะเขียนโค้ดได้แบบนี้



คราวนี้มาลองเพิ่ม View Model กันนะ โดยสร้าง Object ขึ้นมาประมาณนี้


พอทุกอย่างจัดการผ่าน View Model แล้วใน Controller เราก็จะดูสะอาดสะอ้านขึ้นแบบนี้


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

เทสได้ง่ายขึ้น ? เมื่อเราสร้าง View Model มาแล้ว เราก็จะเทสการแสดงผลต่างๆ ผ่าน View Model นั่นเอง แทนที่จะต้องสร้าง Controller ก้อนใหญ่ๆ มาเพื่อเทส ทุกอย่างก็จะง่ายขึ้น ลองดูจากนี้ได้เลย


จะเห็นว่า ถ้าเราใช้วิธีเดิม และไม่ได้แยก View Model ออกมาจาก Controller เราจะต้องสร้าง Controller ขึ้นมาทั้งก้อนเพื่อเทส และด้วยวิธีนี้ เราจะสามารถแก้ Controller บางส่วนโดยที่ไม่กระทบกับ Unit Tests ที่เขียนขึ้นมาได้ด้วย อยากให้ลองคิดจากตัวอย่างง่ายๆ นี้นะครับ

เท่านี้แหละครับ :) ลองนำไปใช้กันดูนะครับ

Popular posts from this blog

12 วิธี การบริการและดูแลลูกค้าในร้าน Starbucks

"อีสุกอีใส" ประสบการณ์เมื่อต้องมาเป็นตอนอายุ 22

[Android Dev] การติดตั้ง Eclipse+AndroidSDK เพื่อพัฒนาโปรแกรมบน Android