Web Development ရဲ့ ရုပ်လုံးကြီးပုံ

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

Web development ဆိုတာ HTML၊ CSS နဲ့ JavaScript ကို ရေးတာသက်သက်မဟုတ်ဘူး။ ဒါက ပုံရိပ်တစ်ခုပဲ ဖြစ်ပါတယ်။ တကယ်တော့ web technology တွေကို အသုံးပြုပြီး လူတွေ access လုပ်နိုင်တဲ့ application နဲ့ experience တွေကို တည်ဆောက်တာကို ခေါ်ပါတယ်.

search engine တစ်ခု၊ food-delivery app တစ်ခု၊ banking dashboard တစ်ခု၊ browser ထဲမှာ run နေတဲ့ game တစ်ခု — ဒါတွေအားလုံးဟာ web development ရဲ့ ရလဒ်တွေချည်းပါပဲ။ နောက်ကွယ်မှာ area အသီးသီးက ပေါင်းစပ်ပြီး အလုပ်လုပ်နေကြပါတယ်။

• Frontend — user တိုက်ရိုက်မြင်ရ၊ ထိတွေ့ရတဲ့ layout/style/interactivity
• Backend — request process လုပ်တာ၊ rule apply လုပ်တာ၊ database နဲ့ ဆက်သွယ်တာ
• Full-stack — layer နှစ်ခုစလုံးမှာ အလုပ်လုပ်နိုင်တာ (tool အားလုံး ကျွမ်းကျင်ဖို့ မလိုပါ)
• Infrastructure/Deployment — code ကို real server ပေါ်မှာ run နေအောင် လုပ်တာ
• Database — data သိမ်းဆည်း၊ ပြန်လည်ရယူတဲ့နေရာ
• API — frontend/backend/outside service တွေကြား data လဲလှယ်ဖို့ contract

အောက်က Master Flow — User to Browser to Domain to DNS to CDN/Server to Frontend/Backend to API to Database to Response to Browser Renders Page — ဟာ ဒီ course တစ်ခုလုံး ပြန်ပြီးရည်ညွှန်းနေမယ့် diagram တစ်ခုပါ။

Web Development

Web technology (browser, server, database, API) တွေကို အသုံးပြုပြီး application/experience တွေ တည်ဆောက်ခြင်း — Frontend, Backend, Database, API, Deployment အားလုံးကို ပါဝင်ပါတယ်။

Full-stack

Frontend layer နဲ့ Backend layer နှစ်ခုစလုံးမှာ အလုပ်လုပ်နိုင်တာကို ဆိုလိုတာပါ၊ tool/technology အားလုံးကို ကျွမ်းကျင်ရမယ်လို့ မဆိုလိုပါဘူး။

THE MASTER FLOW
---------------
USER
  |
  v
BROWSER
  |
  v
DOMAIN  (e.g. example.com)
  |
  v
DNS  (resolves domain -> IP address)
  |
  v
CDN / SERVER
  |
  v
FRONTEND / BACKEND
  |
  v
API  (contract for exchanging data)
  |
  v
DATABASE
  |
  v
RESPONSE  (travels back up the chain)
  |
  v
BROWSER RENDERS PAGE

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

code ဥပမာမှာ web application တစ်ခုက ဘယ် area တွေ ပါဝင်လဲ ဆိုတာကို function တစ်ခုနဲ့ classify လုပ်ပါမယ်။ boolean field ငါးခု (hasFrontend, hasBackend, hasDatabase, hasAPI, hasDeployment) ပါတဲ့ object ကို input အဖြစ်ယူပါတယ်.

ဒီလို classification ကို လက်တွေ့ project တစ်ခု စဉ်းစားတဲ့အခါ သုံးနိုင်ပါတယ် — ဘယ် area တွေ လိုအပ်မလဲ ဆိုတာ အရင်ဆုံး ခွဲခြားပေးပါတယ်။

• Web development ဆိုတာ HTML/CSS/JS ရေးတာထက် ပိုကျယ်ပြန့်တယ်
• Frontend, Backend, Full-stack, Infrastructure, Database, API က area အဓိကတွေပါ
• Master Flow diagram က ဒီ course တစ်ခုလုံးအတွက် ပြန်ပြန်ရည်ညွှန်းမယ့် mental model ဖြစ်တယ်

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

function classifyApp(app) {
  const { hasFrontend, hasBackend, hasDatabase, hasAPI } = app;

  if (hasFrontend && !hasBackend && !hasDatabase && !hasAPI) {
    return "static site";
  }
  if (hasFrontend && hasBackend) {
    return "full-stack app";
  }
  if (hasFrontend && !hasBackend) {
    return "frontend-only app";
  }
  return "backend-only service";
}

const marketingPage = {
  hasFrontend: true,
  hasBackend: false,
  hasDatabase: false,
  hasAPI: false,
  hasDeployment: true,
};

const weatherWidget = {
  hasFrontend: true,
  hasBackend: false,
  hasDatabase: false,
  hasAPI: true,
  hasDeployment: true,
};

const onlineStore = {
  hasFrontend: true,
  hasBackend: true,
  hasDatabase: true,
  hasAPI: true,
  hasDeployment: true,
};

console.log("Marketing page:", classifyApp(marketingPage));
console.log("Weather widget:", classifyApp(weatherWidget));
console.log("Online store:", classifyApp(onlineStore));

Marketing page: static site
Weather widget: frontend-only app
Online store: full-stack app

MDN Web Docs — Web development learning area — How the Web Works