Observer & Template Method Patterns

[00:00:00]
>> Maximiliano Firtman: Now, those words were just examples for a structural. Now, let's see some behavioral design patterns before actually applying them, okay? So some behavioral design patterns. They deal with object interaction and responsibility distribution. So, in this case, it's about object cooperation, okay? Sometimes it's difficult to categorize them because when you think about that, is that behavioral, is that creational, structural?

[00:00:29]
I think that creational is pretty clear. Between structure and behavioral, it's not so clear which one applies, but anyway. Observer, and I'm 100% sure you have already used this pattern. The problem is to allow an object known as the subject to notify other objects known as the observers about changes in its state without requiring them to be tightly coupled.

[00:00:58]
So solution, the subject has a list of observers and notifies them of any state change. Why did I say that you have already used this? Every time you have used onclick or addEventListener, that's an observer implementation. So in this case, you wanna listen for changes in that object, and that object doesn't know about you.

[00:01:26]
It doesn't know who you are. You are just saying, hey, when you have something to notify me, call me. When there is a change in your state, call me. And the other part is just taking note of, okay, I need to call you, I need to call you, I need to call you, and you will call your code.

[00:01:46]
Use cases, event handlers, that's the most simple one. Real-time notifications and UI updates. Yeah?
>> Speaker 2: How does the observer pattern differ, if at all, from a pub/sub system? Or is a pub/sub system just a version of it?
>> Maximiliano Firtman: Publish/subscribe, pub/sub, is just another name for observer. So it's actually the same design pattern.

[00:02:11]
>> Speaker 2: Gotcha.
>> Maximiliano Firtman: It has two names. So it's publisher/subscriber, or observer, it's just the same name, okay? And we will apply an observer in a couple of days minutes in our version. But typically, it looks like this. If you wanna create it in your code, you have a class.

[00:02:28]
The class has a list of observers. It can be an array. I'm using a set here that is not accepting duplicates. That's the difference. And you have addObserver, removeObserver. It's like addEventListener, removeEventListener from the DOM, okay? And then notifyObservers that it's just looping through all the observers and just notify them, and that's all.

[00:02:51]
And then subjects will just add themselves as observers or add a function as an observer. Again, addEventListener. So if you have ever played with addEventListener, that's actually the observer implemented in the DOM API, okay? Makes sense? Template method, the idea is to define the skeleton of an algorithm that will change on different implementation.

[00:03:19]
And, I mean, the definition is not so clear. But, actually, if you have ever played with OOP and polymorphism, we are just talking about that, but from a behavioral point of view. So the idea is that data processing, so I have some data, I need to process the data, but I don't know how, I don't care how.

[00:03:45]
Each implementation will take care of that. So the idea of abstract classes, okay, is the way to go here. But we don't have abstract classes in JavaScript. There is nothing similar to an abstract class, so we have to use some imagination to actually get there. Form validation is another use case for this.

[00:04:09]
It typically looks like this. Let's say we have a data processor, and we know that the data processor should load data, process the data, and save data. But at the class DataProcessor, I don't add any code. So if I execute that to over a DataProcessor, it's not gonna work.

[00:04:28]
I will get an exception, because loadData doesn't exist. It's not a function. But then, I have subclasses that will implement those methods. So then I'm forced to use one of the subclasses. And of course, we have several subclasses with different implementations. This is just OOP, okay, in action, nothing really important.