Pola Arsitektur MVVM pada Swift

Have you tried MVVM ?

Hi there 😁 ! Pastikan anda sudah paham mengenai TableViewController, Extension, & Closure Callback sebelum melanjutkan ya.

Apple merekomendasikan Pola Arsitektur MVC (Model-View-Controller) untuk digunakan developer dalam iOS / MacOS development.

https://www.raywenderlich.com/132662/mvc-in-ios-a-modern-approach

Namun dengan adanya ViewController pada Swift, banyak aplikasi yang dibuat menjadi seperti :

https://medium.com/flawless-app-stories/how-to-use-a-model-view-viewmodel-architecture-for-ios-46963c67be1b

Dengan ViewController tersebut , bukan tidak mungkin aplikasi akan menjadi sebuah MVC (Massive View Controller).

Mengenal MVVM

Dengan menggunakan MVVM, sebuah aplikasi dapat dibangun secara lebih rapi dan mudah untuk di maintenance.

MVVM (Model-View-ViewModel) memindahkan logika & manipulasi data dari ViewController ke ViewModel. Dimana ViewController hanya berisi pengaturan tampilan aplikasi.

https://sudo.isl.co/swift-mvvm-intro/

Deskripsi

  • Model : Definisi data model yang digunakan
  • View Model : Logika & Manipulasi data yang didapat dari API / Localization untuk ditampilkan
  • View : Pengaturan tampilan yang dibutuhkan (TableView, CollectionView, dll)
Intinya, View merubah tampilan untuk UI apabila ada perubahan data dari ViewModel.

Cara kerja

Dengan binding data, View dapat mengetahui perubahan yang terjadi di Observable ViewModel. Ada beberapa cara untuk dapat membuat binding tersebut, namun di Story ini saya akan menggunakan Closure Callback.

TableView menggunakan MVVM

Model yang sudah saya buat di Story sebelumnya, dapat digunakan untuk inisiasi data setelah memanggil API di ViewModel.

class MarvelViewModel

func loadData di atas, digunakan untuk mendapatkan data dari API menggunakan parameter yang dibutuhkan. Kemudian data tersebut diinisiasikan menggunakan Data Model.

Terakhir, setelah mengisi data ke properties yang dibutuhkan, method tersebut memanggil resultAPI.

Disini proses update UI berlangsung, dimana setiap perubahan resultAPI di Observe oleh ViewController.

class MarvelTableVC

Done~ , that’s what MVVM is 🎉 🎉 🎉

Pemisahan dataSource & Delegate pada TableView

Untuk menerapkan MVVM secara tepat, alangkah baiknya dataSource juga diterapkan di ViewModel, tempat kita memanggil data dan memanipulasi data.

extension MarvelViewModel

Sedangkan TableViewDelegate berada di ViewController.

extension MarvelTableVC

TableViewController diatas masih dapat dikembangkan lagi, dimana class yang digunakan untuk Cell tidak perlu untuk dibuat file sendiri, namun juga berada di dalam TableViewController supaya lebih simple.