JavaScript Design Patterns for Web Apps

Adapter, Mixin, & Value Object Patterns

Maximiliano Firtman

Maximiliano Firtman

Independent Consultant
JavaScript Design Patterns for Web Apps

Check out a free preview of the full JavaScript Design Patterns for Web Apps course

The "Adapter, Mixin, & Value Object Patterns" Lesson is part of the full, JavaScript Design Patterns for Web Apps course featured in this preview video. Here's what you'd learn in this lesson:

Max describes the Adapter, Mixin, and Value Object patterns. The Adapter pattern brings incompatible interfaces together with a translation layer. Mixins allow you to share functionality between two classes without an interface or inheritance. The Value Object pattern represents any value that is immutable and distinct from other objects based on a property rather than an identity.

Preview
Close
Get $100 Off
Get $100 Off!

Transcript from the "Adapter, Mixin, & Value Object Patterns" Lesson

[00:00:00]
>> Maximiliano Firtman: Adapter, this is simple to understand what's the problem, I have 2 interfaces that are incompatible. What are two interfaces, two libraries? I'm using one library that is printing a PDF, and I have another library generating a PDF, but they, the RPIs are not compatible. What I need an interface, in the middle, that will call one, will transform the response into something that can I use as an input for the other one, okay?

[00:00:30]
That's an adapter, so we translate one interface into another, that a client expects. Another typical thing here is that you have an API, you call the API, you have a data structure. And then you need to transform that data structure, into a different one that goes to a SQLite database, so you transform the data, and that's the adapter.

[00:00:55]
So use cases integrating third-party libraries with different interfaces, adapting legacy code to work with new systems, that's something that we use a lot. I mean, you have something that was created 15 years ago with jQuery. Yeah, it's with jQuery, but now we have a vanilla JavaScript, but we're not going to touch that part.

[00:01:17]
Well, we need to integrate, we need to create an interface from jQuery to Vanilla, Vanilla to jQuery, and converting data format, these are just examples. The code in this case, it depends on when you are transforming. So I don't have an example because it depends on the case, but it's just creating an interface that connects to different systems.

[00:01:41]
Mixins, this one is important and something really powerful in JavaScript that I don't see in action a lot, and we will use it. What's a mixin? By the way, there are languages this day that are already supporting mixins from the ground up, Kotlin is one of those. The problem to solve is I wanna share functionality between classes, but without using inheritance, why is that?

[00:02:08]
Because I have some functionality, let's think about one case. Initially, I wanna debug objects, so I wanna render in the terminal, in the console, or wherever, an object with one specific format, okay? So, but I don't wanna create a class and make my objects extending from that class because, semantically, it's not really what I want.

[00:02:33]
I wanna add functionality to a class, to an object, but without changing its nature, and changing Inheritance is changing its nature. So then we create a class or an object, depends on the language containing the methods that can be used by other classes and apply them somehow. So, for example, I have a mixin here, what's a mixin, the mixin is sayHiMixin.

[00:02:59]
Name, it's an object, so it's a literal object, okay? So I'm opening call the braces sayHi, that is just alerting Hello, this name. And it's a it's just an object with one function, that's all. Then I have a class, class user, the class user has a name, and I'm not extending from anything from mixin.

[00:03:21]
How can I add that behavior with object assign, you use object, assign user, dot prototype, and you add the mixin. In that case, you are injecting, every behavior that you have in that object, in say HiMixin, into every object of the class user. Because you're talking to the prototype, this is like injecting this directly into the class.

[00:03:51]
On C sharp, this can be done with extension methods, for example, it's another way that you have to extend a class, without touching the class. An important part here is that I'm not touching the class.
>> Maximiliano Firtman: That also means that I can apply that mixin, into classes that I don't own, okay?

[00:04:15]
In any object or class, I can now, Inject that say Hi. Value object, the name doesn't actually, say anything, to be honest, value object. The problem that it's solving is that sometimes, there are values that are immutable. And they're distinct from other objects based on its properties rather than its identity.

[00:04:43]
>> Maximiliano Firtman: Let me go with the solution, and then give you some examples of that. So the solution is create a class, where instances are considered equal, if all their properties are equal. And also ensure the object is immutable, so no one can change the The option, okay? So in that case, it's like creating singletons by value, something like that.

[00:05:07]
So that means that, when you have an object with a that value, it doesn't matter. If you have another one with the same value, it's just the same option, I want to treat them as the same option, that's idea. Use cases, representing complex data, for example, money, coordinates, or date.

[00:05:26]
I have a date object, in this case, the date object, I don't care about if it's the same instance of another date. If you had the same year, month and day, it's the same date, that's the idea. So, for example, for money, this is how you apply this in JavaScript, money can have an amount and currency, money can be, for example, bank notes, or something like that.

[00:05:55]
I'm freezing the object, object.freeze, that's one part, so once it was set, it cannot be changed. And also I'm implementing equals, if the amount and the currencies are the same, it's actually the same option. That means that if I have a $50 object, every other $50 object is the same object, I don't have different instances of that.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now