JAMStack and Static site Generator

January 20, 2019

WordPress, Joomla, Drupal တို့လို CMS တွေ Web Development လောကကို မင်းမူနေတာကြာပါပြီ.. WordPress, Drupal ကတော့ အခုထိ မင်းမူတုန်းပဲ.. ကျနော် မကြိုက်တာလေးတွေ ပြောရရင် WordPress မှာဆို Plugin တွေပဲ… များလွန်းတော့ ဘယ်ဟာ သုံးလို့ သုံးရမှန်းမသိဘူး… နောက်တစ်ခုက Design မှာ ကိုယ်လုပ်ချင်တာလုပ်ဖို့ဆို WordPress ရဲ့ Theme Hooks တွေက အတော်လေး တိုင်ပတ်တယ်… သူ့ Theme လေး ရေးဖို့အရေး အတော် ဇာတ်လမ်း ဇာတ်လမ်းရှုပ်တာ… တချို့ဟာတွေက CMS ဘောင်ထဲမှာရေးရတော့ ကိုယ်လိုချင်သလို လုပ်မရတဲ့ Issue တွေ ရှိနေတယ်… Laravel လိုမျိုး Framework တွေကျတော့လဲ Framework ပဲ ပါတော့ CMS Package တွေ ထည့်သုံးရတယ်.. တကယ်တန်း Editor Quality ကျတော့ WordPress တို့ ဘာတို့ကို မမှီတော့ဘူး…

CMS တွေက Database ကနေ ဆွဲထုတ်ပြီး ပြရတော့ ရိုးရိုး တန်းတန်း HTML File ထက်စာရင် နည်းနည်းလေး စောင့်ရတယ်.. နောက်ပိုင်း Tech Blogger တွေက Static Site Generator တွေ သုံးလာကြတယ်.. Static Site Generator ဆိုတာက Markdown Language နဲ့ရေးပြီး Static HTML Page ပြန်ပြောင်းပြီး Hosting ပေါ်တင်ပြီး သုံးကြတာပဲ..

Static Site Generator တွေ အသုံးများရတဲ့ အချက်က Static Site Generator တွေကနေ ထုတ်ပြီး ထွက်လာတဲ့ HTML File တွေကို Github Page တို့ AWS Bucket တို့မှာ Free သွားတင်ထားလို့ရတယ်.. Blog တစ်ခုလုပ်မယ်ဆို တလ $5 လောက်က ဖလာကြီး ကုန်တာကိုး.. WordPress တို့လို ဘာတို့လို CMS မဟုတ်တော့ Admin Panel တွေလဲ မပါဘူးပေါ့.. Generate ထုတ်ထားပြီးသား HTML File တွေချည်းပဲ Host ပေါ် ကောက်တင်လိုက်ရုံပဲ.. HTML + CSS Minified လုပ်ပြီးသားတွေချည်းပဲဆိုတော့ မြန်လဲမြန်တာပေါ့… Database တွေဘာတွေလဲ မပါဘူး.. SQL Injection လဲ မပေါက်တော့ဘူး.. Admin Password လဲ Bruteforce လုပ်မရတော့ဘူး :D WordPress မှာလဲ Plugin ထပ်သွင်းရင် အဲ့လိုမျိုး ထုတ်တဲ့ Feature တော့ ပါတယ်…

အရင်တော့ Static Site Generator ထဲမှာ Jekyll တို့ Hugo တို့သုံးကြတယ်… အခုနောက်ပိုင်း JavaScript က တအား ခေတ်စားလာတော့ JS Static Site Generator တွေ ထွက်လာတယ်.. Progressive Web App တွေ SPA တွေပါ ပေါင်းလာတော့ WordPress တို့ ဘာတို့ ထက်ကို မိုက်လာတယ်…

GatsbyJS ( ReactJS )

GatsbyJS က Feature တွေစုံပြီး အရှုပ်ဆုံးပဲ… React ပါတော့ ပိုဆိုး.. တစ်ခုခု ရေးဖို့ အရေးကို ချီးနယ်ချက်ပဲ… စုံတာတော့ တော်တော်စုံပါတယ်.. Progressive Web App လဲ တစ်ခါထဲ ဖြစ်ပြီးသား.. ( အခုမှ PWA ကို စလေ့လာ… Google က Promote လုပ်တော့ စောက်မြင်ကပ်ထားလို့ )… GraphQL နဲ့ Data Source တွေကို လှမ်းခေါ်လို့ရတယ်.. ( WordPress, Strapi, Markdown ) Progressive Web App လဲ တစ်ခါထဲ ဖြစ်ပြီးသား.. GraphQL နဲ့ Data Source တွေကို လှမ်းခေါ်လို့ရတယ်.. ( WordPress, Strapi, Markdown.. etc )

WordPress နဲ့ Website ရေးပြီးသားရှိရင် အဲ့ Source ကို လှမ်းခေါ်ရုံပဲ… CSS ရေးရတာတော နည်းနည်း တိုင်ပတ်တယ်… Typography.js ဆိုတာပါတယ်.. အဲ့ဒါကြီးသုံးရင် သူပေးထားတဲ့ Typography Theme တွေ သုံးလို့ရသွားတယ်… Typography နဲ့ ပတ်သက်တာ အကုန်လုံး လိုက်လုပ်စရာမလိုတော့ပေမဲ့ မလိုချင်တာတွေကို လိုက်ပြီး ဖြုတ်ရတာ ခက်တယ်.. JS အပြင် React ကို သိထားမှ အဆင်ပြေလိမ့်မယ်… နောက် Image နဲ့ပတ်သတ်တဲ့ Feature တွေ မိုက်တယ်.. Image Auto Resize လုပ်ပေးတာမျိုး.. Lazy Loading လုပ်ပေးတာမျိုး… Lazy Loading လုပ်နေတုန်း Placeholder ထားပေးထားတာမျိုး တော်တော်မိုက်တယ်

Vuepress ( VueJS )

VuePress က Gatsby လောက်တော့ မစုံပေမဲ့ Documentation ရေးချင်တာတို့ ဘာတို့ဆိုရင် တော်တော် မိုက်တယ်.. VueJS Creator ဖြစ်တဲ့ Evan You လက်ရာပဲ… မြန်လဲမြန်တယ်.. VueJS Documentation က VuePress နဲ့ ရေးတာပဲ… Markdown File တွေချည်းပဲ ရေးထားပြီးတော့ VuePress နဲ့ Static Website ကောက်ထုတ်လိုက်ရုံပဲ… သူက Technical Documentation ရေးရင်တော့ တော်တော်မိုက်ပေမဲ့ Blog ရေးဖို့ တော့ ပိန်းတယ်… Evan You ကိုယ်တိုင်ပြောတာတော့ VuePress က Blog တွေ ဘာတွေအတွက် မဟုတ်ဘူး.. ဒါကြောင့် Blogging အတွက်လိုအပ်တဲ့ Tag တွေ Categories တွေ စတဲ့ Features တွေ မပါဘူးတဲ့

Gridsome ( VueJS )

VueJS နဲ့ရေးချင်ပြီး GatsbyJS လိုမျိုး GraphQL နဲ့ Data Source ကိုလှမ်းခေါ်တာတို့ Image Resize လုပ်တာ Lazy Loading လုပ်ပေးတာတွေပါချင်ရင်တော့ VuePress မသုံးပဲ Gridsome ဆိုတဲ့ ကောင်သုံး… တော်တော်များများ ပြည့်စုံပေမဲ့ Beta တောင် မဖြစ်သေးဘူး.. တော်တော် တိုင်ပတ်လိမ့်မယ်… VueJS အတော်လေး သုံးတတ်ရင်တော့ အဆင်ပြေလိမ့်မယ်.. လောလောဆယ် ကျနော် သုံးနေတယ်

Next (ReactJS) and Nuxt ( VueJS )

Next က React အတွက် အသင့်သုံး PWA, SPA Framework လိုဟာမျိုး နဲ့ Nuxt ကတော့ VueJS အတွက် အသင့်သုံး PWA, SPA Framework ပေါ့.. ဒီ ၂ ကောင်လုံးက Static Site Generator မဟုတ်ပေမဲ့ Server-side Rendering ( SSR ) နဲ့ Static File Export လုပ်တာတွေ ပါတော့ Static Site Generator လိုမျိုးသုံးလို့ရသွားတာပေါ့.. Markdown Parser တို့ GraphQL သုံးချင်ရင်တို့ကတော့ ကိုယ့်ဟာကိုယ် ပြန်ထည့်ရတယ်

ဒီ Website က JAM Stack နမူနာပါပဲ