1
908

Frontend Roadmap

Myo Thant Kyaw

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 

Comment:
Please Login To Create Comment Login
Loading...
Min Pyae Phyo Oo 2 years ago PERFECT