MVVM Architecture
Tags: swift, swiftui, mvvm, ios
Published: 2020-07-20 23:06:35

---
title: MVVM Architecture
published: true
description: A real quick introduction about the MVVM architecture
tags: swift, swiftui, mvvm, ios
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/xjkqoze4gg20lct8rbo9.png
---

## Swift and the MVVM architecture

While building apps using Swift and SwiftUI you'll be following the MVVM architecture which consists of three distinct holes within your application.

- The Model, which is responsible for holding your application's data and being the source of truth of your app.
- The View, which, by name, you can guess that consists the view part of your app, where you'll  write everything that it's related to your UI (buttons, lists, avatar and so on...)
- The ModeView acts more like a "glue" between your Model and your View. He is responsible for enabling the communication between your view and your model, acting like a bridge or a middle agent between the two of them.

![The MVVM Overview](https://dev-to-uploads.s3.amazonaws.com/i/xjkqoze4gg20lct8rbo9.png)


But how exactly does the `ModelView` guarantees this communication between the `Model` and the `View`?

Basically this communication happens by following a pattern of listening to changes, publishing that changes have occurred and "listening" to these publications.

So anytime a change of data happens in the `Model`, the `ModelView` is subscribed to these changes, listening to when they happen:

![Beginning of data flow](https://dev-to-uploads.s3.amazonaws.com/i/ve8tt9u1w3o6xlv8ufy0.png)

And after a change of data occurs, and ModelView detects it, what happens? 

From this point, the ModelView will be responsible for publishing that a change happened. The view will be observing for these publications and will update the interface

![Publishing to View](https://dev-to-uploads.s3.amazonaws.com/i/tk4r99p8thp3pa6xmaar.png)

## The other direction

Now, let's take a look at how the communication happens starting from the `View` part of our application:

```
View -> ModelView -> Model
```

Suppose that in our interface we have a button that increments a counter. How does this update happens? 

When the user clicks in this button, he has **the intent** of incrementing the counter. So, we expose to the `View` through the `ModelView` something that we could call as "Intent functions". They are just regular functions that will be called from an interaction that happens in our interface.

So in this simple case mentioned above, the button **fires an intent to increment the counter.**

When this function (for instance `incrementCounter()`) is invoked from the button click the `ModelView` will simply update the `Model` variable which holds the current counter value.

From this point the cycle basically repeats. After the counter value is updated, the `ModelView` will publish that this value was updated, the `View` will listen to this publication, get the new counter value and update the interface.

The final flow would look close to this:

![MVVM Final Data Flow](https://dev-to-uploads.s3.amazonaws.com/i/zlwm46hivi1u839p2veg.png)

These were just a few notes about the MVVM, there's no detail on how to implement this on an actual code base as I intend to this in a next article.