Design Patterns for VanillaJS Web Apps

[00:00:00]
>> Maximiliano Firtman: You should know, for doing this workshop, something about Vanilla JavaScript. But just in case, the idea of Vanilla JavaScript is the usage of the core language and browser APIs to create web apps without any additional library or framework on top, okay? Sometimes then we can extend this definition and some people add the idea.

[00:00:21]
Yeah, you can use microframeworks or microlibraries, which is okay. But it's mainly saying that we're creating a web app that is not React-based, it's not Angular-based, not Vue-based, not Next.js-based, etc. Okay, now, that's the idea, right? So we will just using HTML, CSS, and JavaScript, that's all. And if you don't have enough experience with Vanilla JavaScript, I recommend you the Vanilla JavaScript: You Might Not Need a Framework course at Frontend Masters.

[00:00:51]
That will give you the insights of that. In fact, one of the projects that we will be using today and applying some design patterns to it is the outcome of that workshop. So if you wanna see how to create that workshop from scratch, you can follow that course.

[00:01:09]
>> Maximiliano Firtman: So for Vanilla JavaScript web apps, we can apply classic design patterns. Where are those classic, typically designed patterns, coming from that book, from the Gang of Four? We can still take that book and we are not going to cover or talk about the 23 design patterns that are there cuz it doesn't make any sense.

[00:01:33]
But we can take some of those. For example, I mentioned so far singleton, factory. Those two design patterns are coming from that book, okay, from the Gang of Four Design Patterns. Then we can start thinking about solving problems that are web-specific. Of course, every platform, every software development platform has its own list of design patterns.

[00:01:58]
It's not the same to create the the web app, that you create a VR game, or if you're creating an Android application, of course, the problems that we have are different. So that's why on every category of app that you're creating, you will find also a list of design patterns for that specific platform, okay?

[00:02:20]
So we will talk about specific design patterns that we can apply on the web that are not useful on a desktop application, on a backend application. We will then get into the umbrella, let's say, of single page applications, multi page applications as well, and data and state management as categories of design patterns that we can use or we can apply when we are talking about web apps.

[00:02:49]
So as I mentioned before, we are not going to cover all the design patterns available. First, because there is no finite list anywhere. So there is no list of, these are all the design patterns available. We can take that book and say, okay, those are the initial 23 design patterns, okay, but there are more design patterns.

[00:03:12]
And every day, a new design pattern is born. And also, we may take a month, actually, to cover most of the design patterns out there. The whole idea is for you to understand the most important ones. And then you will be ready to go and find design pattern somewhere and try to understand, okay, I understand the idea, just try to implement this as well.