Component-Based Architecture ဆိုတာဘာလဲ
Component ဆိုတာ ဘာလဲ?
Section titled “Component ဆိုတာ ဘာလဲ?”Component ကို အလွယ်ဆုံး ဥပမာပေးရရင် “ကလေးတွေဆော့တဲ့ လီဂို (LEGO) တုံးလေးများ” နဲ့ တူပါတယ်။
LEGO တုံးလေးတွေနဲ့ ရဲတိုက်ကြီးတစ်ခု ဆောက်မယ်ဆိုပါစို့။ ရဲတိုက်ကြီးတစ်ခုလုံးကို ပလပ်စတစ်အကြီးကြီး တစ်တုံးတည်းနဲ့ ပုံလောင်းပြီး ထုတ်လုပ်လိုက်တာမျိုး မဟုတ်ပါဘူး။ အစားထိုးလို့ရတဲ့၊ နေရာရွှေ့လို့ရတဲ့၊ ပုံစံတူ ထပ်ခါထပ်ခါ ပြန်သုံးလို့ရတဲ့ အတုံးလေးတွေ (Bricks) နဲ့ စုစည်း တည်ဆောက်ထားတာပါ။
Software ရေးတဲ့အခါမှာလည်း ဒီအတိုင်းပါပဲ။ Web Page တစ်ခုလုံးကို HTML ဖိုင် အရှည်ကြီး တစ်ခုတည်းနဲ့ အစအဆုံး ရေးမယ့်အစား၊ သေးငယ်တဲ့ အစိတ်အပိုင်းလေးတွေ (Components) အဖြစ် ခွဲထုတ်လိုက်ပါတယ်။
ButtonComponentNavbarComponentProductCardComponent
ဒီလို Component လေးတွေကို တစ်ခုနဲ့တစ်ခု ပေါင်းစပ် (Compose) လိုက်တဲ့အခါမှာတော့ ပြီးပြည့်စုံတဲ့ Web Page ကြီးတစ်ခု ဖြစ်လာပါတယ်။
Component တစ်ခုရဲ့ အနှစ်သာရ (The Core Concept)
Section titled “Component တစ်ခုရဲ့ အနှစ်သာရ (The Core Concept)”Component တစ်ခုမှာ အဓိက အချက် (၃) ချက် ပါဝင်လေ့ ရှိပါတယ် (သီးခြား စုစည်းထားခြင်း - Encapsulation):
- Structure (HTML): သူက ဘယ်လို ပုံစံ ရှိမလဲ? (ဥပမာ - Button ဆိုရင်
<button>tag ပါမယ်) - Style (CSS): သူက ဘယ်လို အရောင်၊ ဘယ်လို ဒီဇိုင်း ရှိမလဲ? (ဥပမာ - အပြာရောင်၊ ထောင့်ကွေးကွေး ပုံစံ)
- Behavior (JavaScript): သူက ဘာအလုပ် လုပ်နိုင်မလဲ? (ဥပမာ - နှိပ်လိုက်ရင် Form တင်ပေးမယ်)
အရင်ခေတ်က HTML, CSS, JS ကို ဖိုင်တွေ သီးခြားစီ ခွဲရေးခဲ့ကြပေမယ့်၊ အခု Component ခေတ်မှာတော့ ဒီ ၃ ခုလုံးကို “Component တစ်ခု” အနေနဲ့ တစ်ပေါင်းတည်း စုစည်းထားလိုက်ပါတယ်။ ဒါကြောင့် Button Component ကို လှမ်းခေါ်သုံးလိုက်တာနဲ့ သူ့ရဲ့ ဒီဇိုင်း (CSS)၊ သူ့ရဲ့ အလုပ်လုပ်ပုံ (JS) တွေပါ တပါတည်း အသင့် ပါလာမှာပါ။
Monolithic vs Component-Based (ဟောင်း နဲ့ သစ် နှိုင်းယှဉ်ချက်)
Section titled “Monolithic vs Component-Based (ဟောင်း နဲ့ သစ် နှိုင်းယှဉ်ချက်)”| အကြောင်းအရာ | Monolithic (Old Way) | Component-Based (Modern Way) |
|---|---|---|
| ဖွဲ့စည်းပုံ | Page တစ်ခုလုံးစာကို HTML ဖိုင် တစ်ခုတည်းမှာပဲ အကုန်ရေးတယ်။ | Page တစ်ခုကို Component အသေးလေးတွေနဲ့ ပေါင်းစပ် ဖွဲ့စည်းတယ်။ |
| ပြုပြင်ခြင်း | တစ်နေရာက Code ကို ပြင်လိုက်ရင် မဆိုင်တဲ့ တခြားနေရာတွေပါ ထိခိုက်နိုင်တယ်။ | Component တစ်ခုကို ပြင်လိုက်ရင် အဲ့ဒီ Component ကို သုံးထားတဲ့ နေရာတိုင်းမှာ အလိုလို လိုက်ပြောင်းသွားတယ်။ |
| ပြန်လည်အသုံးပြုမှု | Code တွေကို လိုတဲ့နေရာမှာ Copy-Paste လိုက်လုပ်ရတယ်။ | <Button /> ဆိုပြီး နာမည်လေး လှမ်းခေါ်သုံးလိုက်ရုံပါပဲ။ |
| ပူးပေါင်းဆောင်ရွက်မှု | ဖိုင်တစ်ခုတည်းမှာ လူတွေ အများကြီး ဝိုင်းရေးရလို့ ရှုပ်ထွေးတယ်။ | တစ်ယောက်က Navbar ရေး၊ နောက်တစ်ယောက်က Sidebar ရေး၊ သီးခြားစီ အလုပ်လုပ်လို့ ရတယ်။ |