හැමෝටම ආයුබෝවන්! Web designing ගැන උනන්දුවක් දක්වන ඔයාලට අද මම කියල දෙන්න යන්නේ VueJs එහෙමත් නැත්තම Vue ගැන. මේ ගැන එක post එකකින් ලියල ඉවර කරන්න බැරි වෙයි. ඒ නිසා මේ ගැන post කීපයක්ම ලියන්න මම බලාපොරොත්තු වෙනව. ඔයාල මේ ගැන ඉගෙනව ගන්නනම් html, css, JavaScript කියන දේවල් ගැන යම් තරමකට හෝ අවබෝධයක් තියෙන්න ඕනෙ.
මොකද්ද මේ Vue කියන්නෙ?
Vue කියන්නෙ front-end JavaScript framework එකක්. ඒ කියන්නෙ මේක යොදා ගන්නෙ website එකේ front-end එක design කරන්න. ඒ කියන්නෙ මේක Run වෙන්නෙ අපේ web browser එකේ. ඒ නිසා database එකත් එක්ක ගනුදෙනු කරනව වගේ (back-end) වැඩ මේකෙන් කරන්න බැහැ. web site එකේ user ට පේන කොටස design කිරීම සහ ඒකත් එක්ක තියෙන user interactions handle කරන එක තමයි මේකෙන් කරන්න පුළුවන් වෙන්නෙ.
දැනට තියෙන ප්‍රසිද්ධම front-end frameworks 3 න් එකක් තමයි VueJs කියන්නෙ.(ඉතිරි 2, reactJs සහ AngularJs). මේක මේ වෙද්දි ඉතා වේගයෙන් ජනප්‍රියත්වයට පත්වෙමින් පවතිනව.
React, angular වගේම SPAs (single page application) හදන්න මේක පාවිච්චි කරනව. ඔයා front-end frameworks වලට අලුත් කෙනෙක් නම් ඉසසෙල්ලම Vue ඉගෙන ගන්න එක පහසුවක් වෙයි. මොකද, react හෝ angular වලට වඩා Vue එක්ක වැඩ කරන එක ටිකක් ලේසියි.
මොකද්ද මේ SPA කියන්නෙ?
සාමාන්‍ය site එකක් හැදිල තියෙන්නෙ web page ගොඩකින්. අපි website එකක සැරි සරද්දි, page එකක ඉදල තවත් page එකකට යද්දි වෙන්නෙ, අලුතින්ම ඒ page එක අපේ browser එකට download වෙලා පෙන්නන එක. මෙතනදි සම්පූර්ණ page එකම අලුතින් download වෙන නිසා ටිකක් වෙලා ගතවෙනව.
හැබැයි SPA එකකදි වෙන්නෙ ටිකක් වෙනස් වැඩක්. මේවයිදි සැරටම JavaScript භාවිතා වෙනව. SPA එකක (බොහෝ විට) තියෙන්නෙ එක page එකයි. site එකෙන් වැඩි හරියක් ලියවිල තියෙන්නෙ JavaScript file වල. ඒ site එකක් ඉස්සෙල්ලම load වෙද්දි ඒ තනි page එක සමග js file ටික load වෙනව. ඊළගට user request වලට අනුව ඒ ඒ අවස්ථාවට අදාල page එක JavaScript වලින් render කරල දෙනව. ආපහු අලුතින් මුලු page එකම download වෙන්න ඕන නෑ. මොකද අර පළවෙනියටම page එක load කරද්දි හැම page එකම render කරන්න ඕන templates, JavaScript file එකක් විදියට download වෙන නිසා. ඒක නිකං හරියට මුලු site එකම එක පාර download උනා වගේ වැඩක්. හැබැයි මේ frameworks වලින් ඒ වැඩේ ඉතා කාර්යක්ෂමව කරල දෙනව.
ඉතින් මේකෙදි අර කලින් වගේ හැම තිස්සෙම අලුතෙන් page එකක් download (page reload) වෙන්නෙ නැති නිසා සෑහෙන්න speed එකකුත් තියෙනව.
Page reload කරන්නෙ නැති නිසා back-end එකත් එක්ක communicate කිරීම, AJAX requests වලින් තමයි කරන්නෙ.(form submit කරන්න, database එකෙන් data අරගන්න වගේ වැඩ)
SPAs වලට තියෙන හොදම උදාහරණයක් තමයි gmail.com කියන්නෙ. ඔයාල gmail account එකට log වෙලා බලන්න, මොන page එකට ගියත් (inbox, settings, sent mail, etc…) ඒ සේරම එකම page එකේ render වෙන එක තමයි වෙන්නෙ.(page reload වීමක් වෙන්නෙ නෑ)
SPA එකක් කියන්නෙ මොකද්ද කියල දන්නෙ නැති අයට තමයි ඒ පොඩි හැදින්වීම කරේ. දැන් තේරෙනව ඇති කියල හිතනව.
basic html
හරි දැන් එහෙනං අපි බලමු Vue වලින් කොහොමද වැඩ කරන්නෙ කියල.
Vue ගැන ඉගෙන ගන්න හොදම තැනක් තමයි Vuejs.org කියන්නෙ. මේක තමයි official Vue documentation එක. ඔයාල මේකෙ installation section එකට ගිහින් බැලුවොත් බලා ගන්න පුලුවන්, කොහොමද ඔයාලගෙ site එකට Vue install කර ගන්නෙ කියල. තවම මූලිකම අදියරේ නිසා අපි දැනට CDN එකක් පාවිච්චි කරමු.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue demo</title>
</head>
<body>
<div id="my-app"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="app.js"></script>
</body>
</html>
මේක තමයි අපේ basic html එක වෙන්නෙ. මේක index.html කියල file එකක save කරගන්න. ඔයාලට පේනව ඇති මම මේකෙ Vue file එක CDN එකකින් add කරල තියෙනව. ඒ වගේම තව app.js කියල file එකකුත් link කරල තියෙනව. ඒ file එකේ තමයි අපි අපේ app එකට අදාල code එක ලියන්නෙ. ඉතිං app.js කියල file එකකුත් මේ folder එකේම හදාගන්න ඕනෙ. මේ file දෙක තමයි මූලිකවම අපිට ඕන වෙන්නෙ.
තව දෙයක් කියන්න ඕනෙ. හුඟ දෙනෙක් මේක දන්නවත් ඇති. ඒත් දන්නෙ නැති අයත් ඉන්න නිසා කියන්න ඕනෙ. මම කලිනුත් කිව්වනෙ මේ app එක run වෙන්නෙ browser එකේ කියල. ඒ නිසා අපි අපේ app එක debug කරන්න පාවිච්චි කරන්නෙත් browser එකම තමයි. ඒකට හොඳම browser එකක් තමයි google chrome. ඒත් ඔයාල කැමති browser එකක් පාවිච්චි කරන්න පුළුවන්. keyboard එකේ F12 key එක එබුවාම console එක open වෙනව. අන්න ඒක අපිට සෑහෙන්න වටින tool එකක්. අපේ code එකේ error එකක් ආවොත් එහෙම ඔන්න ඔතනින් තමයි අපිට ඒක බලාගන්න පුළුවන් වෙන්නෙ.
මේක හරියට terminal/cmd එක වගේ එකක් ඒ නිසා ඕන නම් අපිට මේකෙ JavaScript code run කරල බලන්න පුළුවන්. try කරල බලන්න.
අද මම මීට වඩා දෙයක් කියන්න යන්නෙ නැහැ. මොකද මේ post එකෙන් මම බලාපොරොත්තු උනේ Vue සහ SPA ගැන පොඩි හඳින්වීමක් කරන්න විතරයි. ඊළඟ post එකේ ඉඳන් බලමු කොහොමද Vue වලින් වැඩ කරගන්නෙ කියල. මේ දේවල් ගැන මොනව හරි ප්‍රශ්න එහෙම තියෙනවනම් පහලින් comment එකක් දාන්න.
ඊළඟ post එකට මෙතනින් යන්න.
