These are the topics for week 1:
- What is backend?
- What is Node.js?
- The client-server model
- HTTP
- Writing a server in Node.js
- Modularization and Node Package Manager (NPM)
- Express.js
- (Optional) How does the internet work?
In software development, the user experience and utility (the frontend) is often separated from the code that actually makes it work (the backend). The real world contains many examples of this division: take for example an ATM:
What you can interact with, the buttons or inserting a card, is called the frontend (also known as the user interface). However, everything that's needed to make it work the way it does, i.e. the software needed to make it do the real work (moving data from one place to another) is called the backend.
In web development the term backend can be boiled down to 3 components:
- A
server: a computer that is connected to other computers, which runs an application (see below) that allows for sharing and managing services (like a calculator or word processor) and resources (like images, text files). - A
database: software that manages and saves sensitive data for later use. - An
application: software that communicates between the server, database, and frontend. It contains code that allows it to interact with and manipulate the server, database and other types of software services.
For more information, read:
When people refer to backend programming, they usually refer to writing the application part of the backend: the software that interacts with a server (a computer) and database, and moves data from one computer to the next. This is usually a web server that serves as an API, software that tells the reader (either the database software or computer) what to do with the data that's being moved.
Why would we need a backend? There are multiple reasons:
- Security. We don't want any random user to directly access our sensitive data, without verifying who they are. For example, if you have an online bank account then you need to login to verify it's you. The whole process of login and verification is code written in a place that can't be reached so easily.
- Performance. The speed of our user interfaces is greatly dependent upon the server that provides it. The backend contains code that makes sure it optimally makes use of the server's resources (hardware, memory, etc.) to provide the user with the best experience.
- Software interactions. A web application usually makes use of other people's software, web services. The code that communicates with these services and implements it into the frontend is also contained within the backend.
For more information, read: Why do we need the backend?
Node.js is software that allows you to use JavaScript to write the application part of the backend. The application is written in different .js files, and are then read and executed using the node command in the Command Line. For example, node script.js.
Read the following article and code along: Introduction into Node.js
The client-server model is one of the most important concepts in web development. The easiest way to explain this concept is by using an analogy.
Let's say you are hungry and feel like going to a restaurant. The moment you enter the restaurant you are a customer, or in IT terms a
client. You take a seat and decide to order various things, each order representing a separaterequest: you are requesting an orange juice and requesting a nice, healthy salad. Your requests are heard by the waiter, or in IT terms theserver. Their job is to listen to your requests and do whatever is necessary to provide you with what you want. The actual services, like cooking the food, making the drinks or doing the dishes are all done by others. However, to the client the end result of these services are all provided by the server. You don't want to know who performs what service, you just want to eat. When the server comes back with whatever you ordered, they provide you with aresponse. This happens whether or not they could fulfill your requests.
In a web application, the process is very similar. The browser is the client, and some computer that has the data and services you want is the server. Let's say you log in to your online bank account:
As the client, you want to see the amount of money you currently have. The browser sends out a request to the server, who then activates the necessary services (in this example, some kind of database) and returns with a response containing the exact amount of money you currently have in the bank.
If you've ever typed in a URL you might've seen the letters HTTP at the beginning of it, i.e. http://www.hackyourfuture.net. It stands for Hypertext Transfer Protocol and it is the main way of sending requests and receiving data/responses on the internet.
Let's see what happens when you type in a url in your browser. First, the browser sends an HTTP request to the server. The server sends back an HTTP response that contains html code that describes how the page needs to look like.
Next, the browser starts scans the HTML and starts rendering elements on the page. During this process the browser may encounter an image tag in the html <img src="my-website.com/photo.jpg" />. The image source is a URL so the browser will automatically make another HTTP request to get the image.
A similar thing happens for script and link tags that load JavasSript and CSS files respectively. After the browser loads a JavasSript file, it will start executing it. The JavasSript code can, in turn, start new HTTP requests with XMLHttpRequest to load more resources, for example, some JSON data. This entire process is nicely visualized in the diagram below:
The following problem arises in HTTP communication: Because HTML, CSS, JavaScript, and JSON are ultimately just text files, the browser can not automatically determine what to do with it. Therefore the server sends a special header called content-type in the request. The most common content types are:
text/javascrpttext/htmltext/stylesheetapplication/json
Look into the following resources to increase your understanding:
- The Client Server Model
- Client-Server Model & Structure of a Web Application
- Fundamentals of Web apps
Node is great powerful because we can use the language we already know, JavaScript, to write backend applications. Watch the following video and code along: Node.js Crash Course
Writing backend code is not the easiest thing. Imagine having to write all the logic for sending and receiving HTTP requests via the internet, making sure that the request is correctly formatted as binary 1s and 0s. The code will be very long and complex.
Luckily, we do not have to write everything in one file and we do not have to write everything from scratch. Instead, we can split our code into multiple files and also re-use code that other people (or we have) have written before.
The concept of splitting up code into reusable pieces is called modularization and the reusable pieces modules (sometimes called packages or libraries). The whole modularization in node is performed with the help of a small tool called Node Package Manager or npm for short.
To give you an idea of just how easy it is to use npm, lets imagine that we want to reuse code for writing an http server. The code is prepared/packaged by other programmers and made available online under the name express.
Read the following article and code along: A Beginner’s Guide to npm — the Node Package Manager
Look into the following resources to increase your understanding:
In Node.js it's possible to make a HTTP server, using the native http module, as we saw in the Node.js crash course video. However, this is rarely used in practice. Instead, we'll use Express.js, a backend framework for Node.js that can do what the http module does and much more (in a simpler, faster and more readable way).
Practically speaking, what can we do with a web server like http or Express? All the magic that makes the frontend work:
- Get and store data that comes from the frontend
- Make API calls to other services
- Secure data that comes from both the frontend and the database
- Any other type of calculation or business logic
For more research, use the following resources:
This part is optional, but still recommended to understand the wider context of what we as web developers deal with, namely the internet:
- YouTube Series: How The Internet Works
- How the Internet Works for Developers I
- How the Internet Works for Developers II
Are you finished with going through the materials? High five! If you feel ready to get practical, click here.