How to Use MVVM (Model View ViewModel) in Swift & iOS - 2021

[Music] another Swift tutorial today we're gonna be taking a look at how we can use the model view viewmodel otherwise known as mvvm design pattern in our iOS app so first and foremost hit that like button below if you're excited for mvvm and if you are into iOS development in general I do Swift tutorials daily with that being said let's get into it so mvvm like I mentioned is a design pattern in iOS to split up parts of your code so the model is your data part a view is what the user sees the actual user interface and the view model is the part of the data that is actually shown on the view hence the term view model so if we're not familiar with Model View controller I encourage you to take a look at a video I have on that because this concept of mvvm improves MVC and I'll also mention that mvvm is super popular and in industry apps from Google Facebook Microsoft even Apple actually used as design paradigm for the sake of it being cleaner than MVC so a problem that MVC often has is the controllers get really large and people often joke and call the massive view controllers so mvvm further adds this view model thing which we're gonna show in an example that helps clean up what the controller has to do now in this diagram that we see here we see a bunch of arrows going from the view to the view model to the model and this is similar to NBC in the way that when a model changes it tells a view model which will then go and update the view and something that people often confuse with this design pattern is you don't see a controller here and that isn't because we're not gonna have a controller that's just because the MVVM pattern already assumes that we have a controller and focuses the actual pattern on the view model and the model being two distinct objects so with that being said let's actually close up our browser here and we're gonna hop into Xcode and we're gonna show an example of mvvm with implementing a custom table view if you're not familiar how to implement a custom table view cells I encourage you to watch a video I have on that which goes through the basics of that so with that being said let's start with a single view application let's call it whatever you want I will call it mvvm save it wherever you want make sure you have your simulator up of course so first and foremost we're gonna just set up a basic table view and then once we have that up and running in our app which we're gonna really quickly compile this for we're gonna add a custom cell and talk about the view model piece because that's that's really what's what's new in this pattern right so let's go to our view controller in our view controller we can add an outlet and implement a basic table view so bear with me while I go through that boilerplate for you all so we have a UI tableview outlet in here we're gonna say table view delegate datasource and as I'm up here actually we're gonna do UI tableview datasource Stelling it and we're gonna do number of rows I'm gonna say data count and of course data we don't have anything right now let's do data equals some strings or an array of strings rather and we're gonna do self row we're gonna say let's say equals tail of you table view that we're gonna DQ a cell for an identifier of cell and index path and we're gonna set the cells label whoops cool then we're gonna return the cell and lastly we're gonna do did select cell whoops we're going to did select believe is this one let's see a table of you did select row that's what I wanted and in here we're gonna do tail of you deselect at the index path and animated true and before we run this we're gonna go and in our storyboard we're gonna add the table of you and a cell and the cell ID so let's come in here let's hit this find the table view in our list of stuff drag it on let's add that constraint or sorry let's add that outlet connection before we add the constraint like so then once we click it we're gonna add a couple of constraints of this guy by hitting this we're gonna pin it to each side and let's see what else do we need to do we need to add a cell and give it the identifier that we put in our code so for prototype cells we're gonna increment this number by one let's expand this to give ourselves some more room to work one and let's come in here go to the table view cell and give us give this an ID of cell so let's run it and again I know I went through that pretty fast but if you're not familiar with table views I have a separate video on it cool so we have basically this controller and a table view with these three cells so we have the controller part down we have the view part down as these cells and we have arguably models which in this case are these strings so we're gonna actually expand this and add a real model object which will be a struct and we're gonna make it a person so let's come down here and make a struct and call it person I like to add some properties in here so let's do that first name is a string last name gender age nationality now it's actually something that's a different type let's do something that let's do height as we'll call that a double so this is a pretty basic struct person model and up here what we're gonna do is our data is gonna contain three of these person objects and we're gonna say Dan whoops Smith male 25 and I don't know 144 however tall that would be in inches let's let's copy and paste this two more times and let's change the name to Betty and John and they could all be Smith in our actual cell text label assignment because this is a person let's make it this dot first-name and let's run our app once more so now we have a proper model that we've introduced we have a view in our cell and we have a controller so this is MVC and we see our names here so how do we do the view model piece the way we do that is by creating another object and we can call it in this case we can call it cell view model and if you take a look here we we have a person that we're creating and from that person on the cell we're only assigning the first name so the only part of the model that in this case the cell needs is the first name for the sake of this example what we want to actually do is we want to show each cell with the first name space the last name so our review model actually only needs two properties from the model so you can also think of you a view model as a subset of some of the data in the so what we're gonna do in here is we're gonna create two properties and we'll be lazy and copy and paste them actually and what we want to do in here in the cell-cell ferrell function instead of doing this assigning it directly we're gonna create an instance of a view model and this is gonna be cell view model and we're gonna initialize it with a first name and a last name which we're gonna get from the model so let's copy this and say model and of course we're gonna delete this we're gonna say the first name is a model table first name last name is model table last name and in the assignment of the actual cell that we can do is we can say this cells label equals this string which is gonna be a few models first name space few models last names so if you look at this what we were doing before is pretty similar but we've now introduced this intermediate thing which basically strips out of our model the stuff we don't need for the purposes of the view and let's run this one more time and you'll see that our cell has their first name and last name but it's getting the data directly from the view model the value that this brings to our apps and complex views and model situations is if the underlying model changes and we want to tell the the view model hey something changed update your view we can avoid doing that process if something changes that's not in the view model that the user isn't seeing in other words if let's say the height change for whatever reason let's say this is the Facebook app and the person went in and they updated their height value we're not even showing the height so there's absolutely no reason that we need to tell the view model that your users height has changed update the cell because so doesn't even have it so right now we have the controller with the v-model in here and we also have the model object in here now obviously we can put this in a separate file but the thing that's also in here which we're gonna abstract right now is the cell and this is similar to how we do custom cells that I've done in a previous video but to show how this separates stuff out we're gonna come up here and add a new file and it's gonna be a cocoa touch class and we're gonna call it let's do a uitableviewcell actually first and foremost and we are going to call it it custom table view cell check this box to add a xib keep it as swift enter enter in this cell what we want to do is add two functions and a label so we're gonna add an outlet and then do label yeah let's do my label actually and the two functions we're gonna add one is to return the nib itself which is an instance of this cell and the other is gonna be a configure function so we're gonna have a static function called nib which is gonna return a UI nib and those nib stuff is not relevant to this video but it is relevant to dividing up our pieces in the app so if you're not familiar with this take a look at another video I have on custom cells so we're gonna return this nib and then we're gonna have the meat of this cell which is going to be the configure function so we're gonna say configure with view model and it's gonna take in a Cell view model and we're gonna say my labels text equals the view models first name and the view models last name and let's also put a property on here for the cell identifier so we're gonna say static let cell identifier equals a string let's head to our nib for the cell or xib still to this day ten years later I don't know why people call it nibs even though it's spelt with an X but let's add a label on here and let's add some constraint spinning it to all sides we're gonna do ten ten ten ten let's connect our outlet from the late actual cell to my label to our label and lastly in here let's click this and add the identifier which we've copied and pasted it as a file name let's head back to our main actually our view controller let's register this cell on the table view so we can say table view register nib for cell reuse identifier so the reason we added those convenience functions we can do this l dot nib and the cell DA style identifier and in the cell for row what we can do is we can say for this we want this cell identifier and we want to say as this cell and instead of supplying this text label text stuff directly what we can do is we can say cell configure passing or a view model and we can actually shorthand this even more by getting rid of this well don't you keep that but what we can do is let's take this whole initialization of our view model and toss it in here get rid of this and now we've pulled out our review and it's living inside of this my or this custom table view cell object so let's run this and see what we get it should look like pretty much the same assuming we didn't forget to do something which we didn't so we have our label in this cell it's this custom cell that we have here which is a subclass we have a label in here which is my label we added this public cetera function which takes in a view model and sets the label on this I'm sorry I sets the text on this label we added this nib function to get our nib to assign it to the table view easily and that does it that's mvvm in a nutshell for you and as you start to build apps with more complex views that take in more data to show an update you'll understand what view models can be super super useful because models can get very very large like if you think of a model for a person's profile on Facebook there are probably hundreds if not thousands of fields on it whereas a profile might only show five things because your device is so small but yeah thank you so much for watching hit that like button if you found this useful if you liked the info comment if you have any questions concerns feedback I was love hearing from you guys I do Swift it tutorials daily plus other tech stuff along the way that comes to mind so subscribe if you're new and yeah I'll catch you in the next video

Channel: iOS Academy

Views: 27,001

Keywords: swift, ios, app development, xcode, learn, tutorial, iPhone, iPad, tableview, getting started, beginners, Apple Developer Program, make app, apps, bootcamp, app millionaire, model, view, viewmodel, mvv, model view viewmodel, design pattern, mvc, viper, mvp

Id: nWSHWWV8Nas

Length: 16min 50sec (1010 seconds)

Published: Sat Feb 08 2020