What is HTTP and an HTTP Web App?

In a world where smartphones and computers are so common, the internet is an essential and unavoidable tool. When we hear about the internet, we usually think of a network of websites serving content to users. This content may be:

• Read-only, like Wikipedia.

• Interactive, like a social networking website.

Interactive websites are actually web applications with a complex backend and a user-friendly interface.

So what’s a web application (or web app)?

What are web apps?

A web app is a piece of software hosted on a remote server. It can be run in a web browser.

For anyone who has ever used the internet, it's almost impossible to not interact with a web app. Here are some well-known examples:

• Social media apps like Facebook, Twitter, Instagram.

• Video platforms like YouTube.

• E-commerce websites like Amazon.

• Streaming platforms like Netflix.

Now all these examples also have corresponding mobile apps. These may run on mobile devices instead of a browser, and the way the client interacts in these may differ. However, once the request reaches the server, they are most likely served by the same backend.

So, what does a web app consist of?

In order to work, a web app needs:

• A client to send requests to the app over the network.

• A server to service these requests. It may also use a persistence layer to store the data.

• A predefined and uniform mode of interaction to communicate between the client and the server.

Client and server are pretty self-explanatory, but what about mode of interaction?

By the mode of interaction, we mean that the server needs to know how the client is sending the request, including details about the port and the protocol it's using. And it needs to know what information is being sent and how to interpret it to generate an appropriate response.

The interpretation part is done via application programming interfaces, or APIs. Let's see how.

Application programming interfaces (APIs)

Most web applications we see today consist of a bunch of application programming interfaces (APIs). These APIs are either directly exposed or used by other software to build on top of these. It's virtually impossible for anyone using the internet to not have used APIs. They are everywhere—even loading this page meant we hit a bunch of APIs on the server.

In simple terms, APIs are contracts that the client uses to access and modify resources on the server. In other words, a client communicates with the server by creating requests as defined by the API contract, and the server responds to these requests with a format that's also dictated by the API contract.

Some of the advantages of using APIs are:

• It has a layer of abstraction. This means that the client doesn't need to know or care about the inner working of the server.

• It has a tightly defined format. This adds a layer of security to the communication by ensuring that only absolutely necessary information is exchanged. For example, we don't need to provide personal details like a phone number when we're only browsing a website for news. 

So, if APIs only define the format, then how are the actual requests sent over the network? This is done via a little protocol you might have heard of: HTTP.

What is HTTP?

Hypertext Transfer Protocol (HTTP) is an application-layer protocol for transmitting hypermedia documents, such as HTML.

Most web addresses are prepended by either “http” or “https,” which is a more secure version of the HTTP protocol. It forms the backbone of client-server communication on the web.

A client sends an HTTP request to a server. The server then sends back an HTTP response.

HTTP Request

A typical request contains quite a bit of data, which can be broadly classified into two things:

• Request header

• Request body

Request header

Request headers have information about the request that will help the server process it. Request headers contain the following:

• HTTP methods, of which the most common are:

  • GET: This is used to get information about some source.

  • POST: This is typically used to send some information to the server, like when submitting a form.

• Host address/URL: This is the address of the server or the web app to which the request is being sent.

• Cookies: These can be used for session management or storing some other useful metadata.

• Content type: This is the format in which the body is sent, like JSON and XML.

Request body

The request body is used to send additional data to the server and is optional. POST requests typically use a body.

HTTP response

After receiving the HTTP request from the client, the server sends an HTTP response, which also has the following important fields:

• Response header: This is used to pass additional information from the server to the client, like if the content type of the response is JSON or XML.

• Response body: This is, again, an optional field and is used to return the resource information the client asked for.

Status code 

A status code is used to indicate if a request was successful or not. If it's unsuccessful, the status code also gives the reason for it.

That was just a very brief introduction to how web communication happens. It covered a lot of the basics, albeit at a very high level.

What we've learned above will be a good start to help us build a web app of our own!