Web Components

[00:00:00]
>> Maximiliano Firtman: So now we have on the Frontend, we have the API service ready. But if you look here, the API connects to web components. So to actually see something on the screen, we can do it directly. But the idea is that I want to create for the main, remember the main is empty right now, this is where we are going to put this.

[00:00:27]
I want you to create something like this. I wanna create a web component that can be something like a homepage, okay? Of course, if I run this, nothing happens, okay? If I refresh, nothing happens. what is the browser doing with that component? If I look here in the main it's actually there, but it doesn't know what to do with that well, but we can create a custom element, a web component, that can actually render something under that name, under that HTML element, okay?

[00:01:03]
And that's a web component. So if you wanna get deeper into web components, you can see the course of Frontend Masters, vanilla JavaScript. You might not need that framework, but just a few really quick definitions, a web component is a modular, reusable building block for web development that encapsulates a set of related functionality and user interface elements.

[00:01:33]
In short words, your own custom HTML element that you can reuse, okay? And you can encapsulate under one HTML element that you create, such as our homepage, okay? Actually, the Web Components spec is not really a spec. So this is that's wrong. It's not really a spec, it's not an API, it's a design pattern, and it's currently compatible with every browser, so we don't have any compatibility issues.

[00:02:00]
It's actually a set of a standard. So it's more a design pattern. We use custom elements. We use HTML templates and Shadow DOM if we want that's optional, and also Shadow DOM has a declarative version. Roughly Custom Elements lets us register into the browser my new tag. Template, HTML template is a way, instead of writing HTML from JavaScript, it's a way that we have to write the HTML for that component in the DOM, and Shadow DOM will create an encapsulated DOM for that component that is useful for CSS, for example.

[00:02:43]
So then each component, we have its own CSS, and that CSS won't affect the outside, okay? By default, it affects the outside, okay? So that's idea, and it's similar to the idea of components on most of the libraries out there, React, Angular, everyone has the idea of a component.

[00:03:04]
So it's kind of the same thing, but with vanilla JavaScript with no libraries, with no frameworks, okay? And we have freedom of choice on how to define them and use them. And we will use, during this course, many ways to use web components. So let's create our first web component.

[00:03:25]
We can create first the template, or first the JavaScript. It's just the same, what's the template? Well, the template, it's actually something that we can put here somewhere in the HTML template, and it's actually the template HTML element, we set an ID. You will see why we need an ID.

[00:03:46]
We can call this template home, for example, and then write the HTML for this, okay? So our our HTML for the homepage, we have two sections. The sections will be, we have vertical scroll and I have CSS for that class for making a vertical scroll of movies, okay?

[00:04:10]
And this is gonna be the top 10, actually top 20, because we have 20 as our constant, not top 10. We can't say top 10 and then change that doesn't matter. If we have an issue such as this Week's Top Movies, that's a title and a list, okay?

[00:04:35]
And something similar, we will have for the random movie so we can say the title for this can be something to watch today, okay? So if I say this, here comes the important part, the template HTML element will not be rendered by the browser. It will be parsed by the browser but not rendered.

[00:05:05]
We need to use JavaScript to bring that template and use it in our web component. Because by default, I mean, if I refresh, I'm not seeing that. I mean, the template is there, but by default it's not being rendered, it's hidden. I mean, it's a template, so it's not being used to rendering.

[00:05:26]
At least, it should render the HU, the title I'm not seeing that.