SwiftUI MVVM Tutorial: Simple Example with ObservableObject

hey guys i'm going to show you a very simple way to set up mvvm in swift ui so here i have a new xcode project i'm going to go to content view and command click on the struct name and rename this to people view okay we'll come back to that now i'm going to right click people view new file swift file next and i'm going to call this person so this is the m in mvvm this is the model i'm going to import swift ui so i'm going to say struct person type identifiable we're going to say var id is equal to uuid and with parentheses we're going to instantiate that now bar name of type string var email of type string var phone number of type string good enough for now so this is the model this is the view we need a view model so really the logic behind this is like we don't want a bunch of data fetching we don't want to crowd our view with all these functions that have to do with data and sorting so you have your model you have your view model and you have your view so it basically communicates your view model is passing models to the view the user will tap something in the view and it'll pass that action to the view model that handles it and then it'll update the view accordingly so we're going to have we have a person model this is going to be an app about people and basically like a contacts app i guess but we are going to go right click new file again swift file and we're going to call this person view model i'm gonna import swift ui again because i think i'm supposed to but i'm not 100 sure we're gonna go class person view model of type observable object and we are going to say at published var people of type array person we're going to make it empty and then we're going to add some functions and typically this would be like fetching json data and you know if you're using like core data or firebase and fetching api and like actual call requests to keep this short and sweet i'm not going to do that i'm just going to have some simple functions so for example we're going to say funk shuffle order and all we got to do is say people dot shuffle i'm going to say funk um reverse order people dot reverse i'm going to say funk remove last person take a guess people.remove last and finally the real nailbiter remove first person people dot remove first um we need like we need to fill this array in the beginning so we're going to have a function that's called func add people parentheses space it out because we have ocd we're going to say let people data is equal to bracket then we're going to say person picked one without the id because we are making one randomly anyway we're going to give five people here add a comma well now let's go name jon snow because i love game of thrones and we're going to say email john email.com phone number 555-5555 we're going to add a comma copy this paste paste paste paste we leave the phone numbers the same then we're going to say like uh robert baratheon i don't know how to spell that robert email.com um cersei lannister cersei at email.com um de naris i don't know if i spelled that right if i did then dude i'm good if not probably didn't it's okay de naris daenerys all right and then last um samwell tarly because we love sam over here and he's a good dude if you haven't seen game of thrones you're missing the best show ever made it's not a big deal we're here we're here to code but go watch game of thrones okay turn this off all right so we have people data we're going to say add people people equal to people data and then we're going to set an initializer we could call this manually but it's easier because we want this to be filled in the beginning we're going to say init add people cool now okay so here we are in our people view we're going to come to top we're going to say at observed object var view model is equal to person view model now from what i understand you can use observed object a majority of the time there are instances where you should use state object and i feel like those instances are more when you have like person card view and that basically state object is tracking where that object is created but what i've learned is that majority of the time you can use observed object so your view model is observable and the view that is observing it says observed object when in a simple example like this you're good to use observed object but you should look into at state object and in some cases when you have something that needs to be accessed like access like all across your app you will have to use environment object so it can get a little confusing but i've learned that the majority of the time you're safe to use observed object okay so now we're going to say text and we're going to s we're going to put this into h stack i'm going to say jon snow we're going to say dot font dot title dot font weight double you can resume this preview so we can see that what we are doing is working and then we're going to say spacer we're going to say vstack alignment dot trailing because we want this on the other side kind of like a a list item kind of like a table view cell we're going to say text um for like a 555-5555 number and then we're going to say text email at email.com so this is hard coded which is bad we don't want hard-coded so we are going to command-click our h-stack and hit repeat now we're going to say for each view model dot people and then we're going to say person in it's passing a person every time we loop so instead of jon snow we're going to say person dot name instead of five five fives we're going to say person dot phone number instead of email you get it person.email okay problem is this is only one we are going to command click embed in something and then change that something to scroll view okay too jumbled way too jumbled get outside our h stack bracket and type dot frame with a height of at least 80. okay that looks better um some padding as well that'd be nice yeah cool um no actually that messed up our names i don't like how that happened um we can do padding let's just do like a little bit let's go padding 12. okay we like that now we need to test our view model functions and the way that we do that will be to command click scroll view embed in z stack and then below our scroll view we're going to go menu we can just call this menu dot upper case because i like that with open brackets and we're going to say button reverse comma action and we're going to have open bracket or open curly braces view model dot reverse order we're going to come we're going to copy that paste paste we have four functions paste reverse shuffle then we're going to call this shuffle order make sure you get rid of these parentheses it gets tricky remove last remove first so the idea here that look how clean our view code is and we're passing all of these functions to handle the data we're passing this to the viewmodel which is the way it should be now our menu button's in the middle of the screen that's not what we want we're going to go alignment on our z stack is equal to dot bottom trailing cool and we'll add some padding to that cool now play menu shuffle it worked and the cool thing is this happens automatically anytime this is updated so when you have like a production scale app and you're fetching data you can listen for data changes and like if someone messages you instead of refreshing it you can automatically show the message in your view that's why it's so powerful you go to menu reverse we have cersei lannister first reverse it again she's last i understand that the design on this is hideous but that's not what we're doing here but this is basically to show the most simple mvvm structure we'll go menu remove first robert baratheon is gone remove last and now we need to add them back so we're gonna stop this we're gonna hit play again remember we're adding on the every initializer so like i said the majority of the time these functions are doing way more complex things you could probably get away with having these in your view file but it can quickly become crowded especially with a framework like swift ui i think it's smartest to defer these functions to your view model so um yeah typically you'll have like your your funk fetch data calls here and i plan on doing another tutorial on that but for sake of simplicity here you want your view model handling all the behind the scenes stuff you want your view to only have view specific code if it's not pass it to the view model and this observed object observable logic protocol makes it incredibly easy the source code to this tutorial the the source code is in the description below if you guys like this video please subscribe here's another video to check out thank you

Channel: Logan Koshenka

Views: 607

Keywords: swiftui, swiftui tutorial, xcode, iOS development, iOS app development, iOS developer, swiftui basics, swiftui mvvm, swiftui 3, observableobject swiftui, mvvm swiftui, swiftui mvvm tutorial, swiftui mvvm combine, swift mvvm tutorial, swiftui mvvm example, mvvm iOS, iOS mvvm tutorial, observable object swiftui, swiftui published, observableobject, combine swiftui mvvm, swiftui app architecture, learning swiftui mvvm, swiftui view model, swiftui mvvm architecture, mvvm

Id: uQtM6StTsQg

Length: 12min 43sec (763 seconds)

Published: Wed Nov 17 2021

Reddit Comments

[u/logankoshenka]

Hey everyone!

I made a tutorial showing a simple way to set up MVVM in SwiftUI. It uses names of Game of Thrones characters too, so that’s a bonus right? Enjoy!