Observer (TypeScript Design Patterns)

hi everyone my name is Xavier and in this video we'll be taking a look at how you can use the observer pattern and type script so what is this pattern about while often when one part of your application changes other parts need to be updated this is the kind of problem that you can solve with the observer pattern now if you have already developed a web application then you probably already know this pattern you've probably used on clique or on change handlers to detect when a user clicks on something or when he changes some texts that form in this video we'll take a look at how you can implement the observer pattern yourself so let's get started okay so here I am in Visual Studio code and in this video we're gonna write a weather station so I've already set up a weather station class and a temperature display class now it's pretty obvious that the temperature display should update every time that the weather station reports a new temperature so the weather station has a private attribute temperature which is of course a number and then it has a set method for temperature and then it just outputs to the log weather station new temperature measured and then it outputs the temperature and then it also sets the temperature attribute so that's pretty simple now in this example we call the weather station a subject because other classes can monitor that class and we call the temperature display an observer because that one observes another object temperature display observes changes in the weather station so we're going to start by creating two interfaces for subjects and observers so I'm going to create one for subjects and I'm also going to create one for observer now a subject needs three methods the first one is register observer and we're going to get an observer object in here what this allows us to do is it allows our temperature display for example to register itself as an observer with the weather station so the weather station then knows that it should notify the temperature display of any changes we're also going to create a method remove observer just in case that we want to stop being notified of changes in the temperature and then we're going to create a method notify observers because if a change happens in our subject it should notify all its observers okay so that's it for subject let's not move over to observer this one should have only one method that's update and in our case when we update we will pass along the temperature to a subject so if the temperature changes in the weather station it will call the update method on an observer class and pass along the temperature so let's now implement these interfaces so I'm going to say that the weather station implants the subject and this is going to throw an error because I have three methods that I need to implement so I'm gonna say implements missing methods there we go so here we've got register observer remove observer and notify observer so we're gonna implement them one by one the first one is register observer now what I want to do here is we want to keep track of this observer that we get here as parameter so I'm going to create a new private attribute for a weather station I'm gonna call this observers and this is going to be an array of observer objects and I'm going to initialize it as an empty array so when someone wants to be notified of changes in our weather station well that he calls the register observer with the reference to himself and all that we're gonna do is we're gonna say this dot observers dot push oh so we're gonna keep track of this observer that's everything that the register observer method should do now let's do the remove observer if someone wants to be removed as an observer well then we first have to look where his position in our array so we're gonna fetch the index by saying this dot observers dot index off oh so we're gonna look up where he is in our array and when we know his location then we're gonna say this dot observers dot splice and we're gonna take away the element at the end X so that's the remove observer method it's still pretty simple pretty straightforward we're just manipulating an area here now comes the notify observers every time that something changes in our weather station we should notify all of our observers so we'll need a for loop so we're going to iterate over all the observers I'm gonna say observer of this dot observers just loop over them and we're gonna call the update method on each observer and we're going to give it our current temperature okay so that's it there's just one more thing that we need to do every time that our temperature changes we're going to call the set temperature method and then we also want to notify our observers so we're just gonna say notify we're gonna say this dot notify observer and actually let's let's make this plural because there could be multiple notify observers there we go and also gonna change it here in the interface okay so that's everything that we need to do in our weather station now we can go and implement our observers so in this case we have temperature display we're gonna say that this implements the observer in their face then it's gonna complain again because I need to implement some methods there we go and temperature display has only one method and that's update so whenever the temperature updates we want to do some logic in here but I'm just gonna fake some logic I'm just gonna say I'm just gonna log something to the console I'm gonna say temperature display I need to update my display for example all right and then your logic go here now that's not enough we need to actually say to the weather station that our temperature display wants to be notified of changes so let's do that right now let's create a private attribute here we're gonna say that we observe a subject it should be at the time subject and we're also going to create a constructor in which we're going to receive the weather station which is a subject and we're just going to keep track of this subject so we're going to say this subject equals the weather station and then we're gonna register ourselves with the weather station so we're gonna say weather station dot register observer and we're gonna register ourselves as an observer because our temperature display wants to know when changes happen to the temperature okay so that's it for the temperature display let's now create another observer this is the beauty of this pattern you can have many observers that will be notified when a single element in your codebase changes in this case is her weather station so let's say I also want to have a fan so I'm going to copy/paste the temperature display and I'm gonna create a class fan I'm gonna leave the private attribute here intact I'm gonna also going to leave the constructor as is and then we're going to change the update method so the first thing that we're gonna do is we're gonna write some logic in here what I want is I want to fan to automatically turn on when the temperature is above 25 degrees Celsius for example so here I'm gonna say well if the temperature is higher than 25 Celsius then we need to turn on the fan for example so we're gonna say it's hot here turning myself on and then you obviously here you want some real logic not just a console log and if it's colder than that we're gonna say fan it's nice and cool and we're gonna turn myself off there we go and again here should come some some real logic and not just a console lock ok so that's it now how do you use the observer pattern well you just create instances and pass references along so the first thing that we're gonna do is we're gonna create our own weather station so we're gonna say new weather station there we go and then we're going to create an instance of our temperature display going to say new temperature display and we're gonna give it our weather station so it can ask the weather station to be kept in the loop we're gonna do the same for the fan so we're gonna say fan is new fan and we're also gonna give it a reference to the weather station there we go and now we're going to play with it a bit so we're gonna say weather station we're gonna simulate a temperature change so we're gonna say that the temperature is now 20 degrees Celsius and then we're gonna duplicate this line and after a while we're gonna say oh the temperature rises to for example 30 degrees okay let's now take a look at what will happen so I'm gonna run the typescript compiler to compile this to JavaScript and then I'm gonna run it and know to see the output now as you can see when I say set temperature 20 our weather station says the new temperature measurement is 20 and immediately followed by that the temperature display is going to say oh I need to update my display and the fan will say it's nice and cool I can turn myself off that's exactly what we want we made a change to a weather station and it automatically notified all of the observers that are subscribed to changes in the weather station so when we set the temperature to 30 the weather station does the same thing it says that the new temperature measurement is 30 degrees and this triggers the temperature display and the fan to update themselves so the temperature display now says well I need to update my my display and the fan says oh it's hot here I'm gonna turn myself on so this is a simple example of how you can use the observer pattern so let's quickly recap in what we have learned in this video this is the UML diagram for the observer pattern and as you can see we have an interface for an observer and we have an interface for subject then we create concrete observers that have the notify method in our case that was the fan and the temperature display on the subject side we also create a concrete subject although that's not shown here on the UML and that one is responsible for keeping track of all the observers so it has register observer unregister observer and notify observers and you can also see that whenever you call the notify observers method it should run over all of its observers and call the notify function on each and every one of them so that was it for this video if you liked it make sure to subscribe to my channel it really helps me out a lot if you want to learn more about typescript or typescript design patterns check out the next videos in these series

Channel: Simply Explained

Views: 20,499

Rating: 4.971067 out of 5

Keywords: dummies, best practices, learning, learn, course, free learning, best practice, observer, howto, tutorial, object oriented, lesson, getting started, patterns, basic tutorial, programming, free, fundamentals, series, explained, in action, introduction, beginner, typescript, OO, training, basics

Id: GioexP_s5Yc

Length: 12min 10sec (730 seconds)

Published: Tue Apr 11 2017