Model-View-ViewModel (MVVM)

Mar 26 2023
Model-View-ViewModel (MVVM) é um padrão de projeto arquitetônico que está ganhando muita popularidade no desenvolvimento iOS. É um derivado do popular padrão Model-View-Controller (MVC), que tem sido usado no desenvolvimento iOS por muito tempo.

Model-View-ViewModel (MVVM) é um padrão de projeto arquitetônico que está ganhando muita popularidade no desenvolvimento iOS. É um derivado do popular padrão Model-View-Controller (MVC), que tem sido usado no desenvolvimento iOS por muito tempo. O MVVM é uma ótima maneira de separar preocupações e obter melhor legibilidade e manutenção do código. Neste artigo, discutiremos o padrão MVVM e como ele pode ser implementado no Swift.

O que é MVVM?

O padrão MVVM é um padrão de projeto arquitetônico que separa as preocupações da interface do usuário da lógica de negócios. Ele fornece uma separação clara entre a camada de apresentação de dados e a camada de lógica de negócios. Essa separação permite melhor legibilidade, manutenção e testabilidade do código.

O padrão MVVM consiste em três componentes: o modelo, a exibição e o modelo de exibição. O modelo representa os dados, a visão representa a interface do usuário e o modelo de visão é o intermediário entre os dois.

Modelo:

O modelo é responsável pelos dados no aplicativo. É uma abstração dos dados, que podem vir de várias fontes, como um banco de dados, um serviço de rede ou um arquivo. O modelo também é responsável pela validação de dados e lógica de negócios. Ele não deve conter nenhuma interface de usuário ou lógica de apresentação.

Visualizar:

A visão é responsável por apresentar os dados ao usuário. É o componente de interface do usuário do aplicativo. A exibição não deve conter nenhuma lógica de negócios ou validação de dados. Ele deve apenas apresentar os dados de uma forma visualmente atraente.

Ver modelo:

O modelo de exibição é o intermediário entre o modelo e a exibição. Ele é responsável por preparar os dados para apresentação na view. O modelo de exibição também é responsável por manipular a entrada do usuário e atualizar o modelo quando necessário. Ele não deve conter nenhuma interface de usuário ou lógica de apresentação.

Implementando MVVM em Swift:

Para implementar o MVVM no Swift, usaremos os seguintes passos:

Criar o modelo

A primeira etapa na implementação do MVVM é criar o modelo. O modelo deve ser uma estrutura de dados simples que representa os dados no aplicativo. Ele deve conter apenas as propriedades e métodos necessários para interagir com os dados.

Aqui está um exemplo de um modelo:

struct User {
    let name: String
    let email: String
    let age: Int
}

A segunda etapa na implementação do MVVM é criar a visualização. A visualização deve ser um componente separado do modelo e do modelo de visualização. Ele deve conter apenas o código da interface do usuário e não deve conter nenhuma lógica de negócios ou validação de dados.

Aqui está um exemplo de visualização:

import UIKit

class UserView: UIView {

    let nameLabel = UILabel()
    let emailLabel = UILabel()
    let ageLabel = UILabel()

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupSubviews()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupSubviews()
    }

    private func setupSubviews() {
        // add subviews to the view
        addSubview(nameLabel)
        addSubview(emailLabel)
        addSubview(ageLabel)
    }

    func configure(with user: User) {
        nameLabel.text = user.name
        emailLabel.text = user.email
        ageLabel.text = "\(user.age)"
    }
}

A terceira etapa na implementação do MVVM é criar o modelo de exibição. O modelo de exibição deve ser um componente separado do modelo e da exibição. Ele deve conter apenas lógica de negócios e lógica de apresentação. O modelo de exibição deve interagir com o modelo para preparar os dados para apresentação na exibição.

Aqui está um exemplo de um modelo de exibição:

class UserViewModel {
init(user: User) {
    self.user = user
}

func configure(view: UserView) {
    view.configure(with: user)
}
}

A etapa final na implementação do MVVM é conectar o modelo de exibição e a exibição. Isso pode ser feito usando injeção de dependência ou criando o modelo de exibição no controlador de exibição e passando-o para a exibição. Aqui está um exemplo de como conectar o modelo de exibição e a exibição:

class UserViewController: UIViewController {

    let userView = UserView()
    let userViewModel: UserViewModel

    init(user: User) {
        self.userViewModel = UserViewModel(user: user)
        super.init(nibName: nil, bundle: nil)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        userViewModel.configure(view: userView)
        view.addSubview(userView)
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        userView.frame = view.bounds
    }
}

Conclusão

O padrão MVVM é uma ótima maneira de separar preocupações e obter melhor legibilidade de código, capacidade de manutenção e capacidade de teste no desenvolvimento iOS. Ao separar a interface do usuário da lógica e dos dados de negócios, podemos criar um código mais modular e reutilizável. O Swift fornece uma ótima linguagem para implementar o padrão MVVM devido ao seu suporte para programação orientada a objetos e programação funcional. Ao implementar o MVVM no Swift, podemos criar ótimos aplicativos iOS que são mais fáceis de desenvolver, manter e testar.