DEV Community: Moinul Islam

Stateless vs Stateful Web Architecture

Moinul Islam — Thu, 21 May 2026 10:55:30 +0000

what ACTUALLY happens at each step. Let me break it down completely:

🔴 WHAT IS "STATE"?

"State" is simply information a server needs to remember about you.

When you log into a website, the server needs to know:

Who are you?
Are you authenticated?
What's in your cart?
What are your preferences?

That remembered data = state.

Simply think of it like this:

👨‍🍳 Stateful server === A waiter who remembers your usual order
🏧 Stateless server === An ATM that needs your card every single time

🔴 STATEFUL ARCHITECTURE — The Problem

In a stateful system, each server stores session data for specific users.

User A  →  always Server 1
User B  →  always Server 2
User C  →  always Server 3

Now watch what happens in REAL scenarios:

❌ Scenario 1: Wrong Server

User A's request accidentally gets routed to Server 2.
Server 2 has NO idea who User A is.
Result? Authentication fails. User gets logged out.

❌ Scenario 2: Adding a New Server

Traffic is growing. You spin up Server 4.
But wait, you now have to migrate sessions.
Some users get logged out mid-session during migration.
The load balancer needs sticky session rules for the new server.
What should be a 5-minute task becomes an operational nightmare.

❌ Scenario 3: Server Crash

Server 1 goes down at 2am.
Every user whose session was on Server 1?
Logged out instantly. Session data? Gone forever.
They wake up and have to start over.

Root cause: State is trapped inside individual servers.

This is called "Sticky Sessions" — forcing every request from one user to always hit the same server. Load balancers support it, but it adds overhead, complexity, and fragility.

🟢 STATELESS ARCHITECTURE — The Fix

The solution is elegant:

Move ALL session data out of the servers and into a Shared Data Store (Redis, Memcached, SQL, or NoSQL)

Now watch the same scenarios play out:

✅ Scenario 1: Wrong Server

User A's request hits Server 2 instead of Server 1.
Server 2 simply fetches User A's session from Redis in ~1ms.
Authentication passes. Page loads. User notices nothing.

✅ Scenario 2: Adding a New Server

Spin up Server 4.
It immediately starts handling traffic.
No session migration. No sticky rules. No downtime.
This is Auto-Scaling — adding/removing servers based on traffic automatically.

✅ Scenario 3: Server Crash

Server 1 crashes at 2am.
Load balancer stops routing to it instantly.
Servers 2, 3, 4 continue serving all users.
Sessions are still safe in the shared store.
Users experience... absolutely nothing.

🏗️ THE FULL MODERN SYSTEM — Step by Step

A production-ready stateless system works like this:

1️⃣ User Makes a Request

The browser hits DNS to find the server address.
Static files (images, CSS, JS) are served from a CDN — a network of servers located close to the user geographically, so content loads fast.

2️⃣ Load Balancer

Distributes incoming requests evenly across all available web servers.
Because servers are stateless, it doesn't matter which server gets the request.

3️⃣ Web Servers Fetch Session from Shared Storage

The server checks the Cache (Redis/Memcached) first — blazing fast.
If not cached, it queries the database.
Session data is always available, always consistent.

4️⃣ Auto-Scaling

⚠️ This is ONLY possible because servers hold no state.

5️⃣ Master / Slave Database Replication

Writes  →  Master DB
Reads   →  Slave DB 1  |  Slave DB 2  |  Slave DB 3

Slaves replicate data from the Master continuously.
This separates read and write load — dramatically improving performance at scale.

6️⃣ Cache Layer (Redis / Memcached)

Type	Speed
Cache hit	~1ms
Database query	~10–100ms

A good cache strategy can reduce DB load by 80%+.

💡 KEY TAKEAWAY

Stateless architecture isn't just a "best practice."

It's what allows companies like Netflix, Uber, and Amazon to handle millions of requests per second without crashing — because no single server holds anything irreplaceable.

The rule is dead simple:

👉 Keep your web servers dumb. Let the data layer be smart.

#SystemDesign #SoftwareEngineering #BackendDevelopment #WebDevelopment #LearningInPublic #TechEducation #CodingJourney #SystemDesignInterview

Understanding Message Queue in a Simple Way

Moinul Islam — Tue, 19 May 2026 08:55:50 +0000

A Message Queue basically works as an intermediate storage between a Producer and a Consumer. It enables asynchronous communication, meaning two services do not need to be online at the same time for the system to work properly.

*## 📌 Figure 1 — Basic Message Queue Architecture:
*

Here, the Producer publishes messages to the queue.

Then the Consumer takes messages from the queue and processes them.

Let’s take a Food Delivery App as an example:

Step 1: A customer places an order

Step 2: The app instantly saves the order in the database and sends a message to the queue

Step 3: The restaurant service later takes the order from the queue and starts processing it

Even if the restaurant server becomes busy or temporarily down, the order will not be lost. Because the message queue safely stores the messages until they are processed.

This is what makes the system scalable and reliable.

*## 📌 Figure 2 — Real-Life Example
*

In this example, Web Servers are publishing photo processing jobs to the queue.Then Photo Processing Workers consume those jobs asynchronously from the queue.

For example, when you upload a photo on Facebook or Instagram:

Image resizing
Blur effects
Sharpening
Applying filters

These tasks are not processed instantly. The web server receives the user request and pushes the job into the queue.

Background workers then take the jobs from the queue and process them asynchronously.

One of the biggest advantages here is scalability.

When image uploads increase:

→ More workers can be added

When traffic decreases:

→ Workers can be reduced to save resources

That’s why Message Queue is such an important concept in modern microservices architecture.

SystemDesign #MessageQueue #Microservices #Scalability #SoftwareEngineering

Understanding Hoisting in JavaScript

Moinul Islam — Sun, 15 Jun 2025 11:52:06 +0000

What is Hoisting?
Hoisting is JavaScript's default behavior of moving declarations (not initializations) to the top of their scope during the compile phase.

How Hoisting Works (Two Phases)?

1. Compile Phase
Before executing your code, JavaScript scans the entire scope and sets up memory for all declared variables and functions:

var
- Declaration is hoisted and initialized as undefined
- You can access it before the line, but the value will be undefined
let and const
- Declaration is hoisted, but not initialized
- They stay in a Temporal Dead Zone (TDZ) until their actual line
- Accessing them before declaration throws a ReferenceError
Function Declarations
- The entire function (name + body) is hoisted
- You can safely call the function before its declaration

2. Execution Phase
Now JavaScript executes your code line-by-line:

var variables receive their assigned value
let / const are initialized at their declaration line
Using let / const before this point causes an error due to TDZ
Hoisted functions (declared with function) can be called anytime

TDZ (Temporal Dead Zone)
let and const are hoisted, so you can’t use them before the line they are declared or it gives an error.

console.log(a);        // undefined (var is hoisted)
console.log(b);        // ReferenceError (let is in TDZ)
console.log(greet());  // "Hello" (function is hoisted)

var a = 10;
let b = 20;

function greet() {
  return "Hello";
}

var sayHi = function () {
  return "Hi";
};

console.log(sayHi());  // "Hi" (works only after assignment)
sole.log("Bye!");
};

HIDDEN WEBSITES FOR PROGRAMMERS

Moinul Islam — Tue, 25 Jun 2024 09:12:49 +0000

devdocs.io

DevDocs brings together numerous API documentation in a single, searchable interface. You will find docs related to various programming languages and technologies in one place.

css-tricks.com
You can master your web development skills by learning everything about CSS from this website. If you didn't already know, CSS is what makes pages on the web look beautiful.

overapi.com
OverAPI is one of the most beautiful and useful websites for all developers. This website has cheat sheets for the majority of programming languages. Please take a look at it right now.