How the Web Works

When you visit a website, you enter its URL in a browser application. The browser connects to the server hosting the website and requests the web page. The server processes the request and sends back the requested web page. The browser then interprets the HTML, CSS, and JavaScript code and displays the web page to you. This process happens over the internet, a global network of computers connected to each other.

We can abstract this process by thinking of the browser as the client and the web server as the server. The client sends a request to the server, and the server processes the request and sends back a response. This request-response cycle is the foundation of the web.

Client ──────────────────── Server
  │                           │
  │  ───── Request ─────────▶ │
  │                           │
  │  ◀──── Response ───────── │
  │                           │

We will not get into how the browser figures out where the server is located. That is the domain of the Domain Name System (DNS) and the Internet Protocol (IP) suite. For now, we will focus on the request-response cycle between the client and the server.

The browser and the server are both software applications that communicate over the network. The request and response are both messages (text) that follow a specific format. The format must be agreed upon by both sides for them to understand each other. This is the subject of Application Programming Interfaces (APIs).

What is an API?

An API (Application Programming Interface) is what allows one software application to “talk” to another. For example, imagine connecting your calendar and to-do application and keeping them in sync; you need to work with their APIs. Most modern software applications use APIs, and so does most of the web. An API is just a set of rules (a protocol).

The protocol lets two software systems work together even when their internal processes, structure, or design are different. On the internet and in web applications, the most common type of API is the HTTP API. This API uses the Hypertext Transfer Protocol (HTTP) to send and receive messages between the client and the server. Our weather app will use the Open-Meteo HTTP API to retrieve weather forecasts.

What is HTTP?

HTTP stands for Hypertext Transfer Protocol. It is popular because web applications are everywhere and because HTTP itself is simple and easy to use. Most data exchange on the web goes through it. HTTP is a request-response protocol in the client-server computing model.

The simplest thing to do with HTTP is to request a web page. The browser sends an HTTP GET request to the server, and the server sends back the requested web page in the response. The browser takes care of formatting and sending the request, then processing the response to display the web page.

Browser ─────────────────── Server
  │                           │
  │  ── HTTP GET Request ───▶ │
  │                           │
  │                      Process Request
  │                           │
  │  ◀── HTTP Response ────── │
  │                           │
Display Web Page              │
  │                           │

This is the most common use of HTTP, but it can do more. For example, you can use HTTP to send data to the server, delete data, or update data.

What is CRUD?

HTTP is an extensible protocol, and what it mainly supports is CRUD operations. CRUD stands for Create, Read, Update, and Delete. Almost all consumer software on the internet uses CRUD. You use it every time you ask an application to store new data or change data it already has.

The basic HTTP verbs (methods) corresponding to CRUD operations are:

  • GET — retrieve a specific resource (by id) or a collection of resources
  • POST — create a new resource
  • PUT — update a specific resource (by id)
  • DELETE — remove a specific resource by id

An HTTP request, in addition to an HTTP verb, typically consists of:

  • a header, which allows the client to pass along information about the request
  • a path to a resource
  • an optional message body containing data

An HTTP response typically consists of:

  • a header, which allows the server to pass along information about the response
  • an optional message body containing data
  • a status code, which indicates the outcome of the request

API Endpoint

An API endpoint is the place a client sends its request to when it talks to a server. The endpoint is a URL. For example, when you visit a website, you are using an API endpoint.

In the next section, we will use the Open-Meteo API endpoints to look up locations and retrieve weather forecasts for our application.