Praneat Blog

Patchanok Rakpakdee
Mobile Development | Android Developer
03 Oct 2017

Android : MVP vs MVVM ฉบับ Junior Android developer

ขอพื้นที่ให้น้องใหม่หัดเขียนบล็อกหน่อยนะคะ เรื่องที่จะยกมาเขียนในบล็อกนี้ก็มา
จากประสบการณ์ในการทำงานที่ได้ลองศึกษาลองผิดลองถูก (ลองมั่ว 555) กับ Design Pattern
ทั้ง MVC ,MVP และ MVVM มานั้น ได้เห็นถึงความแตกต่างของ Design Pattern ทั้งหมดแต่ในบล็อกนี้
จะขอยกมาแค่ MVP และ MVVM เนอะ ( MVC ไม่ขอพูดถึงละกัน เพราะน่าจะคุ้นเคยกับเจ้านั้นกันพอสมควร ) งั้นเข้าเรื่องเลยละกัน ...

MVP (Model View Presenter)

Old-School-Android :


“ จะรู้จักตัว Model นั้นจะเป็น POJO class
View มันก็คือ XML file
ส่วน Class ที่มี Android Framework ที่ Extends เหล่า
Activity , AppCompatActivity , Fragment and
FragmentActivity นั้นเราจะมองมันเป็น Controller ”


แต่เมื่อ MVP นั้นเดินเข้ามา :

  • Model เป็น POJO class เช่นเดียวกันกับ MVC

  • View จะเป็น Class ที่ยุ่งเกี่ยวกับการจัดการเรื่อง View ทั้งหลาย เช่น Activity ,Fragment

  • Presenter จะเป็น Class ที่เอาไว้จัดการการทำงานของแอพและพวก Business Logic ต่างๆ และเป็นตัวกลางระหว่าง View กับ Model โดยที่ Presenter จะรับข้อมูลจาก Model แล้วส่งให้ View แสดงผล

Highlight

MVP จำเป็นที่จะต้องมี Interface ของ View และ Presenter เพื่อให้ View ตัวนั้นสามารถสั่งให้ Presenter ที่ถืออยู่ทำอะไรเมื่อเกิด Event ขึ้น หรือ Presenter ตัวนั้นส่งค่าอะไรไปให้ View ตัวที่ถืออยู่แสดงผล

Credit : Android Code ลองพัฒนา Android Application แบบ MVP กันดูมั้ย? ตอนที่ 1 ~ Sleeping For Less

Mini Codelab :

1st : สร้าง Interface Class สำหรับ View และ Presenter
อยากให้ View ตัวนั้นทำงานอะไร อยากให้ Presenter ตัวนั้นทำงานอะไร

Interface ของ Presenter
Interface ของ View


2nd : Implement Interface Class to View and Presenter Class
ส่วนของ Presenter นั้นจะ Implement Interface ของ Presenter จะได้ Method loadDataApi () เพื่อทำการติดต่อกับ Service และส่ง Data คืนไปยัง View โดยผ่าน Interface


ส่วนของ View จะ Implement Interface ของ View จะได้ Method setProductList () มา โดยจะได้ค่าตัวแปรคืนกลับมา


View ถือ Presenter
Presenter ถือ View
“ จะได้คุยกันได้ “


Mini Codelab แบบเต็มๆในนี้ได้นะคะ : GitHub - Patchanok/android-mvp-design-pattern: Project Learning for up skill myself


ต่อกันที่ ..

MVVM (Model View ViewModel)

จากที่ Google Developer ได้ออก Architecture Component ออกมาให้เราชาวแอนด่อย เอ้ย แอนดรอยด์เดฟได้เอามาลองเล่นกัน ตัวเจ้าของบล็อกเลยเจอ Project จาก Leader ให้พัฒนาโปรเจคนี้โดยให้ลองใช้ MVVM Pattern

  • Model : เป็น POJO class เช่นเดียวกันกับ MVC และ MVP
  • View : คือเจ้า file .xml และ file ที่ extend Android framework ทั้งหลายนั้นมา
  • ViewModel : เป็นตัวกลางระหว่างเจ้า View และ Model หน้าที่ของมันก็คือการเก็บข้อมูลและจัดการข้อมูลกับหน้า UI เมื่อเจ้า data เปลี่ยน ViewModel ก็จะเปลี่ยนแล้วส่งผลให้เจ้า View หรือ UI ของเรานั้นเปลี่ยนไปด้วยย

ในส่วนของ Mini Codelab ฝั่ง MVVM เจ้าของ blog ได้ทำการ Integrate เอาเจ้า ViewModel และ Live Data ของ Android Architecture เข้ามาใช้ด้วย

ศึกษา Guideline from Google ได้จากที่นี่เลยยย : GitHub - googlesamples/android-architecture-components: Samples for Android Architecture Components.


Mini Codelab :

1st : ทำการสร้างตัว ViewModel โดยที่ extends กับเจ้าตัว ViewModel จาก Android Architecture ก่อนเน้อ ในเจ้า Class นี้จะใช้คู่กับตัว LiveData จาก Android Architecture เหมือนกัน เจ้า LiveData มีหน้าที่ในการรับ Data แล้วส่งออกไปแบบ Observer ใครที่ทำการ Subscribe ตัวมันก็จะได้รับ Data โดยทันที

อย่าลืม Compile Gradle ของ Android Architecture ด้วยนะ Adding Components to your Project | Android Developers มีให้เลือก Compile พรึ้บเลย แต่เราใช้ตัวไหนก็ Compile แค่ตัวนั้นก็พอเนอะ


2nd : เจ้า View หรือตัวที่ extends Android Framework ทั้งหลาย ก็ทำการประกาศเรียกเจ้า Class ViewModel แล้ว Subscribe ตัว Viewmodel เพื่อนำรอรับ Data ที่ได้มาใช้แสดงบน UI


Mini Codelab ของ MVVM แบบเต็มๆในนี้ได้นะคะ :

GitHub - Patchanok/android-mvvm-design-pattern: Mini Codelab for learning

หน้าตาของตัว Mini Application ทั้งตัว MVP และ MVVM ก็จะประมาณนี้


MVP Pattern
: จะทำให้โค้ดเราดูเป็นระเบียบมากยิ่งขึ้น แบ่งการทำงานของ Code อย่างชัดเจนและยังสามารถเขียน Test ได้ง่ายยิ่งขึ้น ส่วนตัว View ที่แต่ก่อนเป็นทั้ง View และ Controller ก็ไม่รกเป็น Controller แบบ Old School ที่คนมารับช่วงต่อต้องร้อง God คนแล้วคนเล่า TT


MVVM Pattern
: ยิ่งแบ่งชัดเจนยิ่งขึ้นในเรื่องของ Class ไหนทำอะไร อีกอย่างหลักๆที่เจ้า MVVM หอบมาด้วยคือ สามารถเขียน Test ได้ง่ายขึ้นเพราะเราได้แบ่งการทำงานของ Code เป็นสัดส่วน และยิ่งดีเข้าไปใหญ่สำหรับการทำ Application ขนาดใหญ่และมีความซับซ้อนสูง


ที่จริงทั้ง 2 pattern นี้มีข้อดีที่แตกต่างกันไปขึ้นอยู่กับการเลือกใช้ซะมากกว่า


Credit : Android Code That Scales, With MVP | Remind Android Code ลองพัฒนา Android Application แบบ MVP กันดูมั้ย? ตอนที่ 1 ~ Sleeping For Less MVP คืออะไร แล้วเกี่ยวอะไรกับ Android – Black Lens