What is the difference between a back end and a front end programming language?


hi this is Kevin Chisholm and in this
video I’ll be demonstrating on a very high level the difference between a
back-end and a front-end web programming language. In this folder I have a very
simple PHP file which I’ll drag to my text editor. Now there are a number of
back-end programming languages such as C-sharp or Java. PHP happens to be a very popular one that’s fairly easy to get started with. We won’t worry about the
details too much but the main thing I want to point out is: in THIS file,
there’s basically a lot of markup. It’s HTML and so this HTML just gets
delivered over the wire. The server opens the file and just starts reading it. It’s
going to send everything exactly as you see it here. But when it gets down to
THIS line, it sees this and sees this less than question mark PHP and it says:
“oh that’s PHP, so what’s going to come after this is programmable code.” And it’s
waiting to see this question mark greater than symbol. So when it sees that
it says everything BETWEEN these those two tags (meaning this text that I’ve
selected) is PHP code it’s code that I can EXECUTE it doesn’t just deliver this
code it EXECUTES it. Let’s see exactly what this means.
So just keep in mind this less than question mark PHP and question mark
greater than PHP tag. Let’s look at the web page and here we have: “This message was scripted on the server” Great but if we look at the page source, we see
exactly what comes down over the wire. This text that you see here is EXACTLY
what was sent from the server to the browser. So here we see: “This message was scripted on the server” Great but we don’t see the less than question mark
PHP or a question mark greater than PHP symbols! As we saw here why is that?
Because when the server sees those it says: “Hey I’m not going to output these
I’m going to execute ANY code that’s INSIDE of them” …so it creates a variable
called “message”, we set it equal to a string called “This message with scripture
on the server”, and we output this. The message is not very complicated. What we get is the output of the code which is the text: “This message was scripted on
the server.” But we don’t get the PHP opening closing tags because those tags
just indicate: “Hey this is PHP code, and we got some stuff to execute” It execute the
code and that’s it. Now we can demonstrate that maybe even a little bit
further if I open this file. I’m going to paste in some new PHP code now. There’s nothing fancy going on here but here we’re actually doing a little more
programming. We’re saying: “Hey, the variable ‘message’ equals the string:’This
message was scripted on the server'” Then we say: “If there’s a get.message (which
I’ll show you in a second), then message which is already created. Here we
override it and say it equals whatever was sent in the GET and then we output
it. So what does that mean Well it means that here nothing special happens but if
we say “message” equals “hello”, we see the word “hello” and then if we look at the
page source we see just the word “hello” came over the wire. Once again, no open
closing PHP tags just the word “hello”…and why is that? That’s because this code
(without getting to down in the details) this code says: “Hey if there’s a “message” key in the query string ,then the variable “message” equals whatever the
value of that key is. So basically I’m overriding the code that we put in the
page so I can say message equals “Kevin.” I can change it to whatever I like but the
most important thing to keep in mind is whatever is happening here is actually
coming over the wire. We’re sending a message to the server, the server gets
the message, does a little programming and echoes that message. And then, of
course we can simply get rid of the query string and we get the default
which is: “This message was scripted on the server.” So the most important thing
to keep in mind in this case is that a back-end programming language EXECUTES on the server, and that allows us to do things in the web page before the web
page is actually delivered to the client. So this code executes on a server. That
server can be a 10,000 miles away, it could be in some server room in South
America, the North Pole, or in Australia; it doesn’t matter. But this code actually
RUNS on the server and then it completes. And, it RETURNS the HTML to the web page and, we get the actual markup that we asked for. So let’s talk about a
front-end programming language. That’s really going to be JavaScript because
in pretty much any modern browser that you use, the front-end programming
language is JavaScript. So let’s look at that index.php file again. You’ll notice
at the bottom of the highlight, a script block. I don’t want to get too much into
the implementation details of JavaScript but the main thing is that this
is a script block that although it’s in the markup that comes down, it doesn’t
execute UNTIL the webpage loads…and all I’ve done is create a variable called
“clientMessage.” I’ve set the value of that variable to be the string: “This
message was scripted on the client”, and then I append that message into the DOM. Now when we look in the web page we’ll see that message: “This client was
scripted on the client” but that’s not in the markup. In fact, if we just copy this and I look in the page source and search
for that header I see client message but I don’t see that actual message: This
message was scripted on the client.” In fact, I see a comment that goes where it
should go that says: “JavaScript message will go here.” Although if we look down
here we do see the JavaScript code and you do see the message but this is where
the message is being created programmatically. It’s not the actual
content. So keep in mind this heading client message right here is this
but if we look for this message in the source code we don’t see it and that’s
because this message does not come down over the wire it’s not part of the
mark-up. It’s created PROGRAMMATICALLY.
when the webpage loads. There’s another way that we can demonstrate this. I’m
going to open this snippets file and I’ll copy this code and back at the web
page I’m going to open the JavaScript console again, I don’t want to go into
details too much but it’s just a JavaScript console; it’s place where I
can execute javascript in the browser in real time. So I’m going to paste this
code in, run it and look what happened; the message changed, it said
“hello from Kevin.” In fact I can say: “goodbye from Kevin” I can basically say anything I want. So what’s happening here is: I’m executing JavaScript code on the client
in real time. This is front-end programming. In most cases when
you load a web page, this kind of stuff happens right away and the page loads.
The difference is we can’t do that with PHP. This PHP code will NOT execute on
the client. if I paste that into my javascript console I’m going to get an
error. it just has no idea what that means; it’s PHP code. PHP executes on the SERVER, but JavaScript executes in the CLIENT. So if I want to paste any kind of JavaScript code I want it will work. It
doesn’t matter what I do. If I execute it in the JavaScript console it will work. So an important thing to keep in mind is that with the front-end programming
language, what happens is in this case it’s just JavaScript .JavaScript will
execute in the browser. The browser knows what to do with it. So in our case the client message area, when you look in the page source, it did not have any content here but then once the page loads we ran some code that put
this message here. This happened on the CLIENT. So the biggest difference between a back-end and front-end web programming language is that with a
back-end language, the code EXECUTES on the server BEFORE the webpage is delivered to the browser. With a front-end programming language,
this code executes once the page is loaded into the browser and then you can
still arbitrarily run JavaScript code for as long as the page is open in the
browser.

13 Comments

Add a Comment

Your email address will not be published. Required fields are marked *