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

The "Classic 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 introduces the classic design patterns, which were created as solutions to object-oriented problems. These patterns are typically creational, structural, or behavioral.

Preview
Close

Transcript from the "Classic Patterns" Lesson

[00:00:00]
>> Maximiliano Firtman: So, we're going to start talking about the classic design patterns, but applied in JavaScript, I think that part is important. So, these are the ones coming from this book. Should I mean, am I recommending you to read the book? So, I have the book, I have, actually, I think it's the fourth edition, this is the first edition of the cover.

[00:00:20]
If you read the book today, also, if you're a web developer, it's hard to read, right? So it's really hard, it's not safe because it's from a design point of view. Of course, it's not close to the implementation. So you have a lot of UML, diagrams there. So I think it's not close to a web developer, so it's not talking to a web developer, the book.

[00:00:47]
So I mean, if you like that stuff it's a good book, but yeah it's hard to read. So typically most of these patterns are around OOP solutions, Object Oriented Programming solutions, that we mentioned before that in JavaScript. We can simulate, emulate, use some of those ideas, but it's not a 100% OOP language, which means that some of the solutions that are there might not be suitable for JavaScript.

[00:01:22]
So and there they are categorized in creational design patterns. We'll get into those in a second, and I will show you two or three examples of each, structural or behavioral design pattern. In JavaScript, there were a lot of design patterns that are now covered by ES6. So before ES6, that's 2015, before that, there were a lot of ideas that were available as design patterns and ways to implement that, but from ECMAScript 6, and actually for the New versions of ECMAScript, there are different ways to solve the same problems.

[00:02:06]
ECMAScript 2020, 2022 has added a lot of features to the, for example, the class syntax in JavaScript. Also, if you wanna learn more about that, there is a professional JavaScript course of Frontend Masters, covering all these features. But that means that if you google, for example, JavaScript design patterns, you will find a lot of solutions that are kind of outdated these days.

[00:02:32]
There are a lot of those blog posts that are giving you a solution that will work today, but let's say that with modern ECMAScript, there are better ways to apply that design pattern. So have in mind that. And because in JavaScript there are many ways to implement the same design pattern.

[00:02:53]
Because JavaScript is a dynamic language, it has this dynamic nature inside, that means that the same problem can be solved in very different ways. And there is no best way, okay? So we will use one way here, but if you don't like that way, well, if you understand the idea and what's the problem we are solving and how we are solving the problem, go ahead and write your own version, it's fine, okay?

[00:03:21]
So, and I think this is another important advice that I have for you. Mostly if you are searching on the web for design patterns, don't implement design patterns as if you're writing Java. Most of the design patterns, including the ones in the book are actually targeting Java or Java-like languages.

[00:03:46]
Even some blog posts about web apps are actually taking the Java implementation and just emulating that in JavaScript. I don't think that's the best way to implement design patterns in a web app. We need to take the power of JavaScript and use it in our favor. Don't write JavaScript as if it's Java, it's a general advice, but specifically more important with design patterns.

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