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)
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.
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
**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.
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 czcams.com/video/H9fg7GFagF4/video.html
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.
*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 .
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!
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!
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'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
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.
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?
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!
in case other people have issues...I was only able to see the app running on port 3000 not 5060 (not sure why) , so just change 5060 to 3000 in server.js
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
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!
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 ;)
"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.
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.
Hi, great video! I also think that for small - medium businesses it's probably better to use plain js and some sort of libraries only for reducing redoundant code. What do you think of a scenario with a client self routing spa like this that asynchrounosly rely on expess for getting every view ?
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!
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.
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 :)
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
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
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!
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 👍
🤦♂️
**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.
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 czcams.com/video/H9fg7GFagF4/video.html
It's moronic and counter-productive to go without a framework.
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.
*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
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!
This is the best tutorial on SPA ive ever come across on my entire WebDev journey. Thank you so much.
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?
by far the best expanation tutorial ive seen, strait to the point but doesn't skip any reason
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
I work with node js since 2016. One of the best tutorial I've ever seen.
Congratulations, Dom! Your content is one of the bests. I can't let to watch every video that you post. Thank you very much!
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?
This tutorial deal with every aspects of what we can do with javascript. short but mighty tutorial, Thank you for sharing this!
To the point, very informative - I pray channel grow more and more.
Waiting for the next video in continuation to this tutorial.
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
I don’t usually leave comments, but this is exactly what I was looking for. Very easy to follow, thank you!
Awesome Video through this i got to know how react, angular, vue are working
Really enjoyed the video! faced a few hiccups with it but learned much more! Thankyou😀
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
awesome! i've been looking for this kinda lecture! thanks a lot ! mr. vanilla!
this is one of the best channels for understanding the web. Love your work brother :)
THE BEST VIDEO EXPLANATION ABOUT SINGLE PAGE APPLICATION. thank you so much for sharing 🙌
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?
Man you have pretty good tutorial on vanilla js. Learning a lot from you. Subscribed ✌️
How concise and simple! Thank you very much!
Thank you very much for your great javascript tutorials DCODE...
Great clean knowledge !
Thats what i've been thinking of when studying react. Thanks :))
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. 🤦♂️
Thank you very much! this was very helpful to me and to a lot of people out there
Very clearly described!
Thank you for your work.
This was super helpful! Thank you a bunch!
HUGE THANKS, this really helps my javascript skills,
Thank you, this is so elegant
in case other people have issues...I was only able to see the app running on port 3000 not 5060 (not sure why) , so just change 5060 to 3000 in server.js
It's True ahahahaha
same here
same, probably chrome issue with 5060 port, as is it seem to be a dangerous port or something, not sure why tho
Pretty much the same here. Don't know why either.
@@wavesky_pv used for cyber attacks maybe that's why
This video is gold, deserves more views!
I have been really looking forward to the next video
Oooh... It's awesome. That is exactly what i looking for. Very thank you for your content! +1
Simple and clear terminology... very helpful!
Me out here still struggling😂
Amazing tutorial, very informative, very well prepared.
You're welcome! And thanks
Thank you for your kind explanation!!! perfect!
Awesome tutorial. You are a such a great javascript developer 😍
Who likes the new video intro? 👀
Awesome. Nice logo.
great stuff, loving it
thank you for the clear explanation!
Great little project to get the noggin joggin! Well done mate
Thank you! Cheers!
Thanks it will helpful for me as a beginner in JS👍🏻
Awesome tutorial! Thanks
dcode. Sir. Your tutorial is very simple and clear when someone no experience in SPA. Thank you. 😊
You are very welcome
Great tutorial, thanks a lot for your job!!
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!
Sooooo helpful to learn spa!!! thanks
This clears a lot of javascript for me
Thank you! This was very well presented +sub
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.
Dom you are an Aussie Legend!
Thanks a lot man, you the best
Thanks dcode. With love from Nigeria.
No worries!
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!
Awesome, incredible explanation, valued content, thank you for sharing.
You're welcome!
Awesome man, TYSM
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 ;)
"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.
Cool, thanks for sharing.
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
Thanks that was excellent.
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 😁
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. 🤦♂️
Awesome..... Be Blessed
Hi, great video! I also think that for small - medium businesses it's probably better to use plain js and some sort of libraries only for reducing redoundant code. What do you think of a scenario with a client self routing spa like this that asynchrounosly rely on expess for getting every view ?
Nice Viedeo. Are you planning to include the submenu on the sidebar. It should be great. Really appreciate your hard work. Thanks
Awesome video and channel, hope it grows :) subscribed 👌
Thank you!
Yeah, it works!!! Thank's...
Respect bro🙌🏼
Saving for later!
Awesome as always. Thank u so much bro
No problem 👍
Thanks a lot!
Excellent presentation
Thanks for the video it's cool
Thank You so much!!!!!
Can you also make an updated video as well?
Thank you so much!
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.
Very helpful lesson, Thanks !!!
You are very welcome
Nice Job!
Thank You 👌
Looking forward to the next video :D
It's up now!
You're the man! This is just what I have been looking for. Excellent tutorial.
Appreciate it mate
This is an eye-opener how JavaScript works 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 !!
Great Great Great 👏👏👏
excelent!!!
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.
Oh shoot this is amazing!
Nice Explanation . Do you have an example of how data is flow to view , and two way binding works with Vanilla JS
Hey dom! Your tutorial was key for me to revamp my things and start fresh 2020 with a new template.
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
@@user-mc8wg6qq3b 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! 🤡
It;s our man Dom!
i love ur many videos.. waiting for the next.. 'm from Pakistan..
Thanks mate!