Web Application Architecture: Front-end, Middleware and Back-end

Modern web applications are built on multi-layered architectures for scalability, security, and ease of maintenance. A common configuration involves three main layers:

1. Front-end (Client-side)
2. Middleware (API Gateway)
3. Back-end (Server-side and Database)

Below we will analyze the role of each layer and how they interact with each other.

🔗 Do you like Techelopment? Check out the site for all the details!

Front-end: The User Interface

The front-end is the visible part of a web application that users interact with. It is usually developed using technologies such as:

• HTML, CSS and JavaScript for structure, style and interactivity.
• Modern frameworks such as React, Angular or Vue.js for greater modularity and state management.

How it works

1. The user accesses the application via a web browser and sends a request to load the page.
2. The client downloads static files (HTML, CSS, JavaScript) from a server or CDN to improve performance.
3. Once the interface is loaded, the user interacts with the UI elements, triggering events such as clicks, text input or scrolling.
4. To retrieve or send data, the front-end makes HTTP calls, via AJAX or WebSocket, to the APIs exposed by the Middleware.
5. The data received from the APIs is processed and displayed to the user in an interactive interface, with dynamic updates without the need to reload the page.

Use Case: Search Flow in an E-Commerce Site [Front-end]:

A user accesses an e-commerce site and searches for a product by typing the name in the search bar. The front-end sends a request to the middleware to get the corresponding results (for example, by invoking an API called findProducts).

Middleware: API Gateway

API Gateway acts as an intermediary between the front end and the back end, providing several benefits:

• Request handling: Receives requests from the client and forwards them to the appropriate microservices.
• Security: Authentication, authorization, and attack protection.
• Rate limiting and caching: Improves performance by limiting the number of requests and caching frequent responses.

How it works

1. The front end sends an HTTP request to the API Gateway, which can include query parameters, authentication credentials, or JSON payload.
2. The Gateway verifies whether the request is authorized using JWT, OAuth, or API key tokens.
3. If the request is valid, the Gateway forwards the request to the appropriate back end service, balancing the load across multiple server instances.
4. The back end processes the request and returns data, which the Gateway can transform or aggregate to optimize the response.
5. The Gateway applies any caching or compression policies and sends the final response back to the client.

Use Case: Search Flow in an E-Commerce Site [Middleware]:

The API Gateway receives the user's search request (findProducts), forwards it to the backend catalog service (which could be retrieveProducts for example), and returns a list of filtered products.

Backend: Business Logic and Database

The backend is responsible for data processing and business logic. It consists of:

• Server: Can be monolithic or microservices-based (Node.js, Django, Spring Boot, etc.).
• Database: Can be relational (MySQL, PostgreSQL) or NoSQL (MongoDB, Firebase).

How it works

1. The backend receives the request from the Gateway and interprets it, determining the necessary action.
2. If the request requires data, the server queries the database by executing SQL or NoSQL queries to retrieve the information.
3. If the request involves data modification, the server updates the database by applying any validation rules and transactions to ensure data consistency.
4. The server processes the requested business logic, such as calculations, user state management, or sending notifications.
5. Once the data is obtained, the backend formats the response (JSON, XML, etc.) and sends it to the API Gateway.
6. The Gateway forwards it to the client, which uses it to update the UI.

Use Case: Search Flow in an E-Commerce Site [Backend]:

The backend catalog service (retrieveProducts) queries the database to find products that match the user's search, returning the name, price, and availability of the items found.

Architecture Diagram

Here is a diagram showing the architecture of a web application with these three layers:

Here is the interaction that occurs between the levels for the use case mentioned above: Search Flow in an E-Commerce Site

Advantages of this Architecture

✅ Scalability: Each layer can be scaled independently.

✅ Maintainability: It is easier to update the code by separating the responsibilities.

✅ Security: The Gateway protects the backend by limiting direct access.

This architecture is ideal for modern web applications, allowing flexible and secure management of traffic and data.

---

Follow me #techelopment

Official site: www.techelopment.it
Medium: @techelopment
Dev.to: Techelopment
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
youtube: @techelopment
whatsapp: Techelopment