Understanding Modern Web Applications: Web Pages to Servers and Hosting Solutions

6 min read6 days ago

In this article, I’ll try to explain every step about modern web applications, starting with the basics and moving towards more advanced concepts. So let’s begin!

Web Page

As I mentioned, I will explain from basics, a web page is the most basic piece of a web application.

A web server — Src. developer.mozilla.org

Web pages are generally an HTML document, which can be reached via a unique URL. Those HTML documents might contain style information, scripts, and media.

Style information: Manage the look and feel of the page (CSS).
Scripts: Add interactivity to the page (JavaScript).
Media: Images, videos or audio files.

Addresses can be unique for each page, or a page can be served for every address.

What does this mean now, how can a page be served for every address? It’s called Single Page Applications (SPA), where a single page dynamically loads content without reloading. Nowadays, many websites using this technology. In order to understand details of SPA, we should dive deeper into SPA and talk about JavaScript and DOM. But as long as this article backend focused, we won’t dive any deeper in that direction!

Website

A collection of web pages makes up a website. In the case of an SPA, the website might consist of a single but dynamic web page.

All web pages of a website shares the same domain name, but every web page has a unique URL.

If you don’t know the difference between a URL and domain, please read this article: What is a Domain Name?

When the domain name entered to browser address bar, we get to index page which is usually called homepage or the home. Homepage is the main page where clients navigate to other web pages.

Web Client

A web client is any device, such as a computer, smartphone, or even IoT. As long as they can send an HTTP request to a web server, they can surely be a web client.

Web Server

A computer that hosts websites, called a web server. It can be your gaming PC, or it can be a professional server machine, or it can be a mini tiny Raspberry Pi. If you manage to run a web server software on a computer, connecting internet. With the help of this software and connected internet, this computer will listen requests from specified port.

A web server listens specified port if there is any HTTP request coming, and it processes HTTP response containing resource to them.

If the resource needs static sources like static text, image, script, and style information; then the web server directly sends those sources within an HTTP response. If the request needs to involve with specific data stored in backend or add some record to database, then web server will communicate with Application Server using API.

Application Server

An application server is responsible for processing dynamic requests. When a web server requires more than static data, it forwards the request to an application server.

Generally application servers;

Receives the request from the web server via an API.
Processes the request (querying data from Database Server, etc.).
Returns the processed data to the web server, which sends it to the client.

Database Server

A database server stores, retrieves and manages structured data. As I mentioned above, when the application server requires data, it sends a query to the database server. The database server then retrieves requested data and sends it back to the application server in order to process it.

Website Flow: How Servers Manage an HTTP Request

Request 1 — The web client sends an HTTP request to a URL.
Request 2 — The web server then receives the request and forwards it to the application server for data processing.
Request 3 — The application server queries the database for the necessary data.
Return 1 — The database server processes the query and returns the requested data.
Return 2 — The application server processes the data and returns it to the web server.
Return 3 — The web server compiles the response and sends it back to the client.

And end of this request and response flow, the client views a compiled HTML document on their browser.

If the source of that unique URL containing only static files, the web client sends a request to the web server, which returns a static response without involving an application or database server.

Types of Web Hosting

1 — Shared Hosting

Shared hosting is a type of hosting service plan to host entry-level websites, which has low requirements. With this plan, your website will be running on a server which is running other websites at the same time. You and others’ websites will share the same computer’s resources. This will cost lower compared to other plans, but also your website’s capability will be less compared to other plans.

2 — VPS Hosting

VPS hosting plan places in between shared and dedicated server. This plan is for website owners needs more control over the server. VPS hosting provides dedicated space in server for the website. Basically it’s still containing many websites within one computer, but this time you have your own space that you can manage things. It still cannot handle large amount of traffic, but still good choice for advanced users.

3 — Dedicated Server Hosting

This type of hosting gives the most control over the server. The reason behind it is that the server is entirely dedicated to you, and you are the only one controlling and managing resources on the computer. You have full admin access, and can configure everything as you like.

4 — Cloud Hosting

Cloud hosting provides a mash of many servers (generally VPS) connected to each others. This allows us to have flexibility on scaling, and we can balance traffic by separating to several servers. Also with this way if any server crashes traffic can shift to other servers.

Self Hosting

It’s still possible to host websites on your own computer (like a PC or a Raspberry Pi), but this option requires advanced technical knowledge to manage the server’s performance, security, and maintenance.