Website, Web App, နဲ့ Web vs Internet

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

"Web" နဲ့ "Internet" ကို လူတော်တော်များများ တစ်ခုတည်းလို့ ထင်တတ်ကြပေမယ့် တကယ်တော့ မတူပါဘူး။ Internet ဆိုတာ underlying network infrastructure ဖြစ်ပြီး Web ကတော့ ဒီ infrastructure ပေါ်က service တစ်ခုသက်သက်ပါ။

• Web — browser နဲ့ page/resource ကြည့်ရှုတဲ့ system
• Email — mail server ကြားက message ပို့/လက်ခံခြင်း
• Messaging — real-time chat/instant message service
• File transfer — file ကို server ကြားလွှဲပြောင်းခြင်း
• Online games — game server နဲ့ တိုက်ရိုက် ဆက်သွယ်ခြင်း

Website ဆိုတာ browser ကနေ access လုပ်နိုင်တဲ့ page/resource စုစည်းမှုပါ၊ content ဗဟိုပြုပါတယ်။ Web application ကတော့ interactivity ပိုများပြီး user account, state, action တွေနဲ့ အလုပ်လုပ်ပါတယ်။

• Website ဘက်ပိုနီးစပ် — blog, documentation site, online store
• Web application ဘက်ပိုနီးစပ် — dashboard, SaaS product, social network

Static site ဆိုတာ prebuilt file တွေကို တိုက်ရိုက် ပို့ပေးတာပါ။ Dynamic site ကတော့ user, database, request, auth state အလိုက် content ကို on-the-fly ထုတ်ပေးတာပါ။

INTERNET vs WEB, STATIC vs DYNAMIC
----------------------------------
INTERNET (the network)
  |-- Web (browser + pages/resources)
  |-- Email
  |-- Messaging
  |-- File transfer
  `-- Online games

STATIC              DYNAMIC
Browser             Browser
  |                   |
  v                   v
Static Files        Server
(same every time)      |
                        v
                    App Logic
                        |
                        v
                    Database

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

code ဥပမာမှာ site တစ်ခုကို describe လုပ်တဲ့ object ကို input အဖြစ်ယူပြီး website-like/web-app-like နဲ့ static/dynamic နှစ်မျိုးလုံး classify လုပ်တဲ့ function ကို run ကြည့်ပါမယ်။

• Internet ဟာ network infrastructure ဖြစ်ပြီး Web ဟာ ဒီအပေါ်က service တစ်ခုသက်သက်ပါ
• Website vs web application ဟာ strict boundary မဟုတ်ဘဲ spectrum တစ်ခုပါ
• Static ဆိုတာ prebuilt file ပို့တာ၊ dynamic ဆိုတာ request အလိုက် content ထုတ်ပေးတာပါ

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

function classifySite(site) {
  const { hasUserAccounts, hasDatabase, contentChangesPerUser } = site;

  const interactivityScore =
    (hasUserAccounts ? 1 : 0) +
    (hasDatabase ? 1 : 0) +
    (contentChangesPerUser ? 1 : 0);

  const nature = interactivityScore >= 2 ? "web application" : "website";
  const behavior =
    hasDatabase || contentChangesPerUser ? "dynamic" : "static";

  return { nature, behavior };
}

const personalBlog = {
  hasUserAccounts: false,
  hasDatabase: false,
  contentChangesPerUser: false,
};

const newsSite = {
  hasUserAccounts: false,
  hasDatabase: true,
  contentChangesPerUser: false,
};

const dashboardApp = {
  hasUserAccounts: true,
  hasDatabase: true,
  contentChangesPerUser: true,
};

for (const [name, site] of [
  ["Personal blog (hand-written HTML)", personalBlog],
  ["News site (loads articles from a database)", newsSite],
  ["Analytics dashboard (per-user data)", dashboardApp],
]) {
  const result = classifySite(site);
  console.log(`${name} -> ${result.nature}, ${result.behavior}`);
}

Personal blog (hand-written HTML) -> website, static
News site (loads articles from a database) -> website, dynamic
Analytics dashboard (per-user data) -> web application, dynamic

Wikipedia — World Wide Web — How the Web Works