Build a Single Page Application with JavaScript (No Frameworks)

[@alexandre3932]

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

[@mauriciochavez8528]

in your application always use vanilla js or jquery?

[@alexandre3932]

@@mauriciochavez8528 I use Vanilla JS for everything. I don"t see the utility to use Jquery

[@justinjenecke8153]

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.

[@m3awna]

@@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)

[@m3awna]

@Solve Everything that's not his intention. the idea is to show us how frameworks work under the hood, keep it up man

[@ryugavegeta5734]

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.

[@melchizedek79]

True!

[@psychonighty3076]

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

[@dcode-software]

I appreciate it. Thank you! All the best with your career 👍

[@carldrogo9492]

🤦‍♂️

[@seth111yta1]

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

[@fastlearner9993]

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 .

[@MingJianYap]

Or just jump to the github URL to check the code

[@dcode-software]

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

[@TomasMisura]

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.

[@dcode-software]

Appreciate that Tomáš, thanks!

[@Ssomberlain]

Im at min 10 and this looks like a fullstack app.

[@benzflynn]

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.

[@benzflynn]

​@@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 kzbin.info/www/bejne/fmrJmGp9e8aafJY

[@benzemamumba]

It's moronic and counter-productive to go without a framework.

[@dcode-software]

❗PART 2 OF THIS VIDEO ❗ kzbin.info/www/bejne/haTXcn94oJKdisU 🏷 *THE ULTIMATE JAVASCRIPT DOM CRASH COURSE* 👇 www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1

[@GamesForDays2]

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!

[@jplaza7210]

My question is how does he know to use all of this code and where does he research to figure it out?

[@kowaihana]

​@@jplaza7210google

[@kowaihana]

​@@jplaza7210also, looking into the source code of these frameworks can give a good idea as well, I bet.

[@dcode-software]

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

[@verdipratama]

😊👌

[@tabgimbarr]

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

[@tabgimbarr]

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?

[@tabgimbarr]

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

[@tabgimbarr]

its very interesting for me, so please continue this project, dont give up! It's going to be cool and useful for other people!

[@CalifornianViking]

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!

[@dcode-software]

I'm glad you liked this video. Thank you so much for your donation!! 😁

[@pure4lyfe5]

When you say dumb JavaScript down, are you talking in terms of abstraction or performance?

[@unknownguywholovespizza]

​@@pure4lyfe5simplicity

[@kowaihana]

​@@pure4lyfe5I adore the simplicity of JS without any frameworks.

[@gregoryam]

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.

[@GamerX-qn7ou]

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!!!!!!

[@netty7263]

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

[@javierrazonacosta6759]

It's True ahahahaha

[@techadventures6645]

same here

[@wavesky_pv]

same, probably chrome issue with 5060 port, as is it seem to be a dangerous port or something, not sure why tho

[@MrSoker123]

Pretty much the same here. Don't know why either.

[@DominicNweze]

@@wavesky_pv used for cyber attacks maybe that's why

[@morgan3692]

I work with node js since 2016. One of the best tutorial I've ever seen.

[@finite-void]

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

[@jplaza7210]

My question is how does he know to use all of this code and where does he research to figure it out?

[@swrv_sounds]

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!

[@ahmedatya6226]

How i can handle post request here ?

[@carldrogo9492]

I keep telling people that you should NOT use frameworks without understanding plain JavaScript.

[@fabian3411]

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

[@dcode-software]

Who likes the new video intro? 👀

[@rangabharath4253]

Awesome. Nice logo.

[@jogoeire]

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

[@filippozallocco4946]

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!

[@sirnawaz]

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.

[@jimmymedia2049]

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 :)

[@carldrogo9492]

Don't do frameworks without understanding plain JavaScript.

[@andy.1331]

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

[@AVC1602]

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!

[@rs832]

​@@AVC1602 they would each have their own file, so instead of calling string literal HTML, you would call the filepath where the template resides.

[@TomHermans]

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.

[@dcode-software]

You're welcome Tom! Thanks for subscribing

[@kosmotion2081]

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.

[@saraharslan1435]

still dunno what to do

[@TochiEmenine]

Thank you !!

[@LukeAritie]

by far the best expanation tutorial ive seen, strait to the point but doesn't skip any reason

[@leengubane869]

This is the best tutorial on SPA ive ever come across on my entire WebDev journey. Thank you so much.

[@aelfar7533]

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!

[@robwatson826]

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

[@huyphamuc6372]

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?

[@leowong888]

dcode. Sir. Your tutorial is very simple and clear when someone no experience in SPA. Thank you. 😊

[@dcode-software]

You are very welcome

[@sandeepsandy214]

Awesome Video through this i got to know how react, angular, vue are working

[@ervinpm]

This video is gold, deserves more views!

[@chubbyBunny94]

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

[@chubbyBunny94]

(I changed my mind. React was fun this is kinda long)

[@कार्तिकेय-ढ8म]

@@chubbyBunny94 bruh

[@chubbyBunny94]

@@कार्तिकेय-ढ8म Lol - I am back to this only cause it'll help me get more comfy with React

[@melchizedek79]

@@chubbyBunny94 You're very funny dude

[@carldrogo9492]

Learn plain JavaScript before using Frameworks! 🤡

[@mathis-meth4229]

this is one of the best channels for understanding the web. Love your work brother :)

[@ka1pana]

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!

[@carldrogo9492]

You should NOT use frameworks without understanding the basics and fundamentals of plain JavaScript. 🤦‍♂️

[@EvertonCanez]

Congratulations, Dom! Your content is one of the bests. I can't let to watch every video that you post. Thank you very much!

[@핸들은또뭐야]

This tutorial deal with every aspects of what we can do with javascript. short but mighty tutorial, Thank you for sharing this!

[@vinodyevatikar1594]

THE BEST VIDEO EXPLANATION ABOUT SINGLE PAGE APPLICATION. thank you so much for sharing 🙌

[@Meleeman011]

well done dude. i always knew it was possible, and i wanted to build something that is simpler and without stupid frameworks lol

[@carldrogo9492]

Frameworks aren't stupid. 🤦‍♂️

[@asifzaffar343]

To the point, very informative - I pray channel grow more and more. Waiting for the next video in continuation to this tutorial.

[@kennyakins3536]

Amazing 😀. I’m building an open source single page server side rendering framework using this tutorial.

[@carldrogo9492]

Oh FFS, not another Framework. 🤦‍♂️

[@kennyakins3536]

@@carldrogo9492 🤣 it’s mostly for practice

[@WitherRSN]

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.

[@dcode-software]

Awesome to here!! I hope it all goes well mate 😁

[@samratmukherjee7131]

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) } }) })

[@nameoftruth]

Thank you very much for your great javascript tutorials DCODE... Great clean knowledge !

[@VictorSamuelMosqueraArtamonov]

Amazing tutorial, very informative, very well prepared.

[@dcode-software]

You're welcome! And thanks

[@anandbaraik5010]

Man you have pretty good tutorial on vanilla js. Learning a lot from you. Subscribed ✌️

[@joeseabreeze]

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😂

[@MM-vr8rj]

If only...

[@marklesterbolotaolo8259]

next, we'll be using style attribute on every html element.

[@adanmez8783]

@Wuxxy you do?

[@BarisPalabiyik]

@@marklesterbolotaolo8259 Tailwind hype is kinda that tho. Lol, 2 page long class names.

[@Uncaught_in_promise]

This is an eye-opener how JavaScript works under the hood

[@p.polunin]

How concise and simple! Thank you very much!

[@ShadowFaxNG]

Thanks dcode. With love from Nigeria.

[@dcode-software]

No worries!

[@ericprudhommeaux9163]

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.

[@ze_chooch]

lol my name is Dom. I thought I was having a schizophrenic episode when I saw "Welcome back, Dom"

[@aashirimran2471]

Really enjoyed the video! faced a few hiccups with it but learned much more! Thankyou😀

[@nowiK45]

awesome! i've been looking for this kinda lecture! thanks a lot ! mr. vanilla!

[@easywebscriptytc]

Awesome tutorial. You are a such a great javascript developer 😍

[@marcusbrsp]

Good tutorial, now we basically only need a template engine so that we can do useful stuff in the HTML.

[@carldrogo9492]

Just use a Frontend Framework FFS. 🤦‍♂️

[@tenktorypisze]

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.

[@monikamalgorzata]

Thank you it was the same on my code.

[@craigwoollett2523]

Dom you are an Aussie Legend!

[@lokinewborn3696]

HUGE THANKS, this really helps my javascript skills,

[@Roman-fb9mq]

I have been really looking forward to the next video

[@swapnilmane1599]

Which font style have you used in vs code...thats so Wonderful...😍

[@jasonfletcher3512]

Simple and clear terminology... very helpful!

[@kevindougher6656]

Me out here still struggling😂

[@hatim854]

Thank you very much! this was very helpful to me and to a lot of people out there

[@LonelyRiderStonerBand]

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 ;)

[@angladephil]

Very well done!, thank you. And I like your position to not use frameworks,since, in my opinion, they add complexity, heavy dependencies etc... for a result that can be reached in pure JS with a relatively simple code.

[@dcode-software]

Thanks! I wouldn't say it's my "position", it just depends completely on the app you're building and what you want to get out of it

[@Mandarin_Play25]

Thanks it will helpful for me as a beginner in JS👍🏻

[@TotallyDC]

Now instead of using port 5060 you may want to use 5080 or other port since 5060 is blocked due to vulnerabilieties

[@roelvanendhoven3764]

How so, the vulnerability is in the app that listens on the port, not the port itself?

[@ThiagoVieira91]

Thank you! Could not run on port 5060, but did not know why. Changed to 8080 instead and now it ruins fine.

[@wiktoriakorneusz4373]

omg thank you!

[@learnprogramming9352]

@@wiktoriakorneusz4373 run 80 port instead

[@c0nsumption]

Saved this man’s whole video

[@Ssomberlain]

NPM and Express destroyed my innocence.

[@mathematicalninja2756]

This clears a lot of javascript for me

[@dayumnson9769]

this is actually mind blowing, thanks How did you figure out how the frameworks work, in first place?

[@dcode-software]

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 😄

[@melchizedek79]

@@dcode-software You're overdosed with vanilla JS

[@kadirramazn]

Thats what i've been thinking of when studying react. Thanks :))

[@user-oh7to8xw3j]

Awesome tutorial! Thanks

[@olegfare4625]

thank you for the clear explanation!

[@RyanFromUltrasound]

You're the man! This is just what I have been looking for. Excellent tutorial.

[@dcode-software]

Appreciate it mate

[@iglesiasleonardo1742]

Great video. Just remember that all those new instances generated on click must be deleted so it can collected by the garbage collector

[@RobertPaulsim]

Hey dom! Your tutorial was key for me to revamp my things and start fresh 2020 with a new template.

[@TheMrHetch]

nice video! BTW what's this theme you're using in VSCode?

[@oxglowinc.1614]

I love your work. However, change the title from .... ... with Javascript to => "with NodeJs"

[@martinburmester1664]

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?

[@alexandrelabbe9510]

did you find a resource for this

[@uguremirmustafaoglu40]

great stuff, loving it

[@AysProPlugins]

Very clearly described! Thank you for your work.

[@사랑이하고시퍼요]

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?

[@andylib]

Thank you, this is so elegant

[@yaromiez6933]

If someone uses eslint, standard style and so on, and encounters errors with the "history" and "location" objects, you must use "window.history" and "window.location"

[@a2311585]

Sooooo helpful to learn spa!!! thanks

[@remongrabu]

Great little project to get the noggin joggin! Well done mate

[@dcode-software]

Thank you! Cheers!

[@pawegrabowski4512]

Oooh... It's awesome. That is exactly what i looking for. Very thank you for your content! +1

[@salvatoremilazzo]

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 ?

[@LisaMiner2010]

This was super helpful! Thank you a bunch!

[@jasonjulien8348]

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

[@ArisAlamanos]

I like your theme in VSCode. Which one is it?

[@newybocktor]

Awesome, incredible explanation, valued content, thank you for sharing.

[@dcode-software]

You're welcome!

[@carlonnrivers]

What's your VSCode theme? It's amazing! (and green is my favourite colour)

[@yeomkyeokyeo]

Thank you for your kind explanation!!! perfect!

[@Uncaught_in_promise]

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"]}

[@rohithvishaal]

Thanks for this. I was wondering how to fix it

[@samratmukherjee7131]

Thanks man

[@hectorkaizenf.v.7224]

Fantastic!, great tutorial. THANKS! But in firefox send "This address is restricted" message... in chrome navigator returns "This site can’t be reached"... but in postman works! ... Why? and how to fix it?

[@brenoverissimo3846]

Saving for later!

[@kodiubah99]

Respect bro🙌🏼

[@mahdisalmanizadegan5595]

Amazing tutorial bro, what is your vs code theme?!

[@dcode-software]

You're welcome! The theme is called "dcode" - you should be able to find it in the VS Code marketplace