Check out a free preview of the full The Hard Parts of Servers & Node.js course
The "Node Overview" Lesson is part of the full, The Hard Parts of Servers & Node.js course featured in this preview video. Here's what you'd learn in this lesson:
Will diagrams client-server interactions in a web application to highlight the area where Node operates.
Transcript from the "Node Overview" Lesson
[00:00:00]
>> Will Sentance: Let's start off with seeing what it actually is to open a web application. What does that even mean? What's that even look like? Well, let's get started. Let's suppose we have in our audience, three of our audience members. Let's suppose we have Michael, and Michael is going to open his Mac and he opens his Mac, and it's going to load up at twitter.com slash Michael.
[00:00:34]
There we go. Okay Michael's tweets, open it in the web browser, here's our little Chrome web browser. Okay, then we're going to have I don't know, we have Rich. Excellent Rich in our audience as well we'll have Rich. I'm opening up Richard's Linux Richard runs a Linux he opens up Linux and Linux.
[00:00:55]
He opens up Linux and. He also loads up Twitter, but he wants to go to the tweets about, about Node. About Node.js, there is is. And then, let's have, we'll have, Zep. And let's see, Zep opens his phone, and Zep's phone opens up, there it is. And he also opens up the web browser, and he opens up twitter.com, here, just the home page.
[00:01:26]
These are web applications. They need code to run, that's the three languages we're gonna have run at this point. To open Twitter, and they need data to load up when that code runs. Zep what is the three, oddly we have to write three languages to load web apps.
[00:01:47]
What's the three languages we need Zep?
>> Speaker 2: HTML
>> Will Sentance: HTML
>> Speaker 2: CSS
>> Will Sentance: CSS
>> Speaker 2: And JavaScript
>> Will Sentance: And JavaScript. Excellent, well done, well done to Zep. HTML that's going to put stuff on the page is going to sort of insert images or text on the page, CSS that's going to move things on page called elements on page.
[00:02:10]
We're going to have CSS it's going to decorate and prettify them. Prettify and JavaScript, which is a pretty sophisticated heavy lifting language that's gonna handle all the logic and interaction. So when a user clicks stuff we want to send messages to get. I will give it away send messages to get further data.
[00:02:30]
That's the JavaScript code and action. But we also need some data what sort of data Michael are we gonna load up on this Mac?
>> Speaker 3: Data from the server.
>> Will Sentance: Yeah, but specifically for Twitter, we're probably gonna have some tweets.
>> Speaker 3: Tweets.
>> Will Sentance: Yeah, we're gonna have some tweets, we're gonna have some images, maybe some videos.
[00:02:49]
This is our data, this here is our code that we need to load up. But hold on, where's all this data and code coming from. So we're going to start with the absolute fundamentals here. We're diving into the absolute fundamentals but from this we're going to build up to a grand vision of building out Node applications.
[00:03:13]
And we saw gaps in fundamentals. Where does this code and data come from Zep?
>> Speaker 2: A server.
>> Will Sentance: A server.
>> Speaker 2: Another computer.
>> Will Sentance: He gave the answer, a server which is nothing but another computer. Here it is another computer connected to the internet always on, always connected and ready to receive a message sent out by Michael's Mac.
[00:03:42]
Sent out by Richard's Linux. Sent out by Zep's phone. Little message. Little message. Little message each time saying hey Twitter's computer, this is Twitter's at their headquarters Twitter's HQ, a little message saying hey Twitter, I need Michael's tweets and the HTML, CSS and JavaScript to load them up.
[00:04:07]
I need the Node.js tweets, that's what Rich needs. And Zep he needs the homepage with all the tweets on it. Sends a message to Twitter's headquarters where there is a computer connected to the internet, nothing more than that. But one that's able to received messages saying hey I need, specifically Rich's tweets, Michael's tweets, Michael's tweets.
[00:04:31]
And look at that message, and decide what do I want to send back. Do I want to send back Node.js tweets, do I want to send back Michael's tweets, do I want to send back homepage tweets? HTML, CSS, JavaScript, what do I wanna send back? We need to determine that on this computer.
[00:04:49]
What do I do Michael in order to, you know in most intuitive most kind of grounded sense Michael. What do I do to on that computer to tell it as a developer to look at the message and send something back. What do I write?
>> Speaker 3: Code.
>> Will Sentance: Code, good job Michael exactly.
[00:05:08]
I write code. I write code on this computer to introspect that means look into this message and see what it says is asking for and decide what's to send back. But folk here's the problem. Where's this message arrive on my computer?. It arrives people on well effectively on a network card.
[00:05:32]
It arrives in my network. This is going to be interesting. What languages might I want to write to control that? Well, well first, what languages can I write to command to make instructions to this computer. Rich, what other languages can I write, in general?
>> Speaker 2: PHP
>> Will Sentance: PHP, sure, PHP exactly.
[00:05:59]
Java. Shout out some more.
>> Speaker 2: Ruby
>> Will Sentance: Ruby. Every person shouted Ruby, remarkable.
>> Speaker 2: C
>> Will Sentance: C C++ what would be what we dream we could write given we know JavaScript really well for the client.
>> Speaker 2: JavaScript.
>> Will Sentance: JavaScript.
>> Speaker 2: [LAUGH]
>> Will Sentance: And actually by the way, let me just hint there if this computer is known as a server, it's going to receive messages and serve back like a server in a restaurant serve up data and code to send back to these folk here.
[00:06:32]
These are known as our clients. Clients, just like in an advertising agency, you, as a client, you're asking the advertising agency, you're the advertising agency clients, you're asking them, hey, do you have the latest assets, the latest videos, the latest images you worked on, you're demanding for them.
[00:06:52]
Well, that's what we're doing here, we're demanding of the server to serve them back. Okay, our dream would be that we could use our computer's internal networking ability, it's ability to receive a message. Because that message Is arriving here on the network. That we could somehow use the computer's internal networking ability to look at the inbound message intercept it and decide what to send back.
[00:07:22]
Actually folk, there's a whole bunch of internal features of our computer we want to use. Let's just remind ourselves a second there, servers are the behind the scenes of all web applications, they're where we store permanently our coding data, they're always on and ready to receive messages over the internet from users requesting, they call it requesting, asking for that code and data.
[00:07:49]
How's the computer to know what to send back? We write, Michael?
>> Speaker 3: Code.
>> Will Sentance: Code. What language can we use to write its instructions? Well, that's an interesting question. That's an interesting question. There's a whole bunch of internal features we need to use on our computer. If we're gonna send back HTML, JavaScript and CSS, those are typically gonna be stored as files on this computer,'s maybe hard drive.
[00:08:18]
So I guess I also will need to write code to get those files, the HTML, .HTML file, these are files that get sent of code. Pre-written code that we're gonna send back so Michael can load up his tweets. We're going to have to I guess access file storage as well.
[00:08:36]
There's actually a whole bunch of internal features we might want to access. Here's our dream people. That we would be able to use the JavaScript programming language to control these internal features. Not only because we know it, we know it, we love it. But we are experts in it.
[00:08:56]
We watch Hard Parts Part One, Hard Parts and New Hard Parts. Hard Parts OOP, we all watched it, right? Hm-mm. It also has some really wonderful design decisions that are going to actually make, in theory using these features, really clean experience. But there's a bit of an issue here.
[00:09:18]
I know for sure that I can not use JavaScript to access any of these internal features of my computer. But that's the critical thing to be able to do when the message comes in from Michael’s mac saying Twitter, I need the new tweet, can you please send it back.
[00:09:38]
Who sends the message? The web browser. As soon as you open twitter.com/michael press enter, sends out a message asking for those tweets. Here’s the problem, people. JavaScript definitely does not have the ability to use any of those internal features. Rich, what programming language does have the ability to access those internal features such that when a message comes in asking for your tweets, Michael.
[00:10:08]
The little message comes in, it lands somehow on the network feature, the network card in some sense. What language would allow us to access and look at that message?
>> Speaker 4: C++?
>> Will Sentance: C++, he's spot on. The glorious C++. And so If we are to be able to use JavaScript to access those features to look at the inbound message to decide what files, HTML, CSS, JavaScript, what data, what images to send back, and to get access to them from the file storage, we're gonna somehow need to make use of C++.
[00:10:51]
JavaScript is gonna have to work in hand with C++ so that we can write JavaScript code to control C++ built features that allow control our computer's internals. And these two together are known as Node.js. Why it's called Node.js I do not know when it's got so much C++ in it, but it is known as Node.
[00:11:17]
There we go, people. So C++ has many features that directly interact with the operating system, they call this the operating system portion, itself directly. JavaScript doesn't. So it has to work with C++ to control those computer features, it's known together collectively as Node. JavaScript effects Node, affects computer feature.
[00:11:40]
Now we're going to spend the whole rest of today, all day to come, the whole rest of this course, we're going to spend on writing JavaScript code to control indirectly via C++ the computer features we need to have access to to get our inbound message and to send back a response, to send back the right data, the right tweet, the right HTML file.
[00:12:05]
Does that mean I need to know C++ inside out? You might think it would. It turn out we're gonna get from JavaScript a ton, a ton of labels built into JavaScript that are gonna give us, labels like HTTP, like FS that we will have to sort of tell JavaScript we want to use, we'll see how to do that later on.
[00:12:32]
That will give us access to C++ features that give us access to the computer's internals. Now that might feel like well, what do we need to know about those C++ features? If we're going to understand and write the code, do we need to know about them. We definitely need to know about them.
[00:12:46]
They are going to handle a vast amount of the interaction with this underlying operating system features like the file system like the network. So we better understand this portion intimately. We don't need we do not need to know C++ code to do so. But we do need to understand the mental models of how it's working and how these JavaScript labels are going to trigger C++ features.
[00:13:09]
And that's what we're gonna spend our time today doing. An intimate understanding of how JavaScript labels take command through C++ and get a ton of help from Node built C++, much of Node is a C++ code, in order to take command of the internal features of a computer.
[00:13:35]
>> Will Sentance: But in order to do so we had better understand JavaScript.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops