Skip to content
← Back
20 min read

How to turn yourself into a React Developer

Javascript ကိုသုံးပြီး Web Development လုပ်မယ့်သူတွေအတွက် Learning Good Habit တွေကဘာလဲ၊ ဘယ်လိုချဉ်းကပ်ပုံနဲ့သွားရင် ပိုမြန်မလဲ၊ Tutorial Hell ထဲ ပိတ်မမိနေအောင် ဘယ်လိုလေ့လာသွားရမလဲဆိုတာတွေပါ။ Junior တွေအတွက် ရည်ရွယ်ပါတယ်။

#react#roadmap#guide
Contents

မာတိကာ

  1. Intro
  2. Part 1: HTML5 & CSS3
  3. Part 2: JavaScript Fundamentals
  4. Part 3: Programming Thinking
  5. Part 4: JavaScript Essentials
  6. Part 5: React & Modern Web Development
  7. Part 6: Deployment & DevOps
  8. Part 7: AI as a Learning Tool
  9. Learning Resources

Intro

VCS for Junior Developers ပညာဒါနတန်းမှာ ညီ၊ ညီမတွေ မေးတုံးက ပြောဖြစ်တာလေးကို စာအနေနဲ့ တစုတစည်းတည်း ရေးချင်စိတ်ဖြစ်လာလို့ပါ။ ရေးမှာကတော့ Javascript ကိုသုံးပြီး Web Development လုပ်မယ့်သူတွေအတွက် Learning Good Habit တွေကဘာလဲ၊ ဘယ်လိုချဉ်းကပ်ပုံနဲ့သွားရင် ပိုမြန်မလဲ၊ Tutorial Hell ထဲ ပိတ်မမိနေအောင် ဘယ်လိုလေ့လာသွားရမလဲဆိုတာတွေပါ။ Junior တွေအတွက် ရည်ရွယ်ပါတယ်။

ကျနော့်ရဲ့ Programming ခရီး

ကျနော်က ၂၀၁၆မှာ code စရေးပါတယ်။ C++ က ကျနော့်ရဲ့ အချစ်ဦးပါ။ OOP style နဲ့ ကျောင်း project တခု စရေးဖြစ်ပြီး Programming က ကိုယ့်ရဲ့ဝါသနာပဲရယ်လို့ ရှာဖွေတွေ့ရှိခဲ့ပါတယ်။ တက္ကသိုလ် တတိယနှစ်ရောက်တော့ PHP 5.5 နဲ့ Project ရေးပါတယ်။

အဲ့လိုနဲ့ ကျနော်တို့ကျောင်းက ၆နှစ် တက်ရတော့ ကိုဗစ်ဖြစ်ရာကနေ formal education က ရပ်တန့်သွားပါတယ်။ ၂၀၂၀ မှာ pandemic ကာလ အိမ်တွင်းအောင်းရချိန် Python ကို self study လေ့လာဖြစ်ပြီး Software Engineering နယ်ပယ်ကိုချဲ့ဖို့ လက်နက်တွေ စုဆောင်းပါတယ်။

အဲ့တုန်းက Code ကူရေးပေမယ့် AI လည်းမရှိပါဘူး၊ တခုခုသိချင်ရင် စာတွေ အများကြီးရှာဖတ်ရတယ်၊ Google မှာ မူးနေအောင် ရှာရတယ်၊ Code debugging and tracing ကို အများကြီးလုပ်ရတယ်။ အဲ့လိုနဲ့ ကျနော့် Programming Foundation က အတော်ခိုင်ခဲ့တယ်။ အဲ့အချိန်ထိ IT လောကတွင်းမှာပဲ တစိုက်မတ်မတ် ကျင်လည်နေဆဲပါ။

အဲ့လိုနဲ့ပဲ ၂၀၂၁ နောက်ပိုင်းကနေ ၄နှစ်ဝန်းကျင်လောက် IT ပိုင်းနဲ့ လုံးဝအဆက်ပြတ်သွားခဲ့ပါတယ်။

ကိုယ်အဆက်ပြတ်သွားတဲ့ကာလမှာပဲ World Wide Web ကလည်း တခေတ်ဆန်းသွားခဲ့ပြီ၊ AI ကလည်း အတော်ကို ခေါင်းထောင်သွားခဲ့ပြီ။ JQuery ခေတ်ကောင်းစဥ်ကာလကိုလည်း ကျနော် လွတ်သွားခဲ့တယ်၊ React ခေတ်ဦးကိုလည်း ကျနော် မကြုံခဲ့ရဘူး။

၂၀၂၅ခုနှစ် ကျနော် IT လမ်းကြောင်းပေါ်ပြန်တက်ချိန်မှာ Library တွေ၊ Framework တွေ အတော်ကို ပြည့်ပြည့်စုံစုံဖြစ်နေပြီ။ ဒါက ကောင်းကွက်လည်းဖြစ်သလို၊ ဆိုးကွက် လည်းဖြစ်တယ်။

ကောင်းကွက်: တည်ဆောက်ရတာ မြန်တယ်
ဆိုးကွက်: Legacy system တွေကို maintain လုပ်တတ်ဖို့ခက်သွားတယ်၊ အတွင်းကျကျ သိဖို့ ထပ်ကြိုးစားရတယ်

အဲ့အစွန်းနှစ်ဖက်ကို ကြားချဖို့ အတော် ကြိုးစားရပါတယ်။ ဒါကြောင့်ပဲ Junior တွေအတွက် လေ့လာရလွယ်အောင် ဒီစာစုတွေကို ရေးဖြစ်ပါတယ်။

Part 1: HTML5 & CSS3

အရင်ဆုံး Web Development နယ်ပယ်တခုကိုပဲ ဦးတည်ပြီး ပြောကြပါစို့။ Junior တိုင်း ရင်းနှီးပြီးသား HTML, CSS ကိုပဲ လုပ်ငန်းခွင်အသုံးချဖို့အထိ ဘာတွေဆက်ဖြည့်ဖို့ လိုမလဲဆိုတာကနေ စပြောပါမယ်။

1. HTML5 & CSS3

HTML ကို အတော်များများ ရင်းနှီးပြီးသားပါ။ ဒါပေမဲ့ Website တကယ်တည်ဆောက်တော့မယ်ဆိုရင် စံသတ်မှတ်ထားတဲ့ HTML5 semantic elements တွေကို ဦးစားပေးသုံးရပါတယ်။

Semantic Elements:

  • <header>
  • <nav>
  • <main>
  • <section>
  • <aside>
  • <article>

ဘာလို့ သုံးရတာလဲ?
Browser architecture အရ စံသတ်မှတ်ချက်တွေကို လိုက်နာထားတော့ Accessible Rich Internet Application (ARIA) တည်ဆောက်ရာမှာ အများကြီး အဆင်ပြေစေပါတယ်။ ဒါမှလည်း production level webpage မျိုးဖြစ်မှာပါ။

CSS ကို လွယ်တယ်ထင်ရင် မှားမယ်

နောက်ပြီးတော့ CSS ကိုကြည့်ရအောင်။ အတော်များများကို CSS ကို လွယ်တယ်ထင်ကောင်း ထင်နိုင်ပါတယ်။ CSS စလုပ်ရင် property တခုရေးတာနဲ့ result တန်းမြင်ရတော့ ပျော်တာပေါ့၊ မြန်တယ်၊ လွယ်တယ်ပေါ့။

Production Level ရေးပြီဆိုရင်

  • Responsive ဖို့ ကြိုစဥ်းစားရတာ
  • Breakpoint ယူရတာ
  • CSS ရဲ့ cascade သဘောအရ ကိုယ်သလိုမဖြစ်တာတွေနဲ့ စတိုင်ပတ်ပါပြီ

CSS ကိုလွယ်တယ်ထင်ရင် မှားမယ်လို့ အရင်ပြောရပါမယ်။ CSS ကို သေချာနားလည်ဖို့ဆိုရင် Browser မှာ ကိုယ်ရေးလိုက်တဲ့ content တခုချင်းကို Paint လုပ်တဲ့ process ကိုလည်း နားလည်အောင် လေ့လာရပါမယ်။

CSS ကို နားလည်တယ်လို့ ထင်ရင် ဒီမေးခွန်းအချို့ကို အရင်ဖြေကြည့်ပါ:

  1. Layout algorithm ဘယ်နှမျိုးရှိလဲ၊ layout တခုချင်းအတွက် CSS က ဘယ်လိုအလုပ်လုပ်လဲ။
  2. Transition မှာ display property က ဘာလို့အလုပ်မလုပ်တာလဲ။
  3. Position sticky ပေးထားပေမဲ့ ဘယ်အချိန်မှာ sticky မဖြစ်ဘူးလဲ။
  4. Flex မှာ main-axis နဲ့ cross-axis က ဘာတွေလဲ။
  5. Grid သုံးပြီး no query responsiveness ရအောင် ဘာသုံးရေးရမလဲ။
  6. Child element ကို position absolute သုံးတဲ့အခါ parent element ကို position relative ဘာကြောင့် ပေးရတာလဲ။

အရမ်းအခက်ကြီးမဟုတ်ပါဘူး။ ဒါပေမဲ့ Project များများမရေးဖူးရင်၊ CSS ကို စနစ်တကျ မလေ့လာဖူးရင် ဒီထဲက အနည်းဆုံးသုံးခုကို ဖြေနိုင်မှာမဟုတ်ပါဘူး။

CSS Framework တွေကို မသုံးခင်မှာ Vanilla CSS နဲ့ပဲ ဒါလေးတွေကို စမ်းရေးပါ။

  1. Layout ချကြည့်ပါ။ (အရင်က float, clear တို့နဲ့ ရေးရတယ်၊ အခုအဲ့တာတွေကို စမ်းဖို့မလိုတော့ပါဘူး။ flex တို့ grid တို့ရှိနေပါပြီ။)
  2. Mobile First vs Desktop First Approach နှစ်ခုလုံးနဲ့ responsive query ရေးကြည့်ပါ။
  3. Transition နဲ့ Animation ကို UI Library တွေ မသုံးသေးဘဲ ကိုယ်တိုင် အသေးလေးတွေ ရေးကြည့်ပါ။
  4. CSS Preprocessor (Sass, Less) နဲ့ CSS Methodology (BEM, SMACSS) တွေကို စမ်းသုံးကြည့်ပါ။

ဒါတွေကို လုပ်တဲ့အခါမှာ AI ကို learning tool အနေနဲ့ ကောင်းကောင်းသုံးပြီးတော့ ကိုယ့်ရဲ့ အချိန်ကို leverage လုပ်နိုင်ရင် အချိန်တိုတွင်း ခရီးအတော်ရောက်ပါလိမ့်မယ်။

Part 2: JavaScript Fundamentals

အခုအပိုင်းမှာက Javascript အကြောင်း ဦးတည်ပြောမှာပါ။ JS က Programming Language ရယ်လို့ Junior တွေ သိပြီးသားကြပါပဲနော်။ ဆိုတော့ Programming Language တွေအကြောင်း အရင်ပြောမှ ဇာတ်ရည်လည်မှာပါ။ အဲ့မှာမှ Language ဆိုတာကိုလည်း မပြောလို့ မဖြစ်ပြန်ပါဘူး။

Language (ဘာသာစကား)

Language (ဘာသာစကား)ကို ကျနော်တို့ လူသားတိုင်း တမျိုးစီအနည်းဆုံး တတ်မြောက်ကြတာပါပဲ။ အပြန်အလှန်ဆက်သွယ်ဖို့၊ အနက်အဓိပ္ပာယ်ဖော်ကျူးဖို့ နေ့စဥ်သုံးနေကြပါတယ်။ ဘာသာဗေဒဆရာတွေ က Language ကို Syntax, Semantics, Pragmatics ရယ်လို့ ခွဲခြားစိတ်ဖြာပြပါတယ်။

အရှင်းဆုံး ပြောပြရရင်:

  • Syntax - ပြောရင် ဘယ်လိုပြောတယ်၊ ရေးရင် ဘယ်လိုရေးတယ်ဆိုတဲ့ စည်းမျဥ်းတွေ
  • Semantics - ကိုယ်ပြောလိုက်၊​ ရေးလိုက်တာရဲ့ အနက်အဓိပ္ပာယ်
  • Pragmatics - အနက်အဓိပ္ပာယ်ကိုပဲ လက်တွေ့အသုံးချတဲ့အခါမှာ ဆင့်ပွားပြီးဖြစ်လာတဲ့ ဂယက်အနက်တွေ (context ပေါ်မူတည်တယ်)

ဥပမာ: 'ခေါင်းစားတယ်' ဆိုတာက ထမင်းဝိုင်းမှာဆို အနက်တမျိုး၊ ခက်ခဲတဲ့အလုပ်တွေလုပ်ရင်း ပြောရင် အနက်တမျိုး။

Programming Language နဲ့ ဘာသာဗေဒ

ကျနော်တို့ Programmer တွေအတွက် Programming Language ဆိုတာက ကျနော်တို့နဲ့ machine (computer) ကြား အပြန်အလှန်ဆက်သွယ်ဖို့ပါ။ အဲ့ Programming Language ကိုလည်း ဘာသာဗေဒရှုထောင့်ကနေ ချဥ်းကပ်ဖို့လိုပါတယ်။

  • Syntax - အရေးသားပါ။ Variable declare လုပ်မယ်ဆိုရင် C++ မှာ ရေးပုံတမျိုး၊ JS မှာ ရေးပုံတမျိုး။
  • Semantics - ကိုယ်ရေးလိုက်တဲ့ code က ဘာအလုပ်လုပ်မယ်ဆိုတာကို သိရမယ်။ for loop က ဘယ်လိုအလုပ်လုပ်တယ်၊ while loop က ဘယ်လိုအလုပ်လုပ်တယ် စသဖြင့်။
  • Pragmatics - အတွေ့အကြုံများတာရယ်၊ လေ့လာမှု အားကောင်းတာရယ်ပေါ်မူတည်ပြီး ဖြစ်လာတယ်။

Pragmatics Example:
for နဲ့ while က loop လုပ်တာခြင်းတူတူ ဘာလို့ နှစ်ခုရှိနေတာလဲ၊ for က ဘယ်နေရာမှာ သုံးရင် ဘယ်လိုအားသာလဲ၊ while က ဘယ်လိုအားသာသွားလဲ စတာတွေကို တဖြည်းဖြည်းသိလာတာမျိုးပါ။ Memory အရ၊ runtime အရ ကိုယ်ရေးလိုက်တဲ့ code က ဘယ်လိုတွေ သက်ရောက်မှုရှိသွားလဲ ဆိုတာမျိုးအထိ Pragmatics ကျကျ သိမြင်ဖို့လိုပါတယ်။

မှတ်ချက်: မှတ်မိသလောက်ဆိုရင် မြန်မာနည်းပညာလောကမှာ ဒီ Syntax, Semantics, Pragmatics နဲ့ ချဥ်းကပ်ပုံက ဆရာသက်ခိုင် စပြီး မိတ်ဆက်ပေးတာပါ။

Programming Language ရွေးချယ်ခြင်း

Junior တွေအနေနဲ့ Programming Language တွေကို စလေ့လာမယ်ဆိုရင် အစကောင်းဖို့ အတော်လေးအရေးကြီးပါတယ်။ မဟုတ်ရင် အခြေမခိုင်ဖြစ်ပြီး problem solving လုပ်ရမယ့်အချိန်မှာ လန့်သွားတတ်ပါတယ်။ Programming Language အနွယ်နှစ်ခုရှိပါတယ်။

  • Static Type Language အနွယ်: C, C++, Java...
  • Dynamic Type Language အနွယ်: JS, Python, PHP...

နှစ်ခုထဲက တခုကို အရင်ရွေးရပါမယ်။ ဖြစ်နိုင်ရင်တော့ အဲ့အနွယ်နှစ်ခုထဲက Language တခုစီကို လေ့လာနိုင်ရင်တော့ ပိုကောင်းပါတယ်။ ဒါပေမဲ့ Junior တွေအတွက်တော့ Dynamic Type Language တခုနဲ့ Programming ကို အခြေခိုင်အောင် ကြိုးစားတာ ပိုမြန်ပါတယ်။

JS, Python, PHP တို့ထဲက တခုကို စလေ့လာဖို့ ရွေးရမယ်။ အခုတော့ JS ကို ရွေးပြောပါမယ်။

ဘာကြောင့် JavaScript လဲ?

JS က Web အပိုင်းမှာအတော်လေး အသုံးများပါတယ်။ နာမည်လည်း အတော်ကြီးပါတယ်။ JS ရရင် ဆက်သွားလို့ရတဲ့ လမ်းတွေလည်း အတော်ကို စုံပါတယ်။ ကျနော်ကိုယ်တိုင်လည်း JS ကို ပိုင်ပိုင်နိုင်နိုင်ရလို့ ဖွင့်နိုင်ခဲ့တဲ့ တံခါးတွေ အများကြီးပါပဲ။

ဒါပေမဲ့ ပြဿနာက
JS ကအတော်လေးကို မူယာမာယာများပါတယ်။ Tricky သိပ်ဖြစ်တယ်ပေါ့။ စလေ့လာချိန်မှာ လွယ်သယောင်ယောင်နဲ့ တကယ် Project ရေးရင် အတွင်းကျကျမသိလို့ ကြုံရမယ့်ပြဿနာတွေ အတော်များပါတယ်။

အဲ့တာတွေကို ဒီစာမှာ ထည့်ရေးဖို့တော့ မကုန်နိုင်ဘူး။ ဒါပေမဲ့ အဲ့ပြဿနာတွေ မတက်အောင်၊ တက်ခဲ့ရင်တောင် ဖြေရှင်းနိုင်မယ့် လေ့လာနည်းကို ပြောပြချင်တာပါ။ အဲ့မှာမှ Programming နဲ့ပတ်သက်ပြီး ကျနော်လုပ်ဖြစ်တဲ့ Good Habit တွေကိုပါ ထည့်ပြောသွားပါမယ်။

အခုတော့ Programming Language တွေမှာ Static Type နဲ့ Dynamic Type နှစ်ခုရှိတာရယ်၊ လေ့လာရင်လည်း Syntax, Semantics, Pragmatics နဲ့ ချဥ်းကပ်ဖို့ရယ်ကို မှတ်ထားပေးပါ။

Part 3: Programming Thinking

Javascript က interpretation language ဖြစ်ပြီး သူ့ကို programming language အဖြစ်ကနေ machine language ဖြစ်အောင်ပြောင်းဖို့ web browser တိုင်းမှာ JS engine ပါပြီးဖြစ်ပါတယ်။ တခြား programming language တွေနဲ့ မတူတာက ကိုယ့် computer မှာ JS ကို run ဖို့ တင်ကြို setup လုပ်စရာမလိုဘဲ Browser တခုရှိရုံနဲ့တင် ရပါပြီ။ ဒါပေမဲ့ NodeJS အတွက်တော့ သီးခြား installation လုပ်ဖို့ လိုမှာပါ။

Primitive Types

JS ကို စလေ့လာတော့မယ်ဆိုရင် Primitive Types တွေကို အရင်မှတ်ထားဖို့လိုပါမယ်။ Primitive တွေဆိုတာက object လို method တွေ၊ property တွေမပါဘဲ အခြေခံအကျဆုံး data type တွေကို ဆိုလိုတာပါ။

JS မှာ primitive data type က ၇ ခုရှိပါတယ်:

  1. string
  2. boolean
  3. number
  4. bigint
  5. null
  6. undefined
  7. symbol

Symbol နဲ့ Bigint ကတော့ နေ့စဥ် အသုံးနည်းပါတယ်။

Truthy and Falsy Values

နောက်ထပ် သေချာမှတ်ထားဖို့လိုတာကတော့ JS ရဲ့ Truthy and Falsy Value သဘောတရားတွေပါ။

Truthy Values တွေက:

  1. Empty array []
  2. Empty object {}
  3. Number other than zero
  4. Boolean true
  5. Non-empty string

သတိပြုစရာ Empty array [], empty object {} တို့က truthy ဖြစ်တယ်

Falsy values တွေက:

  1. Boolean false
  2. Empty string '', ""
  3. Number zero (0, -0)
  4. null
  5. undefined
  6. NaN (Not a number but its type is included in number primitive)

Falsy Values - Use Case

Falsy တွေကို ကိုင်တွယ်တဲ့အခါ not operator (!) ကို ဂရုစိုက်ပြီး သုံးဖို့လိုပါတယ်။ Use case လေးတခုကြည့်ရအောင်နော်။

Server မှာ data fetch ပြီး result variable ထဲ ထည့်လိုက်တယ်။ Array အနေနဲ့ ပြန်လာမယ့် payload က empty ဖြစ်နေလား စစ်မယ်ဆိုပါစို့။

❌ Wrong Way:

const result = []
if(!result) {
    console.log('Array is empty')
}

result variable ကို !result ဆိုပြီး စစ်မိရင် empty array က truthy value မို့လို့ ! နဲ့ စစ်တဲ့အခါ false ဆိုပြီး ဖြစ်သွားတော့မှာပါ။ if clause မှာ ရေးထားတဲ့ code က အလုပ်လုပ်မှာမဟုတ်တော့ပါဘူး။

✅ Correct Way:

const result = []
if(Array.isArray(result) && !result.length) {
    console.log('Array is empty')
}

loosely check မလုပ်ဘဲ ဒီလိုဆိုရင် Empty array ကို အထာကျကျ ဖမ်းမိသွားပါလိမ့်မယ်။

Imperative Style နဲ့ Declarative Style

နောက်ပြီးဆက်ပြောချင်တာကတော့ Imperative Style နဲ့ Declarative Style နှစ်ခုကနေ ကိုယ့်ရဲ့ Programming Thinking နဲ့ Logical Thinking ကို ဘယ်လိုပျိုးထောင်လို့ရမလဲဆိုတာလေးပါ။

1. Imperative Style

Imperative Style ကကျတော့ ကိုယ်လိုချင်တဲ့ result ရဖို့ machine နားလည်အောင် step-by-step code ကို ရေးတဲ့သဘောလို့ အရိုးရှင်းဆုံး နားလည်ကြည့်ကြပါမယ်။

We have to program "how" to achieve it!

ဥပမာ: အကြီးဆုံးကိန်း (max number) ကို လိုချင်တယ်ဆိုပါစို့။ ကိုယ်လိုချင်တာရဖို့ thinking process ကို စလေ့ကျင့်ကြည့်ရပါမယ်။ ဒီလိုလေးပေါ့-

Thinking Process:

  • Number တခုထက်ပိုတာမို့ loop လိုမယ်
  • ငယ်လား၊ ကြီးလား စစ်ဖို့ condition လိုမယ်
  • Array ထဲက first value ကို ကနဦးနှိုင်းကိန်းအနေနဲ့ ဆွဲထုတ်ထားမယ်
  • Loop ကို one အခန်းကနေ စပတ်ပြီး နှိုင်းယှဉ်သွားမယ်
  • if နဲ့ စစ်မယ် ကနဦးနှိုင်းကိန်းက နောက်ကလာမယ့် ကိန်းတွေထက် ငယ်နေရင် swap လိုက်မယ်

Code:

const result = [100, 2, 9, 7, 10, 1000, 0];
let max = result[0];

for(let i = 1; i < result.length; i++) {
    if(max < result[i]) {
        max = result[i];
    }
}

console.log("Max:", max)

(တခြားနည်းတွေနဲ့လည်း ထပ်ရေးလို့ရပါသေးတယ်။)

2. Declarative Style

Declarative Style ကကျတော့ ကိုယ်က step-by-step ရေးစရာမလိုတော့ဘဲ predefined functions တွေကိုသုံးပြီး ကိုယ်လိုချင်တာရဖို့ လုပ်ရုံပါပဲ။

We just need to define what to do and the predefined functions do the work!

ဥပမာ: Declarative Style နဲ့ဆို ဒီလောက်ရေးရင်ရပြီ။

const result = [100, 2, 9, 7, 10, 1000, 0]
console.log("Max:", Math.max(...result))

ဘာကြောင့် Imperative ကို လေ့လာဖို့ အရေးကြီးသလဲ?

နှစ်ခုကို ယှဥ်ကြည့်ရင် ဒုတိယတခုက အတော်လေးကို လွယ်သွားတယ်၊ မြန်သွားတယ်။ ဒါပေမဲ့ ဒုတိယတခုနောက်ကို အမြဲလိုက်ရင် developer life မှာ အကြီးကျယ်ပြဿနာတက်ပါလိမ့်မယ်။

Developer တိုင်း Project ရေးရင် အမြဲကြုံရတာက error/bug ပါ။ အဲ့ error ကို trace ဖို့ programming thinking / logical thinking လိုပါတယ်။ Declarative ပဲ အမြဲမသုံးဘဲ imperative နည်းနဲ့ အခြေခံကျတာလေးတွေကို ကိုယ်တိုင်လိုက်ရေးကြည့်မယ်ဆိုရင် ကိုယ့်ရဲ့ thinking process က ဒေါင်ဒေါင်မြည် ဖြစ်သွားပါလေရော။

အကျိုးကျေးဇူးများ:

  • တော်ရုံ code တခုကို မျက်စိနဲ့ skim လုပ်လိုက်တာနဲ့ ဘာအလုပ်လုပ်မယ်၊ ဘယ်နေရာလိုအပ်နေတယ်ဆိုတာ ချက်ချင်းတန်းသိသွားပါတယ်။
  • ဒီအလေ့အကျင့်ကို beginner level မှာ မဖြစ်မနေကို ပျိုးထောင်ဖို့ တိုက်တွန်းချင်ပါတယ်။

လေ့ကျင့်ရန်

အခု ဥပမာမှာပြထားတဲ့ Max Concept လိုပဲ၊ Min Concept ကိုလည်း အလွယ်လေး ပြောင်းယူလို့ရပါပြီ။ အဲ့ကနေမှ

  • find နဲ့ filter ကို built-in function မသုံးဘဲ ကိုယ်တိုင် ရေးကြည့်တာ
  • GroupBy လုပ်တာကို HOF မသုံးဘဲရေးကြည့်တာ
  • factorial / fibonacci တို့ကို Imperative style နဲ့ ရေးကြည့်တာမျိုးလုပ်ပြီး thinking process ကို ပျိုးယူစေချင်ပါတယ်။

Part 4: JavaScript Essentials

ဒီနေ့တော့ JS ကို ဆက်ကြရအောင်ပါ။ အပိုင်း ၃ မှာ JS ရဲ့ အခြေခံကျတဲ့သဘောတရားတွေနဲ့ programming thinking ကို ပျိုးထောင်ဖို့ နည်းလမ်းကို ပြောခဲ့ပါတယ်။ အခုတော့ နေ့စဥ် project ရေးတိုင်း ရူးနေအောင်သုံးရတဲ့ JS ရဲ့ data type တွေနဲ့ function တွေအကြောင်းရယ် Asynchronous အကြောင်းရယ်ကို ပြောချင်ပါတယ်။

1. Object and Array

Object နဲ့ Array က primitive data type တော့ မဟုတ်ပါဘူး။ ဒါပေမဲ့ JS ရဲ့ အရေးအပါဆုံး အစိတ်အပိုင်းတွေအနေနဲ့ ရှိနေပါတယ်။ အဲ့ data type နှစ်ခုကို ချဥ်းကပ်တဲ့အခါမှာ အရေးအသားကို သေချာမှတ်ဖို့လိုပါတယ်။

Object Notation:

  • Object ဆိုရင် dot notation နဲ့လည်း ရေးလို့ရတယ်
  • Bracket notation နဲ့လည်း ရေးလို့ရတယ်

ဒါဆိုရင် အဲ့ notation နှစ်ခုက အားသာချက်၊ အားနည်းချက်ဘာရှိလဲဆိုတာ ရှာဖွေကြည့်ရင် backend api တွေရေးတဲ့အခါ၊ util function တွေ ရေးတဲ့အခါ အကျိုးများပါလိမ့်မယ်။

တဆက်တည်း သိဖို့လိုတာတွေ:

  • Object data type နဲ့ Class နဲ့က ဘာကွာတာလဲ
  • JS မှာ pass by reference ဘာလို့မရှိတာလဲ

မှတ်ချက်: Pass by value / pass by reference ကိစ္စကတော့ C or C++ language တခုခုကိုလေ့လာဖူးရင် ပိုနားလည်ပါလိမ့်မယ်။

Destructuring and Spreading:
အဲ့ data type နှစ်ခုနဲ့တဆက်တည်း လေ့လာဖို့လိုတာကတော့ destructuring and spreading ပါ။ Object ရော array ရောက destructuring and spreading လုပ်လို့ရပါတယ်။ အဲ့တာကို day-to-day project မှာ ရူးခါနေအောင် သုံးရတာပါ။ ကနဦးမှာ ရှုပ်သယောင်ယောင်ဖြစ်ပါလိမ့်မယ်။ Theory ကိုလည်း ဖတ်မယ်၊ ကိုယ်တိုင်လည်း code ရေးပြီး စမ်းမယ်ဆိုရင် ရှင်းသွားပါလိမ့်မယ်။

2. Higher Order Functions

JS က Functional Programming ကို support လုပ်တဲ့ Programming Language တခုပါ။ React နဲ့ Redux ဆိုရင် Immutability ကို ဦးစားပေးပြီး တည်ဆောက်ထားတာပါ။ JS ကိုသုံးပြီး project ရေးတဲ့အခါ Functional Programming ကို မလေ့လာဖူးဘူးဆိုရင်တောင် FP Concept တွေကို မသိလိုက်မသိဘာသာ အသုံးပြုနေရပြီးသားဖြစ်နေပါတယ်။

ဥပမာ: filter, map, reduce, find စတဲ့ built-in function တွေက Functional Programming Sense နဲ့ ဖန်တီးထားကြတာတွေပါ။ အဲ့ function တွေက

  • Function တခုကို parameter အနေနဲ့ လက်ခံတယ်
  • ပြီးရင် မူရင်း data ကို မထိဘဲ (immutable) result ကို return ပြန်ပေးပါတယ်

HOF ရဲ့ အချက်နှစ်ချက်:

HOF လို့ဆိုရင် ဒီအချက်နှစ်ချက်ကို လုပ်နိုင်ရပါတယ်:

  1. Function ကို parameter အနေနဲ့လက်ခံနိုင်တယ်။
  2. Function ထဲကနေ function ကို return ပြန်နိုင်တယ်။

Terms: First class function, pure function တို့လည်း ရှိကြပါသေးတယ်။ ဒါတွေကိုလည်း လေ့လာထားဖို့လိုပါတယ်။

JS မှာ function တွေက object တွေပဲဖြစ်ပါတယ်။ First class object လို့တောင် ဆိုကြပါတယ်။ ဒီတော့ function name ကို dot operator နဲ့တွဲပြီး property add လုပ်လို့ရပါတယ်။ ဒါကို Functional Programming style ရေးတဲ့အခါ အတော်အသုံးချရပါတယ်။

Closure Concept:
တပါတည်း သိဖို့လိုတာက closure concept ပါ။ Variable တခုက program execution ပြီးရင် memory ကနေ အလိုလိုပျက်တာ သဘာဝပါပဲ။ ဒါပေမဲ့ nested function ရေးထားရင် (တနည်းပြော - function ကနေ function ကို return ပြန်ထားတဲ့ HOF ရေးထားရင်) outer function scope က variable ကို မဖျက်ဘဲ ဆက်သုံးနိုင်အောင် ထိန်းထားပေးတာကို closure လို့ခေါ်တာပါ။ ဒါအယူအဆက အတော်လေး စိတ်ဝင်စားဖို့ကောင်းသလို အတော်လည်း အသုံးဝင်တဲ့ JS ရဲ့ feature တခုပါပဲ။

3. Asynchronous Programming

JS က Single Thread ဖြစ်တယ်။ အရိုးရှင်းဆုံးနားလည်ရရင် တကြိမ်မှာ တခုပဲ လုပ်နိုင်တယ်။ Concurrent မလုပ်နိုင်ဘူး။ တခုလုပ်နေရင် နောက်တခုကစောင့်နေရတယ်၊ တခုပြီးမှ နောက်တခုလုပ်နိုင်မယ်။ Sequential ပေါ့။ One instruction at a time သဘော။

ဒါကို အကျယ်ချဲ့ရင် computer architecture ပေါ်မူတည်ပြီး အများကြီးဆက်စပ်တွေးယူလို့ရပါသေးတယ်။ [ဆရာသက်ခိုင်ရေးဖူးတာရှိတယ်။ ဖတ်စေချင်ပါတယ်။]

ပြဿနာ:
ကနဦးတုံးက JS က synchronous ပဲ ရသေးတယ်။ တကြိမ်မှာတခုပဲလုပ်နိုင်တယ်။ Blocking ဖြစ်တယ်ပေါ့။ နောက်တော့ JS က Event Loop concept နဲ့ call stack ရယ်၊ queue ရယ်ခွဲပြီး asynchronous ဖြစ်အောင် လုပ်ပေးလာပါတယ်။ Non-blocking I/O ဖြစ်လာတယ်ပေါ့။

Synchronous vs Asynchronous:

  • Synchronous က တကြိမ်မှာ တခုပဲ လုပ်လို့ရတယ်
  • API fetch တာလို၊ setTimeout လို function တွေကျတော့ time consuming ဖြစ်တယ်
  • သူပြီးမှ သူ့အောက်က code တွေက အလုပ်လုပ်ရမယ်ဆိုရင် efficient မဖြစ်ဘူး

Event Loop Solution:
အဲ့တော့ sync code တွေကို call stack ထဲထည့်ပြီး အရင် run မယ်၊ Promise တို့ setTimeout တို့ဆိုရင် queue ထဲထည့်ထားတယ်၊ call stack ထဲ လုပ်စရာကုန်ရင် queue ထဲကကောင်တွေကို တခုချင်းဆက်လုပ်မယ်ဆိုပြီး Event Loop concept နဲ့ Async feature ရလာပါတယ်။

Event Loop Visualizer: Event Loop ကို visualise လုပ်ပြထားတဲ့ website ကို learning resources မှာကြည့်ပါ။ Event Loop Visualizer

အဲ့မှာ ပြဿနာလေးတွေလည်း တွဲပါလာပါတယ်။ ဘာလဲဆိုရင်တော့ callback hell ဖြစ်လာတာပါ။

Problem Example

ဒီလိုပါ။ ဒီ code လေးကို ကြည့်ရအောင်။

❌ Problem:

function addAsync(a, b) {
    console.log('Process start');
    setTimeout(() => {
        console.log("After 2sec");
        return a + b;
    }, 2000);
}

console.log('start');
let result = addAsync(10, 29);
console.log(result);
console.log('end');

ဒီ code ကို run ရင် result က undefined ဖြစ်နေပါလိမ့်မယ်။ ဘာလို့ဆိုရင် sync code တွေကို call stack က အရင်run ချလိုက်တော့ add operation က setTimeout နဲ့ 2 second နေမှ run မယ်မို့လို့ result ထဲကို return value က မရောက်သေးပါဘူး။

Solution 1: Callback

အဲ့လို ပြဿနာကို ပြေလည်စေဖို့ callback ဆိုတာကို စသုံးကြတာပါ။ Callback နဲ့ async operation တွေပြီးရင် လုပ်လို့ရအောင် function တခု ထပ်ရေးပေးလိုက်တာပါ။ ဒီလိုလေးပါ။

✅ Solution with callback:

function addAsync(a, b, callback) {
    console.log('Process start');
    setTimeout(() => {
        let result = a + b;
        callback(result);
    }, 2000);
}

console.log('start');
addAsync(10, 29, (x) => console.log('Result is', x));
console.log('end');

addAsync function မှာ parameter တခုတိုးသွားတာကို သတိပြုပါ။ Async ကြောင့် undefined error မျိုးမဖြစ်အောင် အဲ့လို callback တွေလုပ်ရင်းလုပ်ရင်း nested callback တွေနဲ့ callback hell ဖြစ်လာပါတော့တယ်။ Promise နဲ့ရေးမယ်ဆိုရင်လည်း then နဲ့ ဆက်ပြီး ရေးရတာတွေ ထပ်လာစေပါတယ်။

Promise:
Promise က Railway Oriented Programming သုံးပြီးတော့ ရေးထားတာမို့ then function ထဲကို success callback, error callback parameter နှစ်ခုထည့်လို့ရသလို catch() နဲ့ error ကို ဖမ်းလည်းရပါတယ်။

Solution 2: Async/Await

အဲ့လိုနဲ့ပဲ async/await concept ကို JS က ထပ်မိတ်ဆက်လာပါတယ်။ အခုဆိုရင် modern နည်းအနေနဲ့ async/await တို့ကိုပဲ သုံးကြပါတော့တယ်။ await ကို သုံးပြီး async operation ကို ပြီးအောင် စောင့်ခိုင်းလိုက်တာပါ။ ဒီလိုလေးပါ။

✅ Modern approach with async/await:

function addAsync(a, b) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("After 2sec");
            resolve(a + b);
        }, 2000);
    });
}

async function addDemo(a, b) {
    let result = await addAsync(a, b);
    console.log("Result", result);
}

console.log('start');
addDemo(4, 5);
console.log('end');

ဒီ Async Concept က JS မှာသာမက တခြား Programming Language တွေမှာလည်း အတော်ကို အသုံးပြုကြပါတယ်။ အစမှာ နားလည်ရအတော်ခက်ပါတယ်။ Code ရေးရင်း၊ စဥ်းစားရင်း၊ trace လုပ်ရင်း ရသွားပါလိမ့်မယ်။

Part 5: React & Ecosystem

JS နဲ့ပတ်သက်လို့ Library နဲ့ Framework တွေဆီ ဆက်သွားကြရအောင်ပါ။ JS ကို Web Development သွားမယ်ဆိုရင် React နဲ့ Vue တို့ရှိပါတယ်။ Framework တွေအနေနဲ့ဆိုရင် NextJS နဲ့ NuxtJS ပေါ့။ ဒါ့အပြင် AngularJS framework လည်းရှိသေး။ Mobile ဘက်သွားမယ်ဆိုရင် React သမားက React Native သုံးပြီး Hybrid App တွေ ဆက်ရေးနိုင်တယ်။ လမ်းကြောင်းအတော်ပွင့်သလို အတော်လည်းကျယ်ပြန့်လှပါတယ်။

အခုတော့ first thing first အနေနဲ့ လိုအပ်တာတွေ ပြောပြချင်ပါတယ်။

Frontend & Backend

Web Development သွားတော့မယ်ဆိုရင် နှစ်ပိုင်းစဥ်းစားဖို့ လိုလာပါပြီ။

တခုက Frontend:
အမြင်သာဆုံး မျက်စိထဲဘွားခနဲ မြင်ရတဲ့ UI တွေ။ အဲ့တာအတွက် React သုံးပြီး ရေးမယ်ဆိုရင်

  • React ရဲ့ reactive concept ကို သေချာနားလည်ဖို့လိုလာတယ်
  • State ဆိုတာဘာလဲ သိဖို့လိုလာတယ်
  • State change ရင် render ပြန်ဖြစ်တယ်ဆိုတဲ့ render process နဲ့ reconciliation algorithm တို့ကို ဂဃနဏသိဖို့လိုပါတယ်
  • ပြီးရင် mounting ဆိုတာကိုလည်း သိရပါဦးမယ်

မှတ်ချက်: အခု ဒီစာစုတွေက အဲ့တာတွေကို အသေးစိတ်ရှင်းပြဖို့မဟုတ်ပါဘူး။ လေ့လာနေဆဲ ညီ/ညီမတွေအတွက် လမ်းကြောင်းပွင့်အောင် ရေးပေးနေတာမို့ လေ့လာရင်း နားမလည်တာ၊ ဆွေးနွေးချင်တာဆို ဆက်သွယ်မေးမြန်းလို့ရပါတယ်။

နောက်တခုကတော့ Backend:
ကိုယ့် App တခုလုံးရဲ့ ဒေတာတွေ၊ မှတ်တမ်းတင်သိမ်းဆည်းထားစရာတွေ၊ authentication လုပ်တာတွေအတွက် server တခုရေးဖို့လိုပါသေးတယ်။ အရိုးရှင်းဆုံးနဲ့ အလွယ်ဆုံး server တခု ဖန်တီးချင်ရင်တော့ ExpressJS က အကောင်းဆုံးပါပဲ။

ဒါပေမဲ့ သူ့ကို မသွားခင် NodeJS ကို သေချာနားလည်ဖို့လိုမယ်။ TCP, HTTP တို့လို network protocol တွေအကြောင်း အရင် လေ့လာဖို့လိုပါမယ်။ ပြီးရင် REST API ဆိုတာဘာလဲ၊ REST standard တွေကို လေ့လာရပါဦးမယ်။ ပြီးရင်တော့ Express ကိုသုံးပြီးတော့ backend server စရေးလို့ရပါပြီ။

ဇာတ်လမ်းက အခုမှ တကယ်စတာပါ:
Route တွေရေးဖို့ MVC architecture သုံးပြီဆိုပါစို့။ Model တွေရေးဖို့ database တွေ စရွေးရပါပြီ။

Database

Database ဆိုတာက ကိုယ့် App အတွက် အသက်သွေးကြောလည်းဖြစ်သလို fully functioning app တိုင်းအတွက် မဖြစ်မနေပါဖို့လိုတဲ့ နည်းပညာတခုပါ။

Relational Database:
Relational Database ကိုသုံးမယ်ဆိုရင် MySQL, PostgreSQL တို့ကို သေချာလေ့လာဖို့လိုပါတယ်။

NoSQL:
NoSQL သုံးမယ်ဆိုရင် MongoDB က ရွှေပါပဲ။

အဲ့ DB အမျိုးစားနှစ်ခုလုံးက အားသာချက်၊ အားနည်းချက်ကိုယ်စီမို့ စနစ်တကျ လေ့လာနေဖို့လိုပါတယ်။ အဲ့ဘာသာရပ်က အတော်လည်း ကျယ်ဝန်းပါတယ်။

ORM / ODM:
အဲ့ကနေမှ တကယ် Project တွေရေးပြီဆိုရင် ORM or ODM တွေ သုံးရပါတယ်။ SQL တွေကို Developer က ကိုယ်တိုင်မရေးတော့ဘဲ ကြားခံနည်းပညာသုံးပြီး DB ထဲကို Backend ကနေ operation တွေ လုပ်တာပါ။

  • ORM ဆိုတာက Object Relational Mapping ပါ။ Prisma ကို သုံးပြီး RDBMS အတွက် ရေးနိုင်ပါတယ်။
  • MongoDB အတွက်ဆိုရင် Object Document Mapping နည်းပညာဖြစ်တဲ့ MongooseJS ကို သုံးပြီး ရေးရပါတယ်။

Authentication and Authorization

ပြီးရင်တော့ အပြောကျယ်လှတဲ့ Authentication and Authorization ဆိုတာကို ဆက်သွားရပါဦးမယ်။ ကိုယ့် App အတွက် Security Control လုပ်ပေးမယ့် concept မို့ အင်မတန်အရေးပါပါတယ်။ JWT Auth ကို မဖြစ်မနေသိဖို့လိုပါတယ်။ တခြား Auth Library တွေလည်းရှိပါတယ်။ ဒါပေမဲ့ JWT ကို အရင် လေ့လာသင့်ပါတယ်။ Backend မှာ အဲ့တာကို ဘယ်လို အကောင်ထည်ဖော်လဲဆိုတာကိုတော့ code နမူနာတွေကြည့်ပြီး စုတုပြုလုပ်ရပါမယ်။ [ကျနော့် GitHub မှာလည်း ကြည့်နိုင်ပါတယ်။]

Frontend UI Libraries

ဒီလောက်ဆိုရင် Backend အတွက် လုံလောက်ပြီဆိုတော့ Frontend Library တွေကို နည်းနည်းထပ်ပြောချင်ပါတယ်။ Smooth and Attractive UI တွေက User ကို အဖမ်းစားနိုင်ဆုံးပါပဲ။ ကိုယ်က backend ကို ဘယ်လောက်ကောင်းအောင်လုပ်ထားထား User က မမြင်သလို စိတ်လည်းမဝင်စားပါဘူး။ ဒါက developer တိုင်း ရင်နာနာလက်ခံရတဲ့အမှန်တရားပါ။

Component Libraries:
UI အတွက်ဆိုရင် reusable component တွေ ဖန်တီးထားပေးတဲ့

  • Material UI
  • Shadcn
  • Hero UI

တို့ရှိပါတယ်။

Animation Libraries:
ဒါ့အပြင် Scroll Effect UI တွေအတွက်

  • Motion
  • Scrollama

တို့လို library တွေကိုလည်း သိဖို့လိုပါမယ်။

State Management

API ခေါ်ပြီး ဒေတာတွေကို fetch တာ၊ data အပြောင်းလဲတခုခုဖြစ်တဲ့အခါ UI က lag အနေဘဲ smooth ဖြစ်အောင် State Management Library တွေလည်း သုံးရပါသေးတယ်။

မဖြစ်မနေသိဖို့လိုတာ
RTK and RTK Query ပေါ့။ သူကတော့ React ရဲ့ Reducer Concept ကိုအခြေခံပြီး immutability feature နဲ့ ရေးထားတာပါ။

အဲ့တာကိုသေချာရပြီဆိုရင် အခုနောက်ပိုင်း အသုံးများလာတဲ့

  • Zustand
  • Tanstack

တို့ကို အေးဆေးသွားလို့ရပါတယ်။

လေ့လာရမည့် Timeline

အခုပြောခဲ့တာလေးတွေကို တဆင့်ချင်း စိတ်အေးအေးနဲ့ စနစ်တကျလေ့လာသွားပါ။ အခြေခံခိုင်ပြီးသူအတွက်ဆို ၈လလောက် အချိန်ပေးရင် အဆင်ပြေပါတယ် (ကိုယ်တွေ့မို့ပါ)။

လိုအပ်တာတွေ

  • ကိုယ်တိုင် စာတွေ အများကြီးဖတ်ဖို့လိုမယ်
  • Code တွေစမ်းရေးဖို့လိုမယ်
  • လမ်းညွှန်ပေးနိုင်မယ့်သူကိုချဥ်းကပ်ပြီး မေးမြန်းဖို့လိုပါမယ်

Software Engineering ခရီးက ကြမ်းပါတယ်။ ခြောက်ပြောတာမဟုတ်ပါဘူး။ တကယ်ဆိုတာ ကိုယ်တိုင်လုပ်ရင်း သိပါလိမ့်မယ်။ ဒါပေမဲ့ အားလျော့စရာမလိုပါဘူး၊ စနစ်တကျလေးသာ လေ့လာသွားပါ။ ကိုယ့်ကိုလမ်းညွှန်ပေးနိုင်မယ့် Senior ကိုလည်းရှာပါ။

Part 6: Deployment & DevOps

ဒီအပိုင်းမှာတော့ ကျနော်တို့ရေးလိုက်တဲ့ website / web app တွေ၊ ပြီးတော့ backend server တွေကို ဘယ်လို deploy လုပ်မလဲဆိုတာကို အရင်ပြောချင်ပါတယ်။ သူနဲ့တဆက်တည်းပါလာမှာကတော့ DevOps ပေါ့လေ။

Website Deployment

ကျနော်တို့တွေ website ရေးလိုက်ပြီဆိုရင် အဲ့ website က ကိုယ့်စက်မှာ (တနည်းအားဖြင့် local machine) အလုပ်လုပ်ပြီ။ ဒါပေမဲ့ World Wide Web ထဲမရောက်သေးတော့ တခြား user က လှမ်းသုံးလို့ ကြည့်လို့မရပါဘူး။

ကိုယ်ရေးထားတာကို စမ်းသပ်တာ၊ ပြင်ဆင်တာ စတဲ့ Development ကာလကို ကျော်လွန်ပြီးတော့ နောက်ဆုံးအဆင့် ကိုယ့် website ကို WWW ထဲ လွှင့်တင်တဲ့ Deployment ကာလကို ရောက်လာပြီဆိုရင် အတော်ကို ပျော်စရာကောင်းတဲ့အချိန်ကို ရောက်ပါပြီ။ ဘာလို့ဆို development ကာလမှာ trial and error ပေါင်းများစွာဖြတ်သန်းခဲ့ရပြီးတာကိုး။

သတိပြုရန်: ဒါပေမဲ့ deploy ပြီးတဲ့နောက်မှာ ထပ်ကြုံရမယ့် "it works on my machine" ပြဿနာလည်းကျန်ပါသေးတယ်။

Deployment Platforms

Frontend Deployment:
အဲ့လို Deploy လုပ်ဖို့ဆိုရင် Hobby Plan free ရတဲ့ Vercel ကို အခုနောက်ပိုင်းအတော်သုံးလာကြပါတယ်။ Vercel ecosystem ကြီးလာတာရယ်၊ သုံးရလွယ်တာရယ်ကြောင့်ပါ။ အရင်ကတော့ Heroku က ဆရာပါပဲ။

Beginner level တွေဖြစ်စေ၊ စီးပွားရေးအရသုံးဖို့မလိုတာဖြစ်စေ ကိုယ့်ရဲ့ personal project လေးတွေကို deploy လုပ်ပြီး real world မှာ ဘယ်လိုမျိုးမြင်ရမယ်ဆိုတာမျိုး စမ်းကြည့်လို့ရပါတယ်။ Vercel သုံးမယ်ဆိုရင် GitHub နဲ့ ချိတ်လိုက်ပြီး GitHub repo ကို Vercel မှာ တန်း deploy လို့ရပါပြီ။ သူက အတော်လွယ်အောင် လုပ်ပေးထားတာပါ။ ဒါကတော့ frontend ပိုင်း deployment ပေါ့ဗျာ။

Backend Deployment:
Backend ကို deploy မယ်ဆိုရင်တော့ နည်းနည်းလေးလက်ဝင်ပါတယ်။ ဘာလို့ဆို သူက UI နဲ့သေချာမြင်ရတာမျိုးမဟုတ်ဘဲ REST API endpoint တွေဖြစ်တာကြောင့် deployment live ဖြစ်တယ်ဆိုတာနဲ့ UI ကို ဘွားခနဲမမြင်ရဘူးကိုး။

အဲ့တော့ ဘာလုပ်ရလဲဆိုရင် Swagger သုံးပြီး API endpoint တွေကို UI Document ပေါ်အောင် ရေးလို့ရပါတယ်။ ဒါဆိုရင် deploy ပြီးတဲ့အခါ ကိုယ့် backend server က ဘာတွေလုပ်ပေးတယ်၊ ဘယ် endpoint က ဘာကို ပေးတယ်ဆိုတာကို docs အနေနဲ့ ပြပြီးသား ဖြစ်သွားပါတယ်။ Swagger ကိုတော့ နည်းနည်းထပ်လေ့လာဖို့လိုသွားတာပေါ့။

Backend Deployment Services

ဒါဆို Backend Deployment Service တွေကို ပြောကြရအောင်။ Free Plan ရပြီး သုံးရလွယ်တာဆိုရင် Render ရှိပါတယ်။ Railway လည်းရှိတယ်၊ သိုပေမဲ့ beginner တွေအတွက် နည်းနည်း ခက်နိုင်တယ်။

Render သတိပြုစရာ
Render မှာ Hobby Plan နဲ့ Deploy မယ်ဆိုရင် သတိထားစရာတခုက node-mailer mailing service ကို သူက port block ထားပါတယ်။ အဲ့တော့ Resend လို mail service ကို ပြောင်းရေးရတာမျိုးရှိပါတယ်။

NextJS Fullstack အတွက်
ဒါပေမဲ့ NextJS ကို fullstack အနေနဲ့ သုံးပြီး node mailer ကို backend action မှာ ရေးထားရင်တော့ Vercel မှာ တန်း deploy လို့ရသလို port block ထားတဲ့ပြဿနာလည်း မကြုံရပါဘူး။ ဒါကတော့ လုပ်ရင်းကိုင်ရင်း ကြုံလာနိုင်တာတွေကို ကြိုသတိမူမိအောင်ပါ။ အခုထိက ကလိရင်း အလွယ်လေးတတ်နိုင်တာမျိုးပါ။

CI/CD (Continuous Integration/Continuous Deployment)

တကယ်ကို နဖူးတွေ့ဒူးတွေ့ကြုံရနိုင်တာကတော့ CI/CD ကိစ္စပါ။

ဘာလို့လိုသလဲ?
ကိုယ်ရေးလိုက်တဲ့ App က တကြိမ်ရေးပြီးတာနဲ့ အပြီးတိုင်ပြီလို့ ယူဆလို့မရနိုင်ပါဘူး။ Feature တိုးတာ၊ Bug Fix တာ၊ Hot Fix လုပ်ရတာတွေ လာဦးမှာပါ။ အဲ့ကျရင် တကြိမ်ပြင်တိုင်း တခါ deploy မနေရအောင် Continuous Integration and Continuous Deployment ဆိုတာ ဖြစ်လာတာပါ။

ဒီအကြောင်းကို code base အကြီးကြီးနဲ့ user များများသုံးတဲ့ App တွေမှာ ပိုပြောလို့ကောင်းပါတယ်။ ဒါပေမဲ့ အခုတော့ Beginner တွေအတွက် အသေးစား၊ အလတ်စား project လေးတွေရေးရင်း လုပ်လို့ရတာကို ပြောချင်ပါတယ်။

GitHub Integration:
GitHub ကို သုံးမယ်ဆိုရင် တယောက်တည်းရေးရေး၊ collab လုပ်ပြီးရေးရေး PR ဖွင့်ပြီး၊ စစ်ပြီးလို့ merge လိုက်တာနဲ့ Vercel တို့ Render တို့က auto detect ဖြစ်ပြီး auto deploy ပြန်လုပ်ပေးပါတယ်။ ဒါက Platform as a Service အနေနဲ့ တာဝန်ယူထားတဲ့အတွက် သူတို့ဘက်ကပေးတဲ့ service ကြောင့် လွယ်သွားတာပါ။

DevOps
ကိုယ်တိုင်လုပ်မယ်ဆိုရင်

  • pipeline လုပ်ရတာတွေ
  • GitHub Actions
  • Docker
  • Kubernetes
  • Terraform

စတဲ့ နည်းပညာတွေကို ဆက်လေ့လာဖို့ လိုလာပါတယ်။ Container Orchestration လို့ခေါ်ပါတယ်။ Azure တို့ AWS တို့လို cloud platform တွေကိုလည်း သိဖို့လိုပါတယ်။

ဒီအပိုင်းတခုလုံးကို ချုံငုံပြီး DevOps လို့ ခေါ်ကြပါတယ်။ ကျနော်ကိုယ်တိုင်လည်း လေ့လာဆဲမို့ အသေးစိတ်ပြောဖို့ရာ မစွမ်းသာပါဘူး။ ဒါတွေကို တဖြည်းဖြည်း လေ့လာရင်း Senior Level Developer တွေ ဖြစ်အောင်လုပ်ရမှာပါ။

Part 7: AI as a Learning Tool

“အသုံးတတ်ရင် အတော်အကျိုးပေးသလို အသုံးမတတ်ရင်လည်း အတော်ထုံထိုင်းသွားစေနိုင်”

အခု နောက်ဆုံးအပိုင်းမှာတော့ hot and hit အဖြစ်ဆုံးကိစ္စကို ပြောချင်ပါတယ်။ Artificial Intelligence(AI) ကို ကျနော်တို့ Developer တွေ တွင်တွင်ကျယ်ကျယ်ကို သုံးလာပါတယ်။ အဲ့မှာပဲ AI အစွမ်းကို မြင်လို့ Beginner တွေ ကြောင်ပျောက်ကြတာရှိသလို၊ အလုပ်တွင်သွားတဲ့ Senior တွေလည်း ရှိပါတယ်။

AI နဲ့ prompt ပေးတတ်ရင် ကိုယ်ကသိပ်လုပ်စရာမလိုဘဲ prototype ကောင်းကောင်းတခု အလွယ်လေးရပါတယ်။ ဒီတော့ အခုမှ စလုပ်သူဆိုရင် ကိုယ့် Developer ဘဝကို AI က အစားထိုးယူတော့ မလားရယ်လို့ စဥ်းစားမိတတ်ကြပါတယ်။ ဘာလို့ဆို တကယ်လည်း အတော်ကို စွမ်းတာကိုး။ မယုံရင် Vercel V0 ဆီသွား၊ prompt လေးတခုရိုက်လိုက်၊ ခဏဆိုပဲ full project structure ကြီးနဲ့ ကိုယ့်ပြန်ပေးတာက ကြောက်ခမန်းလန့်ခမန်းကိုးဗျ။ ဒါပေမဲ့ တကယ်အလုပ်ဖြစ်တဲ့အဆင့်ထိရောက်လား ဆိုတော့ အဝေးကြီးပါပဲ။ အဲ့တာကို သုံးပြီး တကယ်အလုပ်ဖြစ်အောင် ကိုယ်က မွမ်းမံနိုင်၊ တည်းဖြတ်နိုင်မယ်ဆိုရင် အတိုင်းအထက်အလွန်ပေါ့လေ။ ကျွမ်းကျင်ပြီးသား Senior တွေအတွက် ဆိုရင်တော့ AI သုံးလိုက်တာ အလုပ်ပိုတွင်လို့ performance ရော efficiency ပါ တက်သွားပါလေရော။

အခုဒီစာမှာတော့ AI ကိုသုံးပြီး အလုပ်တွင်ဖို့ရော၊ ကိုယ်အတွက် လေ့လာရခက်တဲ့ စာတွေကို AI as a learning tool အနေနဲ့ ဘယ်လိုလုပ်မလဲဆိုတာကို မျှဝေချင်ပါတယ်။ အပေါ်မှာပြောခဲ့သလို AI က ပေးတာက Prototype အဆင့်အနေနဲ့ တကယ်အဆင်ပြေပါတယ်၊ ဒါပေမဲ့ တကယ်သုံးဖို့အထိတော့ ကိုယ့်ဘက်က လုပ်ပေးရမှာတွေ အများကြီးပါ။ အဲ့တာတွေကို လုပ်နိုင်ဖို့ဆိုရင် အပိုင်းနှစ်ခုမှာ ကြံ့ခိုင်အောင် ကြိုးစားထားဖို့လိုပါတယ်။

Theory and Concept

သံခိပ်လုပ်ရရင်တော့ စာတွေ့ပေါ့လေ။ ပြောတာသာလွယ်တာ တကယ်လုပ်မယ်ဆို အတော်ကို ရှာဖွေလေ့လာရတာမျိုးပါ။ စာအုပ်ကောင်းတွေဖတ်ဖို့လိုမယ်။ ဆရာကောင်းဆီချဥ်းကပ် သင်ယူဖို့လိုမယ်။ ကိုယ်တိုင်လည်း မှတ်စုထုတ်၊ အများကြီးတွေးတောဖို့လိုပါတယ်။ ဘာလို့ အခုလောက်ထိ ရေးနေရလဲဆိုရင် ဒီအလေ့အကျင့်က Developer အနေနဲ့မဟုတ်ဘဲ ဘယ် feild ကိုပဲ ရွေးရွေး လိုမယ်မို့ပါ။ ဆိုတော့ AI ကို leverage လုပ်ပြီး ကိုယ့်ရဲ့ skill ကို တိုးဖို့ဆိုရင် အခြေခံအကျဆုံး Computer Science theory တွေ၊ concept တွေကနေ စဖို့လိုပါတယ်။ အဲ့ကနေမှ တဆင့် ကိုယ်သွားမယ့်လမ်းကြောင်းပေါ်မူတည်ပြီး ဆက်ဖြည့်စရာတွေလိုပါမယ်။ အခုတော့ Web Development အကြောင်း ရေးနေပြောနေတာမို့ သူနဲ့ပတ်သက်တာကို ဆက်ပြောချင်ပါတယ်။

အစိတ်အပိုင်းတခုကို ထုတ်ပြီး ဥပမာပေးပြောချင်တာပါ။ Pagination အကြောင်းပါ။ AI ကို pagination လုပ်ပေးပါလို့ Prompt ပေးလိုက်တာနဲ့ code နဲ့တကွ ပြန်ပေးပါလိမ့်မယ်။ [နားမလည်ဘဲတန်းသုံးလိုက်မိရင် ဒါမှမဟုတ် မစစ်ဆေးဘဲ ယူလိုက်မိရင် အလေ့အကျင့်အမှားကြီး စွဲသွားပါလိမ့်မယ်။] အဲ့အစား အယူအဆပိုင်းကို အရင် လေ့လာဖို့လိုပါတယ်။ Pagination ဆိုတာဘာလဲ၊ client side pagination နဲ့ server side pagination နှစ်ခုကို ဘယ်လိုနားလည်လို့ရမလဲ၊ pagination ဆိုတာနဲ့ offset ပါလာပြီ၊ limit ပါလာပြီ၊ page ပါလာပြီ။ အဲ့ term တွေက ဘာတွေလဲ၊ offset ကိုလိုချင်ရင် (page-1)*limit ဆိုတဲ့ equation ကို ဘာလို့သုံးတာလဲ။ ဒါက လေ့လာရင်အဆင်ပြေအောင် မေးခွန်းလေးတွေထုတ်ပြတာပါ။ [စာရှည်နေပြီမို့ အသေးစိတ်တော့မရှင်းတော့ပါဘူး၊ ကိုယ်တိုင်လေ့လာရင်း အဆင်မပြေရင် အချိန်မရွေးလာမေးနိုင်ပါတယ်။] အဲ့ကနေမှ client pagination ဆို ဖန်တီးဖို့ အယူအဆက တမျိုးရှိမယ်၊ server side ဆို တမျိုးရှိမယ်၊ အကွာကြီးတော့မဟုတ်ပါ။ အဲ့လို theory and concept ကို အပိုင်ကိုင်မိပြီဆိုရင် programming language ဆိုတာက ကိုယ့်အတွက် လက်နက်ဖြစ်သွားပြီ၊ Python သုံးပြီး pagination တည်ဆောက်ဆိုလည်း ရသွားမယ်၊ JS သုံးဆိုလည်း ရသွားမယ်။

အခုလို အကြောင်းရာတခုကို လေ့လာမယ်ဆိုရင်(လေ့လာတဲ့အခါမှာလည်း ကိုယ့်မှာ mentor မရှိလို့ AI ကိုပြန်မေးပြီးပဲ လေ့လာသွားမယ်ဆိုရင်) AI က ထုတ်ပေးတဲ့ code ကို အမှားရှာတတ်လာမယ်၊ performance ကောင်းအောင်လုပ်နိုင်လာမယ်၊ optimise သေချာလုပ်တတ်သွားပါလိမ့်မယ်။ AI ကြောင့်ပဲ ကိုယ်လည်း လေ့လာရခက်တဲ့ Theory တွေ၊ Concept တွေကို ခပ်မြန်မြန်လေ့လာသွားနိုင်ပါမယ်။ စမ်းကြည့်စေချင်ပါတယ်။

Practical and Project Experience

ဒါကတော့ လက်တွေ့ပေါ့။ အပေါ်မှာပြောခဲ့တဲ့ Pagination ကိုပဲ စာတွေ့လေ့လာရင်း နည်းနည်းသဘောပေါက်ပြီဆိုရင် ကိုယ်တိုင် ဖန်တီးကြည့်ဖို့ လိုပါသေးတယ်။ ကိုယ်တိုင် code ရေးလိုက်မှ စာတွေ့ကို ကိုယ်တိုင် နှစ်နှစ်ကာကာသဘောကျသွားတာမျိုးပါ။ အဲ့တော့မှ code ကို ကျက်ထားတာမဟုတ်ဘဲ စွဲမြဲသွားတာပါ။ များများရေးကျင့်လေလေ၊ AI ကိုသုံးပြီး ကိုယ့်လေ့လာရေးက ခရီးတွင်လေလေပါပဲ။ အလေ့အကျင့်ဆိုးကတော့ prompt ရိုက် -> AI ထုတ်ပေးတာကို တန်းသုံး လုပ်တာပါပဲ။ ကိုယ့်ရဲ့ စဥ်းစားဉာဏ်ကိုလည်း ထုံထိုင်းစေပါတယ်။ တကယ့်ကို bug အကြီးကြီးတွေကြုံလာရင်လည်း ဘာမှမလုပ် တတ်တော့ပါဘူး။ AI ကို အသုံးမတတ်ရင် ထုံထိုင်းလေးတွေ ဖြစ်သွားနိုင်ပါတယ်။ တခုခုဆို ကိုယ်တိုင်မစဥ်းစားမကြံဆတော့ဘဲ prompt ပဲ ရိုက်ချင်နေတာမျိုးပါ။ အတော် အန္တရာယ်ကြီးပါတယ်။

ကိုယ့်ရဲ့ စဥ်းစားဉာဏ်ကို ထက်မြက်အောင် သွေးဖို့ AI ကို မေးရင်း resource တွေရှာခိုင်းရင်း ကိုယ်က ဖတ်ရှုလေ့လာရပါမယ်။ မဟုတ်ရင်တော့ Prompt ရိုက်တတ်ရုံ ခဏတာအလုပ်ဖြစ်ရုံပဲရပါမယ်။ Developer အနေနဲ့ ရှင်သန်ရပ်တည်ဖို့ ခက်ပါလိမ့်မယ်။ AI အစားထိုးခံရမယ့် Developer ဖြစ်သွားပါလိမ့်မယ်။ အဲ့တာကို ဆန့်ကျင့်ဘက်ပြောင်းချင်ရင်တော့ AI ကို learning tool အနေနဲ့ partner အနေနဲ့ အသုံးချတတ်ဖို့ leverage လုပ်တတ်ဖို့ လေ့ကျင့်ရပါမယ်နော်။ Code ရေးဖို့ Antigravity ပဲသုံးသုံး၊ Cursor ပဲသုံးသုံး၊ Opencode ပဲသုံးသုံး Coding Agent ကပဲ လုပ်သွားပြီး ကိုယ်က ဘာမှမသိလိုက်ဘူး၊ ကိုယ့် project ကို ကိုယ်က ခေါင်းကိုင်ထားတာမျိုးမဖြစ်ဘူးဆိုရင် အမြန်ဆုံးလမ်းကြောင်းပြောင်းဖို့လိုပါပြီ။ သူတို့ကိုသုံးပြီး Best Practice တွေကို ကိုယ်က စုတုပြုလုပ်ဖို့နဲ့ စနစ်တကျ Theory ကို နားလည်ဖို့ ကြိုးစားရမှာပါ။

အသုံးတတ်ရင် အတော်အကျိုးပေးသလို အသုံးမတတ်ရင်လည်း အတော်ထုံထိုင်းသွားနိုင်တာမို့ သတိချပ်စေချင်ပါတယ်နော်။

နောက်ဆုံးအကြံပြုချက်

Learning Approach

  1. စနစ်တကျလေးလေ့လာပါ

    • Tutorial hell ထဲမကျအောင်
    • Project-based learning ကို ပိုဦးစားပေးပါ

  2. Senior Developer ရှာပါ

    • လမ်းညွှန်ပေးနိုင်မယ့်သူကို ချဥ်းကပ်ပါ
    • Community တွေမှာ ပါဝင်ဆွေးနွေးပါ

  3. AI ကို Learning Tool အနေနဲ့ သုံးပါ

Learning Resources

HTML & CSS

HTML:

CSS:

CSS Methodologies:

CSS Preprocessors:

JavaScript

Core JavaScript:

Object & Array:

Destructuring & Spreading:

Higher Order Functions:

Asynchronous JavaScript:

React & Libraries

React:

State Management:

HTTP Client:

Backend

Express & REST API:

Database

NoSQL (MongoDB):

RDBMS (PostgreSQL):

UI Libraries

Component Libraries:

Animation & Effects:

Comprehensive Learning

Full Course:

Study Plan & Code Samples

ကျနော့်ရဲ့ Study Plan:

Code Samples: