Apa itu MVVM?
MVVM (Model-View-ViewModel) adalah sebuah arsitektur atau pola desain software, yang memisahkan logika bisnis dengan logika presentasi atau kontrol antarmuka pengguna (UI) menjadi tiga lapisan, yaitu model, view, dan viewmodel.
MVVM juga dikenal dengan model-view-binder, dan dikembangkan oleh arsitek Microsoft, Ken Cooper and John Gossman, sebagai solusi dari kelemahan pola desain MVP (Modul-View-Presenter) dan MVC.
Dirangkum dari Microsoft, memisahkan kode antara logika aplikasi dengan UI membuat aplikasi lebih mudah dikembangkan dan diuji karena minim masalah.
Pola ini sering digunakan pada Windows, program presentasi grafik seperti PowerPoint, dan populer untuk mengembangkan aplikasi seluler Android dan iOS.
Seperti yang diketahui, aplikasi seluler membutuhkan update secara berkala agar bisa digunakan. Penggunaan MVVM membuat aplikasi lebih mudah dipelihara dan dikembangkan tanpa menulis kode baru.
Selain itu jika ditemukan bug pada salah satu komponen aplikasi, misalnya antarmuka pengguna, perbaikan pada error tersebut tidak akan mengubah komponen lainnya.
Karena alasan tersebut, MVVM populer di kalangan Android app developer.
Alur Kerja MVVM
Seperti yang telah disinggung sebelumnya, MVVM membagi kodenya ke dalam tiga lapisan, yaitu:
#1 Model
Model merupakan tempat untuk logika bisnis dan data aplikasi, yang didapatkan dari viewmodel setelah menerima input pengguna melalui view.
#2 View
View bertanggung jawab menentukan struktur, tata letak, teks, gambar, dan elemen antarmuka lainnya yang nantinya dilihat oleh pengguna. Seluruh elemen tersebut ditulis dalam bahasa XML dengan kode yang terbatas.
Tujuan dari view adalah menginformasikan viewmodel apa yang dilakukan oleh pengguna.
Layer ini tidak mengandung logika aplikasi apapun. Namun dalam beberapa kasus, view bisa berisi logika UI yang mengimplementasikan perilaku visual yang sulit diekspresikan dalam XML, seperti animasi.
#3 ViewModel
Layer viewmodel berada di antara layer view dan model, dan berfungsi sebagai penghubung keduanya.
Viewmodel mendapatkan input dari view mengenai aktivitas pengguna, dan melakukan data binding 2 arah (2-way data binding). Data binding adalah proses mengikat dua data sumber bersama dan menyinkronkan keduanya.
Perubahan pada elemen dalam kumpulan data secara otomatis diperbarui dalam kumpulan data terikat, dan menentukan fungsi UI.
Setelah mendapatkan data, viewmodel meneruskannya ke layer model untuk dimanipulasi dan disimpan.
Perubahan status yang terjadi selama proses tersebut akan diumumkan melalui notifikasi perubahan.
Kenapa Memilih MVVM?
Dengan membagi kode menjadi tiga lapisan seperti pada desain MVVM, developer lebih mudah melakukan perawatan dan perbaikan jika terdapat bug pada sistem.
Selain itu, berikut beberapa keuntungan MVVM:
- Pemeliharan mudah, di mana developer bisa merilis versi terbaru aplikasi dengan fitur baru secara berkala tanpa mengganggu keseluruhan kode aplikasi.
- MVVM memungkinkan developer mengganti atau menambahkan coding baru ke dalam program.
- Pengujian kode lebih mudah, karena setiap modul kode berdiri sendiri dalam layer yang berbeda.
- Kode yang ditulis bisa digunakan kembali.
- Meningkatkan kolaborasi antara developer dan UI designer selama proses app development.
Namun, MVVM tidak terlalu cocok untuk proyek kecil dan dianggap berlebihan untuk aplikasi dengan tampilan yang sederhana.
Selain itu jika data binding terlalu kompleks, developer akan sulit melakukan debugging (menemukan dan memperbaiki bug atau error pada kode aplikasi).
FAQ (Frequently Asked Question)
Apa perbedaan MVVM vs MVC?
MVC (Modul-View-Controller) dan MVVM adalah dua jenis pola desain yang sama-sama memisahkan komponen back end (seperti kode dan logika bisnis) dan front end (tampilan aplikasi).
Namun, keduanya memiliki pendekatan yang berbeda. Dirangkum dari Tech Target dan Geeks for Geeks, berikut perbedaan MVVM dan MVC.
- MVC memiliki controller yang berfokus pada bagian logika. Sedangkan MVVM tidak memiliki controller, namun semua logika berada pada ViewModel.
- Perubahan pada salah satu elemen MVC secara langsung memengaruhi fungsi elemen lainnya. Berbeda dengan MMVM, di mana perubahan elemen tidak akan mengganggu fungsi seluruh elemen.
- Dengan MVVM, front end developer dan back end developer bisa mengambil data yang dibutuhkan dari ViewModel. Cara ini tidak akan bisa dilakukan pada pola desain MVC.
- MVVM membuat developer menguji komponen aplikasi secara terpisah, berbeda dengan MVC yang bergerak sebagai satu kesatuan.
