Front-end Dev Roadmap
Front-end developer ကဘာတွေလုပ်ရလဲ
Front-end developer ဆိုတာ website တွေ web app တွေရဲ့ user နဲ့ထိတွေ့ရတဲ့အပိုင်းကို ဖန်တီးတဲ့သူတွေလို့ပြောလို့ရပါတယ်။ အလွယ်ဆုံးပြောရရင်တော့ HTML, CSS, JavaScript တွေရေးရပါတယ်။ User နဲ့တိုက်ရိုက်ထိတွေ့ရတဲ့ User Interface တွေကိုရေးရတာဖြစ်လို့ User တွေကို အကောင်းဆုံး experience တွေပေးနိုင်ဖို့ပါထည့်သွင်းစဉ်းစားရပါတယ်။ ( ဥပမာ ဖုန်းနဲ့သုံးလို့အဆင်ပြေအောင်၊ လေးပြီး loading ကြာမနေအောင်၊ စာတွေပုံတွေကောင်းကောင်းဖတ်နိုင်/ကြည့်နိုင်အောင်၊ စတာမျိုးတွေပါထည့်သွင်းစဉ်းစားပြီး UI တွေကိုတည်ဆောက်ရပါတယ်)။ Browser/JS API တွေကိုအသုံးပြုပြီး Data Manipulation, Caching, Storing လုပ်ရတာမျိုးတွေ၊ တချို့ Advanced Feature တွေရေးရတာမျိုးလည်းလုပ်ရပါတယ်။
Dynamic data တွေပါတဲ့ Web app တွေမှာ အချက်လက်တွေကို ကြည့်ဖို့/ပြင်ဖို့/ဖျက်ဖို့ စတာတွေလုပ်ရတာမျိုးရှိပါတယ်။ အဲ့လိုမျိုးတွေလုပ်ဖို့ Backend dev ကပေးတဲ့ API ဒါမှမဟုတ် cloud service တွေအသုံးပြုပြီးလုပ်ဆောင်ရတာမျိုးတွေကိုလည်းလုပ်ရပါတယ်။ ဒါ့အပြင် SEO (Search Engine Optimization) ကောင်းအောင်လည်းထည့်သွင်းစဉ်းစားရပါတယ်။
ဘယ်လိုလေ့လာရမလဲ
HTML, CSS
အခြေခံအကျဆုံးဖြစ်တဲ့ HTML, CSS နဲ့ JavaScript ကိုတော့မဖြစ်မနေလေ့လာဖို့လိုအပ်ပါတယ်။ HTML နဲ့ CSS ကို အမြဲတမ်းပုံမှန်တွေ့နေကျ UI လေးတွေကို ရေးတတ်ယုံလောက်ထိ အရင်လေ့လာဖို့အကြံပြုလိုပါတယ်။ Layout ချဖို့အရေးကြီးတဲ့ Grid, flex တွေကိုကောင်းကောင်းနားလည်ဖို့လိုပါတယ်။ Mobile, tablet, laptop, desktop (large screen) တွေအကုန်လုံး Responsive ဖြစ်အောင်ရေးနိုင်ဖို့လိုပါတယ်။
ဒီလောက်ရပြီဆိုရင်တော့ CSS ကို plain မရေးတော့ဘဲ Sass, Less တို့လိုမျိုး Preprocessor တစ်ခုခုကိုလေ့လာပြီး နောက်ပိုင်းအဲ့တာကိုသုံးပြီးဆက်ရေးသင့်ပါတယ်။ CSS ကိုမှ ပိုပြီးအဆင်ပြေပြေရေးလို့ရအောင်လုပ်ထားတဲ့ဟာတွေမလို့ အချိန်ကုန်သက်သာစေပါတယ်။
ပြီးရင်တော့ CSS library / framework တွေကိုလေ့လာသင့်ပါတယ်။ ရွေးချယ်စရာများပြီး မှတ်စရာများတယ်ဆိုပေမယ့် အကုန်လိုက်မှတ်နေစရာမလိုပါဘူး။ လူသုံးများတဲ့ Bootstrap, Materialize CSS လိုမျိုးတွေကိုအရင်စမ်းကြည့်သင့်ပါတယ် သူတို့တွေက အလွယ်နဲ့အမြန်သုံးနိုင်ဖို့ကို ရည်ရွယ်ထားတာဖြစ်ပြီး စိတ်ကြိုက် customization လုပ်ချင်တယ်ဆိုရင်တော့ CSS ရေးပြီးတော့ပဲလုပ်ရပါတယ်။ ဒါကြောင့် UI/UX Design ကို အတိအကျ implementation လုပ်ရမယ့် အခါမျိုးတွေကျရင် ဒီကောင်တွေသုံးရတာ ဘာမှထူးမှာမဟုတ်ပါဘူး။
အဲ့လိုအချိန်မှာထည့်သွင်းစဉ်းစားစရာကတော့ utility based ဖြစ်တဲ့ framework တွေပါ။ ဒီထဲမှာတော့ Tailwind CSS ကတော့ နာမည်ကြီးပြီး customization တော်တော်ရပါတယ် ရေးရတာတော့ ready-made တွေထက်နည်းနည်းပိုကြာပေမယ့် plain CSS ရေးရတာထက်တော့အများကြီးပိုမြန်ပါတယ်။ CSS ရပြီးသားသူတွေအတွက် utility class name တွေကိုမှတ်ရတာ သိပ်မခက်ပါဘူး။
HTML, CSS ပြီးရင်တော့ JavaScript ပါ။ CSS ကိုအခြေခံနည်းနည်းရပြီးချိန်မှာ Js ပါတစ်ပြိုင်တည်းလေ့လာလို့ရပါတယ်။ ဒါကတော့ တစ်ဦးနဲ့တစ်ဦးလေ့လာပုံချင်းမတူနိုင်တဲ့အတွက် ကိုယ်အဆင်ပြေသလိုလုပ်နိုင်ပါတယ်။ CSS ကိုလေ့လာနေချိန်အတွင်းမှာပဲ static site project တွေကို ရေးကြည့်ဖို့တိုက်တွန်းချင်ပါတယ်။ ကိုယ့်စိတ်ကူးနဲ့ပုံဖော်ထားတဲ့ design ကိုပဲဖြစ်ဖြစ် Designer တွေဖန်တီးထားတဲ့ design ကိုပဲဖြစ်ဖြစ် Project တစ်ခုအနေနဲ့ ရေးဖို့အကြံပြုပါတယ်။
JavaScript
JavaScript က frontend development မှာအရေးကြီးဆုံးဖြစ်ပြီး beginner တချို့အတွက် challenging ဖြစ်တတ်ပါတယ်။ JavaScript က Programming Language ဖြစ်တဲ့အတွက် programming အခြေခံမရှိသေးရင် Programming အခြေခံ concept တွေကို JavaScript နဲ့အရင်လေ့လာသင့်ပါတယ်။ အခြား C-like programming language တစ်ခုခုနဲ့ programming အခြေခံရထားပြီးသားသူဆိုရင်တော့ Js ရဲ့ object, functions တွေကိုလေ့လာသင့်ပါတယ်။
ပြီးရင်တော့ DOM(Document Object Model), Network requests, Browser API (Local Storage, Session Storage, etc) ဒါတွေကိုဆက်လေ့လာသင့်ပါတယ်။ Concept ရထားပြီးသားသူအဖို့ ဒါတွေက မခက်ပါဘူး သုံးရင်းနဲ့မှတ်မိသွားပါလိမ့်မယ် မမှတ်မိလည်း Google ခေါက်လို့ရပါတယ် :3 ပြီးတော့ Js မှာ အရေးကြီးတဲ့ Promise ကိုသေချာလေ့လာသင့်ပါတယ်။
ဒီလောက်သိထားရင် Mini game တွေ Public/Open API သုံးပြီး data ပြတဲ့ app တွေ စတဲ့ Project တွေကိုရေးနိုင်ပါပြီ။ ကိုယ့်ရဲ့ portfilio အတွက်ရော skill improvement အတွက်ရော project တွေရေးဖို့တိုက်တွန်းချင်ပါတယ်။
Project တွေရေးနိုင်ပြီဆိုပေမယ့် တကယ့်လုပ်ငန်းခွင်ဝင်ဖို့ဆိုရင်တော့ Plain Js (Vanilla) နဲ့မလုံလောက်သေးပါဘူး။ ရေးလို့ရတယ်ဆိုပေမယ့် အချိန်ကုန်လူပင်ပန်းပြီး Maintain လုပ်ရခက်ပါတယ်။ ဒါကြောင့် Frontend Library/Framework တွေကိုလေ့လာရပါမယ်။ ပထမတစ်ခုမဖြစ်မနေလုပ်သင့်တာက jQuery ပါ သူက Vanilla ကိုမှနည်းနည်းလေး ပိုလွယ်အောင်လုပ်ထားတာမို့ ဘာမှမခက်ပါဘူး။ တကယ့်လုပ်ငန်းခွင်မှာ သုံးဖြစ်ဖို့က ရာနှုန်းနည်းပါတယ် (အခုခေတ်မှာ) ဒါပေမယ့် Vanilla ရေးတဲ့နေရာမှာရော၊ legacy project တွေထိရတဲ့အခါတွေမှာအထောက်ကူဖြစ်မှာပါ။
Library/Framework Frontend Library/Framework တွေကလည်း ရွေးစရာများတယ်ဆိုပေမယ့် Local မှာရော Global မှာရော ဈေးကွက်ကောင်းကောင်းရှိတာတွေကတော့ React, Vue, Angular ပါ။ Angular ကတော့ enterprise တွေမှာအသုံးများပါတယ် Framework က strong and mature ဖြစ်တယ်ဆိုပေမယ့် beginner တွေအတွက်လေ့လာရတာ learning curve နည်းနည်းမြင့်မယ်လို့ထင်ပါတယ်။ React နဲ့ Vue မှာ နှစ်ခုလုံးက learning curve သိပ်မကွာဘူးလို့ယူဆလို့ရပါတယ်။ ဒီထဲကမှကြိုက်ရာတစ်ခုခုကို အဓိကထားလေ့လာပြီး ကျန်တစ်ခုကို back up အနေနဲ့လေ့လာထားလို့ရပါတယ်။ Enterprise တွေမှာလုပ်ဖို့စိတ်အားထက်သန်တယ်ဆိုရင်တော့ Angular ကိုအဓိကထားပြီး React ကို back-up အနေနဲ့ထားသင့်ပါတယ်။ React/Vue တို့ကိုလေ့လာတယ်ဆိုရင် (SSR)Server Side Rendering, (SSG)Static Site Generation အတွက် Next/Nuxt ကိုပါဆက်လေ့လာဖို့အကြံပြုလိုပါတယ်။
ဒီထဲမှာအခုတလော Hot ဖြစ်နေတဲ့ Svelte ဆိုတဲ့ framework တစ်ခုအကြောင်းနည်းနည်းပြောချင်ပါတယ်။ Stackoverflow 2022 Survey မှာ most loved frontend framework လို့သိရပါတယ်။ Community က mature မဖြစ်သေးတာရယ် Company တွေကသိပ်မသုံးကြသေးတာရယ်ကြောင့် လောလောဆယ်တော့ hobby project တွေအတွက်ပဲသုံးဖြစ်နေကြပါသေးတယ်။ Potential ရှိတဲ့ framework တစ်ခုဖြစ်တာကြောင့် အချိန်ရှိရင်တော့လေ့လာထားတာမမှားပါဘူး :_)
Summary
လေ့လာရမယ့်ဟာတွေတော့များလွန်းပါတယ်။ ဒီမှာပြောသွားတဲ့ဟာတွေက မရှိမဖြစ်လုပ်ထားရမယ်ဟာတွေကိုပဲအဓိကထား ပြောသွားတာဖြစ်ပါတယ်။ အတွေ့အကြုံက ကိုယ်ဘာဆက်လေ့လာရမလဲ ဘာလုပ်သင့်လဲဆိုတာကိုကိုလမ်းညွှန်ပေးသွားပါလိမ့်မယ်။ အတွေ့ကြုံရဖို့က company တစ်ခုမှာအလုပ်လုပ်နေမှရနိုင်တာမဟုတ်ပါဘူး။ ရှိပြီးသား project တွေကိုလိုက်ရေးကြည့်တာ၊ Hobby project လုပ်တာ၊ open source project တွေရဲ့ structure တွေကိုလေ့လာတာတွေကနေ အတွေ့ကြုံ အများကြီးရနိုင်ပါတယ်။ Frontend Mentor လို site မျိုးက challenge ကိုရေးပြီးတိုးတက်အောင်လုပ်လည်းရပါတယ်။
Resources