SwiftUI 2.0: MVVM - A Practical Approach

welcome back in today's video we're going to talk about mbvm and swift ui and the way i'm going to explain this to you is by using practical examples so without any further ado let's get straight into it so first of all what is mbvm mbvm is the preferred architectural design paradigm for swift ui projects so it basically allows us to improve our code organization by dividing our code into parts that belong to the model to the view and the view model it is also different from mdc which was heavily used with ui kit which we had before swift ui now what is the idea behind mvvm so as i mentioned earlier we're trying to divide our code into models view models and views now let's start with the models what is a model now a model can represent data and logic so imagine you have this struct person that contains some name and an h then any instance out of it would represent some data however we could also have some logic if you have some game for example that itself is also a model now inside of this game model we also have this cards array where card itself is also a model and we have some logic for example to choose the card where we would most likely modify the cards array by for example flipping the card at a specific index in the array now a model is completely ui independent so there's never some code like this you can't have a card view inside of a model called cart and you should also not modify the view inside of a model the model also represents the source of truth now if we would create an instance of a person with the name alice and age 32 then that is the source of truth nothing more nothing less now how does the view work the view is everything visible on the screen if you create a new subui project in xcode you will have this content view which basically renders this hello world text view on screen this is a view because it presents data directly on the screen now the content view is a view the text is also a view and if you had something else like a button it would also be your view because those are all things that can be presented on the screen now the main goal of a view should always be to display the source of truth now as i mentioned earlier the source of truth is represented by some model so you could simply just read it directly from the model which is fine in fact for very simple apps you do not even need the v model you can directly read it from the model and present it on the view however most of the times the apps are not that simple you're not only reading from the model but you also have to do some other things now assume our app has this edit button and when the edit button is tabbed the user wants to change for example the name or age in that case read only doesn't help us now another reason why read only is not very helpful for a more complex app is assume our person model doesn't store the age as an integer because the developer noticed it would be much smarter to store their birthday as a date because then we can automatically update the age based on the birthday and the current date now if the view would try to read this birthday which is of type date it would be a bit confused because it is not really interested in the data object is more interested in the age so it also has to translate this into something that is relevant for the view so the responsibilities for the view increases the view does not only display the source of truth but it also has to translate and modify the model now to reduce the complexity we have the view model now the view model is our interpreter between the model and the view and you can think of it as some kind of glue between both of these now let's have a look at the previous example assume we have again this model and this time the h is replaced with the birthday and we're just storing the date in there now the viewmodel will instantiate a model however it will also interpret the model into something that is more relevant to the view because the view can't do anything with the date the view model will then convert this birthday into an age that is more relevant to the view and then the view can basically read off the view model and just use the data that is necessary to present on the view and the view can easily read the the name and age and update its view easily so this is an example of interpreting however what happens if the user decides to tap on the edit button for example now in that case the view would not directly modify the model but instead it will let the view model know because the viewmodels test is also to process intents so when the edit view button was tapped it will tell the viewmodel to change the name to bob and the viewmodel will then modify the model and sometimes it happens really fast sometimes it is a network request and the change of the model depends on how long the network request takes however at some point the model or the source of truth will be modified and the view model will notice that change now the view model has to notify the view about the change and the way it modifies the view about it is it publishes that something changed now on the other hand for the view to notice that something changed it has to observe constantly for changes from the viewmodel so the view is automatically capable to observe these changes now to get a better idea of this let's jump into xcode and have a look at it more closely let's start by creating a new xcode project and make sure you choose the app give it some name i will simply call this one mbvm and also make sure that the interface is set to swift ui the life cycle to sort your app and the language to swift continue by pressing next save it somewhere you like all right once you're in xcode make sure that you select the iphone 11 as your simulator and try to get the automatic preview to run now when our project is created for the first time you will get this contentview.swift and inside you will have this content view struct now in terms of mvvm this will be part of our views and usually you would create separate groups for them so you would go in here right click and create a new group and you would do something like this for the views models and via models however for simplicity i will just separate them by these comments so i will just remove this group for now now let's start by defining our model [Music] let's say we have this similar example as from the presentation before we will have a strut called person and inside of that person we will have a variable called name of type string and a variable h of type integer now if we just want to read off the models and do not really want to interact with them we could just use it in our wheel so we could say something like let alice be equal to a person and then initialize it with a name and an h and then we could simply pass it in here and for example show the name now this is totally fine however once your app gets more complex it is not that sufficient for you anymore to just read it off the model now let's put this text into a vertical stack so we will embed it into a vertical stack and i will just copy this down here and instead of the name i want the h as well so i have to cast it into a string because the h is of type integer and then i can say alice dot h and if you resume you should see it here as well and also let me change the font so we can better see it all right now assume the h we are getting is not an integer anymore because it's kind of annoying to reset the h every time so it's probably easier if you just store the birthday for a person and then calculate the age so let's make this a birthday and also the type will be then a date xcode will complain here because we do not have an h yet we have a birthday and now for simplicity i'm going to set the birthday to the current date so just initialize date and let me also close this sidebar now obviously this won't work anymore so let me first comment this out and see if this runs all right now obviously it becomes a bit more tricky to show the age here because all we have is the birthday but we have to go calculate the current year minus the birthday year to get the actual age and have to make sure that this is a string now doing all of this in here become really unmaintainable at some point and this is where the wii model comes in as a translator and takes care of this for us so let me create the v model first [Music] i will simply call this v model content view wheel model [Music] and usually v models conform to the protocol observable object because as i mentioned in the presentation the viewmodel has to somehow notify the view when the model changed and you can do that by making sure that the viewmodel conforms to this protocol now instead of instantiating the model inside of the wheel we will instantiate it in our viewmodel so we'll just paste this in here and usually this is also a variable because it can change the model now we still have to use our v model inside of our wheel and observe the changes and there are many ways you can do that you can do it like so you declare a property wrapper called observed object or a variable called via model and declare it as a type of content view model and this is totally fine all you have to do is let the parent view take care of the initialization now often times you also see something like this and this works sometimes however in many cases it will lead to a crash because you will most likely use your v-model in here and when you initialize it in here already every time this view gets rebuilt you are allocating memory in the heap repeatedly so if you decide to initialize it in here you should not use observed object but instead use state object and you tell the view to keep the reference to this all right now we have access to the view model now inside of the remodel we made this model public but you could actually even make it private because the way we make the properties of a model accessible to the view is by our own getters so we would have something like the name and here we would simply return alice.name and we would also return the h of type string now here we would do some date magic that turns the date into an h string [Music] and then at some point we will return 32 now obviously here we would do something more we would probably have some kind of date formatter initialized in here as well and do some basic math to figure out what the actual age should be however that is the cool part about the remodel it hides the complexity to the view all that the view has to do is simply access it so to access the name it will simply say remodel dot name and to access the age it would simply say remodel h and if you resume you will see both alice and her age now let's make it a bit more complex let's say we have a button [Music] and the button will have some title let's say change name and the action is going to be to change the name to bob and the way we do that is we we're going to tell the view model to do that instead of directly accessing the model and to do that the v model needs to have an intent so let's create one it's going to be a function called change name and it's going to take a name as of type string and it will simply say alice dot name is equal to the new name that we get as an argument now let's try this [Music] and let's resume and run this now if we tap on change name you will notice nothing happens why is nothing happening here well we're telling the viewmodel to change the name to bob and the viewmodel changes the model just as we saw in the presentation however at no point we are really telling the view that our model changed so how do how does the view model notify the view about the change now the way you do that is you have to mark the model that is going to change with the at published property wrapper and that way when this name is changed i publish that something changed so that anything listening to it will notice it in this case the content view is interested in when the wii model changes so it will get notified so let's try if this works so if i change the name now it will change to bob now this is a pretty simple example of mvvm however you can already see how beneficial it is to have such a remodel it takes care of complex calculations and formatting into a type that is more useful to a view but it also takes care of modifying the model and notifying the view when the model changed all right now this is really all i wanted to show you in this tutorial i hope this was helpful make sure you subscribe to the channel so you get notified when new content arrives and i will see you in the next tutorial thank you for watching

Channel: BeyondOnesAndZeros

Views: 25,475

Keywords: swiftui, swiftui 2.0, swiftui tutorials, swiftui 2.0 tutorials, mvvm, swiftui mvvm, swiftui 2.0 mvvm, swiftui mvvm tutorial, learning swiftui mvvm, learn mvvm, mvvm tutorial, swiftui view model, swiftui model view viewmodel, model view viewmodel, mvvm practical examples, swiftui mvvm examples, swiftui 2.0 mvvm example

Id: LntH6moCuo0

Length: 14min 28sec (868 seconds)

Published: Sun Oct 11 2020

Reddit Comments

[u/thecrashmaverick]

I really like this channel. The use of professional slides to understand concepts before jumping into the code is really refreshing and helpful.

[u/[deleted]]

[removed]

[u/HFCB]

Really practical. Thanks!