Full Stack Development

Layers of a full stack

We are first going to learn about the layers that make up a full stack. It’s easier to understand it in a diagram.

The double-sided arrows mean there is two-way communication between the computer processes on either end. Some of the arrows pass through the internet, which refers to how the communication is routed. A browser goes to the web application’s URL by requesting data, usually a web page to start, from the web server. Then, the web server produces a response depending on the request.

Dynamic requests do not have a pre-computed response. The web server sends these to one of a group of processes, which are usually identical, that will handle the request. This can involve computation, reading and writing from the database, or calling other services. For example, a web application that displays the weather might look up a map in a database and then send a request to a weather service for the temperatures, before computing a pictorial response that gets returned.

There are three primary functions within a web application, as we can see in the diagram below.

• Client
• Server
• Database

The client

The client is the same as the front-end. In other words, it’s what the user sees. The back-end is everything on the other end of the internet, which includes both the server and the data store.

The server

In general, a web application is accessed with a web browser. It’s also possible to access the server through a custom application, such as a phone application. Let’s assume that the server is accessed from a client running on a browser. This means that the client must use HTML and, optionally, CSS and JavaScript. Many popular frameworks, such as Angular, Vue, and React, make it easier to create clients that will run in a browser. The piece that the user will directly interact with is called the user interface, the client, or the front-end.

A number of excellent options exist for the web server, including NGINX, Gunicorn, Apache, JBoss, and Jetty. These will communicate with the application workers, which can be built using one of many frameworks, such as Ruby on Rails, Express.js, and Django.

The database

For the database, the first choice is usually whether to create an SQL database or a NoSQL database. A number of good options exist for each.

Here are some popular choices for each category, with the ones used in this course shown in bold:

The stack we will use

We’ll use the following technologies in this course:

• Client: React
• Web server: NGINX, Gunicorn, and Flask
• Database: PostgreSQL and SQLite