Thursday, May 26, 2022

Client-side vs Server-side, Front-end vs Back-end? Beginner Explanation of JavaScript on the Web

Hey friends i'm scott hanselman and i was talking to my nephew who is going through computer science 101 and he was confused because he kept hearing client side and server side and in the cloud and on your local machine and it was getting confusing because they were teaching him javascript via the node programming environment and .

He said is where does javascript run i ran the thing i wrote some code and i don't know where that code is running this has been a confusing part of the web since the beginning of the web when we were writing before javascript existed we wrote things like vbscript and it would exist on both the client and the server and that was confusing .

So let's talk about it let me split my screen here i'm running windows 11. i'm in ubuntu in this tab i'm in windows in that tab doesn't matter which one makes you happy doesn't matter i'm going to go and make a my app folder and i'm going to go in there and you can see that it's empty there's nothing going on here and i'm .

Going to run visual studio code with code dot i could run notepad i could run you know something else doesn't matter and then i'm going to say new file i'm going to say console.log hello this is my app and then we're going to save this and we'll call it myapp.js so we'll use javascript you see .

It just lit up there and visual studio decided that that is been auto detected as javascript i saved it as myapp.js we can come back here we can look at our directory again we see we have a little program called my app and i can look at it and it says console.log there we go and i'm going to say .

Actually you see how it's when i do that i end up getting my prompt right there again that's because i didn't press enter and then when i was outputting that it didn't press enter on my prompt for me so that's interesting all right i'm going to type node my app and it says hello this is my app .

Is this on the client side of the server side well there is no client or server here there's only my computer my computer is arguably the client for a non-existent server we're just running this app locally it runs and it goes away we ran it it went it's back it's gone okay that is javascript and it's running as a command line .

Application this is the command line or the prompt in my terminal here and that application ran and then it went away so it ran within the context of node node knows how to speak javascript it fires up this javascript engine and it does the right thing when you run an application from the command line that doesn't have any .

Connectivity to the outside world that is entirely self-contained and running on my computer however let's go into another folder let's go to this folder here called client versus server and in this folder i have a server.js let's take a look i'm going to run visual studio code .

Again bring this up here and in here i have a server.js it doesn't matter what it's called but i named it server.js and it's not called myapp.js and in here we say i'm going to use http the hypertext transfer protocol we're going to write a .

Little server a little server that a client's going to talk to so we make our server and this is a little cheesy but what we're going to do is we're going to say if the url if the address has a backslash it's only a backslash or so in this case a forward slash we're going to output some .

Html we're going to say this is a homepage and then if you hit slash student we're going to say this is the student page and if you hit slash admin we'll say this is the admin page and we're going to listen on port 5000 ports are like windows into your house .

The computer is my house the port is a window so we're going to be peeking our head out of one window the one we're going to listen on is 5000 and it's going to go ahead and start up so what i'll do is i'll switch back over here and i'm going to say node server.js just like i said node my app and i ran the other one i'm going to run .

This one and here it says web server at port 5000 is running now look at this remember before when we said console.log we said you know hello this is my app here i'm also saying console.log and i'm outputting that we're running on this port but then we have this other thing called server that's doing other work .

All this other code we didn't see any any output there did we we only saw this so that is running on my local machine and my app is running and it's listening it's listening on port 5000. i'm going to put myself in the corner here we're going to bring up our browser we'll put our browser over on the right .

Okay what i'll do actually is i'm going to put myself in the center here okay so here's our server this is our server on this side and this is our client over on this side they happen to be on the same computer but pretend for a second that this is .

Over here this server that could be in azure or that could be an amazon that could be some other computer somewhere else and over here this is you you're on your phone you're on your computer you're doing something and i'm going to type in localhost 5000 in the in the url here and it says this is the home page .

Cool let's hit slash student this is the student page so we just on our client on our client up here our web server we hit local host which is my my local computer the machine i'm on here looking in that window that port port .

5000 slash student and we saw some html we saw some html i can actually move myself down over here and i'm going to right click and say view source this is the student we can actually see the html right there and we can see how it presented itself so here's the source code for the web application but this isn't .

Javascript this isn't javascript at all there's no source code there it's just how that was presented but when we look over here in visual studio code okay on the student page we see that right there look it says if the url is slash student we're going to output this is html and .

Then we're going to we're going to write out to the response we're going to write out to the response this is the student page if i right click over here and i say view source this text right here okay this text right here right here .

On the server was written out to the response and it got sent over to the client right and our clients over here now that's how that's that's how that string got there now where things get confusing is well what code runs on the client what code runs on the server .

Let's take a look at this this is a little complicated but we're going to go through it together okay i've added three windows now okay so first we've got our little console app that's kind of telling us what's happening it's a console running on the server then we've got our source code up there .

Inside of visual studio code and then we've got our browser our client over here on on the right and what we're going to do is we're going to hit the home page here i'm going to hit enter so watch what happens here when i press enter here look at that i'm going to hit refresh a .

Bunch of times i'm just going to push the refresh button in the server in the server in the server what's that that line of code is this line of code okay so what we're doing is we're outputting this is the home page and outputting in the server .

At the exact same time so we sent information to our window here and we sent information to our client over here so this way the programmers can like look in the logs and see what's going on and they can debug things and they can say i don't know but mom and dad don't see that right the .

Clients don't see that they only see what happens on the client side so as a person browsing the web i just see this i'm just doing my thing but on the back end the back end is the server side you hear about the front end the client and the back end the server on the back end .

There's things happening we're writing out to the response and we are saying for logging purposes hey we're on the server now here's where things get squishy he said yeah but i need to write javascript on the client side i need to do .

Client-side javascript but i just wrote this whole thing that is server-side javascript so what i've done here is something you shouldn't do this is not good but i'm just showing you this for educational purposes notice this line 10 right here okay we've got this is the home page and i've .

Got some inline script so i'm going to send some javascript along with my html over to the browser over to the browser and that script is going to run now we've seen console.log before we saw console.log just a minute ago right console.log saying hey i'm on the server .

But this console.log is going to say hey i'm in the browser they're both javascript they're both javascript but browsers come understanding javascript out of the box so what we're going to do is we're going to press f12 the f12 button okay we're going to press f12 and what i'm going to do .

Is go like this and go like that and then we're gonna hit refresh so you're gonna watch on the server here and then you're gonna see in the browser right here dude there you go okay .

Hit refresh so each time i'm hitting refresh the server listens on that port 5000 runs its code it runs this console.log in the server it sends that response over to the client sends that response over to the client the client then receives the html and says this is the home page inside of that html is also .

We saw some embedded javascript we sent some javascript along for the ride and that said in the console the console that we got from our dev tools or our f12 tools said in the browser in the browser so in this case we have javascript on the server and .

Javascript on the client but if we remember that the person on the front end the user non-technical parent they're experiencing this they probably won't ever even see this console.log here that can be debugging for you the developer but that's an interesting .

Way to think about the client and the server okay if you like beginner videos like this let me know in the chat what you think we should talk about in the future i do realize that for some of you this is very 101 beginner level content but this was a question that my nephew had and now i wanted to put it out there on .

The internet because apparently they didn't teach it in school and i would encourage you to check out my other videos on computer stuff they didn't teach you in school thanks a lot and subscribe please


Most Popular