Service Communication

Modern web applications are rarely a single program. Instead, they are composed of multiple services, where each service is responsible for a specific task and communicates with other services through well-defined interfaces.

A typical web application consists of three core components:

• Frontend: Interacts with users and displays information.
• Backend: Implements application logic and processes user requests.
• Database: Stores application data persistently.

These services communicate primarily through Application Programming Interfaces (APIs), allowing them to operate independently while working together as a complete application.

Core Idea

A web application can be viewed as a communication between multiple services.

 User
  │
  ▼
Frontend
  │ HTTP Request
  ▼
Backend
  │ Query / Update (Manipulation)
  ▼
Database

Each component has a different responsibility:

Component	Responsibility
Frontend	User interface and user interaction
Backend	Business logic and application services
Database	Persistent data storage

Rather than directly accessing the database, the frontend communicates only with the backend, while the backend acts as the bridge between the user interface and the stored data.

Frontend

The frontend is the application that users directly interact with.

Examples include:

• Web browsers
• Mobile applications
• Desktop applications

Its responsibilities include:

• Displaying information
• Receiving user input
• Sending HTTP requests to backend services
• Rendering responses returned by the backend

For example, clicking a Login button may generate:

POST /login

or loading a user profile may generate:

GET /profile

The frontend usually does NOT communicate directly with the database.

Backend

The backend provides the application’s functionality.

It receives requests from the frontend, processes the requested operation, and returns the result.

Typical backend responsibilities include:

• User authentication
• Data validation
• Business logic
• Database access
• Returning API responses

For example:

Frontend　
    │POST /login
　　▼
Backend
    │Verify username/password
    ▼
Return success (and user credential) or failure (404)

The backend acts as an intermediate layer between users and the database, preventing users from directly accessing or modifying stored data.

This separation provides:

• Security: Users cannot directly access or modify the database.
• Access control: The backend determines which users are allowed to perform specific operations.
• Data integrity: The backend ensures that all data changes follow predefined rules.

Database

The database stores information that should remain available after the application terminates.

Examples include:

• User accounts
• Password hashes
• Images
• Orders
• Messages

Instead of storing this information in memory, the backend saves it into a database.

Backend
  │
  ▼
Database
  │
  ▼
Persistent Storage

The database typically does not communicate directly with users (except for server administrator). Instead, all database operations from the user should be performed through the backend.

A database is a data management system that provides efficient storage, retrieval, and management of structured information. Compared with the file system, databases provide many useful capabilities:

• Efficient searching and retrieval
  • Databases optimize queries through mechanisms such as indexing.
  • Example: Searching a user by email without scanning every user record.
• Data organization and manipulation
  • Databases provide structured representations such as tables, relationships, and query languages.
  • Example: Adding, updating, or joining related data using SQL.
• Access control and authentication
  • Databases can manage users, permissions, and access policies.
  • This prevents unauthorized users from directly modifying stored information.
• Data consistency and reliability
  • Databases provide mechanisms such as transactions to ensure data remains correct even when multiple operations occur simultaneously.

---

Example: Logging into a Website

The following diagram illustrates a typical login process.

User
 │
 │ Enter username/password
 ▼
Frontend
 │
 │ POST /login (with encrypted username/password)
 ▼
Backend
 │
 │ Query user information
 ▼
Database
 │
 │ User record
 ▼
Backend
 │
 │ Authentication result
 ▼
Frontend
 │
 ▼
User Logged In

Notice that:

• The frontend never directly accesses the database.
• The backend controls all application logic.
• The database only stores and retrieves data.

Why Separate These Components?

Separating an application into multiple services provides several advantages.

Frontend

• Focuses on user experience
• Can be redesigned without modifying the backend Backend
• Centralizes application logic
• Protects sensitive operations
• Provides APIs for multiple client applications Database
• Stores data reliably
• Can be optimized independently from the application logic Because each component has a clear responsibility, modern applications are easier to develop, maintain, and scale.

Commonly Used Stack

Frontend

Technology	Description
React	Building interactive and reusable web components.
Next.js	Building lightweight and flexible application-level interfaces on top of React components.
Vue	Building flexible and structured application-level interfaces.
Angular	Building large-scale and structured enterprise web applications.

Backend

Technology	Description
Node.js	Running JavaScript on the server side for building backend applications.
Express	Building flexible and lightweight backend servers and HTTP APIs.
NestJS	Building large-scale and structured backend servers.
Django	Building full-featured and structured web applications with Python.
Flask	Building lightweight and flexible web applications and APIs with Python.

Database

Technology	Description
PostgreSQL	An all-around relational database for structured data and transactional applications.
MongoDB	A NoSQL database that stores data as flexible JSON-like documents instead of relational tables.
Neo4j	A graph database designed for applications involving complex relationships between entities.
Chroma	A vector database designed for storing and searching high-dimensional vector representations.
Elasticsearch	A search-oriented database designed for efficient text retrieval and fuzzy search.
Cassandra	A distributed wide-column database designed for extremely large-scale and high-throughput applications such as IoT systems.