Bagikan melalui

Pengikatan data dan MVVM

  • Artikel

Model-View-ViewModel (MVVM) adalah pola desain arsitektur UI untuk memisahkan UI dan kode non-UI. Dengan MVVM, Anda menentukan UI Anda secara deklaratif di XAML dan menggunakan markup pengikatan data untuk menautkannya ke lapisan lain yang berisi data dan perintah. Infrastruktur pengikatan data menyediakan kopling longgar yang menjaga UI dan data tertaut disinkronkan dan merutekan input pengguna ke perintah yang sesuai.

Karena menyediakan kopling longgar, penggunaan pengikatan data mengurangi dependensi keras antara berbagai jenis kode. Ini memudahkan untuk mengubah unit kode individual (metode, kelas, kontrol, dll.) tanpa menyebabkan efek samping yang tidak diinginkan di unit lain. Pemisahan ini adalah contoh pemisahan kekhawatiran, yang merupakan konsep penting dalam banyak pola desain.

Manfaat MVVM

Memisahkan kode Anda memiliki banyak manfaat, termasuk:

  • Mengaktifkan gaya pengkodean berulang dan eksploratif. Perubahan yang terisolasi kurang berisiko dan lebih mudah dieksperimen.
  • Menyederhanakan pengujian unit. Unit kode yang terisolasi satu sama lain dapat diuji secara individual dan di luar lingkungan produksi.
  • Kolaborasi tim pendukung. Kode yang dipisahkan yang mematuhi antarmuka yang dirancang dengan baik dapat dikembangkan oleh individu atau tim terpisah, dan terintegrasi nanti.
  • Meningkatkan keberlanjutan. Memperbaiki bug dalam kode yang dipisahkan cenderung tidak menyebabkan regresi dalam kode lain.

Berbeda dengan MVVM, aplikasi dengan struktur "code-behind" yang lebih konvensional biasanya menggunakan pengikatan data untuk data khusus tampilan, dan merespons input pengguna dengan langsung menangani peristiwa yang diekspos oleh kontrol. Penanganan aktivitas diimplementasikan dalam file code-behind (seperti MainPage.xaml.cs), dan sering digabungkan erat dengan kontrol, biasanya berisi kode yang memanipulasi UI secara langsung. Ini menyulitkan atau tidak mungkin untuk mengganti kontrol tanpa harus memperbarui kode penanganan peristiwa. Dengan arsitektur ini, file code-behind sering mengakumulasi kode yang tidak terkait langsung dengan UI, seperti kode akses database, yang akhirnya diduplikasi dan dimodifikasi untuk digunakan dengan halaman lain.

Lapisan aplikasi

Saat menggunakan pola MVVM, aplikasi dibagi menjadi lapisan berikut:

  • Lapisan model menentukan jenis yang mewakili data bisnis Anda. Ini termasuk semua yang diperlukan untuk memodelkan domain aplikasi inti, dan sering kali mencakup logika aplikasi inti. Lapisan ini sepenuhnya independen dari lapisan tampilan dan model tampilan, dan sering berada sebagian di cloud. Mengingat lapisan model yang diimplementasikan sepenuhnya, Anda dapat membuat beberapa aplikasi klien yang berbeda jika Anda memilih, seperti UWP dan aplikasi web yang bekerja dengan data yang mendasar yang sama.
  • Lapisan tampilan mendefinisikan UI menggunakan markup XAML. Markup mencakup ekspresi pengikatan data (seperti x:Bind) yang menentukan koneksi antara komponen UI tertentu dan berbagai anggota model tampilan dan model. File code-behind terkadang digunakan sebagai bagian dari lapisan tampilan untuk berisi kode tambahan yang diperlukan untuk menyesuaikan atau memanipulasi UI, atau untuk mengekstrak data dari argumen penanganan aktivitas sebelum memanggil metode view-model yang melakukan pekerjaan.
  • Lapisan model tampilan menyediakan target pengikatan data untuk tampilan. Dalam banyak kasus, model tampilan mengekspos model secara langsung, atau menyediakan anggota yang membungkus anggota model tertentu. Model tampilan juga dapat menentukan anggota untuk melacak data yang relevan dengan UI tetapi tidak untuk model, seperti urutan tampilan daftar item. Model tampilan juga berfungsi sebagai titik integrasi dengan layanan lain seperti kode akses database. Untuk proyek sederhana, Anda mungkin tidak memerlukan lapisan model terpisah, tetapi hanya model tampilan yang merangkum semua data yang Anda butuhkan.

MVVM dasar dan tingkat lanjut

Seperti pola desain apa pun, ada lebih dari satu cara untuk mengimplementasikan MVVM, dan banyak teknik yang berbeda dianggap sebagai bagian dari MVVM. Untuk alasan ini, ada beberapa kerangka kerja MVVM pihak ketiga yang berbeda yang mendukung berbagai platform berbasis XAML, termasuk UWP. Namun, kerangka kerja ini umumnya mencakup beberapa layanan untuk menerapkan arsitektur yang dipisahkan, membuat definisi yang tepat dari MVVM agak ambigu.

Meskipun kerangka kerja MVVM canggih dapat sangat berguna, terutama untuk proyek skala perusahaan, biasanya ada biaya yang terkait dengan mengadopsi pola atau teknik tertentu, dan manfaatnya tidak selalu jelas, tergantung pada skala dan ukuran proyek Anda. Untungnya, Anda hanya dapat mengadopsi teknik yang memberikan manfaat yang jelas dan nyata, dan mengabaikan orang lain sampai Anda membutuhkannya.

Secara khusus, Anda bisa mendapatkan banyak manfaat hanya dengan memahami dan menerapkan kekuatan penuh pengikatan data dan memisahkan logika aplikasi Anda ke dalam lapisan yang dijelaskan sebelumnya. Ini dapat dicapai hanya menggunakan kemampuan yang disediakan oleh Windows SDK, dan tanpa menggunakan kerangka kerja eksternal apa pun. Secara khusus, ekstensi markup {x:Bind} membuat pengikatan data lebih mudah dan berperforma lebih tinggi daripada di platform XAML sebelumnya, menghilangkan kebutuhan akan banyak kode boilerplate yang diperlukan sebelumnya.

Untuk panduan tambahan tentang menggunakan MVVM dasar dan siap pakai, lihat sampel Database Pesanan Pelanggan di GitHub. Banyak sampel aplikasi UWP lainnya juga menggunakan arsitektur MVVM dasar, dan sampel Aplikasi Lalu Lintas mencakup versi code-behind dan MVVM, dengan catatan yang menjelaskan konversi MVVM.

Lihat juga

Topik

Pengikatan data secara mendalam
Ekstensi markup {x:Bind}

Sampel

Sampel Database Pesanan Pelanggan
Sampel Inventarisasi VanArsdel
Sampel Aplikasi Lalu Lintas