Q&A

[00:00:00]
>> This is about the router. Yeah, right now in our, well, at least maybe I messed up something but if I go into like the actual URL section and do slash order I get this route doesn't exist. The only way to solve that really is at the serve side of it right, to update that it's not

[00:00:19]
>> So the problem is that, if I try it's not shorter for you is not working. Why, the difference between your code and my code is not the code, it's the web server that you're using. In fact, let me show you another. I'm using the web server that is here in VS Code, let me try another one.

[00:00:38]
I'm going to stop that web server and let me show you another web server for example npx serve. This is a different server that has a different default configuration, now it's localhost 3000. So if I try this, let me open the same browser. So if I try this here, I mean it works the same, works pretty well.

[00:01:05]
But if I try, order and refresh, I'm getting a 404. That's because this web server is set up differently by default. So that's why when you are using single page application or you are changing the router, you have to set up your server for forwarding. The same happens if you're using React.

[00:01:26]
I mean, they're React development server works fine, but if you publish that the output folder in an Apache you won't get that result, you will get the same 404. And for that you have to set up your server that's how. In terms of client side, if you wanna provide your own custom 404, it's just a default.

[00:01:47]
So if you don't have a page element, defined by the router is because it's a 404. So what do you wanna do here? Well, maybe you wanna do something similar to this, or instead of append child. By the way, cache is actually here, so I'm not gonna use cache.

[00:02:08]
You can just do something like this, inner HTML, oops, 404. Or you can create your own elements such that so now this will work only with broken client side links. Let's try this, from JavaScript for example, from the console, I will say, main, I'm sorry, I will say app.router.go to somewhere that doesn't exist.

[00:02:44]
So we get our own 404, client-side 404. .And then you can create another component that will render 404 or wherever you want. Remember, that's like a fake URL. So if I refresh, it will make a new page navigation to the server and that the server is the one returning 404.

[00:03:10]
Some development servers by default they forward you to the index.html, instead of giving you a 404. And remember when I'm saying forwarding, I'm not saying redirecting, now, I'm not saying responding with an HTTP 301 or 302. It would get something better than 404, but you will go to the home, you won't see the cart.

[00:03:31]
If you wanna refresh and still seeing the cart, then you need the forward. Forward means that the server will just return the same index.html on every URL that is not an image or another file.
>> So how do you make the decision about when to use vanilla JS and when to use library is a list of questions to help you decide which to use.

[00:03:57]
>> I think that the answer to that it's similar to how to measure the time that he will take the whole project or how to estimate the time or even the price of a project. You will know the answer with your experience, I mean, your experience will actually growing up like if you are ChatGPT, okay, you will learn the answer with time.

[00:04:24]
I'm not sure how easy it is to define a list of five questions that based on those answers, you will know which one is better. So we can try to define questions that will give you the right answer or based on the answers you will give the final results.

[00:04:43]
But at one point, you will need to get experience, so you will need to make a lot of mistakes using the wrong framework to understand why that was the wrong decision. And this is like on everything that we have on IT or even not on IT also, I know Linux versus Mac versus window, things like that.

[00:05:09]
Sometimes you need to try everything to understand what's best and what not. Because sometimes you get a lot of recommendations from a lot of people. If you wanna start coding these days and you ask people how to do that, you will receive a lot of answers that they say, no, you have to read the book now forget about books you need to do online.

[00:05:38]
No, forget about online, workshops or sign-up to a Boot Camp. No, forget about Boot Camps and you don't know you need to find what's good for you probably not follow what other people thinks because they are different. So you will find people saying no, you must use React. Other people will say no, never React.

[00:05:58]
And you shouldn't base your decisions on other people's decision. So I think that it's good to maybe do a workshop on every framework. Like spend, one day, on Frontend Masters doing one workshop and everything we're and then you can get the experience and understand what's better. And you will have better experience to actually decide, okay, now it's better and of course, you will make mistakes.

[00:06:31]
And that's okay, it happens to every company. You will see lot of companies, big companies say, no, we go full React. Two years later, we are replacing this with, I don't know, whatever, and now we are replacing this, and now we're doing Next.js. And now we're replacing this and we're doing Qwik.

[00:06:50]
And now we are going back to HTML, no JavaScript. So it happens because at one point, no matter what you're doing, which tools are you using, it will become a mess. So no matter what. So unless, or not unless, let's say at least when you're doing Vanilla JS, the good part is that you're making a high performance solution.

[00:07:16]
So even if you made mistakes, it's high performance, so your users will get a benefit. And at the end, performance is not about us, it's about the user and even forget about the user, it's about the business. Because if the user perceives a better performance it has been proved that you will get more money, I mean, your company will get more money wherever your company is doing okay and yeah.

[00:07:47]
>> Just a couple of resources to note to check out. We have Lydia Hallie's tour of JavaScript pattern and React patterns. Of course, that covers a number of different patterns people can use. And then also Mark Grabanski, CEO of Frontend Masters, his GitHub repo has a Very popular to do MVC app that is built in vanilla JavaScript.

[00:08:13]
>> And there is also a live version of that one.
>> Yeah, obviously take a look at our JavaScript learning
>> The whole JavaScript learning path in that way. You can spend a week a month, how much time do you need? Yeah, there's a lot of courses there.

[00:08:29]
>> There are a lot of courses there. Everything is a new tool.