Introduction

[00:00:00]
>> Maximiliano Firtman: Hello, and welcome to Practical Web App Patterns, with Vanilla JavaScript. So, my name is Maximiliano Firtman, I can go by Max, I know it's a long name. I'm Firt on X, Firtman on GitHub, LinkedIn, and other social networks. Firt.dev, my website, let me go really quickly about myself.

[00:00:21]
I'm from Argentina, I live in Buenos Aires, and I'm a mobile web developer, so I have been doing web apps and web development since 1996, 1998, with JavaScript, actually. I created more than, published, actually, more than 150 web apps, most of them, I would say that probably 90% of those web apps were actually Vanilla JavaScript.

[00:00:45]
Then I also got into the mobile space, so doing mobile apps. And I authored several books and a lot of courses on these topics, typically around mobile development, web development with JavaScript. Also some, let's say, framework-related courses, and web performance. So, my usual topics are around those ideas.

[00:01:10]
So, I published many books for O'Reilly Media, and the last book that I authored is Learn PWA. That is free, available on web.dev, talking about progressive web apps. And at Frontend Masters, you will find a lot of courses that I have authored on Frontend. So for example, Vanilla JavaScript, there is one on Vanilla JavaScript.

[00:01:33]
Data storage, we have hardware, APIs, progressive web apps. On mobile apps, with flutter, Kotlin, Swift for iOS, for Android, and also for Flutter, for PWA development. And also some backend courses, for example, on Go and PHP. So after saying that, what we're going to cover today in this workshop.

[00:01:58]
So we will talk about design patterns, and specifically talking about design patterns for Vanilla JavaScript web apps. That is part of what we're going to do. So we will start talking about what a design pattern is, and we will apply many of those design patterns. Not all of them, because we will need probably a month if we wanna apply all of them.

[00:02:20]
And also, you will see later that it's not a good idea to actually implement all the design patterns all the time. So we are going to implement and apply some of those design patterns that we will see on three different projects that we will see later. So we will start talking about classic design patterns in software design, and how we can apply them in JavaScript.

[00:02:44]
So, we know that JavaScript is a flexible language compared with Java, C#, or C++. So we don't need to actually copy exactly the recipes that were applied in other languages in JavaScript. But we can take the ideas, we can understand why that idea is important and the problem that the idea is solving, and then trying to apply that in JavaScript for a Vanilla JavaScript project.

[00:03:11]
We will get then into some specific design patterns that we can apply for single page applications. So when you have full JavaScript client side application that is just one HTML, so one HTTP navigation. And from there you are changing routes or pages directly with JavaScript using the DOM API, some multi page application design patterns.

[00:03:34]
So if you are creating just a web app that has different HTMLs, and you just are creating links between those HTMLs like a classic website. Well, we can still apply some design patterns to improve the experience that we have as users. And then we will get into data and state management design patterns, so when typically this is useful for a large scale applications, when you have a lot of data that you manage.

[00:04:02]
Well, some ideas that you can apply, and finally, some other advanced ideas that are coming to the web app design pattern work. So pre-requisites, so, you should have experience with JavaScript, and prefer Vanilla JavaScript basic concepts to understand the DOM and some other ideas. Such as using the History API to work with different routes, and a web browser, you just need a web browser.

[00:04:35]
For only one design pattern, at least at the time of recording this Course, you will need Chrome Canary or Chrome Beta, actually, for Chrome 1.26, but only for one special part. So in case you don't have it, you can go and download Chrome Canary, to test that particular feature that we will see later.

[00:04:54]
Of course, if you have Chrome stable 1.26, it's goonna work anyway. A code editor, I'm going to use Visual Studio code, but whatever works for you. We don't need Node.js, we are not going to use any library or any dependency. So no Node modules, no NPM install, nothing, okay?

[00:05:14]
It's just pure HTML, CSS, and JavaScript, that's all we are going to write today. So after saying that, this is the URL for the worship, firtman.github.io/webapp-patterns, there you will find a step by step guide of what we will cover later when we will start applying these design patterns.

[00:05:39]
Also, later I will show you where you can go and find the repo for the projects, you have the link there as well. And also, you have a copy of the slides.