သင်၏ Front-End စွမ်းရည်ကို မြှင့်တင်ရန် နောက်ထပ် ပရောဂျက် ၉ ခု

နိဒါန်း

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

ဥပမာအားဖြင့်၊ Facebook သည် လွန်ခဲ့သော လေးနှစ်က open-sourced နှင့် ကမ္ဘာတစ်ဝှမ်းရှိ JavaScript developer များအတွက် နံပါတ်တစ်ရွေးချယ်မှုဖြစ်လာပြီးဖြစ်သည်။

Vue နှင့် Angular တို့တွင်လည်း ၎င်းတို့၏တရားဝင်ပရိသတ်အခြေခံရှိသည်။ ထို့နောက် Svelte နှင့် Next.js သို့မဟုတ် Nuxt.js ကဲ့သို့သော အခြား universal framework များ ရှိပါသည်။ Gatsby၊ Gridsome၊ နှင့် Quasar... နှင့် အခြားအရာများ။

သင့်ကိုယ်သင် အတွေ့အကြုံရှိသော JavaScript developer တစ်ဦးအဖြစ် သက်သေပြလိုပါက၊ JS အဟောင်းများနှင့် အလုပ်တွဲလုပ်ခြင်းအပြင် အမျိုးမျိုးသော frameworks များနှင့် libraries များနှင့် ပတ်သက်၍ အနည်းဆုံး အတွေ့အကြုံရှိသင့်ပါသည်။

2020 ခုနှစ်တွင် သင့်အား front-end master ဖြစ်လာစေရန် ကူညီရန်အတွက် မတူညီသော ပရောဂျက် ကိုးခုကို စုစည်းထားပြီး တစ်ခုစီသည် မတူညီသော JavaScript framework နှင့် library ကို သင်တည်ဆောက်ကာ ပေါင်းထည့်နိုင်သော နည်းပညာအစုစုအဖြစ် အာရုံစိုက်ထားပါသည်။ အရာများကို အမှန်တကယ် ဖန်တီးခြင်းထက် သင့်အား မည်သည့်အရာကမျှ အထောက်အကူမပြုကြောင်း သတိရပါ၊ ထို့ကြောင့် ရှေ့ဆက်ပါ၊ သင့်စိတ်ကို အသုံးပြုပြီး ၎င်းကို ဖြစ်မြောက်အောင်လုပ်ပါ။

ဆောင်းပါးကို EDISON Software ၏ ပံ့ပိုးမှုဖြင့် ဘာသာပြန်ခဲ့ပါသည်။ အမှတ်တံဆိပ်ပေါင်းစုံစတိုးဆိုင်များအတွက် virtual fitting အခန်းများပြုလုပ်သည်။နှင့် စမ်းသပ်ဆော့ဖ်ဝဲ.

React (ချိတ်ဖြင့်) အသုံးပြု၍ ရုပ်ရှင်ရှာဖွေရေးအက်ပ်

သင်စတင်နိုင်သည့် ပထမဆုံးအရာမှာ React ကို အသုံးပြု၍ ရုပ်ရှင်ရှာဖွေရေးအက်ပ်ကို ဖန်တီးရန်ဖြစ်သည်။ အောက်တွင်ဖော်ပြထားသောပုံသည်နောက်ဆုံးလျှောက်လွှာ၏ပုံသည်-

သင်ဘာသင်ယူမည်နည်း
ဤအက်ပ်ကိုတည်ဆောက်ခြင်းဖြင့်၊ အတော်လေးအသစ်ဖြစ်သော Hooks API ကိုအသုံးပြုခြင်းဖြင့် သင်၏တုံ့ပြန်မှုစွမ်းရည်ကို မြှင့်တင်နိုင်မည်ဖြစ်သည်။ ဥပမာပရောဂျက်သည် React အစိတ်အပိုင်းများ၊ ချိတ်အများအပြား၊ ပြင်ပ API နှင့် CSS ပုံစံအချို့ကို အသုံးပြုသည်။

နည်းပညာအစုအဝေးနှင့်အင်္ဂါရပ်များ

• ချိတ်ဖြင့် တုံ့ပြန်ပါ။
• ဖန်တီး - တုံ့ပြန် - app ကို
• JSX
• CSS ကို

မည်သည့်အတန်းကိုမျှ မသုံးဘဲ၊ ဤပရောဂျက်များက သင့်အား Functional React သို့ ပြီးပြည့်စုံသော ဝင်ခွင့်အမှတ်ကို ပေးဆောင်ပြီး 2020 တွင် သင့်ကို ကျိန်းသေ ကူညီပေးပါမည်။ သင်ရှာလိုရသည် ဥပမာ ပရောဂျက်ဗျ။. ညွှန်ကြားချက်များကို လိုက်နာပါ သို့မဟုတ် သင့်ကိုယ်ပိုင်လုပ်ပါ။

Vue နှင့် ချတ်အက်ပ်

သင်လုပ်ဆောင်ရမည့် နောက်ထပ်အကောင်းဆုံးပရောဂျက်မှာ ကျွန်ုပ်အကြိုက်ဆုံး JavaScript စာကြည့်တိုက်- VueJS ကို အသုံးပြု၍ ချတ်အက်ပ်တစ်ခု ဖန်တီးရန်ဖြစ်သည်။ အပလီကေးရှင်းသည် ဤကဲ့သို့သောပုံပေါ်ပါမည်-

သင်ဘာသင်ယူမည်နည်း
ဤသင်ခန်းစာတွင်၊ အစိတ်အပိုင်းများဖန်တီးခြင်း၊ အခြေအနေကို ကိုင်တွယ်ခြင်း၊ လမ်းကြောင်းများဖန်တီးခြင်း၊ ပြင်ပကုမ္ပဏီဝန်ဆောင်မှုများသို့ ချိတ်ဆက်ခြင်းနှင့် အထောက်အထားစိစစ်ခြင်းတို့ကို ကိုင်တွယ်ခြင်းတို့ကိုပင် Vue အက်ပ်ကို အစမှနေ၍ မည်သို့ဖန်တီးရမည်ကို သင်လေ့လာနိုင်မည်ဖြစ်သည်။

နည်းပညာအစုအဝေးနှင့်အင်္ဂါရပ်များ

• Vue
• vuex
• Vue Router
• Vue CLI
• တွန်း
• CSS ကို

၎င်းသည် Vue ဖြင့် စတင်ရန် သို့မဟုတ် 2020 တွင် ဖွံ့ဖြိုးတိုးတက်မှုသို့ရောက်ရန် သင်၏ရှိပြီးသားအရည်အချင်းများကို မြှင့်တင်ရန် အမှန်တကယ်ကောင်းမွန်သောပရောဂျက်ဖြစ်သည်။ သင်ရှာလိုရသည် tutorial လေးပါ။.

Angular 8 နှင့်အတူလှပသောရာသီဥတုအက်ပ်

ဤဥပမာသည် Angular 8 ကို အသုံးပြု၍ လှပသောရာသီဥတုအက်ပ်ကို ဖန်တီးရန် ကူညီပေးလိမ့်မည်-

သင်ဘာသင်ယူမည်နည်း
ဤပရောဂျက်သည် သင့်အား ဒီဇိုင်းအစမှ ဖွံ့ဖြိုးတိုးတက်မှုအထိ၊ အသုံးချရန်အသင့်ရှိသော အက်ပ်လီကေးရှင်းအထိ အသုံးချတည်ဆောက်ခြင်းအတွက် အဖိုးတန်စွမ်းရည်များကို သင်ကြားပေးမည်ဖြစ်သည်။

နည်းပညာအစုအဝေးနှင့်အင်္ဂါရပ်များ

• angular 8
• Firebase
• ဆာဗာဖက်က ပုံဖေါ်ခြင်း။
• Grid နှင့် Flexbox ဖြင့် CSS
• မိုဘိုင်းဖော်ရွေပြီး လိုက်လျောညီထွေရှိမှု
• အမှောင်စနစ်
• လှပသောမျက်နှာပြင်

ဤအလုံးစုံလွှမ်းခြုံထားသော ပရောဂျက်အတွက် ကျွန်ုပ်တကယ်နှစ်သက်သောအရာမှာ အထီးကျန်မှုတွင် အရာများကို သင်မလေ့လာခြင်းဖြစ်သည်။ ယင်းအစား၊ ဒီဇိုင်းမှ နောက်ဆုံးအသုံးချမှုအထိ ဖွံ့ဖြိုးတိုးတက်မှုလုပ်ငန်းစဉ်တစ်ခုလုံးကို သင်လေ့လာပါ။

Svelte ကို အသုံးပြု၍ လုပ်ဆောင်ရမည့် အက်ပ်

Svelte သည် React၊ Vue နှင့် Angular တို့ကဲ့သို့ အစိတ်အပိုင်းအခြေခံချဉ်းကပ်မှုဆိုင်ရာ ကလေးအသစ်နှင့်တူသည်။ ၎င်းသည် 2020 ခုနှစ်အတွက် အကျော်ကြားဆုံး ထုတ်ကုန်အသစ်များထဲမှ တစ်ခုဖြစ်သည်။

To-Do အက်ပ်များသည် ရေပန်းအစားဆုံးအကြောင်းအရာမဟုတ်သော်လည်း ၎င်းသည် သင့် Svelte စွမ်းရည်ကို အမှန်တကယ် မြှင့်တင်ရန် ကူညီပေးပါလိမ့်မည်။ ဤကဲ့သို့ပုံပေါ်လိမ့်မည်-

သင်ဘာသင်ယူမည်နည်း
ဤသင်ခန်းစာတွင် Svelte 3 ကို အသုံးပြု၍ အက်ပ်တစ်ခုအား အစမှအဆုံးအထိ ဖန်တီးနည်းကို သင့်အား ပြသပါမည်။ သင်သည် အစိတ်အပိုင်းများ၊ ပုံစံဒီဇိုင်းနှင့် ဖြစ်ရပ်ကို ကိုင်တွယ်ဖြေရှင်းသူများကို အသုံးပြုမည်ဖြစ်သည်။

နည်းပညာအစုအဝေးနှင့်အင်္ဂါရပ်များ

• Svelte ၃
• အစိတ်အပိုင်းများ
• CSS ဖြင့် ပုံသွင်းခြင်း။
• ES 6 အထားအသို

ကောင်းမွန်တဲ့ Svelte စတင်တဲ့ ပရောဂျက်တွေ အများကြီးမရှိတာကြောင့် ကျွန်တော်တွေ့ခဲ့ပါတယ်။ ၎င်းသည် စတင်ရန် ရွေးချယ်မှုကောင်းတစ်ခုဖြစ်သည်။.

Next.js ကို အသုံးပြု၍ E-commerce အက်ပ်

Next.js သည် ဘောက်စ်အတွင်းမှ ဆာဗာဘက်သို့ တင်ဆက်ခြင်းကို ပံ့ပိုးပေးသည့် React အပလီကေးရှင်းများ တည်ဆောက်ရန်အတွက် ရေပန်းအစားဆုံး မူဘောင်ဖြစ်သည်။

ဤပရောဂျက်သည် ဤကဲ့သို့သော e-commerce အပလီကေးရှင်းကို ဖန်တီးနည်းကို သင့်အား ပြသပါမည်-

သင်ဘာသင်ယူမည်နည်း
ဤပရောဂျက်တွင်၊ သင်သည် Next.js ဖြင့် မည်ကဲ့သို့ ဖွံ့ဖြိုးတိုးတက်ရမည်ကို လေ့လာနိုင်သည်—စာမျက်နှာအသစ်များနှင့် အစိတ်အပိုင်းများကို ဖန်တီးခြင်း၊ ဒေတာကို ထုတ်ယူခြင်းနှင့် စတိုင်လ်ထုတ်ပြီး Next application ကို အသုံးပြုပါ။

နည်းပညာအစုအဝေးနှင့်အင်္ဂါရပ်များ

• Next.js
• အစိတ်အပိုင်းများနှင့် စာမျက်နှာများ
• ဒေတာနမူနာ
• Stylization
• ပရောဂျက် ဖြန့်ကျက်ခြင်း။
• SSR နှင့် SPA

အသစ်အဆန်းများကိုလေ့လာရန် e-commerce အက်ပ်ကဲ့သို့ လက်တွေ့ကမ္ဘာဥပမာတစ်ခုရှိခြင်းသည် အမြဲတမ်းကောင်းမွန်ပါသည်။ သင်လုပ်နိုင်သည် သင်ခန်းစာကို ဒီမှာ ရှာပါ။.

Nuxt.js ဖြင့် ဘာသာစကားပေါင်းစုံ ဘလော့ဂ်

Nuxt.js သည် Vue အတွက်ဖြစ်ပြီး Next.js သည် React အတွက်ဖြစ်သည်- server-side rendering နှင့် single-page applications များ၏ ပါဝါကို ပေါင်းစပ်ရန်အတွက် ကောင်းမွန်သော မူဘောင်တစ်ခု
သင်ဖန်တီးနိုင်သော နောက်ဆုံးအပလီကေးရှင်းသည် ဤကဲ့သို့ဖြစ်နေလိမ့်မည်-

သင်ဘာသင်ယူမည်နည်း

ဤနမူနာပရောဂျက်တွင် Nuxt.js ကို အသုံးပြု၍ ပြီးပြည့်စုံသော ဝဘ်ဆိုက်တစ်ခုကို ဖန်တီးနည်းကို သင်လေ့လာရမည်ဖြစ်ပြီး၊ ကနဦးစဖွင့်သတ်မှတ်မှုမှ နောက်ဆုံးအဆင့်အထိ အသုံးပြုနိုင်မည်ဖြစ်သည်။

၎င်းသည် စာမျက်နှာများနှင့် အစိတ်အပိုင်းများ နှင့် SCSS နှင့် ပုံစံပုံသွင်းခြင်းကဲ့သို့သော Nuxt ပေးဆောင်သည့် အေးမြသောအင်္ဂါရပ်များစွာကို အခွင့်ကောင်းယူသည်။

နည်းပညာအစုအဝေးနှင့်အင်္ဂါရပ်များ

• Nuxt.js
• အစိတ်အပိုင်းများနှင့် စာမျက်နှာများ
• Storyblock သင်ခန်းစာ
• Hagfish
• ပြည်နယ်စီမံခန့်ခွဲမှုအတွက် Vuex
• SCSS သည် ပုံသဏ္ဍာန်ပြုလုပ်ရန်
• Nuxt အလယ်အလတ်ပစ္စည်းများ

ဒါက တကယ်မိုက်တဲ့ ပရောဂျက်ပါ။Nuxt.js အင်္ဂါရပ်များစွာ ပါဝင်သည်။ Nuxt နဲ့အလုပ်လုပ်ရတာကို ကျွန်တော် ကိုယ်တိုင်ကိုယ်ကျ နှစ်သက်ပါတယ်၊ ဒါကြောင့် အဲဒါက သင့်ကို Vue developer ကြီးတစ်ယောက်ဖြစ်လာစေတဲ့အတွက် စမ်းကြည့်သင့်ပါတယ်။

Gatsby နှင့်အတူ ဘလော့ဂ်

Gatsby သည် React နှင့် GraphQL ကို အသုံးပြု၍ အကောင်းဆုံး static site generator တစ်ခုဖြစ်သည်။ ဤသည်မှာ ပရောဂျက်၏ရလဒ်ဖြစ်သည်။

သင်ဘာသင်ယူမည်နည်း

ဤသင်ခန်းစာတွင်၊ React နှင့် GraphQL ကိုအသုံးပြု၍ သင့်ကိုယ်ပိုင်ဆောင်းပါးများရေးသားရန်အတွက် သင်အသုံးပြုမည့် ဘလော့ဂ်တစ်ခုဖန်တီးရန် Gatsby ကိုအသုံးပြုပုံကို သင်လေ့လာနိုင်မည်ဖြစ်သည်။

နည်းပညာအစုအဝေးနှင့်အင်္ဂါရပ်များ

• ဂက်စဘီ
• တုံ့ပြန်
• GraphQL
• ပလပ်အင်များနှင့် အပြင်အဆင်များ
• MDX/Markdown
• Bootstrap CSS
• ပုံစံများ

ဘလော့ဂ်တစ်ခု စတင်ချင်ပါက၊ ဒါက နမူနာကောင်းတစ်ခုပါ။ React နှင့် GraphQL ကိုအသုံးပြုနည်း။

WordPress သည် ဆိုးရွားသောရွေးချယ်မှုဖြစ်သည်ဟု ကျွန်တော်မဆိုလိုပါ၊ သို့သော် Gatsby ဖြင့် သင်သည် အံ့သြဖွယ်ပေါင်းစပ်မှုဖြစ်သည့် React ကို အသုံးပြု၍ စွမ်းဆောင်ရည်မြင့် ဝဘ်ဆိုဒ်များကို တည်ဆောက်နိုင်ပါသည်။

Gridsome ဖြင့် ဘလော့ဂ်

Vue အတွက် Gridsome... ကောင်းပြီ၊ ကျွန်ုပ်တို့တွင် ၎င်းကို Next/Nuxt ဖြင့် ပြုလုပ်ထားပြီးဖြစ်သည်။
ဒါပေမယ့် Gridsome နဲ့ Gatsby အတွက်လည်း အလားတူပါပဲ။ နှစ်ခုလုံးသည် ၎င်းတို့၏ဒေတာအလွှာအဖြစ် GraphQL ကိုအသုံးပြုသော်လည်း Gridsome သည် VueJS ကိုအသုံးပြုသည်။ ၎င်းသည် သင့်အား ကောင်းမွန်သောဘလော့ဂ်များဖန်တီးရာတွင် ကူညီပေးမည့် အံ့သြဖွယ်ကောင်းသော ဆိုက်ဂျင်နရေတာတစ်ခုလည်းဖြစ်သည်။

သင်ဘာသင်ယူမည်နည်း

ဤပရောဂျက်သည် သင့်အား Gridsome၊ GraphQL နှင့် Markdown တို့ဖြင့် စတင်ရန် ရိုးရှင်းသော ဘလော့ဂ်တစ်ခုကို ဖန်တီးနည်းကို သင်ကြားပေးမည်ဖြစ်သည်။ ၎င်းသည် Netlify မှတစ်ဆင့် အက်ပလီကေးရှင်းတစ်ခုအား မည်သို့အသုံးပြုရပုံကိုလည်း အကျုံးဝင်ပါသည်။

နည်းပညာအစုအဝေးနှင့်အင်္ဂါရပ်များ

• ခပ်မိုက်မိုက်
• Vue
• GraphQL
• Markdown
• Netlify

ဤသည်မှာ သေချာပေါက် အပြည့်စုံဆုံး ကျူတိုရီရယ် မဟုတ်သော်လည်း၊ ၎င်းသည် Gridsome ၏ အခြေခံသဘောတရားများနှင့် အကျုံးဝင်ပါသည်။ Markdown သည် ကောင်းမွန်သော အစမှတ်ဖြစ်နိုင်သည်။.

Quasar ကို အသုံးပြု၍ SoundCloud ကဲ့သို့သော အသံဖွင့်စက်

Quasar သည် မိုဘိုင်းအက်ပလီကေးရှင်းများဖန်တီးရန် နောက်ထပ် Vue framework တစ်ခုဖြစ်သည်။ ဤပရောဂျက်တွင် သင်သည် အသံဖွင့်စက် အပလီကေးရှင်းကို ဖန်တီးမည်၊ ဥပမာ-

သင်ဘာသင်ယူမည်နည်း

အခြားပရောဂျက်များသည် ဝဘ်အက်ပလီကေးရှင်းများကိုသာ အဓိကအာရုံစိုက်ထားသော်လည်း၊ ဤအရာသည် သင့်အား Vue နှင့် Quasar framework ကိုအသုံးပြု၍ မိုဘိုင်းအက်ပလီကေးရှင်းတစ်ခုဖန်တီးနည်းကို ပြသမည်ဖြစ်သည်။
သင်သည် Android Studio/Xcode ဖြင့် ဖွဲ့စည်းထားသော Cordova နှင့် လုပ်ဆောင်နေသင့်သည်။ မဟုတ်ပါက၊ လက်စွဲစာအုပ်တွင် အရာအားလုံးကို စတင်သတ်မှတ်နည်းကို ပြသသည့် Quasar ဝဘ်ဆိုက်သို့ လင့်ခ်တစ်ခု ပါရှိသည်။

နည်းပညာအစုအဝေးနှင့်အင်္ဂါရပ်များ

• quasar
• Vue
• Cordova
• WaveSurfer
• UI အစိတ်အပိုင်းများ

အသေးစားစီမံကိန်းမိုဘိုင်းအက်ပလီကေးရှင်းများဖန်တီးရန်အတွက် Quasar ၏စွမ်းရည်များကိုပြသခြင်း။

source: www.habr.com