Course Project Overview

[00:00:00]
>> We're going to be working with an app with the name Coffee Masters. In this case, let's say we have a coffee shop, we have a coffee store, we sell coffee. So we're going to make an app so the user can order ahead, for example, your coffee, your morning coffee.

[00:00:15]
You wake up, you open the app, and you order like, for example, Starbucks or any other app. So it's going to be a web app, not a native app. It will have a menu with all the products available. We can get into the details to see more more information, and we can add it to the cart.

[00:00:35]
Then we'll have a cart and the cart will have a form so with our name and something else, an email, so we can get the receipt, and that's all. So it's a basic web app, but it has navigation, it has a data structure to manage. So we will see how to make this app completely from a scratch.

[00:00:56]
We already have the HTML and the CSS, so that part is ready. We will analyze that in a second. But the data is in JSON, so we already have the menu in a JSON file, but we don't have any JavaScript, okay? So we are going to download the JavaScript.

[00:01:14]
We are going to create web components. We're going to see how that works. We are going to fetch the menu using HTTP. We're going to grab that, and we're going to render the UI. It's time to see something in action. So if you go to the URL that again, it's firtman.github.io/vanila.

[00:01:36]
You will get into this website where you can see the introduction. And basically, the first part that you need is to clone the project or download the ZIP file, whatever you prefer. Here you have the worship repository. That is just the initial part of the workshop, and then you have at the end also my final version that it will be similar, than the one that I'm going to push on GitHub on this same repository, okay?

[00:02:09]
So this is the repository that we're going to use, CoffeeMaster Vanilla. So I'm going to open that on my IDE. I'm using VSCode, but any IDE will work. The only important part here to test what they're going to do is to actually load it in a web server, in a local web server.

[00:02:30]
Why? Just for one particular reason, because we are going to fetch a JSON file and that's the only requirement for that. Because if not, we will get a security restriction from the browser. So, I mean, if you open the index.html in the browser because it's Vanilla.js, we don't have a build process, we don't have anything.

[00:02:50]
Actually, we don't have JavaScript right now, it will work. But when we get into downloading the data from the server, it's not gonna work directly from the file system. So you can use a plugin, I have here a plugin on VS Code because it says go live. If not, if you have node.js installed, you can type mpx serve dot the current folder, and that will download, if you don't have, a little server.

[00:03:22]
There are many servers, whatever works for you it's fine, we don't have any special needs. So I will just use this plugin. And this is what you're going to see, okay, just a brown header. That's the only thing that we have here. We have some links that right now are not working.

[00:03:42]
And the idea is that here, we're going to render the contents of the app. If you open this in Google Chrome, in this case, it's localhost 1500, you will see something that I'm not sure if you have seen before. I'm talking about that icon, that small icon there.

[00:04:07]
Also in the menu You have an Install Coffee Masters section. This is because this is a progressive web app, a PWA. If you're interested in knowing more about PWAs, I have a full course on Frontend Masters about PWAs and how to build that part, the installable part. But actually you can install the app and if you install the app then it's gonna have its own window.

[00:04:36]
Now it's really a window, remember the window DOM object? Now it's really a window in the operating system with its own icon that works on iOS, Android, iPadOS, Windows, Mac and Linux. Okay, so you can install the app. But maybe for now we can stay with the browser.

[00:04:57]
So I will go back to to Chrome. Let's quickly analyze, I'm going to open the inspector here, let's quickly analyze what we have here. What we are seeing here, it's actually the DOM. It's not really the HTML. There is a big difference between the DOM and the original HTML that was loaded.

[00:05:24]
In fact, back in time, when I started doing web development, we didn't have the DOM structure inspector. We didn't have dev tools. Yeah, we didn't have that. So the only thing that we have is right-click, View Source. Okay, that was the only tool available at the time. And this is actually not the DOM.

[00:05:49]
This isn't a string representation of the HTML file. Okay, but that's not the DOM because the DOM is in memory, it's a memory structure in memory. And what we see here, in this case, it's the same or kind of the same. Let me show you something that I'm not sure if you have seen before.

[00:06:10]
So I'm going to my index.html, you don't need to do this on your own code because it's going to be something that I will delete. Just for show you something really quickly. What do you think about this? I'm going to add a title here, like my first HTML test.

[00:06:35]
And then I'm going to add an h1. This is a quick HTML code. So I'm saving this and I'm loading this here. So it works, okay? It works. What do you think about that HTML, is it valid? Maybe I should add a DOCTYPE. Let's add that one. What's your feeling about that HTML?

[00:07:00]
Is it valid? I'm seeing some faces kind of saying no. That's not true, it's a valid HTML file. I don't need the HTML tag,I don't need the head or the body. Those are optional in the HTML spec. You can run that through the W3C validator, and you will see it's valid, okay?

[00:07:26]
It's valid. Okay, but now, what happens if I add a style such as that style, will it work? So I'm setting the background color as red for the body. Do we have a body? I don't say it, will it work? What are your bets? Yes, no.
>> Yes, it'll work.

[00:07:54]
>> So, let's see, it works. Why? Because if you look here, this is the DOM, and we actually have a body. What's going on? Well, the HTML file and the DOM are not the same thing. The DOM is a structure in memory, okay? And the head and the body can be implicit.

[00:08:27]
So in this case, we have an implicit head, an implicit body. They are actually mandatory, not for my HTML file, but for the DOM. Every page has a head and a body, even if I'm not writing them directly or explicitly in my HTML. So here we can see a difference between the DOM and the HTML file that I'm writing.

[00:08:50]
Okay, makes sense? So in this case, we can see that it's not really a direct representation of my HTML. If it has added more stuff such as the body element. Makes sense? So just have that in mind that sometimes you will see not exactly the same. Let me go back to my code.

[00:09:11]
You won't see exactly your HTML as the DOM, you will see it's similar, but sometimes it's different because the browser can add more stuff or remove more stuff. And sometimes when you have plugins in your browser, some plugins can also be injecting things in your DOM as well, but we're not going to deal with that.

[00:09:31]
>> It took me quite some time to understand why view source and inspect are very, very different things.
>> That's why. Because when we are inspecting, we are inspecting the DOM, not the source code. So the browser actually is parsing the HTML source code that we are writing and is creating the DOM structure.

[00:09:53]
There is a relationship between both things of course, but sometimes it's not 100% the same. Okay, so that example, by the way, I develop a lot of web apps without the head and the body. So because mostly when I'm when I'm teaching HTML, I tend to start not adding the head and the body.

[00:10:19]
When you see HTML for the first time, it's overwhelming. So many things on the screen. When you remove the HTML, the head, and the body, it goes to the point and it's perfectly valid. Okay, but now that we understand the DOM, we know that anyway the head and the body and the document itself, the HTML element, are there anyway in the DOM, even if you're not explicitly saying so in the HTML.

[00:10:47]
Okay, so anyway, here in the body, we have a header, that's just plain HTML, and then we have an empty Main. Okay, the empty main is where we are going to render the contents. And then we have a lot of templates that we don't know what they are and we will see what they are later.

[00:11:09]
Okay, but the first important thing that you can see here is that the templates, when I go to my DOM, let me refresh my page now. Like the header here, the templates are there in the DOM, but they're not been rendered, okay? So we will understand what those templates are later, okay?

[00:11:34]
We have a question, right?
>> How does the browser know which elements go where? And where to put the body and head and that kind of thing?
>> Okay, so let's let me create a new file to understand that part. So the question is, where the extreme case that I was writing without, so the only mandatory thing for for an HTML file today is the DOCTYPE.

[00:11:59]
Even if you don't have the DOCTYPE, it might work anyway. So the title is mandatory and that's the only thing that is mandatory actually. Well, what happens, you may have a script tag, okay, you might have a link loading a CSS, and you may have things like an h1, this is a visible title.

[00:12:26]
I mean, I think the spec is actually specifying this, but each browser might do different things. But fortunately, they're doing the same thing. When the parser, so when the browser finds the first visible element on your page, it starts the body. It ends the head and starts the body.

[00:12:49]
So in this case, it's my H1. So I may have a lot of elements before the H1, but they're not visible. Meta tags, script tags, link elements, title, all those will go to the head. When the browser finds the first paragraph, the first div, the first even text note, that is if you just type text like so without any element, it's visible.

[00:13:16]
And because it's visible, it says, okay, it's visible, let's start the body. That's how that part works, okay? Yep.
>> So if you move that, like any p tag or anything before the title, for example, would there be issues?
>> The title will go to the body.
>> Interesting.

[00:13:35]
>> Yeah. What will happen? Actually, nothing. Nothing important, okay? But yeah, you may have meta tags in your body. Can you? Yes, you can. Does it make sense? Not really, but I mean, you know that browsers are doing their best efforts to render anything. Even if you don't close tags, it works, okay?

[00:14:01]
And so, it will work.