by Mariya Diminsky
Learn Node.js with Brigadier Fluffykins Part I: Sync, Async, and Creating Your First Server!
Welcome to Part I of Learn Node.js With Brigadier Fluffykins, a series created to help you easily understand Node.js ❤
A new adventure has arrived! I will be taking you step by step from initial Node.js install to creating your first server, to customizing your responses, understanding streams and events, as well as using frameworks. Let’s begin.
Brigadier Fluffykins wants to make sure you’ve reviewed the basics of callbacks and promises. If not:
It’s ok if you don’t understanding everything right away. The important thing is that you are introduced to these concepts now. We want your brain to begin adjusting to the Node.js programming patterns you will implement throughout these lessons. Good luck and happy learning! :)
Today’s lesson will cover:
- What Node.js is and what you can build with it.
- Brief overview of how the web works(i.e. Client, Server relationship).
- Downloading and installing Node.js on Mac/Windows/Linux.
- What asynchronous/synchronous mean, and what non-blocking/blocking mean.
- How to create your first server.
What is Node.js?
Node.js is an open source cross platform runtime environment that allows you to build scalable network applications on the server-side.
- Scale apps as traffic increases
- Build chat rooms and other data-heavy apps
- Directly manipulate database information
- Access and shape the files in our system based on preference
- Route requests (for website’s html/css/js pages) and monitor traffic
- Have faster uploads and the ability to show the progress of those uploads
- Customize our responses to these requests via routing and redirecting
Imagine thousands of users hitting your app, and thus requesting info from your server. What do you think will happen? You have no way of handling these requests, and even if you do, they may be synchronous (explained later). Users end up waiting in line behind thousands of other users for the necessary files to return. Loading speeds are slow, creating a poor user experience and causing you to lose business.
Scaling your app when traffic hits is one of the biggest challenges an app faces in the early stages.
Node.js allows you to operate a huge number of connections simultaneously and asynchronously — this basically means it allows for scalability. On top of this, you have libraries to help you customize the handling of these issues.
Client and Server: The Traditional Model
Before we continue I want to give a brief overview of how the web works via client and server. If you already understand this go ahead and skip this part.
When I say client, I mean anyone who is requesting information.
When I say server, I mean anyone who is processing a request and responding back with the necessary information.
For example, when you go to type in:
When the website’s servers receives these requests, they respond with the HTML page, the CSS stylesheets, and whatever else you may need to view that page. This is the gist of it.
It’s important to note that anyone can be a client or a server. When you are creating an app locally you are in fact acting as a client and a server (such as localhost:3000). More on that later.
For now, let’s explore how Node.js handles these requests compared to the old-school model. We’ll use animations that Brigadier Fluffykins made for us. The orange is Brigadier Fluffykin’s request to his favorite website and the green is the response from the server. Slow and steady:
The traditional client-server model involves the client initializing a request first. Each request connection creates a new thread — a new process where code runs — thus taking up memory in your system. This eventually creates scalability issues due to memory running out or your server crashing due to an over flood of requests (high user traffic).
If you’re interested in diving deeper in how the client-server model works, I recommend exploring here.
Client and Server: With Node.js
Node.js can act as the client or the server or both. How awesome is that!?
As a client, Node.js requests content from another site. For example, when a client wants to post something to Pinterest or Twitter from your site.
To use Node.js as a client you need to install the Request library (We’ll talk about installing modules and libraries for Node.js later in this series).
It’s important to realize that Node.js doesn’t do anything by itself. It’s not a web server. It’s just a runtime environment. If you want a web server, you bet your dilly da hoo ha that you need to write that server yourself young man (woman…child…cat…you get the point). You want to add information to your files? You gotta write that yourself too — Node.js doesn’t magically create this for you, but it sure adds a lot of great functionality you can play with. And Brigadier Bunny Fluffykins is going to teach you how! Yeah!
Downloading and Installing Node.js
- Open your command line terminal. If you don’t know how to find your command line, here are a few links that may help:
2. Next, make sure Git is up and running:
- You can download it here.
- Watch this 4 minute video intro on git.
- Read this article if you still need help.
3. Download Node.js onto your system.
To check if you installed it, type in node -v in your command line, you should see the version number pop up:
Let’s create a file called bunny.js in your code editor (such as Sublime, Brackets or Atom). Type in console.log(‘I will give Brigadier Fluffykins 20 carrot bits’) inside the file, or download this zip which includes this file as well as the next few files we need for the rest of the lesson.
Press ctrl + c inside the terminal for Mac twice to exit out of the node process (I believe it’s killall node for Windows — correct me if I’m wrong here).
Asynchronous & Synchronous Code
In order for Node.js to handle thousands of concurrent connections, it needs to handle them asynchronously, in a non-blocking way. What this means is you can have more than one action running at the same time, you saw this in the second animation.
Blocking — or synchronous — on the other hand, will run only one action at time. It will not allow a second action to run until it’s finished. When we sent a request for a file, we had to wait for the server to respond until we could send another request. This takes a really long time for Brigadier Fluffykins, and he was unhappy.
If you create code asynchronously, you can run actions in parallel. This can take less than half as much time as using a synchronous approach.
Although Node.js was purposefully created to be non-blocking, it allows developers the option to choose how they want their code run via changeable methods in their libraries. For example, Node.js has an appendFile method that can append something new to your file asynchronously or synchronously. Here’s another example:
Follow steps 1–5, or download this zip with files I’ve already created for you:
- First let’s create a folder called ‘nodestory’ .
- Create these 3 files: wishlist.html, bunnySync.js and bunnyAsync.js inside the folder.
- Open this folder in your code editor(Sublime, Brackets, Atom etc).
- In wishlist.html copy and paste this in:
5. In bunnySync.js copy and paste this in:
Ok now run node bunnySync.js in your terminal:
Notice how our alert is printed in the same order as when we wrote the code? Now let’s try the same concept but asynchronously/non-blocking.
In bunnyAsync.js paste this in — make sure it’s the right file name:
Ok now run node bunnyAsync.js in your terminal:
Notice how our alerts, no matter the order, all print before the file is fully read? Reading the file takes longer then using the console.log function, and thus our alerts are printed first. Once the file is read, it eventually prints.
Create Your First Server
It’s thaaaaaaat special time of year… to create your first server!
Woohoo! I am so excited for you! We’ll be going through several examples, so either create a file called server.js and paste this in:
…or open the server.js file in the zipped folder I provided earlier.
Make sure that only the http and fs variables — as well as ‘STEP #1’ — are uncommented. Review the code and deliberate on what you think is happening before you continue reading.
As you may have noticed, along with modules and third-party libraries, Node.js also comes wth an extensive list of methods. You most likely won’t be using all of them — it really depends on what you’re building.
Now type node server.js in your terminal to start the server.
Go to your url header and type localhost:3000 to see the response you just sent:
Ok, what’s happening here?
For every request, you need a response. First, we respond to the client by setting the status code in the header to 200, meaning this website is OK, ready to go!
You can check the headers by clicking option + command + J in Chrome on a Mac, or right clicking and choosing inspect then clicking the Network tab (it’s one of the options next to the Console tab). If you don’t see anything under Network just hit refresh. Otherwise click the page and you will see under Headers the status code and what kind of requests the client made (in our case, “localhost:3000”). This is a GET request, since we want to get a file from a server.
Here’s what would happen if we set our headers to 404:
Try it out in your code and see if you can get a 404 status code.
Headers and status codes are an interesting topic by themselves, but I won’t go into that now. I have included resources in the end, if you’d like to research this more.
Next we have the response we want to send back to the client, or what the client will actually view on their page using the write method. Then we close the connection with the end method.
Lastly, we set up the port that our server will listen for requests. This can be 3000, 8080, or basically whatever you want. Just make sure you go to localhost:8080 if, for example, you’re using port 8080.
It’s a good practice to set the headers first before you set the response, especially because headers come before the body in the HTTP responses.
You just learned to create your first server! Pat yourself in the back, or slap yourself in the face — whatever works for you!
Let’s continue our adventure by building one of the more common forms you’ll see for HTTP servers. This is the same as what we just created, except there are some slight syntax differences which focus on events and event emitters (explained later in the series).
Comment out ‘STEP #1’ and uncomment ‘STEP #1.5’.
This is really important: before you do anything else, be aware that when you start a server then change something again in the file, the changes won’t be visible until you stop the server and start it again. There are libraries that will automatically restart the server for you upon detecting changes (like Nodemon), but don’t worry about setting that up right now.
For now, to stop the server manually go into your terminal and press control + C for Mac (again, I believe it’s killall node for Windows) then either press the up arrow to go through the previous commands you typed, or manually type in node server.js.
You should see this:
Notice that we can send some basic HTML inside the end method, thus sending a response and ending our connection at the same time. We can also store our server in a variable to make it more readable when we are using events such as request. It’s important to note that the request event is not the same as the Request third-party library. This confused me when I first learned Node.js, and I wouldn’t want you to go through the same thing. We’ll be talking about these in the next few lessons of the series.
I implore you to go out and do some research. Make the most out of the time that you have. Here are a few places you can start:
- What is Node.js Exactly?
- Node.js Docs.
- What are buffers in Node?
- List of Status Codes and their meanings.
- Repeat after me: “Google is my friend”
Congrats! You’ve made it through Learn Node.js With Brigadier Fluffykins Part I! Now you’ll be able to explain the basics of Node.js as well as what you can build with it. You gained an intro on how async/non-blocking and sync/blocking code works, and the benefits that Node.js provides with async programming. Best of all, you were finally able to set up your very first server!
Wow. Seriously, great job. Brigadier Fluffykins commends your effort.
We will go deeper into these topics as well as others we’ve only scratched in the next few lessons. Thank you for reading and stay tuned.
Keep your wisdom up to date by clicking the ❤ below and following, as more Learn Node.js With Brigadier Fluffykins is coming soon to Medium!