Observer Pattern with Mixins

[00:00:00]
>> Maximiliano Firtman: Our app.js is ready for now, of course, nothing happens. It's not working because everything's empty. I'm going to create a folder here. I mean, I could call the folder scripts, but I will use webapp just to show you that we don't need to name the folders as in the 90s, like scripts, style.

[00:00:19]
So we can name our modules, we can name the folders of our modules by topic, not by just the type of file that is inside. Here, I'm going to start with a mixin, I think that's one of the cool parts. So I'm going to create a miixins, file mixin or mixins, doesn't matter, where I can put here 1 mixin.

[00:00:45]
Of course, if you have a lot of mixins, probably you wanna create a lot of modules, one per mixing or things like that, but in this case, we have only 1. So we are going to apply two design patterns at the same time. We are going to create a mixin that will implement the observer pattern, why?

[00:01:06]
Because we will have a list, okay? So we have a list of to-dos. That list will change, I can add elements, I can remove elements, make sense? So, maybe I wanna implement the idea of observer. I want observers to observe changes on the list. Makes sense? So I can go and inject the observer pattern directly into my list, but I can create a mixin that I can reuse later on other classes as well, that's idea of a mixin.

[00:01:40]
I create behavior that then I can inject in one or more classes, okay? So in this case, we're going to create an observer mixin that is going to be an object, a literal object, that will have first a new collection. I can use a set, I mean, I can use an array if you want.

[00:02:02]
The difference with the set is that there is no order, and also it doesn't accept duplicates. So I cannot add twice the same observer, the same function, the same callback, okay? It's not going to accept the same callback again, which is a little better. So, and then we have the addObserver method that will receive an observer and we'll just, let's use method syntax.

[00:02:35]
I can use Harvard syntax as well, but anyway. Well, I will say these observers, we'll add the observer that we receive as an argument to our list. Then we have the removeObserver that receives an observer and it's going to delete it from the list.
>> Maximiliano Firtman: By the way, this is a simple implementation of the observer pattern.

[00:03:03]
It can be more complex, for example, when you subscribe, when you add an observer, you can also specify which event do you wanna observe. In the case, the subject has different events, like load, change, delete, so you can can clone the AddEventListener pattern, okay? But in this case, we will create one observer that will be applied for just change, okay, we are changing something.

[00:03:33]
And then, we notify, so there is a method notify that will take the list of observers. It will iterate over each observer and it will execute each observer. If you don't understand yet what's going on here, I'm missing a comma, the whole idea here is that if I have an object with the observer mixin, I can add an observer, and what's an observer?

[00:04:04]
Anything, but I will pass functions, so I can create something like this. And then, I can add another one and another one, so it's like an addEventListener. And at some point, I can call observer notify. A notify will actually go through the three observers and execute them. Remember, this is a function.

[00:04:28]
So actually, the set observers will be a set of functions. So that's why I'm executing the function here.
>> Maximiliano Firtman: I mean for code security point of view, I should check later if it's a function or not, so I should do some stuff to make sure that my code works.

[00:04:48]
But I wanna keep it simple so we understand the design pattern here. Do you have any questions? Of course, this is just a sample, I don't need that code.
>> Maximiliano Firtman: We are not applying the mixin here. Remember, the mixin is a way that we have to add behavior to another object without changing the nature of the object, without changing the superclass.