Decorator Pattern

[00:00:00]
>> Maximiliano Firtman: Well, these are just two examples of the creational design patterns. There are more, okay, but these are just two simple examples. Let's see now some structural design patterns that, in this case, are solutions for composing classes and objects to form larger structures while keeping them flexible and efficient.

[00:00:20]
So they are focusing on simplifying relationships between entities. In terms of creation, now we are talking about relationship between entities in my code. So, some examples of that, decorator. Actually, the decorator button is being used in React. So if you are a React developer, probably you have used this pattern.

[00:00:44]
There are many ways in which React is using this pattern. One is known as the Higher-Order Component, I'm not sure if you're a React developer and you have used a Higher-Order Component, but that's kind of a degrade. The problem that it's solving is, we need to add additional functionality to objects dynamically without modifying the structure of the object.

[00:01:04]
Let's say I have a button, and now I have a class that creates a button, it renders the button on the screen, and that's okay. But now, I need that button to have a different behavior or additional behavior. I know, for example, if I right-click on the button, I want a menu, but I don't wanna touch my button.

[00:01:28]
My button is there, I know it's working, I don't wanna touch it. Because I'm using the button in my page in lot of places, I don't wanna rerun my test. It's working, let's keep it that way. Well, let's decorate the button, and the decorator is actually something that is wrapping.

[00:01:43]
We are going to wrap that object with something else on top. So we're going to take that button, and we're going to decorate the button with a right-click behavior that will show a contextual menu, for example, okay? So we wrap an object with another object. And use cases, adding logging, validation, caching to method calls.

[00:02:05]
So you have an API call object, so you have an object, or a class, or a function, that it's going to a network and grabbing data from the API. I don't wanna change that code, but then I can wrap it with something else that will log that in the log database.

[00:02:23]
So for debugging purposes, if there is a problem later, I can go to the log and see what happens. Extending the user interface component with additional features, the pattern example, it's another one. And how to implement in JavaScript decorator, there are many ways before that. Another use case is wrapping API responses to format or process data before passing it on.

[00:02:51]
So you have, again, the API call, and you are getting the data back. Well, maybe from a security point of view, you wanna check if there is no cross-site scripting problems. You wanna validate that the user has authorization for that data or something like that. Well, you can decorate their response or parse the response with a decorator.

[00:03:18]
From a JavaScript point of view, there are many ways to implement this, but one very simple, and you will feel sometimes, even not so clever solution, is to just use inheritance. So I have a button with a render method, so I create another button extending from the other one, overriding render, calling super.

[00:03:39]
So we are still keeping the original button behavior and adding our own code. For example, the event handler for the right-click, that will render the menu, so that's the decorator. And I'm pretty sure that most of you have already used this pattern, even if you didn't know it had a name.

[00:04:02]
>> Maximiliano Firtman: Okay, the decorator pattern is just adding behavior without changing the original element, the original components, the idea.