#2 How Systems Communicate – Frontend, Backend, Networking Basics, APIs

The Fast-Food Drive-Thru Analogy

Aditi pulled up to her favourite fast-food drive-thru. She placed her order at the speaker, paid at the next window, and finally collected her food at the last counter.

Smooth, efficient, and structured.

Now imagine if this process was chaotic—no clear order, miscommunication between the cashier and kitchen, and missing items. Frustrating, right?

This is exactly how systems communicate. Just like a well-run drive-thru, computers need structured communication between different parts to function correctly.

What is System Communication?

System communication refers to how different components of a software system exchange information.

Think of it as a conversation: the frontend (what users see) talks to the backend (where logic happens). The backend, in turn, talks to databases and other services.

To make this possible, systems use networking, protocols, and APIs.

Frontend and Backend Communication

The frontend is the interface users interact with. The backend processes requests, handles business logic, and interacts with databases.

1. Frontend (Client-Side)

Runs on a browser (Chrome, Safari) or a mobile device.
Built with HTML, CSS, and JavaScript frameworks (React, Angular, Vue)(majorly).
Makes API calls to request data from the backend.

2. Backend (Server-Side)

Runs on a server (Node.js, Django, Spring Boot, Express, etc.).
Handles authentication, database interactions, and business logic.
Exposes APIs for the frontend to communicate with.

Networking Basics – How Data Travels

When you visit a website, how does your request travel from your browser to the server?

This happens through the internet using networking fundamentals.

1. IP Addresses and DNS

Every computer has an IP address (like a home address). But remembering numbers is hard, so DNS (Domain Name System) translates websites (like google.com) into IP addresses.

2. Client-Server Model

The client (browser) sends a request to a server. The server processes it and sends back a response.

Example: You search for a product on Amazon. Your request goes to Amazon’s server, which fetches results and returns them.

3. Request-Response Cycle

Request: Browser sends an HTTP request to the backend.
Processing: Backend fetches data from the database.
Response: Backend sends data back to the frontend.

Each request takes milliseconds, but it’s a crucial process.

Understanding APIs – The Middleman Between Systems

APIs (Application Programming Interfaces) allow systems to communicate.

Imagine a waiter in a restaurant. You (the frontend) tell the waiter (API) what you want. The waiter passes your order to the kitchen (backend) and brings back your food (response).

1. Types of APIs

REST APIs – The most common. Uses HTTP methods like GET (fetch data), POST (send data), PUT (update data), DELETE (remove data).
GraphQL – A modern alternative that allows fetching only needed data.
WebSockets – Enables real-time communication (used in chat apps).
gRPC – A high-performance API communication method used in micro-services.

2. How APIs Work in a Web App

User clicks "Fetch Orders."
Frontend calls GET /orders API.
Backend retrieves orders from the database.
Backend sends a JSON response.
Frontend updates UI with order details.

Real-World Examples of System Communication

1. Social Media Apps

Facebook’s frontend requests posts from the backend using an API (GET /feed). The backend fetches data from multiple databases and returns it.

2. E-Commerce Websites

Amazon’s frontend requests product details (GET /products/{id}). The backend queries a product catalog and returns structured data.

3. Ride-Sharing Apps

Uber’s mobile app sends a ride request (POST /ride). The backend assigns a driver, updates ride status, and sends real-time location updates.

Conclusion

System communication ensures applications work smoothly. The frontend and backend communicate via APIs, while networking principles handle data transfer.

Without structured communication, applications would be unreliable, slow, and inefficient.

In the next article, we’ll dive deeper into "Communication protocols like TCP, UDP, HTTP, WebSockets, and gRPC".

#system-design #code

3/2/2025

#2 How Systems Communicate – Frontend, Backend, Networking Basics, APIs

The Fast-Food Drive-Thru Analogy

Aditi pulled up to her favourite fast-food drive-thru. She placed her order at the speaker, paid at the next window, and finally collected her food at the last counter.

Smooth, efficient, and structured.

Now imagine if this process was chaotic—no clear order, miscommunication between the cashier and kitchen, and missing items. Frustrating, right?

This is exactly how systems communicate. Just like a well-run drive-thru, computers need structured communication between different parts to function correctly.

What is System Communication?

System communication refers to how different components of a software system exchange information.

Think of it as a conversation: the frontend (what users see) talks to the backend (where logic happens). The backend, in turn, talks to databases and other services.

To make this possible, systems use networking, protocols, and APIs.

Frontend and Backend Communication

The frontend is the interface users interact with. The backend processes requests, handles business logic, and interacts with databases.

1. Frontend (Client-Side)

Runs on a browser (Chrome, Safari) or a mobile device.
Built with HTML, CSS, and JavaScript frameworks (React, Angular, Vue)(majorly).
Makes API calls to request data from the backend.

2. Backend (Server-Side)

Runs on a server (Node.js, Django, Spring Boot, Express, etc.).
Handles authentication, database interactions, and business logic.
Exposes APIs for the frontend to communicate with.

Networking Basics – How Data Travels

When you visit a website, how does your request travel from your browser to the server?

This happens through the internet using networking fundamentals.

1. IP Addresses and DNS

Every computer has an IP address (like a home address). But remembering numbers is hard, so DNS (Domain Name System) translates websites (like google.com) into IP addresses.

2. Client-Server Model

The client (browser) sends a request to a server. The server processes it and sends back a response.

Example: You search for a product on Amazon. Your request goes to Amazon’s server, which fetches results and returns them.

3. Request-Response Cycle

Request: Browser sends an HTTP request to the backend.
Processing: Backend fetches data from the database.
Response: Backend sends data back to the frontend.

Each request takes milliseconds, but it’s a crucial process.

Understanding APIs – The Middleman Between Systems

APIs (Application Programming Interfaces) allow systems to communicate.

Imagine a waiter in a restaurant. You (the frontend) tell the waiter (API) what you want. The waiter passes your order to the kitchen (backend) and brings back your food (response).

1. Types of APIs

REST APIs – The most common. Uses HTTP methods like GET (fetch data), POST (send data), PUT (update data), DELETE (remove data).
GraphQL – A modern alternative that allows fetching only needed data.
WebSockets – Enables real-time communication (used in chat apps).
gRPC – A high-performance API communication method used in micro-services.

2. How APIs Work in a Web App

User clicks "Fetch Orders."
Frontend calls GET /orders API.
Backend retrieves orders from the database.
Backend sends a JSON response.
Frontend updates UI with order details.

Real-World Examples of System Communication

1. Social Media Apps

Facebook’s frontend requests posts from the backend using an API (GET /feed). The backend fetches data from multiple databases and returns it.

2. E-Commerce Websites

Amazon’s frontend requests product details (GET /products/{id}). The backend queries a product catalog and returns structured data.

3. Ride-Sharing Apps

Uber’s mobile app sends a ride request (POST /ride). The backend assigns a driver, updates ride status, and sends real-time location updates.

Conclusion

System communication ensures applications work smoothly. The frontend and backend communicate via APIs, while networking principles handle data transfer.

Without structured communication, applications would be unreliable, slow, and inefficient.

In the next article, we’ll dive deeper into "Communication protocols like TCP, UDP, HTTP, WebSockets, and gRPC".

#system-design #code

3/2/2025

#1 What is System Design? – Overview, Importance, Real-World Applications

Ever wonder how big apps handle millions of users? We'll dive into system design basics, using a coffee shop as our guide. Basically, how to build a smooth-running system, no matter the demand.

Read Full Story

#3 Communication Protocols – TCP, UDP, HTTP, WebSockets, gRPC

Ever wonder how your messages get across the internet? We'll explain communication protocols like TCP, UDP, HTTP, WebSockets, and gRPC using a simple postal service analogy. Learn how they work and when to use them.

Read Full Story

#18 WebSockets & Real-time Communication – Socket.io, SSE

Tired of refreshing? Learn about WebSockets and SSE! We'll show you how to build real-time apps like chat and live dashboards. Get instant updates and make your users happy.

Read Full Story