Build a Single Page Application with JavaScript (No Frameworks)

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

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.

*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.

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

*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.

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.

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!

❗PART 2 OF THIS VIDEO ❗ https://youtu.be/OstALBk-jTc 🏷 THE ULTIMATE JAVASCRIPT DOM CRASH COURSE 👇 www.udemy.com/course/the-ultimate-javascript-dom-c…

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

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!

If you enjoyed remember to Like and Subscribe for more web development projects and tutorials! 🙂

I don’t usually leave comments, but this is exactly what I was looking for. Very easy to follow, thank you!

That was so much value in 30 minutes for someone that understands basic js but not it's practical use. Thanks a lot

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.

"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.

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.

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 watched this video back in 2020 and understood nothing, watched it now again and have had like 20 WOW-moments haha XD! AMAZING WORK!

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 work with node js since 2016. One of the best tutorial I've ever seen.