Movie Item Component

[00:00:00]
>> Maximiliano Firtman: Well, one more step to actually see the movies with the poster. Yeah, we can change this LI with something. But instead of creating, instead of text content, I want to create, and this is a pretty normal pattern, I want to create a component for rendering each item, each movie.

[00:00:24]
It's typically called movie item or movie item component, okay. So I'm going to create a new movie item component that will then be used to render each movie, okay. And we know how to create components. So this is the second one. I will do it manually, but the rest will probably be more copy and pasting from the snippets.

[00:00:50]
What I need here is then to create a movie item component. So I will export the class movie, I can call it movie item or MovieItemComponent. It's up to, it's just a design pattern, extending from HTMLElement. We know the deal. And then we will talk to custom elements and we define movie-item as that component, okay?

[00:01:25]
The only different part compared with the previous one is that in this one I need a movie. So I need propertyies from the outside, someone needs to send me the movie so I can render a movie. Does it make sense? And there are many ways with Web Components to do that.

[00:01:43]
In this case, in this particular case, I will use one way, is that I can receive the movie as an argument in the constructor. When you override the Web Components constructor, it's mandatory, if not you will get an exception, to call super. The first thing you need to do is call super.

[00:02:04]
If not, the Web Component won't work. And then I will save that movie in a local property. So then in connectedCallback, remember, this is the event when our component is mounted in the page.
>> Maximiliano Firtman: We can actually render the movie. But in this case, I'm not going to use a template.

[00:02:28]
I'm going to write it manually from here, so you can see another way. So now in connectedCallback, I'm not going to use a template element. Okay, it's not mandatory. On each case, you decide which one fits better for a template and which one fits better for just writing short HTML here.

[00:02:48]
This is similar to when you're doing Angular and sometimes the template goes in the Typescript file, sometimes it goes to a separate file, so something similar to that. So for example, in this case, I will just change my own innerHTML. I'm the element, so I can just write HTML.

[00:03:04]
I'm using the backtick here, so the template string, so similar to JSX if you want in React. So I'm mentioning two libraries. I have just mentioned two libraries in the past minute, okay. But instead of writing JSX it's just a string, okay? So I can say that each,
>> Maximiliano Firtman: Movie will have a link, so we can click on it.

[00:03:29]
Later, we will make that work. And we'll contain maybe an article, that's the HTML semantic element for an item in a dataset. And we are going to have an image with some source and some alternative text, we will fill the data in a second. And then a paragraph for the title, okay?

[00:03:52]
So I can do this and then I can try to take this query selector and take the image and change the source like so. Or, because I'm using backtick template strings, I can just come here and replace this with, for example, movie. Or actually, this movie, because it's a property from the class, poster_url, okay?

[00:04:24]
And for the paragraph, something similar, this movie title. And also because there are movies with the same title, we can in parentheses or within parentheses I can add also the release year like so, okay. And then I don't need this. So similar to React, how in JSX you use interpolation, so it's kind of similar, okay?

[00:05:00]
>> Maximiliano Firtman: So now, we also need the alt. Remember, we should fill the alt. We can just take the movie title, let me put this in a new line, the movie title, and say this is the poster of that movie. Copy that. Like Batman poster, Star Wars poster. And then I can use this movie item component in my homepage.

[00:05:30]
So instead of just writing the title, I will go to this LI this item, and I will append child. And I will create a new movie item component that receives a movie. I already have the movie here, so I will pass the movie as an argument. And from an OOP point of view, this looks really nice.

[00:05:54]
So we have a list item, we have a movie item component. So if I run this. Whoo, voila. I have movies with vertical scroll and something to watch today, random movies. So every time I refresh, I'm getting different random movies. Okay? So let's review where we are. So we know that the backend was done.

[00:06:27]
So now we are of course at the front end. And actually what we have is the API service. We have the user interface, HTML, CSS, and of course, images. Actually, the user interface is creating one web component, the homepage. The homepage web component is calling the API service.

[00:06:52]
The API service goes through HTTP, goes to the backend. The backend enters into a handler. Okay, it's a movie handler. So the movie handler has a model repository, the movies repository, that's the one that talks to the database, makes the SQL query. It returns the SQL query, it converts that into a model.

[00:07:14]
So the model is actually the movie class. Then a slice of movies, or a collection of movies, is going back to the handler. The handler is converting that into JSON. And through HTTP, it goes back to the API service. And the API service sends that to the web component, which is now writing HTML.

[00:07:36]
And finally, you see that in the user interface. That's everything that we have done so far.
>> Speaker 2: You list a lot of movies, or what if we have a lot, right? 1 million movies that you need to load. You have to go to paging.
>> Maximiliano Firtman: Exactly, right now, we are downloading only 20.

[00:08:02]
So we have a maximum amount. You don't want to download all the movies. Also, you will get probably access quota in your cloud. You will have to pay for that. So you will need to get into making pages, or just like in Google search results. There are many patterns.

[00:08:20]
You have the paging pattern where you create pages and next and previews. You have the Infinity scroll pattern. It's a UX design pattern. So you start scrolling. it can be horizontally or vertically, and when you get to the end, you get ten more. And when you get to the end, you get ten more, automatically.

[00:08:39]
So you do that with the onscroll event. So when you get near the end, you go and grab ten more and you attach those there. So you will have to think about that. Right now, for simplicity, we are just downloading a maximum of 20 and that's all. But yeah, you will need to increase that.

[00:08:58]
Also, for the search that we will do later, on the search we will have filters. So also, we will be able, if the data set that is coming from the server is too large, we can narrow that by filtering it. Okay, so we can filter the search. The other thing that is still missing and we will do later, is the router and routes.

[00:09:22]
Those are the things that we haven't coded so far in the client to actually, for example, click on one movie and go to the details.
>> Speaker 3: There was lots of wows in chat.
>> Maximiliano Firtman: We got into the wow moment, okay, right? Yeah, I know, I know. I know that you were not believing in this initially, okay, but that usually happens, okay?

[00:09:46]
I know that some developers, they want to start with the UI first, because they feel better, okay? But if you started with this diagram, with the architecture, okay, you can start anywhere actually coding and it should work. I mean, if you think about all the connections that you have on each part, you don't need to start with the UI or here or there.

[00:10:09]
It's up to you.
>> Speaker 4: If I wanted to use this stack for generating landing pages, I would need to render these components on the server. What?
>> Maximiliano Firtman: Yeah, a single page application has advantages and disadvantages. One of the disadvantages is SEO, search engine optimization. In this case, it depends on the landing.

[00:10:34]
If the landing is for ads, meaning Facebook ads or Instagram ads, it doesn't matter, to be honest. But if you want to, or for example, if you want to be a Google or now, we have SEO, search engine optimization, and AIO, okay? Because now you can search using ChatGPT or Google Gemini or Grok.

[00:11:00]
They can search on the web. And when we have a single page application, they don't see the data, okay? They could potentially, but they're not doing that from a performance point of view and resources, they're not doing that. So they're just reading the HTML. And yes, our HTML right now, they're reading this.

[00:11:21]
The page source, and there is no data. So remember, there is another intermediate course that follows this project. In that intermediate course, we do some kind of server-side rendering to solve that problem. In that case, you need to solve the problem from Go from the backend. And instead of just delivering an HTML, you need to fill some gaps.

[00:11:48]
Even if it's not the final UI, at least the data. So then from the server, you're also serving, that's server side rendering, you're also rendering some of the data from the server. And then you can continue client side with JavaScript.