Vanilla JS Q&A

[00:00:00]
>> Things like append and appendChild, assuming we'll cover that later?
>> Yeah, we'll cover both of that later. But so appendChild, in this case, it's taking one HTML element, one element that we have in memory, and it's adding that as the last element. So in this case, I'm taking the h1, and it's adding that as the last inner child of the element property.

[00:00:28]
That in this case is this one. We're going to do that everything in code. There are other ways, instead of appendChild we can use insert. In this case, we can insert that in the middle, for example, another child at the end, we can insert at first position. So there, as I mentioned before, the API, the DOM API, it's not huge.

[00:00:50]
But it's large enough to take a couple of days to cover all the API. So we will cover here the most important parts of that. But for example, if you go to MDN, for example, and we search for appendChild, we will see here that we are seeing that method.

[00:01:14]
But at the left, we have all the other methods available, in this case, for a node, the interface, it's a node. So you look at this, so we have here all these functions, then we have events, And properties. So there are many properties available, many methods available. The DOM API is large, and mastering the DOM API, it's actually good if you actually wanna do a vanilla JS application.

[00:01:47]
So we are doing this from a scratch, so we are going step by step. And we will see the most important parts of the API, but there are more, okay? There are more available in the DOM API, makes sense? So later when we will see web components, we're going to create web components.

[00:02:06]
And you will understand what's the difference between your current React components or Vue components and web components. We will see which part of the API we will use most, okay? And by the way, this is node, that is an interface I didn't mention before, I mentioned HTML element, that there is a whole structure here.

[00:02:29]
We have HTML element, we have node, and then we have different kinds of HTML elements. And each element, this is similar to object-oriented programming, similar. Which means that each class in the structure, it's adding more properties and more methods. So it depends on, if you are taking an HTML image element, it has methods from HTML image, methods from HTML element, and method from node, and also from object.

[00:03:02]
But anyway, we have that hierarchy, typically you know OOP languages, also being applied in the DOM API. So that means that what we are seeing here from a appendChild, here we see all the instance methods. One particular DOM element might have more methods because the structure is more complex than just this one.

[00:03:26]
Make sense?
>> My biggest challenge is architecting a vanilla JS web app. Will you discuss on picking the best patterns?
>> We will see during the rest of the day different patterns. And we will discuss pros and cons of each pattern. I don't feel that there is a single answer, like a silver bullet, like, this is the way.

[00:03:48]
I have my own preference on some situations, but I don't wanna pass my preference to you. So I wanna show you different patterns. And that's why we're going to implement different patterns as well in our project. So then if you know pros and cons, you can pick whatever works best for you or for your team.

[00:04:09]
Sometimes when you are working with a team, with a company, that company creates a style guideline when you are working with vanilla JS. And there you will explain, okay, we are going to use this design pattern and that way of work. I don't think there is one that is like, this is the one you have to use.

[00:04:32]
So sometimes it's a matter of taste. And sometimes it's a matter of the kind of project that you're building.