AH ရဲ့ Web development လမ်းညွန်

• ဘယ်ကနေ စ လေ့လာရမယ်
• web development ဘယ်နှစ်ပိုင်းရှိတယ်
• ဘယ်အပိုင်းကို လိုက်ရမယ်
• ဘယ်နည်းပညာတွေ ခေါတ်စားနေတယ်
• ဘယ်ဟာကတော့ တကယ့်လက်တွေ့အလုပ်မှာအသုံးဝင်တယ်
• ဘယ်ဟာတွေကိုအဓိကလေ့လာရမယ်

ဆိုတာကို မသိတာ ပဲဖြစ်ပါတယ်

ကျနော်တို့ AH က senior developers တွေကလည်း ဒီလို ပြဿနာ တွေကိုဖြတ်သန်းခဲ့ရတာဖြစ်တဲ့အတွက် မိမိတို့အတွေ့အကြုံနဲ့ အကြံပြုလိုတာကြောင့် ဒီ notes လေးရေးထားတာဖြစ်ပါတယ်။

မှတ်ချက် ဒီအောက်ကအကြံပေးချက်တွေက web development အတွက်အဓိကပဲဖြစ်ပါတယ်။

---

ဘယ်ကနေ စ လေ့လာရမလဲ

Web development ဆိုတဲ့အတိုင်း HTML , CSS , Javascript ကတော့လုံးဝ အခြေခံပဲဖြစ်ပါတယ်။ ဒီ ၃ ခုစလုံးက မဖြစ်မနေလေ့လာရမယ့်အရာပါ အကုန်လုံးကို နှောကြေနေအောင် ရနေဖို့ကမလွယ်ဘူးဆိုပေမယ့် ဒီ ၃ ခုစလုံးရဲ့ အခြေခံတွေကတော့ သိကိုသိထားရပါမယ်။

web development ဘယ်နှစ်ပိုင်းရှိလဲ

Web development အဓိက ၅ ပိုင်းရှိပါတယ်။

• frontend
• backend
• fullstack
• tester
• devops

Frontend ဆိုတာ

User interface, website ရဲ့ design, color တွေ layouts တွေအပိုင်း User Experience, website ကိုအသုံးပြုရလွယ်ကူအောင်လုပ်တဲ့အပိုင်းစ တာတွေကို ဦးစားပေးရေးတဲ့အပိုင်းပါ အဓိက HTML, CSS, JS နဲ့ရေးပါတယ်

Frontend Libraries/Frameworks

HTML, CSS, JS တွေကိုလည်းပိုပြီးအသုံးပြုရ အဆင်ပြေအောင် library တွေ framework တွေလုပ်ထားပေးပါတယ်

ဥပမာ bootstrap ဆိုတာ css library တစ်မျိုးနဲ့ reactjs ဆိုတာ javascript library တစ်မျိုးပေါ့

frontend မှာလူသုံးများတဲ့ library, frameworks တွေကတော့ Bootstrap css, Tailwind css, Vue js, React js, Next js and Angular စတာတွေပဲဖြစ်ပါတယ်

---

Backend ဆိုတာ

website ပိုင်ဆိုင်သူတွေ client တွေကိုလွယ်ကူအောင်လုပ်တာမျိုးပါ ဥပမာ နောက်ကွယ်ကနေ သတင်းအသစ်တွေ၊ ပစ္စည်းအသစ်တွေတင်တာတွေကိုလွယ်ကူအောင် CMS , dashboard တည်ဆောက်ပေးတာမျိုးဖြစ်ပါတယ်။ အဲဒီအထဲမှာ data ဖတ်တာ၊ ထည့်တာ၊ ဖျက်တာ၊ ပြင်ဆင်တာတွေကိုအဓိကရေးပေးရပါတယ်။

Backend မှာကျတော့ Nodejs , PHP , Python, Go စတာတွေကိုလေ့လာရပါတယ်

Backend Libraries/Frameworks

Frontend လိုမျိုးပဲ Nodejs , PHP , Python, Go တွေရဲ့ library တွေ framework တွေလဲရှိပါတယ်

ဥပမာ express js ဆိုတာ nodejs library တစ်မျိုးနဲ့ laravel ဆိုတာ php ရဲ့ library တစ်မျိုးပေါ့

backend မှာလူသုံးများတဲ့ library, frameworks တွေကတော့ Laravel, Express, Nest js, Sympony စတာတွေပဲဖြစ်ပါတယ်

backend မှာကျတော့ library တွေ framework တွေအပြင်တခါတည်း ready made ရေးထားတဲ့ CMS - content managment system တွေပါရှိပါတယ်

အဲဒါတွေကတော့ php မှာဆို wordpress, drupal, cockpit, october တို့ဖြစ်ပြီး nodejs မှာဆို strapi, ghost တို့ဖြစ်ပြီး python မှာဆို django စတာတွေပဲဖြစ်ပါတယ်။

---

Fullstack ဆိုတာ

frontend ရော backend ရော ၂ ခုစလုံးပါတဲ့အလုပ်မျိုးပါ fullstack developer တစ်ယောက်ကများသောအားဖြင့် senior developer ဖြစ်ပြီး coding skill မှာလည်းတော်တော်ကောင်းကြပါတယ်။

---

Testing ဆိုတာ

Testing ကတော့ အဓိက websites, web app တွေစစ်ဆေး ပြသနာရှာရတဲ့အလုပ်ပါ။ သူက frontend, backend ရယ်မဟုတ်တော့ဘူး website, web app တို့အားလုံးကို client တွေလက်ထဲမအပ်ခင် စစ်ဆေးတာ developers တွေရေးထားကို အပြစ်ရှာတာမျိုးပေါ့ အကြောင်းမရှိ အပြစ်ရှာတာတော့မဟုတ်ဘူး သူလည်း သူ့ professional အလုပ်အနေနဲ့ testing လုပ်တဲ့ tools တွေသုံးတယ် website တွေကို အသေးစိတ် စေ့စပ်သေချာစွာ စစ်တယ် အချို့ company တွေက tester ကိုသီးသန့်မထားပဲ developers တွေ manager တွေကပဲ စစ်လိုက်တာမျိုးလုပ်ကြပါတယ်။ Tester က frontend,backend,fullstack တို့လိုမဟုတ်ပဲအလုပ်ခေါ်တာနည်းတတ်ပါတယ်။

---

Devops ဆိုတာ

Devops engineer ဆိုတာ website ကို website အနေနဲ့မဟုတ်တော့ပဲ software/app တစ်ခုအနေနဲ့သွားတာဖြစ်တယ် developers တွေအဖွဲ့လိုက်အတူတူ code ရေးတာကို အဆင်ပြေအောင်၊ ရေရှည်မှာ ပြသနာနည်းအောင်၊ resources, memory​ တွေသိပ်မသုံးရပဲ performance တွေကို ကောင်းအောင်၊ task တွေကို automation လုပ်တာ စတာတွေကို အဓိကဦးဆောင်လုပ်ရတဲ့သူပါ။ Devops engineer တွေဟာ coding ကအစ အောက်သက်ကြေခဲ့တဲ့ developer မျိုးဖြစ်ပြီး software development တွေမှာဆိုအဓိက team lead တွေလည်းဖြစ်နေတတ်ပါတယ်။

---

ဘယ်အပိုင်းကို လိုက်ရမလဲ

ကျနော်တို့ AH အနေနဲ့အကြံပေးချက်အရဆို

Frontend

animation လေးတွေလှုပ်ရှားမှုတွေ အရောင်တွေအပိုင်းစိတ်ဝင်စားတယ်ဆို frontend အပိုင်းကိုလိုက်ပါ ပုံဆွဲတာ ပန်းချီဆွဲတာဝါသနာပါတယ် ဆို frontend အပိုင်းကိုလိုက်ပါ ခုမှစ လေ့လာမယ်ဆိုတဲ့သူတွေ frontend အပိုင်းကိုလိုက်ပါ

Backend

data တွေ ဖြည့်၊ ဖျက်၊ ပြင်ဆင်တာတွေစိတ်ဝင်စားတယ်ဆို backend ကိုလိုက်ပါ Algorithms တွေ၊ logic တွေတွေးခေါ်တာမျိုး စိတ်ဝင်စားတယ်ဆို backend ကိုလိုက်ပါ အရောင်တွေ ပုံဆွဲ ပန်းချီဆွဲတာတွေကို ဝါသနာမပါဘူးဆို backend အပိုင်းကိုလိုက်ပါ

မှတ်ချက်။ ။ backend ကိုတခါတည်းလေ့လာရင် ခက်ခဲတာမို့ frontend အခြေခံလေးရှိထားရပါမယ်။

Fullstack

ရှေ့က frontend နဲ့ backend မရပဲ fullstack သွားလို့မရပါ။ frontend လည်းရ backend လည်းရပြီလို့ထင်ရင် fullstack အနေနဲ့သွားနိုင်ပါတယ်။ senior developer အနေနဲ့အများကို ဦးဆောင်တာမျိုးလုပ်ချင်တယ်ဆို fullstack သွားလို့ရပါတယ်။

Testing

အလုပ်ကိုစေ့စေ့စပ်စပ် သေသေချာချာလုပ်တတ်တဲ့သူမျိုးဆို testing အပိုင်းလိုက်ပါ frontend , backend, fullstack ပိုင်းတွေလို coding သိပ်မရေးချင်ဘူးဆို Testing အပိုင်းလိုက်လိုက်လို့ရပါတယ် အလုပ်ခေါ်တာလည်းနည်းတတ်လို့ Testing လိုင်းကိုလိုက်တဲ့သူနည်းကြပါတယ် တဘက်ကပြန်တွေးရင် Tester တွေရှားပါးတဲ့အတွက် အလုပ်ရရင်လစာ ကောင်းတတ်ပါတယ်

Devops

ရှေ့က frontend, backend နဲ့ fullstack လုပ်ပြီးမှ Devops ကိုသွားသင့်ပါတယ် website တင်မဟုတ်ပဲ software development တစ်ခုလုံးကိုပါစိတ်ဝင်စားတယ် ပြီးတော့ developers တွေအများကြီးနဲ့ အတူတူလုပ်ချင်တယ်၊ ဦးဆောင်ချင်တယ်၊ လစာ ကောင်းချင်တယ်ဆို devops လိုင်းကိုသွားသင့်ပါတယ်။

---

ဘယ်နည်းပညာတွေ ခေါတ်စားနေသလဲ

2022 ထဲမှာ language အနေနဲ့ခေါတ်စားတာတော့ Javascript, Python, PHP, Go, Dart တို့ပဲဖြစ်ပါတယ်။

Frontend အပိုင်း JS ခေါတ်စားနေတာကတော့ React, Vue, Angular, Svelte, Alpine, Nextjs, Nuxtjs, Gatsby, Gridsome, Redux, Vuex, Vite, Rollup, Eletron နဲ့ Typescript တို့ပဲဖြစ်ပါတယ်

Frontend အပိုင်း CSS ခေါတ်စားနေတာကတော့ Bootstrap, Sass, Post-CSS, Tailwind, Bulma, UIKIT နဲ့ Unocss တို့ပဲဖြစ်ပါတယ်

Backend အပိုင်း framework/CMS တွေခေါတ်စားနေတာကတော့ Laravel, Strapi, Wordpress, Nestjs, HeadlessCMS, Deno, Express နဲ့ Symphony တို့ပဲဖြစ်ပါတယ်။

Web3, Serverless, GraphQL, Headless, Jamstack, Microservices စတဲ့ web development နည်းပညာတွေလည်း ခေါတ်စားနေပါတယ်။

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

ဘယ်ဟာကတော့ တကယ့်လက်တွေ့အလုပ်မှာအသုံးဝင်သလဲ

အပေါ်မှာရေးသွားတဲ့ languages/framework/library/CMS တွေအများကြီးပဲ ဒါပေမယ့် မြန်မာနိုင်ငံက programmer တစ်ယောက်အနေနဲ့ ဘယ်ဟာကတကယ် အသုံးဝင်လဲဆိုတော့

1. Language (PHP, Javascript, Node.js, Python)
2. Frontend Frameworks/Library (React, Vue, Angular, Nextjs)
3. Backend Frameworks/Library (Laravel, Wordpress, Strapi, Express, Nestjs)

တို့ပဲဖြစ်ပါတယ်။

1. Language

Javascript (client side language)

Javascript က website, web app, mobile app, desktop app တွေအကုန်ရေးနိုင်တာမို့ လေ့လာထားရင်လုံးဝ မမှားပါဘူး အထူးသဖြင့် react, vue, angular တစ်ခုခုပေါ့ ဒီ ၃ ခုထဲကတစ်ခုကိုကောင်းကောင်းရရင် frontend အလုပ်ရဖို့ သေချာပါတယ်။ javascript က node.js နဲ့ရေးပုံရေးနည်းတူတူပဲမို့ တစ်ခုတည်းလေ့လာရုံနဲ့ ၂ ခုရနိုင်တဲ့သဘောပါ။

Node.js (server side language)

လစာနည်းနည်းကောင်းမယ် နိုင်ငံတကာက company တွေနဲ့အလုပ်လုပ်ချင်တယ်ဆို Node.js ကိုလေ့လာပါ foreign နိုင်ငံတွေ (အထူးသဖြင့် အနောက်နိုင်ငံတွေ) မှာကတော့ Node.js သုံးတာများပါတယ်။

PHP

အလုပ်အတွက်ဆို PHP ကို No1 လေ့လာစေချင်ပါတယ် မြန်မာနိုင်ငံမှာ company တွေတော်တော်များများက PHP နဲ့ရေးကြတာဖြစ်ပါတယ်။ မြန်မာမှာ Node.js သုံးတဲ့ company တွေနည်းသေးပါတယ်။

Python

Python ကတော့ PHP နဲ့ node.js နဲ့ယှဥ်ရင် မြန်မာပြည်မှာ အလုပ်နည်းသေးပါတယ် ဒါပေမယ့် foreign နိုင်ငံတွေမှာကတော့ ခေါ်တာများသလို လစာ လည်းတော်တော်မြင့်ပါတယ်။

မှတ်ချက်။ ။ အလုပ်အတွက်ဆို PHP ကိုဦးစားပေးလေ့လာပါ Node.js နဲ့ Python ကိုတော့ ဒုတိယအနေနဲ့လေ့လာပါ

2. Frontend Frameworks/Library

React.js

React.js ကတော့ မြန်မာမှာရော ကမ္ဘာမှာရော အရမ်းသုံးကြလို့ လေ့လာထားရင်လုံးဝမမှားပါဘူး တွဲပြီးလေ့လာသင့်တာတော့ Next.js ပါ

Vue.js

Vue.js ကတော့ခေါတ်စားနေတယ်ဆိုပေမယ့် အလုပ်ခေါ်တာနည်းသေးပါတယ် တရုတ် ဟောင်ကောင်တို့မှာပဲအများဆုံးသုံးတာဖြစ်ပါတယ်။

Angular

Angular ကတော့ google ကမို့လေ့လာထားရင်လည်းမမှားပါဘူး ဒါပေမယ့် typescript နဲ့ရေးတာမို့ react နဲ့ vue ထက်ခက်ပါတယ် Augular ကိုအလုပ်ခေါ်တာကတော့ ပုံမှန်ပါပဲ react လောက်မများပေမယ့် မြန်မာမှာ Angular သုံးတဲ့ company တွေများပါတယ်။

မှတ်ချက်။ ။ အလုပ်အတွက်ဆို React ကိုဦးစားပေးလေ့လာပါ Angular နဲ့ vue ကိုတော့ ဒုတိယအနေနဲ့လေ့လာပါ

3. Backend Frameworks/Library/CMS

Laravel

PHP framework တွေထဲမှာ popular ဖြစ်နေတာကတော့ Laravel ပါ အလုပ်အတွက်ဆို Laravel ကိုလိုက်ပါ မြန်မာမှာရော အာရှနိုင်ငံတွေ Laravel ကိုအရမ်းသုံးပါတယ်

Wordpress CMS

Wordpress CMS ကတော့ အားလုံးသိတဲ့အတိုင်းပဲကမ္ဘာမှာ အသုံးအများဆုံး CMS ပါ သူ့ကိုလေ့လာထားတာကလည်း အလုပ်ရဖို့လွယ်ကူပါတယ်

Strapi CMS

Strapi CMS ကတော့ Node.js language အနေနဲ့ ကမ္ဘာမှာ အသုံးအများဆုံး Headless CMS ပါ foreign နိုင်ငံ (အထူးသဖြင့် အနောက်နိုင်ငံ)တွေမှာ Strapi CMS ကိုအရမ်းသုံးကြပါတယ်

Express JS

Node JS ကိုလိုက်ရင် Express JS ကိုမဖြစ်မနေလေ့လာကြပါတယ်သူက API တွေအလွယ်တကူဆောက်လို့ရလို့ အရမ်း popular ဖြစ်ပါတယ် Node js သုံးပြီး web development လုပ်ရင် Express.js အမြဲပါပါတယ်။

Nest JS

Nest JS ကတော့ Laravel လိုမျိုးပဲ Node.js language အနေနဲ့ အောင်မြင်နေတဲ့ framework ပါ foreign နိုင်ငံတွေမှာ Nestjs ကိုအရမ်းသုံးလာကြပါတယ်

မှတ်ချက်။ ။ အလုပ်အတွက်ဆို Laravel ကိုဦးစားပေးလေ့လာပါ Wordpress နဲ့ Express.js ကိုတော့ ဒုတိယအနေနဲ့လေ့လာပါ

---

ဘယ်ဟာတွေကိုအဓိကလေ့လာရမလဲ

ဒီအောက်က ebook, blog, web, videos တွေကို ဇွဲရှိရှိနဲ့ ဝင်ပြီးလေ့လာပါ

ကျနော်တို့ AH က recommended လုပ်တဲ့ list ပဲဖြစ်ပါတယ်

Myanmar version

Ebook from Sir Ei Maung

• https://github.com/eimg/Books-by-Ei-Maung

Website/Blog

• https://www.creativecoder.blog/posts/blog
• https://www.aprogrammer.blog/series
• https://www.mmcoder.com/article
• https://blog.saturngod.net/
• https://techx.myanmarlinks.net/programming

Videos

• https://www.youtube.com/c/MSquareProgramming/videos
• https://www.youtube.com/c/SoeThihaNaung/videos
• https://www.youtube.com/channel/UCNlvntmN0ILTt4Jw7if6Qmw/videos
• https://www.mmcoder.com/course?free=y
• https://myanmarboc.com/collections/programming-languages/

English version

Website/Blog

• https://www.w3schools.com
• https://medium.com/tag/programming
• https://www.reddit.com/r/programming
• https://dev.to

Videos

• https://www.youtube.com/c/TraversyMedia/videos
• https://www.youtube.com/c/WebDevSimplified/videos
• https://www.youtube.com/c/programmingwithmosh/videos
• https://www.youtube.com/c/CodingGarden/videos
• https://www.youtube.com/c/DevEd/videos