Key-Value Observing | Swift 4, Xcode 10

what's going on everybody its ya boy kilo loco and today we're here to talk about KBO key-value observing now this is kind of in an introduction to reactive programming because this is essentially what those frameworks that you are you normally hear about like reactive Swift and rnx Swift these I believe are actually built on top of this system that is actually provided to you by Apple so I'm gonna be going over essentially the apple implementation of reactive programming by using just your regular kvo and as you can see in the project and if you want start projects columbian it's gonna be in the link down below but as you can see what we're doing is we have we have this view right here now we have a label right here we have a button that's called update name we have another label right here called age and then we have a button called update age and then we have a label right here called text and then this is actually a text field now what we're gonna be doing is I'm gonna be showing you how to use kvo to update these values in essentially what can be turned into real-time will actually be seen real-time changes to the label through the text field so anything that I type in the text field it'll automatically be updated right here and right here and then for the buttons we're just gonna go ahead and keep it very simple and basic for the explanation and we're just gonna hard code the change there won't be any text field or anything like that involved so let's go ahead and take a look at the view controller real quick just so that you can see everything that I've done so far as you can see everything is connected we have the name label age label a text label and text field all connected through outlets and then we have the did-did tap update name to tap update age and did our text field text did change so all of these are connected and now we can actually just start talking about kbo so kbo or kate key-value observing and essentially works with kvc key-value coding if you aren't familiar with KBC just go ahead and watch the video that I recorded the other day it's up there in that little I think and you can watch that and then come back to this video so essentially it works with KBC so that it can be notified so so you're able to send notifications whenever there are changes so that's why it's called reactive whenever there's a change there's a notification sent and then something happens it reacts right so what we're gonna actually do is we're going to create a user object we'll just keep it right up here at the top you know we're not gonna put in a whole nother file we want to be able to look at it and reference it change it whenever we need to and we're gonna put it right up here at the top and we're gonna follow the the KDC you know guidelines so as you can see we have your basic user object following the KBC model essentially having it conform to the NS object as well as have the keyword at objc for each of our properties and now what we want to do is we want to use KBO and KVL essentially is making it so that whenever these properties are changing they're sending out notifications to notify any observers that there are changes right so you know the changing they want to be observe yeah so what we have to do is we have to make sure that they are essentially exposed to either we have to either do one of two things we have to make sure that they're exposed as dynamic in the objective-c runtime or we have to set those notifications manually so let's go ahead and add that right now all right so let's go over what changes took place right here so like I said there's one of two ways and that's the reason why I have two properties on this user object is to show you the different ways that you can do this both of them are the same and you know depending on what you want to do one may have a benefit over the other now the first thing that you can do to make sure that your property is sending out notifications whenever it's changed is simply by sending it as dynamic if you set it as dynamic it's automatically going to send out of patience saying hey I changed you know notice me notice me you know it's doing that so that's what dynamic is essentially doing it's making it so that the objective-c runtime knows that the the value for this is dynamic and also including that is it's going to be sending out notifications now dynamic has a lot of other stuff that it does but that's all we really need to know for this particular use case so the other way that we can do it is we can set those notifications ourselves now as you can see instead of using the keyword dynamic before var and after that objc what we're doing is we're including in our we'll set and our did set functions were we're having some code in here so as you can see the we'll set is doing will change value for key now we could do for key path the same way that we're doing it down here I'm about to talk about the syntax right now just know that you can do either one of these styles and it doesn't really matter but anyways we're doing will change value for key and I'm gonna use the hashtag key path to make sure that I don't spell it incorrectly once again if you might remember from the KABC videos you can use a string right here and the only problem is that you might misspell it which can cause your app to crash so we're going to use key path right here and in the dead set we need to send out the did change value so you need to send out tune of notifications one before it changes and one after it changes and the did change value we're using a little bit different syntax ting you might have never seen this before because I never saw before until I was looking into this into this specific topic but this is essentially doing the same thing for key path but it returns a different type of value so let me show you what the what the syntax are what the autocomplete looks like when we do it what we're doing is we're doing this did change value for and it's actually a key path object and what that allows you to do is it allows you to do that different syntax in order to get the key path and it be able to know what type of what type of value is actually going to be returned it's gonna be it's it's working kind of with generics and essentially it's telling it's giving extra information is all you really need to know it's giving information letting you know letting everything know that not only is are we going to be using the string age but age is actually an integer so it passes additional information that's all you kind of really need to know anyways we could have done either one of these ways it doesn't matter which one you want to do whichever one you think is best for your coding practice but I would recommend one of these two ways as opposed to using a string just so that you don't miss ball anything anyways like a getting back to the point all you want to do is you want to make sure that you have both of these notifications being sent out in the correct spot so we'll sit we'll have will change value for key and then did set will have did change value for you know the key path so as long as you're setting those then notifications will actually be sent out and we'll be able to 0 so now what we want to do is we want to create an instance of our user object inside of our view controller down here so let's go ahead and do that alright so as you can see now we have an instance of our user object and since it is a class it is a class we can set it to let because it's actually pointing to a reference in memory but just know that you can use let or vark whichever one you want as long as you're not changing the actual object itself anyways we have our use we have an instance of our user object and it's actually prefixed with that objc keyword because that is also needed to make sure that it's able to observe notifications so if it's if you don't have that objc it won't be able to observe notifications the next thing that we want to do is we want to add observers for both the name and for the age of the user so let's go ahead and do that now alright so what we're doing is we're using this function called observe which is provided to us through the object anything that conforms to or that inherits from nsobject and the observed function once again takes in one of these key paths and as you can see it's a little bit weird syntax but it's using the same single Texas right here and what I did was I said slash dot and it's able to grab the the user right here what we could also do if if we didn't want to keep it ambiguous what you could do is you can say view controller and essentially what it's doing is its drilling down into the object accessing the the property and then from within that property user dot name we're accessing the property of that property of that object I should say and we're also being able to access what type it is so essentially we're passing not only the name the the string prop the string name the actual string like name but we're also passing that it is of type string the the value is of touch string so that's what we're doing right here weird syntax I know but if you could get over it and start looking at it it's not too crazy next what we have our options so what we're gonna do is we're gonna observe different options now there's only four different options and you're only really ever gonna use maybe about three of them the the different options are you have new you have initial you have old and you have one other one which I always forget cuz you don't really use it you have prior so these are the four different options that you can choose from and let me go over the what type of options and when you would want to use these so initial is going to give you the initial value of whatever this object is so let's say we're observing the name right now right well we're gonna get the initial value of whatever name is so right now name is just going to be empty string so if we were to observe changes it would immediately call whatever's in this block of code right when right when this is called because it's going to give you the initial value the old value is whatever the value was for this property before it was set up so it would give us the empty string before we change it and then we changed it to Kyle and then we wanted to change it to kylo it would give me Kyle after before and after essentially so it's the old value the new value is whatever you're changing it to and prior essentially sends notifications twice so before and after a change so that's what prior is but we're only going to be observing new next what we have is the actual observer itself so since view controller is the observer we're actually going to have an instance of view controller right here if it makes more sense you can consider this strong self it's kind of like strong self instead of having to do garden let self equal strong self that's kind of what it is right here it's a strong reference to whatever the observer is and then the last thing that we have is the change and then the change is what actually allows us to see what the to get the actual different values now since we're not sure if we are including dot new and our options or dot old it's gonna return that value as optional so we'll actually have to go ahead and unwrap that but that's where we're gonna be accessing our values right now all right so let's take a look at what we have going on in here what we're doing is as I said we're not the function is not sure or the closure is not sure if you actually are observing the dot new so it's going to give you an optional whatever type this value is right here in this case name is a sub type string so it's going to give us a optional string as you can see right here it's a it doesn't show it but yeah it's gonna give us an optional it's gonna give us an optional string and we need to unwrap that so we're getting updated name and then we're just going to go ahead and set the updated name to our name label and that should reflect on in inside of the UI now as you can see we still have an error right here and that's because this observed function actually returns a token so you want to always keep reference to your token until you do until you D initialize this meu controller or else the observations won't continue to work so as soon as the the token has disappeared the observations no longer work so let's go ahead and add those tokens all right so as you can see we have the name when I created a name observation token which is really of type NS value observation and we're just setting that name observation token to the return of this observe function it will actually return that that token to it now once we go ahead and update the name it should be ready to receive those changes or should be observing those changes so let's go ahead and add the update name inside our did tap update name right like where else are we gonna put it all right so username is equal to kilo so as soon as we tap that button it's gonna set the name to kilo we should observe that change and then it should update the label inside of our inside of our view all right so let's go ahead and tap an update name we're gonna hit it and it changes it to kilo so as soon as I once again as soon as I tap did update name it changed the user right here the user name value to kilo from there since it's dynamic it's able to send out notification saying hey I got updated and it was since our viewcontroller is observing that observing changes on the key path username and anything that's new it's going to be calling this function right here or this block of code right here and it's going to execute everything in here which we're essentially just updating now let's go ahead and do the same thing for age just to show you that you know since these are these two are different that it's still everything's still working so let's go ahead and add that right now all right so as you can see now we're gonna actually use that age observation token we're setting it right here and I once again same thing we're using that weird key path and I'm using the shorthand so instead of using view controller I can just say dot user age so backslash users and it's able to infer that we're talking about this user right here so view controller is optional it's up to you if you want to include it I did change this to just dot name instead of adding the square braces around it because it's not an array it's actually a set so we're able to use just a single value if we want it it's the same thing as doing this though if you wanted to do that that's fine and then lastly VC because once again our view controller is the observer it's whatever the view controller is I mean whatever the observer is so if it's you know in this case it's a view controller and some other case it might be just an object but whatever but you pull whatever you want so I'm gonna call it VC and then change and then everything is essentially the same we just have to convert that number into a string and then we're setting it to the H label so let's go ahead and make sure that that works and obviously we're updating it right here like we got to update it right so let's go ahead and see if that works as well all right so now we have update name you know kilo that still works update aged turns to 27 that's working so as you can see Nomad depending on whatever way that you want to implement this it's still gonna work you just have to choose one of those you have to choose one of them and you know just work with whatever one you feel is the best for your situation oh and another thing before we move on since we are working with tokens so I put that since we are working with tokens you want to also make sure that you get rid of those tokens when you when this view is going to disappear so we're going to just add that in right now all right so as you can see we just implemented our view will disappear method and we're just saying whatever the token is in this case the name observation token we're just calling invalidate on a and H observation token we're calling invalidate on it as well and that's all you have to do to get rid of those tokens and stop observing all right kilo so what is the text field for well the text field is to show you that you know if you're working with the object that you actually don't have access to and you know in this case a text field you don't have control over the code that's inside of the UI text field right then what you would have to do is you would have to implement like an intermediate layer or just an intermediate variable to make that thing observable so the text property on a UI text field is not observable so what we're gonna do is we're gonna create an observable property and then have that update the text and the label or we're gonna be observing the the changes for that that property observable property and that will allow us to change and update this text label right here so what we're gonna do is we're gonna go ahead and put in an observable property right here all right so we have this this new dynamic property that is called input text inside of our view controller and this time I made it an optional string so I could show you what I'm talking about when I'm when I talk about double optional and what we're gonna do is anytime that our text field changes we want to just change the value on the input text now I know that we can just do this right on the label but that's not the point of what we're trying to accomplish I'm trying to show you you know reactive programming and the concepts behind it now you could just update the text the label the text label text property directly but the benefit of using you know kvo or reactive programming is that it allows for notifications to be sent even when you're working with asynchronous tests so if this was happening like in the background or something everything would still work so just keep that in mind that even though you could just set you know the the text label dot text property to this value that's not what we're trying to accomplish here so what we're gonna do is we're gonna say input text is equal to our text field dot text like so from there what we want to do is we want to go back over here and then we want to add another observer so that we're able to observe the changes on our input text so let's go ahead and do the same thing that we did for these observations right now all right so as you can see I just did the same thing up here I added another token so input text observation token your tokens can be way shorter they can be named way shorter but you know for the sake of clarity whatever anyways we're just doing the same thing we're setting the input observation token to whatever is being returned by this observe observe method and we're using the similar naming convention as the H observation token and I want it I want to show you the double optional so new value would actually be a string it's double optional so let's go ahead and unwrap this value and then set our our text label dot text value to this whatever the new value is all right so as you can see once again since input text is an optional string it's returning whatever that value is but optional so it's an optional optional string so it's double optional so we're unwrapping it a string specifically and then we're setting that value to this text label dot text so let's go ahead and see if that works now okay it's currently not updating just because I forgot to do this this text field right here I forgot to connect it correctly so what we're gonna do is we're gonna go back in to the storyboard and just connect it correctly so I think I have it doing value changed but that's not what we want to observe we want to do editing changed so let's go ahead and change this oh I had it as touch up inside that's definitely not what we wanted right so we're gonna go to change that and we're gonna do editing changed and let's go ahead and run this one more time alright so here we go once again name works page works and we're gonna start changing the text hello and as you can see as we're typing it gets filled in so that's pretty good so that's key value observing that's kvo that's pretty much all you really need to know a couple other things that we can go over right now is just to show you that if you were to keep if you were to keep age like just at objc and you didn't implement these these two notifications essentially the kvo 4-h would no longer work so I just want to show you that real quick so when I go ahead and hit update age as you can see it's not it's not updating the age however there is there is a notification that sent out if you automatic dating the values so down here in our did tap update eight if we were to actually change this and we weren't - if we were going to set it using a kvc as opposed to just setting it in a normal swift way then the notifications actually would get sent out so let's go ahead and take a look at that alright so down here in the did tap update age we're using the user dot set value 104 key age now I'm actually not using the hashtag key path on this one because if we were to use the hashtag key path it would actually break but if we were to keep it as a string right here I believe it still works so let's go ahead and run that and see what happens alright so when I tap update age you can see that it does update to 100 and we do have the notifications turned off so it will it will observe changes if you do keep using KBC but if you start using regular setting of values it will no longer work so we can just double check that one more time and all we're gonna do is just switch the different methods of setting that value and we'll see what happens and as you can see if you're not using KBC then no notifications will go out so let's go ahead and change that back and we'll just keep that as such and then the very very last thing that I just want to show you is that there is a different way to observe changes if you don't like doing observing if you don't like observing changes this way with a token area everything there is a different way so what we'll do is we'll just go ahead and comment out we'll just do age again you could have done any one of these but we'll just do age again and we're gonna just remove the tokens any references to the tokens and what I'm going to do is I'm going to just implement all this in a different in a different type and I'm also going to include the input text observation token in the we're gonna invalidate as that as well all right so once again our NS object provides us with a different function that we can implement outside here so it wouldn't be like this observe it would actually be outside in the the scope of the entire object in this case the view controller and we can implement it right here in its observed value for key path of object change and context so what we could do is we would do essentially the same thing just a little bit different so let's go ahead and unwrap the Aged and i'll show you what you have to do to unwrap the Aged and then set it back to the age label alright so as you can see this observe value which is inside of our observer in this case the view controller is going to be receiving any and all observations and they're all gonna pass through here so we're gonna check what key path that's using in this case we want to just check the age because we want to change the age this way and I'm actually using the hashtag-- key path right here so I went back up into the user object at the the will set and did set just so that there aren't any weird any weird errors or crashes and then what we're doing is we're were unwrapping the change which is optional and then we're passing whatever key that we want so in this case we want the new key because that's what we're gonna be observing just like before we could have passed the old key you know the prior key or the other key if you want it whatever and then we're testing it as an integer wrapping that that integer in a string and then sending that to the age label but right now we still haven't set any observations because we already we already commented out this add observation token right here right so what we need to do is we need to add an observer for this particular key so let's go ahead and add that observation now alright and all we need to do to add an observer is simply say add observer say what the observer is in this case we're going to make our view controller that observer so we're gonna say self for key path once again hashtag key path user dot age that's the value that I want to observe and then the options I just want to observe any new changes and contexts we're just gonna set to nil so now if we go ahead and run this we should be getting our h2 update just like before so we go ahead and update you know update name update age we get 100 and just to show you that it works with the other one as well the regular setting not just the the kvc setting let's go ahead and try that as well and we update age and it turns to 27 so as you can see all this stuff is all working so there's a couple of different ways that you could do kvo you know this has been a really long video and I went through a lot of them but I think that it just gives you a lot of different options to choose from and now you're gonna have you know slightly a little bit better understanding of kbo whenever you want to implement that into your project so if you want to get started with reactive programming this is where I would recommend that you start you start doing your own reactive programming before you jump into another framework like rx swift or reactive swift and you know kind of get the basics get the hands-on before you jump in because this is probably as easy as it's gonna get and this is as most sense that it's gonna make because as soon as you jump over there it's it's a steep learning curve if you don't have a full understanding of kbo so that's gonna be all for today hope you guys like the video if you have any questions make sure you leave them down below in the comments section and you know if you want to help support you know check out get the t-shirt or you can go to Kela local.com check out my membership get all access to get access to all my exclusive content as well as you know get the project files for this this and any other video that I put up on youtube so make sure you check that out and above all else keep coding passionately you

Channel: Kilo Loco

Views: 6,419

Keywords: swift reactive programming, swift kvo, swift key value observing, rxswift, reactive swift, intro to reactive programming swift, swift notifications, swift observers, swift add observer, swift kvc, swift key value coding, swift design patterns, how to observe changes swift

Id: _AWyXA1sPuc

Length: 28min 51sec (1731 seconds)

Published: Mon Oct 15 2018