Paul Allies
Code Foundation, a division of Nanosoft

Code Foundation, a division of Nanosoft

SwiftUI MVVM

SwiftUI MVVM

Paul Allies's photo
Paul Allies
·Oct 7, 2021·

2 min read

Model–View–ViewModel (MVVM) is a software architectural pattern that facilitates the separation of the development of the GUI (the view) from the development of the business logic or back-end logic (the model) so that the view is not dependent on any specific model platform. The ViewModel of MVVM is responsible for exposing the data objects from the model in such a way that objects are easily managed and presented. In this respect, the ViewModel is more model than view and handles most if not all of the view’s display logic. The ViewModel may implement a mediator pattern, organizing access to the back-end logic around the set of use cases supported by the view. I’ve put together a small sample showing these 3 layers and how they relate to each other in SwiftUI. You’ll notice that other than property/method names, none of the objects need to know anything about the others. Each layer can be built completely independent of the others.

Sample Model

import Foundation

struct User: Identifiable {
    let id: UUID
    let name: String
}

struct UserModel{
    private(set) var users :[User] = []

    mutating func addUser(_ user: User){
        users.append(user)
    }
}

We define a User model. The model has 2 members, a privately changeable users list and a mutating function to change the state of the user's collection. Note the User struct conforms to the Identifiable protocol. SwiftUI needs to know how it can identify each item uniquely otherwise it’s not able to compare view hierarchies to figure out what has changed when a new body is re-built in the view.

Sample ViewModel

This should contain everything one would need to interact with the view. Right now it contains 2 members: users, and an addUser function.

import Foundation
import UIKit


class UserViewModel: ObservableObject{
    @Published private var userModel =  UserModel()

    var users: [User] {
        return userModel.users
    }

    func addUser(_ user: User){
        userModel.addUser(user)
    }
}

Sample View

And now the View. These are DataTemplates that define how data should be displayed.

import SwiftUI

struct UserView: View {
   @ObservedObject var viewModel = UserViewModel()

    var body: some View {
        NavigationView{
            List(viewModel.users) { user in
                VStack(alignment: .leading){
                    Text("\(user.name)")
                    Text("\(user.id)")
                }
            }
            .navigationTitle("Users")
            .toolbar {
                Button(action: {
                    viewModel.addUser(User(id: UUID(),name: "User"))
                }) {
                    Image(systemName: "plus")
                }
            }
            .listStyle(PlainListStyle())
        }
    }
}

Anything that conforms to ObservableObject can be used inside SwiftUI, and publish announcements when its values have changed so the View can be updated. Clicking the add button will add User Objects to the collection which will cause the view to be rebuilt as shown here:

1_vv5xeiS-mDR_PLuHvVDvwQ.png

 
Share this