Project: ဝဘ် Architecture တစ်ခုလုံးကို Design ဆွဲခြင်း

နားလည်ထားရမယ့် အချက်

Capstone project က diagram အသစ်ကို အလွတ်ကျက်ခိုင်းတာမဟုတ်ဘဲ Advanced chapter ရဲ့ SaaS/real-time/AI/e-commerce architecture lesson တွေမှာ သုံးခဲ့တဲ့ building block တွေကိုပဲ requirement list တစ်ခုကနေ ကိုယ်တိုင် assemble ဆွဲခိုင်းပါတယ်။

စစ်ဆေးနေတဲ့ skill က composition ဖြစ်ပါတယ် — component တစ်ခုချင်းစီဟာ requirement အစစ်အမှန် တောင်းဆိုလို့ ပေါ်လာရမှာဖြစ်ပြီး ကြုံဖူးတဲ့ diagram ကို pattern-match လုပ်တာ မဟုတ်ပါဘူး။

• Authentication လိုအပ်ရင် -> auth service
• Data ကို persistent သိမ်းစရာလိုရင် -> database
• File upload လိုရင် -> object storage (database မဟုတ်ပါ)
• Notifications ပို့ရရင် -> notification service
• Realtime feature ရှိရင် -> persistent connection (WebSocket/push channel)

Client/server mental model က နောက်ကွယ်မှာ အမြဲရှိနေပါတယ် — 'backend' ဆိုတာ box တစ်ခုတည်း မဟုတ်ဘဲ requirement တွေက တကယ်တောင်းဆိုတဲ့ specialized service တွေ ပါဝင်တဲ့ backend တစ်ခုပါ။

ASSEMBLED WEB ARCHITECTURE FROM REQUIREMENTS
--------------------------------------------
FULL ARCHITECTURE: AUTH + DASHBOARD + DATABASE + UPLOAD + NOTIFY
--------------------------------------------------------------------
[User]
   |
   v
[Browser] <---- static assets ----> [CDN]
   |
   | HTTPS request (API calls)
   v
[Frontend]  (dashboard UI, served via CDN)
   |
   v
[Backend / API]
   |
   +----------------+----------------+------------------+
   |                |                |                  |
   v                v                v                  v
[Database]   [Auth service]   [Object storage]   [Notification
                                                    service]

လက်တွေ့ scenario နဲ့ ချိတ်ကြည့်မယ်

ရုပ်ပုံတစ်ခုလုံးကို တစ်ခါတည်း ဆွဲမယ့်အစား requirement list ကနေ top-down အလုပ်လုပ်ပါ။

Flag တစ်ခုကို ပြောင်းပြီး (file upload ဖျက်၊ realtime ထည့်) ပြန် run ကြည့်ပါ — component တစ်ခုတည်း ပေါ်လာ/ပျောက်သွားတာကို တွေ့ရင် mapping က one-to-one ဖြစ်နေကြောင်း သက်သေပြပါတယ်။

• Architecture design ဆိုတာ diagram တစ်ခုကို အလွတ်ကျက်ခြင်းမဟုတ်ဘဲ requirement ကနေ component ကို map လုပ်တဲ့ reasoning ဖြစ်ပါတယ်
• 'Backend' ဆိုတာ box တစ်ခုတည်းမဟုတ်ဘဲ requirement တွေက တောင်းဆိုတဲ့ specialized service အများအပြားပါဝင်တာဖြစ်ပါတယ်
• Requirement မတောင်းဆိုတဲ့ component ကို ထည့်ခြင်းနဲ့ လိုအပ်တဲ့ component ကျန်ခဲ့ခြင်းက ကွာခြားတဲ့ အမှားနှစ်မျိုးပါ

အတူတူ စမ်းရေးကြည့်မယ်

function designArchitecture(requirements) {
  const {
    needsAuth = false,
    needsDatabase = false,
    needsFileUpload = false,
    needsNotifications = false,
    needsRealtime = false,
  } = requirements;

  // Every project in this course starts from the same base: a client,
  // a CDN for static assets, a frontend, and a backend that talks to them.
  const components = ['Browser (client)', 'CDN (static assets)', 'Frontend', 'Backend / API'];

  if (needsAuth) components.push('Auth service / identity provider');
  if (needsDatabase) components.push('Database');
  if (needsFileUpload) components.push('Object storage (file uploads)');
  if (needsNotifications) components.push('Notification service');
  if (needsRealtime) components.push('Realtime channel (WebSocket / push)');

  return components;
}

const dashboardApp = designArchitecture({
  needsAuth: true,
  needsDatabase: true,
  needsFileUpload: true,
  needsNotifications: true,
  needsRealtime: false,
});

console.log('Dashboard app architecture:');
dashboardApp.forEach((c, i) => console.log(`${i + 1}. ${c}`));

const chatApp = designArchitecture({
  needsAuth: true,
  needsDatabase: true,
  needsFileUpload: false,
  needsNotifications: true,
  needsRealtime: true,
});

console.log('');
console.log('Realtime chat app architecture:');
chatApp.forEach((c, i) => console.log(`${i + 1}. ${c}`));

ဒီ lesson ရဲ့ requirement set (auth+database+upload+notifications) နဲ့ realtime chat requirement set နှစ်ခုအတွက် designArchitecture() ရဲ့ output က:

Dashboard app architecture:
1. Browser (client)
2. CDN (static assets)
3. Frontend
4. Backend / API
5. Auth service / identity provider
6. Database
7. Object storage (file uploads)
8. Notification service

Realtime chat app architecture:
1. Browser (client)
2. CDN (static assets)
3. Frontend
4. Backend / API
5. Auth service / identity provider
6. Database
7. Notification service
8. Realtime channel (WebSocket / push)

System Design Primer (GitHub) — How the Web Works