Scalability & Architecture — Building for the Future

"Building for the Future"

জুনিয়ররা কোড লেখে "আজকের" জন্য (কাজ করলেই হলো)। সিনিয়ররা কোড লেখে "ভবিষ্যতের" জন্য (ফিচার বাড়লে যেন কোড ভেঙে না পড়ে)।

একটি প্রজেক্ট স্কেলেবল (Scalable) তখনই বলা যায় যখন: ১. নতুন ডেভেলপার জয়েন করলে সহজেই কোড বুঝতে পারে ✅
২. নতুন ফিচার যোগ করলে পুরনো কোড ভাঙে না ✅
৩. প্রজেক্টের সাইজ ১০ গুণ বাড়লেও পারফরম্যান্স কমে না ✅

⭐ ১. Layered Approach (The 3-Layer Rule) 🏗️

যেকোনো বড় ব্যাকএন্ড বা ফুলস্ট্যাক অ্যাপে কোডকে ৩টি লেয়ারে ভাগ করা ফরজ।

A) Controller Layer (The Receptionist)

রিকোয়েস্ট গ্রহণ করে এবং রেসপন্স পাঠায়। কোনো লজিক থাকে না। userController.js

B) Service Layer (The Brain) 🧠

এখানে আসল বিজনেস লজিক থাকে। userService.js

C) Data Access / Repository Layer (The Librarian) 📚

শুধু ডাটাবেসের সাথে কথা বলে। userRepository.js

সুবিধা: MongoDB থেকে PostgreSQL এ সুইচ করলে শুধু Repository Layer চেঞ্জ করলেই হবে!

⭐ ২. Folder Structure: Feature-Based (The Senior Way) 📂

❌ Old Way (Type-Based):

src/
  ├── components/   (সব ফিচারের কম্পোনেন্ট একসাথে)
  ├── services/     
  ├── utils/

✅ Senior Way (Feature-Based):

src/
  ├── features/
  │     ├── auth/            (লগিন/রেজিস্টার)
  │     │     ├── components/
  │     │     ├── services/
  │     │     └── index.js
  │     ├── cart/            (শপিং কার্ট)
  │     └── profile/
  ├── shared/                (যা সবার দরকার)
  │     ├── components/ (Button, Input)
  │     └── utils/

🔑 Cart ফিচার ডিলিট করতে চাইলে শুধু cart ফোল্ডার ডিলিট করলেই হবে!

⭐ ৩. Clean Code: The Art of Naming ✍️

A) Meaningful Names

// ❌ Bad
const d = 10;  // d মানে কি?

// ✅ Good
const daysSinceLastLogin = 10;

B) Avoid Magic Numbers

// ❌ Bad
if (status === 2) ...

// ✅ Good
const STATUS_ACTIVE = 2;
if (status === STATUS_ACTIVE) ...

C) Early Return (Guard Clauses)

// ❌ Bad (Nested)
if (user) {
    if (user.active) { save(); }
}

// ✅ Good (Guard Clauses)
if (!user || !user.active) return;
save();

⭐ ৪. Reusability: DRY Principle (Don't Repeat Yourself) ♻️

Frontend Reusability (Component Composition)

// shared/components/Button.jsx
export const Button = ({ variant = "primary", children }) => {
    return <button className={`btn-${variant}`}>{children}</button>;
};

Logic Reusability (Custom Hooks)

// hooks/useFetch.js
export const useFetch = (url) => {
    const [data, setData] = useState(null);
    useEffect(() => {
        fetch(url).then(res => res.json()).then(setData);
    }, [url]);
    return data;
};

⭐ ৫. Scalable API Design Patterns 📡

📄 Pagination: GET /users?page=1&limit=20
🔢 Versioning: api/v1/users → api/v2/users
⏱️ Rate Limiting: 100 requests per minute

⭐ ৬. State Management Strategy (Frontend)

📝 Local State: useState

🌍 Global State: Context / Zustand

🖥️ Server State: React Query

🔗 URL State: URL Params

🧠 ৭. Senior Checklist: Production Readiness ✅

🚨 Error Boundaries: React অ্যাপ ক্র্যাশ করলে সাদা স্ক্রিন না দেখিয়ে সুন্দর এরর পেজ
📝 Logging: Sentry বা LogRocket সেটআপ
🔐 Env Variables: .env ফাইলে API Key রাখো
✨ Linting: ESLint + Prettier

🚀 অধ্যায় ২৬ সারাংশ (Checklist)

✓Architecture: ৩-লেয়ার আর্কিটেকচার (Controller-Service-Repo)
✓Structure: Feature-based ফোল্ডার স্ট্রাকচার
✓Clean Code: Guard Clauses, Meaningful Names, No Magic Numbers
✓State: Server State (React Query) vs Client State আলাদা

Next Step: আমাদের আর্কিটেকচার শেখা শেষ। এখন কোড ঠিকমতো কাজ করছে কিনা সেটা অটোমেটিক টেস্ট করতে হবে। ম্যানুয়াল টেস্টিং স্লো এবং রিস্কি। পরের অধ্যায়: "Testing JavaScript Applications (Unit, Integration, E2E)"।

JavaScript Zero to Hero