လေ့ကျင့်ခန်း — အထင်လွဲစရာများနှင့် Web Architecture Decision Guide

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

ဒီ နောက်ဆုံး lesson က အလုပ် နှစ်ခု လုပ်ပေးပါတယ် — web နဲ့ ပတ်သက်တဲ့ အထင်လွဲစရာများကို ပြင်ပေးပြီး Web Architecture Decision Guide တစ်ခု ပေးအပ်ပါတယ် — လိုအပ်ချက်အများစုကို starting point သင့်တော်တဲ့ဆီ ချိတ်ပေးထားတဲ့ table တစ်ခုပါ၊ အခုချက်ချင်း အလွတ်ကျက်ဖို့ မဟုတ်ဘဲ နောက်ပိုင်း ပြန်ကြည့်ဖို့ ရည်ရွယ်ထားပါတယ်။

• ဆက်စပ်နေတဲ့ အရာနှစ်ခုကို တူတူပဲလို့ ယူဆတာ (Internet/Web, session/cookie, authentication/authorization)
• စနစ်တစ်ခုလုံးရဲ့ အစိတ်အပိုင်းတစ်ခုကို အားလုံးလို့ ထင်တာ (website ဆိုတာ 'HTML ချည်း', backend ဆိုတာ 'database ချည်း')
• Tradeoff တစ်ခုကို false absolute တစ်ခုအဖြစ် ပြောင်းလဲလိုက်တာ ('X ဟာ Y ထက် အမြဲပိုကောင်းတယ်')

MYTH VS REALITY
---------------
MYTH:      Internet = Web
REALITY:   Internet contains Web, Email, Messaging, Games, ...

MYTH:      HTTPS = 100% secure
REALITY:   HTTPS = encrypted transport only, one layer of many

MYTH:      Logged in = Authorized for everything
REALITY:   Authentication (who you are)
           != Authorization (what you can do)

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

ဒီ course တစ်ခုလုံးထဲက စုစည်းထားတဲ့ အထင်လွဲစရာတွေကို အစောပိုင်းကတည်းက ပြင်ထားသင့်ပါတယ်။ တစ်ခုချင်းစီဟာ အပြင်ယောင်အားဖြင့် ကျိုးကြောင်းညီညီ ဖြစ်နေတတ်လို့ ပျံ့နှံ့သွားတာပါ — ပြင်ဆင်ချက်ကသာ shortcut က ချန်ခဲ့တဲ့ အသေးစိတ်ကို ပြန်ပြည့်စုံစေတာ ဖြစ်ပါတယ်။

• "Internet နဲ့ Web ဟာ တစ်ခုတည်းပဲ" — မှားပါတယ်။ Internet ဆိုတာ ကမ္ဘာတစ်ဝှမ်း device တွေကို ချိတ်ဆက်ပေးတဲ့ physical/network infrastructure ဖြစ်ပြီး Web ဆိုတာ email, messaging, online game တွေနဲ့ အတူ ဒီအပေါ်မှာ တည်ဆောက်ထားတဲ့ service တစ်ခုပဲ ဖြစ်ပါတယ်။
• "Website ဆိုတာ HTML file တစ်ခုပဲ" — မှားပါတယ်။ Site အစစ်အများစုမှာ ဒီ HTML နောက်ကွယ်မှာ server, database, API, authentication တွေပါ အလုပ်လုပ်နေကြပါတယ်။
• "Frontend ဆိုတာ CSS ပဲ" — မှားပါတယ်။ Frontend မှာ layout, styling အပြင် user click နှိပ်တဲ့ interactive logic, application behavior တွေပါ ပါဝင်ပါတယ်။
• "Backend ဆိုတာ database ပဲ" — မှားပါတယ်။ Backend က business logic, authentication, API endpoint, file handling တွေပါ ကိုင်တွယ်ပေးပြီး database ကတော့ သူ ဆက်သွယ်နေတဲ့ အစိတ်အပိုင်းတစ်ခုပဲ ဖြစ်ပါတယ်။
• "Domain နဲ့ hosting ဟာ တစ်ခုတည်းပဲ" — မှားပါတယ်။ Domain ဆိုတာ register လုပ်ထားတဲ့ နာမည်ဖြစ်ပြီး hosting ဆိုတာ site ရဲ့ file တွေ တကယ်နေတဲ့ server space ပါ — provider မတူလည်း နှစ်ခုစလုံး လိုပါတယ်။
• "DNS က hosting ပေးတယ်" — မှားပါတယ်။ DNS က domain name ကို server address မှန်မှန်ဆီ ညွှန်ပြပေးရုံပဲ ဖြစ်ပြီး site ရဲ့ file ကို ကိုယ်တိုင် သိမ်းမထားပါဘူး၊ serve လည်း မလုပ်ပါဘူး။
• "HTTPS ဆိုရင် 100% လုံခြုံတယ်" — မှားပါတယ်။ HTTPS က browser နဲ့ server ကြား connection ကို encrypt လုပ်ပေးရုံပဲ ဖြစ်ပြီး password အားနည်းမှု၊ phishing၊ application ကိုယ်တိုင်ရဲ့ bug တွေကို ဘာမှ မကာကွယ်ပေးပါဘူး။
• "Cookie အားလုံးဟာ tracking cookie ချည်းပဲ" — မှားပါတယ်။ Cookie အများစုက login state ထိန်းထားတာ၊ cart item မှတ်ထားတာ၊ preference သိမ်းထားတာအတွက်ပဲ ရှိပြီး tracking ရည်ရွယ်ချက် လုံးဝ မပါတာလည်း အများကြီးပါ။
• "Session ဆိုတာ cookie ပဲ" — အပြည့်အဝ မှန်ပါဘူး။ Session ဆိုတာ server-side state ဖြစ်ပြီး cookie ကတော့ အဲဒီ state ကို ပြန်ညွှန်းတဲ့ reference ID ကို သယ်ဆောင်ပေးရုံပဲ ဖြစ်လေ့ရှိပါတယ်။
• "Login ဝင်ထားရင် အားလုံးကို ခွင့်ပြုချက်ရတယ်" — မှားပါတယ်။ Authentication က မင်းဘယ်သူဖြစ်တယ်ဆိုတာ အတည်ပြုပေးပြီး authorization ကတော့ ဘာလုပ်ခွင့်ရှိလဲဆိုတာ သီးခြား ဆုံးဖြတ်ပေးတာပါ — login ဝင်ထားတာနဲ့ ခွင့်ပြုချက် အားလုံး ရမှာ မဟုတ်ပါဘူး။
• "REST API နဲ့ backend ဟာ တစ်ခုတည်းပဲ" — မှားပါတယ်။ API ဆိုတာ backend က ဖော်ပြပေးတဲ့ interface ဖြစ်ပြီး backend ကတော့ အဲဒီ interface နောက်ကွယ်က logic, data, service တွေ ပါဝင်တဲ့ ပိုကျယ်ပြန့်တဲ့ စနစ်ပါ။
• "GraphQL ဟာ REST ထက် အမြဲပိုကောင်းတယ်" — မှားပါတယ်။ GraphQL က flexible ဖြစ်တဲ့ nested data requirement တွေနဲ့ ကိုက်ညီပြီး REST ကတော့ straightforward CRUD-style API တွေအတွက် ရိုးရှင်းပြီး လုံလောက်လေ့ ရှိပါတယ်။
• "SSR ဟာ CSR ထက် အမြဲပိုမြန်တယ်" — မှားပါတယ်။ SSR က first paint ကို လျှော့ပေးနိုင်ပေမယ့် server နှေးတာ (သို့) request တစ်ခုချင်းစီအတွက် အလုပ်များနေတာက cache ကောင်းကောင်းလုပ်ထားတဲ့ CSR app ထက် ပိုနှေးသွားစေနိုင်ပါတယ်။
• "WebSocket သုံးရင် HTTP မလိုတော့ဘူး" — မှားပါတယ်။ WebSocket connection တွေကို HTTP handshake အစနဲ့ စတင်ညှိနှိုင်းလေ့ ရှိပြီး app အများစုက real-time မဟုတ်တဲ့ အရာအားလုံးအတွက် HTTP ကိုပဲ ဆက်သုံးနေကြဆဲပါ။
• "PWA ဟာ native app နဲ့ အတူတူပဲ" — မှားပါတယ်။ PWA ဆိုတာ install လုပ်လို့ရတာ၊ offline အလုပ်လုပ်နိုင်တာလို app ပုံစံ feature ပါတဲ့ web app တစ်ခုပါ — ဒါပေမယ့် browser engine ထဲမှာပဲ run နေဆဲဖြစ်ပြီး native platform အပြည့်အစုံ compile ဖြစ်မသွားပါဘူး။

• Web နဲ့ ပတ်သက်တဲ့ အထင်လွဲစရာအများစုက ဆက်စပ်နေတဲ့ အရာနှစ်ခုကို တစ်ခုတည်းဖြစ်အောင် ချုံ့လိုက်တာ၊ အစိတ်အပိုင်းတစ်ခုကို စနစ်တစ်ခုလုံးလို့ ထင်တာ၊ tradeoff ကို false absolute အဖြစ် ပြောင်းလိုက်တာတွေကနေ လာပါတယ်။
• Authentication, authorization, session, cookie ဆိုတာတွေဟာ မကြာခဏ ရောထွေးလေ့ရှိတဲ့ အတွဲတွေပါ — တစ်ခုချင်းစီက တကယ့် ကွဲပြားတဲ့ role ကို ကစားနေကြပါတယ်။
• Web Architecture Decision Guide က လိုအပ်ချက်အများစုအတွက် ကျိုးကြောင်းညီညီ starting point တွေ ပေးထားပါတယ် — project တိုင်း လိုက်နာရမယ့် fixed rule မဟုတ်ပါဘူး။

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

const misconceptionLookup = {
  "internet-is-web":
    "False. The Internet is the network of connected computers; the Web is one service that runs on it, alongside email, messaging, and gaming.",
  "website-is-html-file":
    "False. Most real sites also need a server, a database, APIs, and authentication behind that HTML.",
  "https-is-100-percent-secure":
    "False. HTTPS encrypts the connection; it does not stop weak passwords, phishing, or bugs in the app itself.",
  "logged-in-means-authorized":
    "False. Authentication proves who you are; authorization decides what you are allowed to do next.",
  "graphql-always-better-than-rest":
    "False. GraphQL suits flexible, nested data needs; REST is often simpler for straightforward CRUD APIs.",
  "ssr-always-faster-than-csr":
    "False. SSR can shorten first paint, but a slow server or heavy per-request work can make it slower overall.",
  "pwa-is-same-as-native-app":
    "False. A PWA is a web app with app-like features; it still runs in a browser engine, not the full native platform."
};

function explainMisconceptions(keys) {
  return keys.map((key) => {
    const explanation = misconceptionLookup[key];
    return explanation
      ? `${key}: ${explanation}`
      : `${key}: no explanation on file yet`;
  });
}

const toCheck = [
  "internet-is-web",
  "https-is-100-percent-secure",
  "logged-in-means-authorized",
  "ssr-always-faster-than-csr"
];

for (const line of explainMisconceptions(toCheck)) {
  console.log(line);
}

internet-is-web: မှားပါတယ်။ Internet ဆိုတာ ချိတ်ဆက်ထားတဲ့ computer တွေရဲ့ network ဖြစ်ပြီး Web ဆိုတာ email, messaging, game တွေနဲ့ အတူ ဒီအပေါ်မှာ run နေတဲ့ service တစ်ခုပါ။
https-is-100-percent-secure: မှားပါတယ်။ HTTPS က connection ကို encrypt လုပ်ပေးရုံပဲ ဖြစ်ပြီး password အားနည်းမှု၊ phishing၊ app ကိုယ်တိုင်ရဲ့ bug တွေကို မတားဆီးပေးပါဘူး။
logged-in-means-authorized: မှားပါတယ်။ Authentication က မင်းဘယ်သူဖြစ်တယ်ဆိုတာ သက်သေပြပေးပြီး authorization ကတော့ ဘာလုပ်ခွင့်ရှိလဲဆိုတာ ဆုံးဖြတ်ပေးတာပါ။
ssr-always-faster-than-csr: မှားပါတယ်။ SSR က first paint ကို လျှော့ပေးနိုင်ပေမယ့် server နှေးတာ (သို့) request တစ်ခုချင်းစီမှာ အလုပ်များနေတာက overall အနေနဲ့ ပိုနှေးစေနိုင်ပါတယ်။

MDN Web Docs -- How the Web Works — How the Web Works

Web Development Glossary — အသုံးများသော ဝေါဟာရများ

Web Architecture Decision Guide