How does a web app really work?
In this article we’ll dive into the details of how a web app works and the architecture required to make this happen. Let’s start by taking another look at the web app architecture diagram that we covered in the previous article.
One thing to be mindful of is that the code that you write for the client can be seen and ultimately analysed by anyone who has access to the client. For example some applications need to access data on another service (such as on Amazon Web Services) and that service requires a security key or password. That security key or password can not be embedded in your client code as anyone will be able to read your code and learn that secret information! You will need to use other methods to access those services from your clients. We’ll explore those methods later in this series.
It is possible to use the same server as the back end as a webserver. But care will need to be taken as the webserver performs a different function and will have different needs from the back end.
The back end
The back end server provides many different services for the front end clients. It acts as the central repository for all data. It processes and transforms that data as necessary. It authenticates the users as they log in. Etc, etc.
Usually the back end functionality is split into 2 parts: the API server and the database server.
Many back end servers are built following an Application Programming Interface (API) model. This is the server that the client interacts with. It provides the business logic for processing the data, etc. These services are provided as end points which can be thought of as a unique URL for each service. This model is called a RESTful API model. There are many articles that you can read to learn more about this model and I suggest you start with this article.
The API server itself doesn’t store your users data. For this we’ll need a database server.
There are many different databases that you can use to store your data. Common choices include MySQL and MongoDB. Depending on where you plan to host your back end your hosting provider may already have a database service included. For example, many managed hosting providers include MySQL in the hosting package. This makes it relatively easy to manage as you don’t need to install the database software on a barebones server.
Another option is to use a cloud database service like MongoDB Atlas. You can set up a database on their database servers and then configure your API server to connect to that database. This is also very easy to manage although the database size for the free trial is (obviously) limited. But it is a great way to get started.
Now let’s take a look at our detailed architecture diagram:
In the next article we will look at installing React and Node.js on a local machine for development and how that fits in with the web app architecture model.