UNIT 2: Web Systems Architecture

This unit focuses on the architecture behind web-based systems, how data is accessed efficiently, and the different components that make a web application scalable and fast. We'll explore client-server architecture, 3-tier architecture, building blocks of data access, and Web Application Architecture (WAA).

2.1. Architecture of Web-Based Systems

Web-based systems need a structured design to handle requests, process data, and respond to users efficiently. Web architecture determines how different components of a system (servers, clients, databases) work together.

2.1.1. Client/Server (2-Tier) Architecture

In client/server architecture, two main components exist:

Client: The client is the user's device (browser or application) that sends requests for data.
Server: The server hosts resources (data, web pages) and processes the client's requests.

How it works:

The client sends a request (like asking for a webpage or data) to the server.
The server processes the request and sends back the required information or service.

Flowchart of Client/Server (2-Tier) Architecture:

  [Client] -----> Request Data -----> [Server] -----> Response Data -----> [Client]

In a 2-tier architecture, the client directly communicates with the server. The server handles the business logic, data storage, and presentation.

Advantages:

Simple design.
Easy to manage.

Disadvantages:

Scalability issues as all the processing is done on the server.
Server overload can occur with high traffic.

2.1.2. 3-Tier Architecture

3-Tier Architecture divides the architecture into three layers:

Presentation Layer (Client Tier): This is where the user interacts with the system (usually the front-end or UI).
Application Layer (Business Logic Tier): This layer handles the business logic and processes data between the client and the database.
Data Layer (Data Tier): The database or storage system where data is stored and retrieved.

In this architecture, each tier performs a specific function and communicates with adjacent tiers to complete the process.

How it works:

Client Tier: The client sends a request to the application tier.
Application Tier: The application tier processes the request, applies business logic, and queries the database.
Data Tier: The data tier stores or retrieves the data as needed and sends it back to the application tier.

Flowchart of 3-Tier Architecture:

       [Client] --> [Application Server] --> [Database Server]
                          ↑                          ↑
                          |                          |
                   Business Logic            Data Processing

Advantages:

Better scalability as each layer can be scaled independently.
Improved security and maintainability because the database and application logic are separated.
Easy to update each layer without affecting others.

Disadvantages:

More complex to design and maintain.
Slower communication due to the multiple layers.

2.2. Building Blocks of Fast and Scalable Data Access Concepts

When building large-scale systems, performance and scalability become critical. Web applications must be able to handle large volumes of data and requests. The following building blocks are used to improve data access speed and scalability.

2.2.1. Caches, Proxies, Indexes, Load Balancers, Queues

Let's break down each of these components:

Caches:
- Caching stores frequently requested data in memory to reduce the time it takes to fetch data repeatedly.
- Example: When a user requests a web page, instead of generating it from scratch, the server can retrieve the page from the cache.
Flowchart for Caching:
```
User Request -> Check Cache -> If Cache Hit -> Return Cached Data
                      |
                  If Cache Miss -> Generate Data -> Store in Cache
```
Benefits: Faster response time, reduced load on the server.
Proxies:
- A proxy server sits between the client and the server and forwards requests to the backend server. It helps to handle load and provide security, content filtering, and caching.
- Example: A reverse proxy like Nginx can distribute client requests to different servers.
Indexes:
- Indexes are data structures that allow for fast retrieval of data in a database. It’s like a book's index that helps locate the information quickly without having to read the entire book.
- Example: Indexing columns in a database allows fast searching and querying.
Load Balancers:
- A load balancer distributes incoming requests evenly across multiple servers to prevent any single server from being overloaded.
- It helps improve scalability and availability by balancing the workload.
Flowchart for Load Balancing:
```
User Request -> Load Balancer -> Distribute Requests -> Multiple Servers
```
Benefits: Ensures no single server is overwhelmed, improves application availability and fault tolerance.
Queues:
- A queue is used to manage requests in a web application in an orderly manner. Instead of processing all requests simultaneously, the system can handle them one by one or in batches.
- Example: RabbitMQ or Amazon SQS is used to manage task queues that process background tasks.
Flowchart for Queues:
```
Request Arrives -> Add to Queue -> Worker Processes Request -> Response Sent
```
Benefits: Prevents server overload, ensures tasks are processed efficiently.

2.3. Web Application Architecture (WAA)

Web Application Architecture (WAA) refers to the structure and components used in building a web-based application. It involves not just the front-end and back-end but also various middleware, databases, and communication protocols.

Components of WAA:

Client Side (Front-End):
- The user interface where users interact with the application. It includes HTML, CSS, JavaScript, and libraries like React or Angular.
- The front-end is responsible for presenting data and sending requests to the back-end.
Server Side (Back-End):
- The back-end consists of the web server (e.g., Apache or Nginx) and the application server (e.g., Node.js, Django, or Ruby on Rails).
- It processes incoming requests, runs business logic, interacts with databases, and sends back the required data.
Database:
- The database stores all application data and is accessed by the back-end.
- Examples include MySQL, MongoDB, and PostgreSQL.
Middleware:
- Middleware are software layers that sit between the client and server, providing additional functionality like authentication, logging, and request processing.

How WAA Works:

A user interacts with the front-end (UI), which sends requests to the server-side.
The server processes the request, executes business logic, queries the database, and sends back a response.
The response is rendered on the front-end for the user.

Flowchart of Web Application Architecture (WAA):

    [Client (Browser)]
        |
    Send Request (UI)
        |
    [Web Server]  -----> [Application Server]  -----> [Database]
        |                          |                        |
  Response to Client -----> Business Logic -----> Data Fetch/Store

Benefits of WAA:

Separation of concerns: Front-end, back-end, and database are distinct.
Scalability: Each component can be scaled independently.
Flexibility: Multiple technologies can be used in different layers.

Conclusion:

In this unit, we learned about web systems architecture, including the client/server architecture, 3-tier architecture, and how data access components like caches, proxies, indexes, and load balancers enhance system performance. We also covered the web application architecture (WAA), which brings together the front-end, back-end, database, and middleware to deliver a smooth and scalable web experience.

UNIT 2: Web Systems Architecture