Hello အားလုံး မင်္ဂလာပါ

အခုကျွန်တော်ပြောပြပေးမှာက Front အတွက် Roadmap ဖြစ်ပါတယ်။

html css ကိုတော့ထည့်မပြောတော့ပါဘူး ဒီ ပိုစ် ကိုဖတ်နေသူတွေကို ဒီနှစ်ခုနဲ့အကျွမ်းတဝင်ရှိပီးသားလို့ယူဆ

ထားပါ့မယ်။

step 1 (Javascript)

Javascript ကဒီနေ့ခေတ်မှာ တော်တော်လေးအသုံးများသလို

နေရာတိုင်းလိုလိုမှာတွေ့နေရပါတယ်။

အဲ့ဒီ့ အပြင် ပြည်တွင်းမှာ ရော ပြည်ပမှာပါ

အလုပ်မရှားတဲ့့language တစ်ခုဖြစ်ပါတယ်။

အဲ့အတွက်အကြောင့် ဘယ်လို Developer မျိုးမဆို javascript ကို မသိမဖြစ်

သိထားဖို့လိုအပ်နေပါပြီ။

How to Learn? 

javascript  ကိုလေ့လာဖို့အတွက် w3school  ကိုပဲအကြံပေးချင်ပါတယ်

ဘာဖြစ်လို့လည်းဆိုတော့ language တစ်ခုကိုလေ့လာသူအနေနဲ့ w3 က အစီအစဉ်တကျ

course outline ကိုဖန်တီးပေးထားလို့ပါ

မိတ်ဆွေက Video ကြည့်ရတာသဘောကျရင်တော့  FreeCodeCampက video ကိုကြည့်ပီး

လေ့လာဖို့အကြံပြုလိုပါတယ်။ တစ်ယောက်နဲ့တစ်ယောက်လေ့လာပုံတွေမတူကြလို့ ခုကျွန်တော်ပြောတာကို

သဘောကျတယ် ကိုယ်နဲ့ကိုက်ညီတယ်ဆိုမှ လိုက်လုပ်ပါ ။ နောက်မှ ကျွန်တော် ဘယ်လို learning လုပ်လည်းဆိုတာကို သပ်သပ်ရေးပေးပါဦးမယ်။

Step 2 (Terminal)

Terminal က အရေးကြီးပါတယ်။

Language တွေလေ့လာတာပဲဖြစ်ဖြစ် 

Server Config တွေ Deployment တွေလုပ်တဲ့အခါမျိုး

Android Development Setup  တွေ နဲပ အခြား နေရာများမှာပါ

 Terminal ကိုမဖြစ်မနေသုံးရပါတယ်။

အဲ့အတွက် ကြောင့် Terminal(window မှာ cmd ) ကို လေ့လာကို လေ့လာရပါမယ်

အသုံးများတဲ့ terminal command တချို့ကိုဖော်ပြပေးလိုက်ပါတယ်။

cd /directory  (folder or director တစ်ခုကို ညွန်ပြချိန်တဲ့အခါအသုံးပြုရမှာပါ)

cd .. (directory ကို back  ပြန်လုပ်တာပါ)

touch filename.txt (.txt .php .env etc.. file တွေဖန်တီးတဲ့အခါမှာအသုံးပြုပါတယ်။)

code . (vscode editor  ကို terminal ကနေဖွင့်ဖို့သုံးပါတယ်)

mkdir blog_project (folder or directory ဖန်တီးတဲ့အခါမှာအသုံးပြုပါတယ်)

ls -al (for mac) dir (for window) (directory listing  လုပ်ကြည့်တာပါ)

ဒီ အတွက်သီးသန်ံအချိန်ပေးပီးလေ့လာစရာမလိုပေမဲ့ ကိုယ်ရေးခဲ့ တဲ့  command တွေကိုတော့

မှတ်သားသွားပါ လေ့လာနေတဲ့ stack က terminal အသုံးပြုရတာတွေပါနေခဲ့ ရင်် doc မှာ တစ်ခါထည်း

ပါပီးသားမလို့ အလွတ်မကျက် သီးသန်ံလေ့လာစရာမလိုပါ။

Step 3 (Nodejs and es6 syntax)

မိတ်ဆွေဘာတွေဖန်တီးချင်တာလည်း 

Server Side လား Client Side လား

Design System တွေလား

Android or IOS or TV App(cross platform)

Website ,window app , mac app , linux app ?

ဘာမဆို nodejs နဲ့ အကုန်ရေးလို့ရပါတယ်

javascript ကို နားလည်ပီးသားလူတစ်ယောက်အနေနဲ့တော့ nodejs ကမခက်ခဲပါဘူး

မြန်မြန်ဆန်ဆန်နဲ့ လွယ်လွယ်ကူကူ လေ့လာချင်ရင်တော့

Video Crash Course နဲ့မြန်မြန်ဆန်ဆန် လေ့လာနိုင်ပါတယ်။

 အဲ့တာအပြင် es6 syntax  တွေကိုပဲအသုံးပြုပီးရေးသားရမှာဖြစ်ပါတယ် ။ 

အဲ့လိုပဲ nodejs မှာ 

modern syntax ဖြစ်တဲ့ babel script ကိုလည်းလေ့လာသင့်ပါတယ် 

sorryလေ့လာရပါမယ်။

သိပ်မကြာခင် nodejs (es6 babel script) course လေးလုပ်ပေးဖို့ရှိပါတယ်။

Project Build  လုပ်တဲ့အထိသင်ပေးမျာပါ :D

Server Side Framework

ပီးရင်တော့ Nodejs Server side Framework တွေဖြစ်တဲ့ 

ExpressJS

AdonisJS( Laravel Developer Familiar)

Expressjs  ကိုအလုပ်ရဖို့ အလုပ်ရှာဖို့တွက် သေချာလေ့လာသင့်ပါတယ်

Adonisjs ကိုတော့ ကျွန်တော့ ဝါသနာပါတဲ့ appတွေရေးတဲ့အချိန်မျိုးမှာအသုံးပြုပါတယ်

မိတ်ဆွေတို့က adonisjs ကိုမလေ့လာလည်းရပါတယ်။

Setup 4  Nodejs UI Framework and LIbiary

Nodejs နဲ့ဖန်တီးထားတဲ့ ui libiary တွေ​ေ Design System တွေအများကြီးရှိပါတယ်။

Vue Angular  React  Svelte  Imbajs  

React နဲ့ Vue မှာ ui design ရေးသားဖို့ ui libiary တွေအရမ်းကိုများပါတယ်

Nodejs  နဲ့ အသုံးပြုပီး Web UI တွေဖန်တီးမဲ့သူတွေအတွက် အရေးကြီး ပီး

အလုပ်လည်းမြန်မြန်ရနိုင်မဲ့ ui framework or libiary တွေ ဖော်ပြပေးလိုက်ပါတယ်။

Angular Eva Design System(Nebular) Angular ကျွန်တော်မရေးဖူးပါ။

React (Material UI Semantic UI ) 

မိတ်ဆွေက  React Developer ဖြစ်ချင်တယ်ဆိုရင် 

Material ui ကို သေချာပေါက်လေ့လာသင့်ပါတယ်

Vue (Vuesax Vuetify)

Vuetify ကို လေ့လာသင့်ပါတယ် 

Step 5 Wanna Go To Cross Platform?

အပေါ်က ကျွန်တော်ပြောခဲ့တဲ့ Vue React Svelte Angular တွေထဲက 

တစ်ခုခုကိုလေ့လာပီး ယုံကြည်မှုတစ်ခုရပီဆိုရင်တော့ Cross Platform ဘက်ကိုသွားသင့်ပါတယ်

အဲ့ထဲကမှ  React Native က အလုပ်အကိုင်အရ popularity အရ  Mature LIbiary အရ

React Native ကို သာရွေးချယ်ရမှာပါ။

အဲ့ထဲကသဘောကျတဲ့ Cross Platform UI Libiary နှစ်ခုကိုဖော်ပြပေးလိုက်ပါတယ်။

UI KITTEN(လေ့လာရတာနည်းနည်းလက်ပေါက်ကတ်သရောင်နဲ့ ကျွန်တော်အကြိုက်ဆုံး design system တစ်ခုပါ)

Native Base(လေ့လာရလွယ်ပါတယ် Community ကြီးတယ်)

 ဒီတစ်ခုကတော့ ui system or ui libiary မဟုတ်ပါဘူး

မိတ်ဆွေ css တွေရေးရတာအရမ်းသဘောကျတဲ့သူလား ?

react native design တွေဆွဲတဲ့အခါမှှှာ pure css တွေနဲ့ဆွဲလို့ရအောင်

ဖန်တီးပေးထားတဲ့ Tool လေးရှိပါတယ် 

StyledComponentလို့ခေါ်ပါတယ် 

ဒီလောက်ဆိုဘာတွေလေ့လာသင့်တယ် ဆိုတာ သိသွားလောက်ပီဖြစ်လို့

 Facebook ကိုပိတ်ပီး အခုပဲလေ့လာလိုက်ပါတော့

မပိတ်မှန်းသိပေမဲ့ တမင်ပြောဆိုခြင်းသာဖြစ်သည်။  :D