0. Web Architecture 101

Three-Level Architecture

Here’s the most basic three-level architecture:

---
config:
  theme: base
  themeVariables:
    nodeTextColor: "#FFFFFF"
    primaryColor: "#000000"
    lineColor: "#FFFFFF"
    edgeLabelBackground: "#000000"
  gitGraph:
    showBranches: false
---

graph LR
	A[User] ---> B
	B[Web application] ---> C
	C[Database]

classDef default fill:#000000,stroke:#FFFFFF,color:#FFFFFF;

This is fine in theory, but real life doesn’t work this way. There are many users, each with different needs, spread across various locations. This is where additional components of a web application come into play.

It’s kinda funny how you can take the same basic graph and tweak it a little to represent real-world complexity. But in reality, web applications involve way more moving parts.

Check out these sources for a deeper dive into real-world web architectures:

../../Pasted image 20250317113811.png

Key Components of a Web Application

Component Description
DNS (Domain Name System) Translates domain names (e.g., google.com) into IP addresses (e.g., 85.129.83.120), acting as the internet’s "phone book."
Load Balancer Distributes incoming traffic across multiple servers, enabling horizontal scaling and fault tolerance.
Web Application Servers Execute business logic, handle user requests, and interact with databases and other services. Implemented using languages/frameworks like Node.js (Express), Ruby (Rails), and PHP (Laravel).
Database Servers Store and manage structured data using SQL (relational) or NoSQL (non-relational) databases. Examples: MySQL, PostgreSQL, MongoDB.
Caching Service Stores frequently accessed data for quick retrieval, reducing computation and database load. Common tools: Redis, Memcache.
Job Queue & Servers Process asynchronous tasks (e.g., email sending, indexing, data processing) using job queues like RabbitMQ or AWS SQS.
Full-text Search Service Enables fast searching of text-based data using inverted indexes. Popular tools: Elasticsearch, Apache Solr.
Services (Microservices) Modular components handling specific tasks like authentication, payments, or data processing. Examples: Account service, content service, payment service.
Data Pipeline Collects, processes, and analyzes event data. Uses tools like AWS Kinesis, Kafka, and Redshift for storage and analytics.
Cloud Storage Stores and retrieves data via a RESTful API. Common provider: AWS S3.
CDN (Content Delivery Network) Distributes static assets (CSS, JavaScript, images, videos) across global servers for faster loading times.

Web Services on Cloud

For a more cloud-centric perspective, here’s a great reference:
Cloud-Based Web Services

../../Pasted image 20250317114401.png

Azure Web Architecture

Microsoft has an excellent breakdown of modern web architectures on Azure:
Azure Web Architecture