Backend, for The Absolute Beginner

#node #javascript #tutorial #beginners

Nowadays, it seems that Frontend gets all of the hype in web dev. You build a page with HTML, CSS & JS then let it talk to an API (JAM Stack). However, how do you build an API in the first place? What is server side programming? This is your quick start guide.

History of web

To understand backend, I think it's a good understand how web started first. Luckily, I have just the article for you.

A "Brief" History of the Web

Nicholas Mendez ・ Sep 19 '21

#webdev #beginners #javascript #php

In any case here is the TLDR;

A guy creates a network protocol (it lets computers talk to each other)
Another person creates a language for formatting documents (HTML)
Web browser software is invented that lets you request and loads documents from one networked computer to another
JavaScript is created and it allows for simple programs to be executed after being loaded alongside the requested documents

At this point people thought if you are connecting to a computer anyway why not allow a programs to be ran on that said computer instead of just returning documents.

These programs were called server side scripts and they did things like dynamically build ( or pre-process) the documents before sending them to the client.

Server Side Programming

Now there are two programming environments in the web. The server side scripts that are executed before the response given to the client and then the client side scripts (JavaScript) that executes after.

The following diagram shows how the same experience can be offered with a webpage vs a server side script. Some html is sent to the browser and "hi" is logged to the console.

The server side script in this case simply returns what otherwise would have been the contents of an html document.

Unlike the client side JavaScript code, the server side scripts are never downloaded to the browser. This enabled server-side scripts to perform more security critical tasks like connecting to databases and thus be used to build dynamic web applications.

TLDR What really is backend then?

Backend programming is simply writing code to be executed when a request is sent to a server side script. The output of said code must be some text that will finally be sent back to the browser.

The following is an example of a server side script written in Nodejs using the express framework.

const express = require('express');

const app = express(); //initialize express

//code to run when the url "/" is requested by the browser
//req object lets us get details of the request like the url path
//res object lets us set details for the response
app.get('/', function (req, res) {
    res.send(`<h1>Hello</h1><script>console.log('hi')</script>`);
});

app.listen(8080, function() {
    console.log('Server up!');
});

Routing

URLs play a critical role in the web. It determines which page on the webserver that we want to retrieve. In the case of back end programming, the concept of routing relates to what code we execute in response to the URL path of the request. For example we can setup another route that does something different when /index is requested.

const express = require('express');

const app = express();

app.get('/', function (req, res) {
    res.send(`
    <h1>Hello</h1>
    <a href="/index">Go to /index</a> 
    <script>console.log('hi')</script>
  `);
});

app.get('/index', function (req, res) {
    res.send(`
    <h1>This is a second route</h1>
    <a href="/">Go to /</a>
    <script>console.log('hi')</script>
    `);
});

app.listen(8080, function() {
    console.log('Server up!');
});

You can see this code in action here

Did we just build a Web Server?

This is a common misconception. This script can also be called a node web application but some may call it a node web server. However, the proper term for this program is application server. Application server's do respond to http requests but they are not web server software.

Web Server Software are usually standalone applications that host static files and can be configured to do many things. Two popular web server software are Apache and Nginx. When we deploy a node web application we let browsers connect to a webserver which then forwards along requests meant for the application server (Reverse Proxy). This setup is shown in this article's first diagram. This isn't to say a webserver cannot be implemented in node but most use cases we use it to build an application server.

Conclusion

And that's basically what backend is about, setting up routes to be executed based on the path of the URL. I hope this article has proved to be informational for some.