How does the web work?
Whether you’re a designer, business developer, or part of a technical team, it's important to understand the structure of the web and how it works. Understanding the structure the web can make it much easier to communicate and collaborate with others on a project. If you’re a developer you’ll always appreciate other people trying to understand your work a little better.
Basic model of the web
Everyone has a basic mental picture of how the web works. However, let's keep that picture and review it. The basic mental picture is that you have a front-end and it hits a back-end application. That application hits a database, does some unique business logic, and returns a response to the front end. Let's break down this mental model a little more.
A back-end is any application that is connected to the internet or the cloud, whose primary purpose is to service requests. It's better to learn by example so let’s go over some examples of backend processes– the most common of them being web servers and databases.
A web server is easy to understand but also really easy to overcomplicate. A web server is anything that responds to an HTTP request and return with some files. If you’re doing a really basic static webpage/website that doesn’t change, then you can do that with just one web server by having it return the static HTML code. The web server can locate a static HTML file from your computer and return it right away.
Every single semi-intelligent web server is going to leverage a database that persists data. It's important to know that you don’t always have to use a database for web technologies. If you’re working with a scientists and they’re running a bunch of experiments. They’re probably gathering tons of gigabytes of data that are all offline. That data can actually be just saved in a database, which can be a perfect use case for a database. So to recap you don’t necessarily have to use a database with a web server but if you’re doing anything intelligent with a web server you probably need a database.
When a web server leverages a database, the web server always sits on one computer and the database sits on a different computer and they have their own connection. The reason a database is typically on a separate computer is because they both try to perform to the highest ability and they use a lot of resources. If you have both a web server and a database on the same computer then they usually compete for the computer’s resources unless you have a high-end computer.
Front-end code or client side code is any code that runs on a client, which includes the chrome/safari browser you’re using to read this article. The client makes a request to the server. A good analogy is when you go to a restaurant, and you (the client) place an order. The restaurant is the server, which responds with the food. Something to keep in mind is that when you want to change something on a website, the change isn’t always siloed to just the back-end or front-end. They usually come together unless you’re asking something simple like changing a button to be blue. If something is not that simple then assume that everything you want to change is intertwined between the front-end and back-end.