Clean React MVVM inspired by Apple SwiftUI
Tags: react, mvvm, swift, typescript
Published: 2023-01-13 08:23:02

---
title: Clean React MVVM inspired by Apple SwiftUI
published: true
description: Implementing MVVM pattern the way SwiftUI do 
tags: #React #MVVM #Swift #Typescript
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-12-22 20:09 +0000
---

I used to develop web apps using React for a long time and as recently I had to work with IOS Mobile development team inside my company helping to port web application to IOS and I noticed the Apple SwiftUI framework, indeed it is heavily inspired by React.js as data and state driven rendering technique, and  it does apply MVVM architecture that i find a very clean approach, therefor I decided to cheat 🙂

So let's first look at simple plain SwiftU implementation of MVVM and see how clean it look

```swift
// Model
struct Task {
    var id: UUID = UUID()
    var title: String
    var complete: Bool
}

// ViewModel
class TodoManagerViewModel: ObservableObject
{
    // value publishers (publish change to view state and force view render)
    @Published var tasks: [Task] = []
    
    func addTask(title: String)
    {
        tasks.append(Task(title: title, complete: false))
    }
    
    func complete(id: UUID)
    {
        for i in tasks.indices
        {
            if tasks[i].id == id
            {
                tasks[i].complete = true
            }
        }
    }
    
    func clear()
    {
        tasks.removeAll()
    }
}


struct ContentView: View {
    // Observe ModelView and request render
    // if any @Published variables changed
    @StateObject var todoManger = TodoManagerViewModel()


    
    var body: some View {
        // Render logic same as
        // React Components composition style
        return AnyView()
    }
}
```

and by compiling this code we get this app

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1115tmq1jr70ubecokt0.gif)



So the key design points is:
- ViewModel with `@Published` properties
- attach the ViewModel to the View to receive published changes.

## Now let us construct the same design using Reactjs

I built this typescript module to help us construct a ViewModel and publish it state .

[react-mvvm-like](https://github.com/rayeddev/react-mvvm-like)

now let us see how we can build MVVM react TodoManager application with this module the same way as Apple SwiftUI do.

1) install [react-mvvm-like](https://github.com/rayeddev/react-mvvm-like)

2) creating Task Model with autoDoneAfter property so task gonna flip to done after a few seconds if not done by user.

{% gist https://gist.github.com/rayeddev/4014fe5e173f98779cb45eb9d1215976 %}

3) construct the ViewModel class extending ObservableObject
and define published properties 

{% gist https://gist.github.com/rayeddev/cb3edf3b118aa98a51b308b60f2a3f69 %}
 
4) receive the changes inside React Component.

{% gist https://gist.github.com/rayeddev/b6e40a16ef6936906ea807a0ad03e355 %}

thats it, we are done, please check full example below:

{% embed https://codesandbox.io/embed/react-mvvm-experiment-5w10dk?fontsize=14&hidenavigation=1&theme=dark %}



**If you have any feedback on this article, please let me know!**