Creating App.js

[00:00:00]
>> Maximiliano Firtman: Well, now it's time to write some JavaScript, so I will create a new file and I will call that file app.js, any name will work, to be honest, okay? Any name will work, and what will be the idea? We're going to create a global app object that we can call from anywhere, okay, with some global functions from our JavaScript, Vanilla JavaScript client-side application.

[00:00:30]
For example, in this app, we can have the search function, so it's gonna be a function that receives an event.
>> Maximiliano Firtman: By the way, this is the one that we are calling from here, okay, app.search, keeping simple, short, app.search(event), does anyone know why I'm sending an event? So then we can realize why the event is useful.

[00:00:56]
>> Speaker 2: It doesn't reload the form.
>> Maximiliano Firtman: Exactly, it's a form, what happens with forms? When you press Return or you click on the Submit button, it creates a new full navigation to the server. So it goes to the server to create a post back, and we will be a client-side application, so we don't want that.

[00:01:17]
So we wanna listen for the event, but we don't want the browser to reload, so in this case, we'll just say event.preventDefault. That actually is the one that makes the trick and says to the browser, hey, browser, don't send the form, I will do that, so prevent your default action after this, and then, for example, we can get the keywords that the user is typing or the query.

[00:01:42]
You can call a keyword query however you wanna do that, so we actually need to get what's inside this input, okay? So what the user has typed, and for that we can add an ID, it's okay, or we can take advantage of CSS selectors and use query selectors and say, you know what?

[00:02:03]
I want the input whose type is search, and I will have only one in my page, only one search box, so when you get it, get the value.
>> Maximiliano Firtman: And something else that I need to do, okay, I need to call the API, grab the data, and we will see what you do later, okay, does it make sense?

[00:02:29]
>> Maximiliano Firtman: Now I need to connect index.html with my app, I'm pretty sure you know how to do that at this point, right? So it's a script, but I'm not sure if you know how to do that in a, let's say, modern way. For example, if you want to enable ECMAScript modules on it, do you know how to do that?

[00:02:57]
I mean, if you have experience doing classic web development, I mean, classic web development is JavaScript from 10 to 30 years ago, or five years ago. If you want to split your code into separate files, you have to add a lot of script tags pointing to each file, which is really annoying, we don't want to do that, and we have a better way.

[00:03:24]
When we have more files, we can import from other files, as we were importing from different Go packages, okay, but to make it work, we need to enable that in the script tile. And for that, we have to express type module, have you seen that before?
>> Maximiliano Firtman: So, it says, hey, you know what?

[00:03:54]
We're going to enable ECMAScript modules here so that app JS can import other JS files, and those other JS files can import other JS files, and we're creating a tree of dependencies that I don't need to explicitly express in my HTML file. Okay, makes sense? And also, I will add the defer attribute, it's not mandatory, do you know what defer?

[00:04:18]
Does to the script.
>> Speaker 2: Load it after the entire page is already loaded.
>> Maximiliano Firtman: Close, it's loaded after the page or the entire page is parsed, not loaded, what's the difference? Parsing is when the browser ends, reading your HTML and creating the DOM, but it doesn't need to load the CSS file or the image file.

[00:04:45]
When you're talking about loading, the load event is fired when every resource is also loaded. Defer will actually download the files in parallel with the parsing, and then it will wait until the parsing ends to execute it. Okay, so that's the idea, so it's for performance, it will improve a little bit web performance of our app.

[00:05:12]
So that's actually the app, we don't need to do anything, anything else here.