My first Swift UI MVVM App

Beautiful

I made my first MVVM app following the course by Swiftful Thinking / Nick Sarno. Here is what you will learn.

What is MVVM

MVVM stands for Model — View — View Model. It is very similar to the MVC model with one huge exception.

MVC (Model — View — Controller) is a way of organizing your code in which you have:

A model where you organize data. E.g. a person model has a first name, last name, drug addiction, etc.

A view where users interact with your app

A controller where you do stuff. Here is where you would handle your user interacting with the app. What happens when they click this? Input that?

MVVM looks like this:

A model where you organize data. E.g. a vampire has an age, name, glittery six pack abs.

A view where users can use their eyeballs and see what is happening.

A view model where you do stuff. Same as a controller mostly.

Identical, except MVVM also has:

Binder

Declarative data and command-binding are implicit in the MVVM pattern. In the Microsoft solution stack, the binder is a markup language called XAML.[9] The binder frees the developer from being obliged to write boiler-plate logic to synchronize the view model and view. When implemented outside of the Microsoft stack, the presence of a declarative data binding technology is what makes this pattern possible,[5][10] and without a binder, one would typically use MVP or MVC instead and have to write more boilerplate (or generate it with some other tool).

~ Wikipedia (link)

Swift UI relies on structs. Swift UI uses a special binding pattern that will destroy and recreate structs once the data on that binding changes. This is really fast apparently.

The point of the binder in Swift UI is; it is the way all data is presented on the app. You cannot change the UI in any other way (to my limited knowledge).

How to organize MVVM

Nick teaches you how to organize your files in an MVVM app.

Organize your files into 3 folders like this

This app is a map app that shows different landmarks. So we can organize our app like this:

A model called Location. This will store stuff like the name, coordinates, images, etc.

Location.swift

A view model called LocationViewModel. Any time something changes in the app (e.g. the user clicks on a different location) we want to write code for that here.

LocationViewModel.swift

A view called LocationsView. This is where the bulk of the app will be.

LocationView.swift

This is the bulk of the app.

This is some nice code here. As you can see, the views are completely free of logic. No functions, nothing. They simply reflect the state. Where is the state? In the view model. The view model has 5 @published properties. When these change, the view will change.

The last bit is the model. Self explanatory.

Let’s say I wanted to add Events to this app. Holidays and such. I would make a model called Events (date, name, description, etc). Then I would make a view call EventsView and a view model called EventViewModel. You get it.

How to access the View Model

Share you view model across multiple views using the @EnviromentObject property wrapper. In your root app file you can set an environment object like this.

Then in any view (and any subview) you can get that object like this:

Breaking up the view

Make your views extra small and readable. This was completely new to me. Thanks Nick.

Sadly not this view.

Use computed properties to break up and organize your view files. I have always broken my views into different components / smaller view files but this is really cumbersome when you need to pass the state around. Here is a simpler way.

This is a simple view with some buttons. Look at the code you can see that most of the view is just these variables. (previewImage, previewTitle, learnMoreButton, nextButton)

Before, I would of made these into their own view structs. That would mean I would have to figure out how to get the buttons to talk to their super view, etc. It’s a headache. Until I learned this:

Make an extension of your view and simply make a bunch of computed properties that return some View. Then you can put whatever views you want inside them and because it’s an extension, not a different struct, you get access to the state and whatever else. Very easy way to organize your views with zero drawbacks.

Make it beautiful

Lastly, I learned a lot about how to make views look good. Something that is really important to me. Nick has a real talent for this.

However, as was famously said

Beauty is in the eye of the beholder.

~ Daniel Radcliffe

I’m not an artist, but I’m good at copying. If you want to take a look at the code, check it out here. Star me baby.

Thank you

Check out the course on youtube here. Nick Sarno’s tutorials may be the best on youtube.

I’m broke and jobless documenting going from 0 to developer. I’ll be writing about every step of the way. Follow this blog if you’re interested in that.

Thanks for reading. ❤

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Liyicky

Liyicky

Hey, I’m Jason Cheladyn. Going back to the coding world after 6 years of teaching English in Japan. https://www.twitter.com/liyicky https://www.liyicky.com