Bravo! I just love this video. It is clean and using the tools the way they were intended to be used without loading unnecessary frameworks and modules. All real web browsers now support ES6. There is no need to use all these tools that dumb JavaScript down to the lowest common denominator. Thanks!
I am a full stack web developer for 4 and a half years now and been doing project throughout the entire time. I can tell you from everything that I learned , this is by far one of the best and most simplefied explanation , I wish I learned Javascript this way when I just started as it would save me so much time and help me understand the main ground and the "how" and not the "why". Great video and straight to the point
These JS projects which you have uploaded is art.People dont watch this stuff thinking they would be reinventing the wheel but actually we are just trying to customize the rims. If that makes sense these projects teach you everything from scratch i.e debugging,internal working which many people are unable to understand .Kudos to you mate.
The reason why i don't use framework like React and others is because i was waiting for this kind of tutorial to understand how it works under the hood.Thank you very much
Same here, coming from a background of strongly-typed languages, Js frameworks throw me off so much when trying to learn them, even after playing around with vanilla js code for a few days.
@@taoufiqbenallah9029 you never know, we might be wasting more time than he does. in my opinion most of those who use a framework (hammer) for every project are very good at slacking (or, at best, spending hours trying to figure out why something is not working in their correctly structured big mess)
This tutorial is one of the most useful for those who wants to do front-end development for his living as this is one the common question during interviews meaning how to make single page web app using javascript with no framework.
Are you looking at this video at all? He uses Node.js (a server framework with built-in modules and a huge repo of user-written modules, npm) and also Express, a JavaScript framework for the backend work. Personally, I think using a Node.js server for routine functions like page navigation and reloads is a violation of the usual division of work at the back end: page requests go to the web server (Apache/NGinx) while user events are handled by Node. Doing it this way puts the two types of task on separate threads inside the CPU rather than have one type bottlenecking execution for the other type.
@@jackred2362 Not so. Node.js is not merely a server creation framework plus a JS runtime. It also has a good store of core JS modules and accepts all npm modules. Express is itself an npm module which incorporates many common backend functions, e.g. authentication, search, payments, etc. But you don't have to use Express. You CAN select code units from Node's built-in library and the npm repositary and write some JS code to link it together yourself. In fact I'd advise newbees to Node.js to make their first apps without Express just to see how Node works and all it has without Express/Koa/Hapi. Express of course expects users to be up to speed with all the latest JS constructs and newbees won't be quite there yet. Don't believe me ? Look at this ruclips.net/video/H9fg7GFagF4/видео.html
**IMPORTANT:** Use port 3000 over 5060 As many have pointed out in the comments, it's recommended you go with a port number other than 5060 as referenced in this video.
*here are the basic points*: # Server: Restrict responses: - return requested file for static/* requests - return index.html for everything else # Browser 1) Override default navigation behavior: - Single click handler "up high" on the body. - If the event target is "one of the navigation links": prevent default and push history. 2) Listen for history changes: - Create a lookup table that couples routes with markup. - When the route changes, find a best match in the table and dump its markup into the dom. *congratulations* you just saved 40 minutes of your time.
you gave a very good clear breakdown summary of the key components necessary to create a S.P.A with a vanilla js, but as a beginner its also good to be able to watch few different coders create stuff like this , so we can code along and learn etc etc . but your comment also helped me fully grasp what is actually happening in this video .
Hello, can you please continue this project? May be remake it from absolute zero with new view on it? You did wery well, but i think it’s can be done better! May be do more pages next> prev< buttons to slide pages, some image gallery, please i want to see
what shoudl i do for example. I need to read elements returned by function getHtml after they appear on page, how should i do it? if i make script tag inside return it,s like invisible by javascript and it doesnt work! This is fitst reason that you should remake this code, its useless in this case.. so please redo it! i need that functionality NOW. if you ignore my messages i will unsubscribe! so please help or what you reason to do this tutorials? you want to give knowledge or what?
i know solution its like function dynamicallyLoadScript(url) { } dynamicallyLoadScript('../../../test.js'); is it right to dinamicly adding scripts after routing done? or you know some other way let me know
❗PART 2 OF THIS VIDEO ❗ ruclips.net/video/OstALBk-jTc/видео.html 🏷 *THE ULTIMATE JAVASCRIPT DOM CRASH COURSE* 👇 www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1
As a student working on creating an SPA for the first time, this was extremely helpful and straightforward. Allowed me to understand what I was working on while giving me a foundation of what the JavaScript was doing, helping me follow what I was making and actually understand the code! You're a lifesaver!
While I have dabbled in web development for a while now (10+ years). I've been looking for a way to create Single Page Applications for an idea that came to me and couldn't find an easy-to-follow tutorial that used only Vanilla JS. A lot of them used React or another Frontend and Backend Framework that was a bit too confusing for me to follow. I've been searching the internet for the last few days for a tutorial and just came across this video! Honestly, I can now say "I have finally found a tutorial that matches exactly what I need". Thank you, Dom. Your tutorials are awesome! P.S. I've just watched 3 of them because I genuinely enjoy your teaching style. Edit: If there isn't a tutorial already on your channel (besides your PWA tutorial). I think you should create one for creating a PWA + SPA, allowing for offline caching and installability for a Single Page Application.
This tutorial is great clear and concise, without making a fancy huge project that buries the main objective under a bunch of other useless code, you managed to explain how to create a SPA better than many other tutorials I have seen. Thank you sir!!!!!!
Hats off to the creator! If you're looking for the most straightforward and hands-on frontend project tutorial, this is the video you want to follow. Seemingly complicated concepts are explained in the simplest terms, and you can tell that a lot of time and effort went into creating this video. I would recommend watching this before diving into React development!
Backend developer here trying to learn some basic front end stuff. I started with React, learned a little about redux and routers, and got so tired of writing and learning so many different things, so I just gave up and thought, lets do it the old fashioned way. Tried and tested. Thank you!
I really loved this small demonstration of the building blocks for single-page applications. I got some basic ideas as to how frameworks like React, Vue and Angular actually work under the hood.
5:28 For the ones who get confused why their npm is not working! you have to install node js to your pc or mac, and after that, you may need few extensions. you can search other tutorials if you still dunno what to do. Just type to youtube Install NodeJs to VScode and you will find solutions.
I'd better amend my comment. It's a great tutorial. Yes the first 11.30 mins are setting up Express Framework routing to serve the HTML... but then it gets down to business and explains the client-side part really clearly -- better than other material ive read. I can see how the first 11 mins are useful for context. Watch this tutorial
20:00 The video is starting really informative for me personally from here since this is basically modern JS frameworks are based. Can we just appreciate how much effort this guy put in his video preparation just to let his mouse dided in the process?
I finally see the light! I've been cramming React thinking it was the only way to do this. Since watch your videos I've scrapped all React learning to focus on pure JS. Thanks
What would be nice is to show how the core of modern frameworks works, being 2 way data binding via proxy objects Virtual Dom using DomParser SSR hydration using DOM diff utility Modern bundler such as vite Dependency injection using TS inversify It can be done and really nice to break down all the hype we get around the big 3 which is mostly corporate driven but unfortunately affects everyone when we come to our next interview and often so called senior devs forget the most important thing which is the fundamentals :)
The last and elegant step you should make is to use HTML template elements instead of returning strings containing HTML code, because using templates you're able to edit page layout with support of all these cool editor features (at least to speed up process and avoid syntactic mistakes).
Can someone elaborate on this? I understand that writing HTML in quotes removes a lot of the handy features of VSCode. What I don't exactly understand is how templates can be used in this context. Would all of the templates be written in the index.html file and triggered by each view? This seems like it would result in a very bloated index file but I struggle to understand how the templates could be compartmentalized to each js view. Any help or explanation would be much appreciated!
Awesome tutorial. Gives a very clear under the hood look on how these things actually work, with plain vanilla JS and without becoming confused by framework specific methods. Subscribed to the channel.
"No frameworks"... installs npm with express. Perhaps the "server side" could have been separated a bit better so it's clear that's all you were doing. After watching the entire video, though, it was really interesting. I particularly like the data-link and global click handler, I use that frequently for all sorts of interactions with dynamic html.
Posts.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. 32:23 by this time I'm following and coding, and I get the error. How do I solve this?
Any Idea as to why the code at 6:58 is not working? I have the entire SPA working correctly besides it breaking on any link or refresh that is not on the index pathing.
Thank you for a great presentation. I am a returning UI developer, out of touch with React/Angular etc. Wanted a barebones intro back in JS, and Node. This was perfect for me!
Great video at the right time! My company wants me to write an article for their blog and as topic I want present some Web APIs. Therefore I want to write an preparing article about transforming a "normal page" to an PWA on which I can implement more and more Web APIs afterwards to make the site more "app-like". To adress a bigger audience, I am currently implementing a small project in JavaScript only (I am not that experienced and Frontend-coded only with Angular yet, so using vanilla Javascript is not that easy for me). That's why your video comes right on point! Thank you for the detailed explanations.
it's important to import views with file extension *.js like so: import AbstractView from "./AbstractView.js"; because for me: import AbstractView from "./AbstractView"; - auto generated by VSCode does not actually work and it caused page reload and the content of getHtml() wasn't loaded. At least i think this was the problem in my case.
at TIMESTAMP 7:50 Issue As of now, PORT 5060 currently isn't available on browsers, as it's used for SIP attacks. Solution I was able to change the server.js function app.listen() to use PORT 8000 instead, then load the page localhost:8000 in the browser to get it to run,. Works now as in video above.
Thanks for the heads-up! I was wondering why it wasnt working and changed the PORT to something random, and then it worked. Interesting to know the reason why 5060 isnt working anymore though!
Thanks! Not sure, I think if you do a lot of vanilla JavaScript you can put things together like this but if you're wondering if I looked at source code, I didn't 😄
Really interesting. I am working on my own project on this basis currently and where I am struggling is when I want to do something more interesting in the view than just render static html. I want to have elements with their own eventHandlers in the views. Any Ideas how that can be added elegantly?
To fix error Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking, modify server.js: express.static(path.resolve(__dirname, "frontend", "static"), {extensions: ["js"]}
For people wondering why the initial render is not triggering the router method, you need to call it as soon as the DOM content is loaded. like this -> document.addEventListener("DOMContentLoaded", () => { router(); { if(e.target.matches("[data-link]")){ e.preventDefault(); navigateTo(e.target.href) } }) })
The new trend in web development after all these years (20+) of patching, pollyfilling, and thousands of frameworks is using no framework, subclassing HTMLElement (Web Components), and using Fetch (http requests) LMAO😂
If you have a local Apache server, you can skip the dedicated (express) server and just add this .htaccess next to your index.html: Options -MultiViews RewriteEngine On RewriteRule ^ index.html [QSA,L] Experimenting, just the last line seems necessary.
Awesome tutorial, would be great to have same with explanation how to use server-side rendering of HTML Templates or load html file as a content for each views ;)
Bravo!
I just love this video. It is clean and using the tools the way they were intended to be used without loading unnecessary frameworks and modules.
All real web browsers now support ES6. There is no need to use all these tools that dumb JavaScript down to the lowest common denominator.
Thanks!
I'm glad you liked this video. Thank you so much for your donation!! 😁
When you say dumb JavaScript down, are you talking in terms of abstraction or performance?
@@pure4lyfe5simplicity
@@pure4lyfe5I adore the simplicity of JS without any frameworks.
I am a full stack web developer for 4 and a half years now and been doing project throughout the entire time. I can tell you from everything that I learned , this is by far one of the best and most simplefied explanation , I wish I learned Javascript this way when I just started as it would save me so much time and help me understand the main ground and the "how" and not the "why".
Great video and straight to the point
I appreciate it. Thank you! All the best with your career 👍
🤦♂️
These JS projects which you have uploaded is art.People dont watch this stuff thinking they would be reinventing the wheel but actually we are just trying to customize the rims. If that makes sense these projects teach you everything from scratch i.e debugging,internal working which many people are unable to understand .Kudos to you mate.
True!
The reason why i don't use framework like React and others is because i was waiting for this kind of tutorial to understand how it works under the hood.Thank you very much
in your application always use vanilla js or jquery?
@@mauriciochavez8528 I use Vanilla JS for everything. I don"t see the utility to use Jquery
Same here, coming from a background of strongly-typed languages, Js frameworks throw me off so much when trying to learn them, even after playing around with vanilla js code for a few days.
@@taoufiqbenallah9029 you never know, we might be wasting more time than he does. in my opinion
most of those who use a framework (hammer) for every project are very good at slacking (or, at best, spending hours trying to figure out why something is not working in their correctly structured big mess)
@Solve Everything that's not his intention. the idea is to show us how frameworks work under the hood, keep it up man
This tutorial is one of the most useful for those who wants to do front-end development for his living as this is one the common question during interviews meaning how to make single page web app using javascript with no framework.
Appreciate that Tomáš, thanks!
Im at min 10 and this looks like a fullstack app.
Are you looking at this video at all? He uses Node.js (a server framework with built-in modules and a huge repo of user-written modules, npm) and also Express, a JavaScript framework for the backend work.
Personally, I think using a Node.js server for routine functions like page navigation and reloads is a violation of the usual division of work at the back end: page requests go to the web server (Apache/NGinx) while user events are handled by Node. Doing it this way puts the two types of task on separate threads inside the CPU rather than have one type bottlenecking execution for the other type.
@@jackred2362 Not so. Node.js is not merely a server creation framework plus a JS runtime. It also has a good store of core JS modules and accepts all npm modules. Express is itself an npm module which incorporates many common backend functions, e.g. authentication, search, payments, etc. But you don't have to use Express. You CAN select code units from Node's built-in library and the npm repositary and write some JS code to link it together yourself. In fact I'd advise newbees to Node.js to make their first apps without Express just to see how Node works and all it has without Express/Koa/Hapi. Express of course expects users to be up to speed with all the latest JS constructs and newbees won't be quite there yet.
Don't believe me ? Look at this ruclips.net/video/H9fg7GFagF4/видео.html
It's moronic and counter-productive to go without a framework.
**IMPORTANT:** Use port 3000 over 5060
As many have pointed out in the comments, it's recommended you go with a port number other than 5060 as referenced in this video.
*here are the basic points*:
# Server:
Restrict responses:
- return requested file for static/* requests
- return index.html for everything else
# Browser
1) Override default navigation behavior:
- Single click handler "up high" on the body.
- If the event target is "one of the navigation links": prevent default and push history.
2) Listen for history changes:
- Create a lookup table that couples routes with markup.
- When the route changes, find a best match in the table and dump its markup into the dom.
*congratulations* you just saved 40 minutes of your time.
you gave a very good clear breakdown summary of the key components necessary to create a S.P.A with a vanilla js, but as a beginner its also good to be able to watch few different coders create stuff like this , so we can code along and learn etc etc . but your comment also helped me fully grasp what is actually happening in this video .
Or just jump to the github URL to check the code
If you enjoyed remember to Like and Subscribe for more web development projects and tutorials! 🙂
😊👌
Hello, can you please continue this project? May be remake it from absolute zero with new view on it? You did wery well, but i think it’s can be done better! May be do more pages next> prev< buttons to slide pages, some image gallery, please i want to see
what shoudl i do for example. I need to read elements returned by function getHtml after they appear on page, how should i do it? if i make script tag inside return it,s like invisible by javascript and it doesnt work! This is fitst reason that you should remake this code, its useless in this case.. so please redo it! i need that functionality NOW. if you ignore my messages i will unsubscribe! so please help or what you reason to do this tutorials? you want to give knowledge or what?
i know solution its like
function dynamicallyLoadScript(url) {
}
dynamicallyLoadScript('../../../test.js');
is it right to dinamicly adding scripts after routing done? or you know some other way let me know
its very interesting for me, so please continue this project, dont give up! It's going to be cool and useful for other people!
❗PART 2 OF THIS VIDEO ❗
ruclips.net/video/OstALBk-jTc/видео.html
🏷 *THE ULTIMATE JAVASCRIPT DOM CRASH COURSE* 👇
www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1
As a student working on creating an SPA for the first time, this was extremely helpful and straightforward. Allowed me to understand what I was working on while giving me a foundation of what the JavaScript was doing, helping me follow what I was making and actually understand the code!
You're a lifesaver!
My question is how does he know to use all of this code and where does he research to figure it out?
@@jplaza7210google
@@jplaza7210also, looking into the source code of these frameworks can give a good idea as well, I bet.
I don’t usually leave comments, but this is exactly what I was looking for. Very easy to follow, thank you!
I work with node js since 2016. One of the best tutorial I've ever seen.
While I have dabbled in web development for a while now (10+ years). I've been looking for a way to create Single Page Applications for an idea that came to me and couldn't find an easy-to-follow tutorial that used only Vanilla JS.
A lot of them used React or another Frontend and Backend Framework that was a bit too confusing for me to follow.
I've been searching the internet for the last few days for a tutorial and just came across this video! Honestly, I can now say "I have finally found a tutorial that matches exactly what I need".
Thank you, Dom.
Your tutorials are awesome!
P.S. I've just watched 3 of them because I genuinely enjoy your teaching style.
Edit: If there isn't a tutorial already on your channel (besides your PWA tutorial). I think you should create one for creating a PWA + SPA, allowing for offline caching and installability for a Single Page Application.
This tutorial is great clear and concise, without making a fancy huge project that buries the main objective under a bunch of other useless code, you managed to explain how to create a SPA better than many other tutorials I have seen. Thank you sir!!!!!!
That was so much value in 30 minutes for someone that understands basic js but not it's practical use. Thanks a lot
My question is how does he know to use all of this code and where does he research to figure it out?
Hats off to the creator! If you're looking for the most straightforward and hands-on frontend project tutorial, this is the video you want to follow. Seemingly complicated concepts are explained in the simplest terms, and you can tell that a lot of time and effort went into creating this video. I would recommend watching this before diving into React development!
by far the best expanation tutorial ive seen, strait to the point but doesn't skip any reason
This video is gold, deserves more views!
Who likes the new video intro? 👀
Awesome. Nice logo.
Backend developer here trying to learn some basic front end stuff. I started with React, learned a little about redux and routers, and got so tired of writing and learning so many different things, so I just gave up and thought, lets do it the old fashioned way. Tried and tested. Thank you!
How i can handle post request here ?
I keep telling people that you should NOT use frameworks without understanding plain JavaScript.
This is the best tutorial on SPA ive ever come across on my entire WebDev journey. Thank you so much.
I really loved this small demonstration of the building blocks for single-page applications. I got some basic ideas as to how frameworks like React, Vue and Angular actually work under the hood.
5:28 For the ones who get confused why their npm is not working! you have to install node js to your pc or mac, and after that, you may need few extensions. you can search other tutorials if you still dunno what to do. Just type to youtube Install NodeJs to VScode and you will find solutions.
still dunno what to do
Thank you !!
I'd better amend my comment. It's a great tutorial. Yes the first 11.30 mins are setting up Express Framework routing to serve the HTML... but then it gets down to business and explains the client-side part really clearly -- better than other material ive read. I can see how the first 11 mins are useful for context. Watch this tutorial
this is one of the best channels for understanding the web. Love your work brother :)
20:00 The video is starting really informative for me personally from here since this is basically modern JS frameworks are based. Can we just appreciate how much effort this guy put in his video preparation just to let his mouse dided in the process?
I finally see the light! I've been cramming React thinking it was the only way to do this. Since watch your videos I've scrapped all React learning to focus on pure JS. Thanks
(I changed my mind. React was fun this is kinda long)
@@chubbyBunny94 bruh
@@कार्तिकेय-ढ8म Lol - I am back to this only cause it'll help me get more comfy with React
@@chubbyBunny94 You're very funny dude
Learn plain JavaScript before using Frameworks! 🤡
I watched this video back in 2020 and understood nothing, watched it now again and have had like 20 WOW-moments haha XD! AMAZING WORK!
dcode. Sir. Your tutorial is very simple and clear when someone no experience in SPA. Thank you. 😊
You are very welcome
What would be nice is to show how the core of modern frameworks works, being
2 way data binding via proxy objects
Virtual Dom using DomParser
SSR hydration using DOM diff utility
Modern bundler such as vite
Dependency injection using TS inversify
It can be done and really nice to break down all the hype we get around the big 3 which is mostly corporate driven but unfortunately affects everyone when we come to our next interview and often so called senior devs forget the most important thing which is the fundamentals :)
Don't do frameworks without understanding plain JavaScript.
THE BEST VIDEO EXPLANATION ABOUT SINGLE PAGE APPLICATION. thank you so much for sharing 🙌
The last and elegant step you should make is to use HTML template elements instead of returning strings containing HTML code, because using templates you're able to edit page layout with support of all these cool editor features (at least to speed up process and avoid syntactic mistakes).
Can someone elaborate on this? I understand that writing HTML in quotes removes a lot of the handy features of VSCode. What I don't exactly understand is how templates can be used in this context.
Would all of the templates be written in the index.html file and triggered by each view? This seems like it would result in a very bloated index file but I struggle to understand how the templates could be compartmentalized to each js view. Any help or explanation would be much appreciated!
@@AVC1602 they would each have their own file, so instead of calling string literal HTML, you would call the filepath where the template resides.
Awesome Video through this i got to know how react, angular, vue are working
This tutorial deal with every aspects of what we can do with javascript. short but mighty tutorial, Thank you for sharing this!
Awesome tutorial. Gives a very clear under the hood look on how these things actually work, with plain vanilla JS and without becoming confused by framework specific methods. Subscribed to the channel.
You're welcome Tom! Thanks for subscribing
"No frameworks"... installs npm with express. Perhaps the "server side" could have been separated a bit better so it's clear that's all you were doing.
After watching the entire video, though, it was really interesting. I particularly like the data-link and global click handler, I use that frequently for all sorts of interactions with dynamic html.
Thank you very much for your great javascript tutorials DCODE...
Great clean knowledge !
Congratulations, Dom! Your content is one of the bests. I can't let to watch every video that you post. Thank you very much!
I have been really looking forward to the next video
awesome! i've been looking for this kinda lecture! thanks a lot ! mr. vanilla!
Thanks dcode. With love from Nigeria.
No worries!
Dom you are an Aussie Legend!
well done dude. i always knew it was possible, and i wanted to build something that is simpler and without stupid frameworks lol
Frameworks aren't stupid. 🤦♂️
This is an eye-opener how JavaScript works under the hood
Posts.js:1
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
32:23
by this time
I'm following and coding, and I get the error.
How do I solve this?
To the point, very informative - I pray channel grow more and more.
Waiting for the next video in continuation to this tutorial.
Thank you very much! this was very helpful to me and to a lot of people out there
Amazing tutorial, very informative, very well prepared.
You're welcome! And thanks
Any Idea as to why the code at 6:58 is not working? I have the entire SPA working correctly besides it breaking on any link or refresh that is not on the index pathing.
How concise and simple! Thank you very much!
Thanks it will helpful for me as a beginner in JS👍🏻
Man you have pretty good tutorial on vanilla js. Learning a lot from you. Subscribed ✌️
great stuff, loving it
Amazing 😀. I’m building an open source single page server side rendering framework using this tutorial.
Oh FFS, not another Framework. 🤦♂️
@@carldrogo9492 🤣 it’s mostly for practice
This clears a lot of javascript for me
Thank you for a great presentation. I am a returning UI developer, out of touch with React/Angular etc. Wanted a barebones intro back in JS, and Node. This was perfect for me!
You should NOT use frameworks without understanding the basics and fundamentals of plain JavaScript. 🤦♂️
Great video at the right time! My company wants me to write an article for their blog and as topic I want present some Web APIs. Therefore I want to write an preparing article about transforming a "normal page" to an PWA on which I can implement more and more Web APIs afterwards to make the site more "app-like". To adress a bigger audience, I am currently implementing a small project in JavaScript only (I am not that experienced and Frontend-coded only with Angular yet, so using vanilla Javascript is not that easy for me). That's why your video comes right on point! Thank you for the detailed explanations.
Awesome to here!! I hope it all goes well mate 😁
Now instead of using port 5060 you may want to use 5080 or other port since 5060 is blocked due to vulnerabilieties
How so, the vulnerability is in the app that listens on the port, not the port itself?
Thank you! Could not run on port 5060, but did not know why. Changed to 8080 instead and now it ruins fine.
omg thank you!
@@wiktoriakorneusz4373 run 80 port instead
Saved this man’s whole video
Awesome tutorial! Thanks
Respect bro🙌🏼
Sooooo helpful to learn spa!!! thanks
Great little project to get the noggin joggin! Well done mate
Thank you! Cheers!
Really enjoyed the video! faced a few hiccups with it but learned much more! Thankyou😀
it's important to import views with file extension *.js like so: import AbstractView from "./AbstractView.js"; because for me: import AbstractView from "./AbstractView"; - auto generated by VSCode does not actually work and it caused page reload and the content of getHtml() wasn't loaded. At least i think this was the problem in my case.
Thank you it was the same on my code.
thank you for the clear explanation!
You're the man! This is just what I have been looking for. Excellent tutorial.
Appreciate it mate
at TIMESTAMP 7:50
Issue
As of now, PORT 5060 currently isn't available on browsers, as it's used for SIP attacks.
Solution
I was able to change the server.js function app.listen() to use PORT 8000 instead, then load the page localhost:8000 in the browser to get it to run,. Works now as in video above.
Thanks for the heads-up! I was wondering why it wasnt working and changed the PORT to something random, and then it worked. Interesting to know the reason why 5060 isnt working anymore though!
Which font style have you used in vs code...thats so Wonderful...😍
HUGE THANKS, this really helps my javascript skills,
Hi there, as I got few questions which as follow:
05:28, How to open the command line? Pressing which button or any function tab?
Thank you.
this is actually mind blowing, thanks
How did you figure out how the frameworks work, in first place?
Thanks! Not sure, I think if you do a lot of vanilla JavaScript you can put things together like this but if you're wondering if I looked at source code, I didn't 😄
@@dcode-software You're overdosed with vanilla JS
Really interesting. I am working on my own project on this basis currently and where I am struggling is when I want to do something more interesting in the view than just render static html. I want to have elements with their own eventHandlers in the views. Any Ideas how that can be added elegantly?
did you find a resource for this
Thank you, this is so elegant
Awesome tutorial. You are a such a great javascript developer 😍
Simple and clear terminology... very helpful!
Me out here still struggling😂
NPM and Express destroyed my innocence.
16:57
Why didn't you use "ForEach" function instead ? is it different ?
i love ur many videos.. waiting for the next.. 'm from Pakistan..
Thanks mate!
To fix error
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking,
modify server.js:
express.static(path.resolve(__dirname, "frontend", "static"),
{extensions: ["js"]}
Thanks for this. I was wondering how to fix it
Thanks man
This was super helpful! Thank you a bunch!
Oooh... It's awesome. That is exactly what i looking for. Very thank you for your content! +1
3:35 Isn't type="module" by default also set to defer? Couldn't you put it in the header?
Excellent presentation
For people wondering why the initial render is not triggering the router method, you need to call it as soon as the DOM content is loaded. like this ->
document.addEventListener("DOMContentLoaded", () => {
router(); {
if(e.target.matches("[data-link]")){
e.preventDefault();
navigateTo(e.target.href)
}
})
})
nice video!
BTW what's this theme you're using in VSCode?
Great tutorial, thanks a lot for your job!!
Thank you for your kind explanation!!! perfect!
Awesome man, TYSM
I like your theme in VSCode. Which one is it?
I get the error at 31:55 but my file is in the correct folder, anyone know why?
how to make an endpoint in server so that it sends some data instead of index.html ?
Thats what i've been thinking of when studying react. Thanks :))
Good tutorial, now we basically only need a template engine so that we can do useful stuff in the HTML.
Just use a Frontend Framework FFS. 🤦♂️
Great video. Just remember that all those new instances generated on click must be deleted so it can collected by the garbage collector
thx for it, when i do it every thing is working but when i put "data link" in the i stay on the index i dont move
i have a problem connecting via default, no result at 7:46
The new trend in web development after all these years (20+) of patching, pollyfilling, and thousands of frameworks is using no framework, subclassing HTMLElement (Web Components), and using Fetch (http requests) LMAO😂
If only...
next, we'll be using style attribute on every html element.
@Wuxxy you do?
@@marklesterbolotaolo8259 Tailwind hype is kinda that tho. Lol, 2 page long class names.
If you have a local Apache server, you can skip the dedicated (express) server and just add this .htaccess next to your index.html:
Options -MultiViews
RewriteEngine On
RewriteRule ^ index.html [QSA,L]
Experimenting, just the last line seems necessary.
Saving for later!
Awesome tutorial, would be great to have same with explanation how to use server-side rendering of HTML Templates or load html file as a content for each views ;)