Front End Developer කෙනෙක් වෙමු.

December 24, 2021 | Sahan Kodithuwakku

Front End Development යනු වෙබ් යෙදුම් සඳහා graphical user interface හෙවත් පරිශීලක අතුරුමුහණත් නිර්මාණය කිරීමයි. මෙය සිදු කරනු ලබන්නේ HTML, CSS සහ JavaScript භාවිතයෙනි. මෙම වෘත්තිය පිළිබඳව ලොව බොහෝ දෙනා කතා කරනු ලබයි. Front End Development සඳහා අවශ්‍ය, උචිත, ඉතා වටිනා සම්පත් ( Communities and Resources ) ඉතා පහසුවෙන් අන්තර්ජාල හරහා ලබා ගත හැකි වීමත්, වර්තමානයේ දී බලවත් Amazon, Google වැනි සමාගම් වලින් පවා ඉතා ඉහළ ඉල්ලුමක් පැවතීමත් මෙයට හේතු වී ඇත.

Front End Developer කෙනෙක් ලෙස UI නිර්මාණය කිරීමේදී පහත සඳහන් කරුණු පිළිබඳ මූලික වශයෙන් අවබෝධයක් තිබිය යුතුය.

  • HTML

  • CSS

  • JavaScript

  • Web Security

  • UI and UX


සැලකිය යුතු මූලික කරුණු.

HTML හෙවත් HyperText Markup Language යනු වෙබ් යෙදුමක බාහිරින් පෙනෙන පෙනුම නිර්මාණය කිරීමට යොදා ගන්නා භාෂාවයි. වෙබ් යෙදුම භාවිතා කරන පරිශීලකයෙකු මුලින්ම දකින්නේ මෙම මුහුණත වේ. වෙබ් යෙදුමේ මූලික සැකිල්ල, එසේත් නැත්නම් යෙදුමේ අන්තර්ගත වන දත්ත දිස්වනුයේ කෙලෙසද යන්න සැලසුම් කර නිර්මාණය කරනුයේ HTML භාවිතයෙනි.


CSS හෙවත් Cascading Style Sheets වෙබ් යෙදුමේ පෙනුම හැඩගැන්වීමට භාවිතා කරනු ලබයි.


JavaScript යනු වෙබ් යෙදුමක තර්කන හැකියාව logic ඇතුළත් කිරීමට යොදා ගන්නා භාෂාවයි. මෙමඟින් පරිශීලකයාට වෙබ් යෙදුම හා අන්තර් ක්‍රියා කිරීමට අවස්ථාව ලබා දේ. මෙහිදී DOM Manipulation භාවිතා වේ.


මීට අමතරව වෙබ් යෙදුම ආරක්ෂිතව භාවිතා කළ හැකිද නොහැකිද යන්න ( Web Security ) පිළිබඳවත්, පරිශීලකයාට වෙබ් යෙදුම තුළින් කුමන ආකාරයේ අත්දැකීමක් ( User Experience ) ලබා දීමට අදහස් කරන්නේද යන්න පිළිබඳවත් මූලික අදහසක්, දැනුමක් තිබීම මහත් පිටිවහලක් වේ.


වෙබ් යෙදුම් ක්‍රියාත්මක කරනු ලබන්නේ අන්තර්ජාලය හරහා බැවින් පහත කරුණු පිළිබඳව ද දැන් සිටීම ඉතා යෝග්‍ය වේ.

  • Internet

      • DNS

      • Hosting

      • HTTP (Hypertext Transfer Protocol)

      • Browsers

  • Repo Hosting Services

  • Version Control Systems

  • Frameworks


DNS (Domain Name System)

DNS හෙවත් වසම් නාම පද්ධතිය යනු අන්තර්ජාලය හෝ වෙනත් අන්තර්ජාල ප්‍රොටෝකෝල ජාල හරහා ළඟා විය හැකි පරිගණක, සේවා සහ අනෙකුත් සම්පත් හඳුනා ගැනීමට භාවිතා කරන ධූරාවලි (hierarchical) සහ විමධ්‍යගත (decentralized) නාමකරණ පද්ධතියයි.


වසම් නාම පද්ධතිය (DNS) අන්තර්ජාල පිටු පූරණය කිරීමට බ්‍රව්සර් භාවිතා කරන වසම් නාම IP ලිපින බවට පත් කරයි. අන්තර්ජාලයට සම්බන්ධ සෑම උපාංගයකටම තමන්ගේම IP ලිපිනයක් ඇත, එය උපාංගය සොයා ගැනීමට වෙනත් උපාංග භාවිතා කරයි.

Web Hosting

වෙබ් සත්කාරක සේවාවක් (web hosting service) යනු සේවාලාභීන් සඳහා වෙබ් අඩවි සත්කාරකත්වය සපයන අන්තර්ජාල සත්කාරක සේවාවකි, එනම් එය ඔවුන්ට වෙබ් අඩවියක් නිර්මාණය කිරීමට සහ නඩත්තු කිරීමට අවශ්‍ය පහසුකම් සපයන අතර එය ලෝක ව්‍යාප්ත වෙබ් අඩවියට ප්‍රවේශ විය හැකිය. වෙබ් සත්කාරක සේවා සපයන සමාගම් සමහර විට වෙබ් සත්කාරක ලෙස හැඳින්වේ.

Repository Hosting Services

Repo Hosting Service හෙවත් ගබඩා සත්කාරක සේවාවක් යනු මෘදුකාංග සංවර්ධනයේ සාම්ප්‍රදායිකව විනිවිද නොපෙනෙන කාර්ය ප්‍රවාහ ක්‍රියාවලියට විනිවිද පෙනෙන දර්ශනයක් ලබා දෙන ආයතනික කළමනාකරණ මෙවලමකි.


Git සහ GitHub යනු වර්තමානයේ දී බොහෝ දෙනා විසින් භාවිතා කරනු ලබන Repo Hosting Service එකකි.

Version Control Systems

අනුවාද පාලනය (version control), ප්‍රභව පාලනය (source control) ලෙසද හැඳින්වෙන අතර එය මෘදුකාංග කේතයේ වෙනස්කම් ලුහුබැඳීමේ සහ කළමනාකරණය කිරීම ලෙස අර්ථ දැක්විය හැකිය. අනුවාද පාලන පද්ධති යනු කාලයත් සමඟ මූලාශ්‍ර කේතයේ වෙනස්කම් කළමනාකරණය කිරීමට උපකාර වන මෘදුකාංග මෙවලම් වේ. සංවර්ධන පරිසරයන් (development environment) වේගවත් වී ඇති බැවින්, අනුවාද පාලන පද්ධති වේගයෙන් සහ දක්ෂ ලෙස වැඩ කිරීමට උපකාරී වේ. ඒවා සංවර්ධන කාලය අඩු කිරීමට සහ සාර්ථක යෙදවීම් වැඩි කිරීමට උපකාරී වන බැවින් ඒවා DevOps කණ්ඩායම් සඳහා විශේෂයෙන් ප්‍රයෝජනවත් වේ.


අනුවාද පාලන මෘදුකාංගය විශේෂ දත්ත ගබඩාවක කේතයේ සෑම වෙනස් කිරීමක්ම නිරීක්ෂණය කරයි. වැරදීමක් සිදුවී ඇත්නම්, සංවර්ධකයින්ට කේතයේ පෙර අනුවාද සංසන්දනය කර සියලු කණ්ඩායම් සාමාජිකයින්ට බාධා අවම කරන අතරම වැරැද්ද නිවැරදි කිරීමට උපකාරී වේ.

Frameworks - යෙදුම් සැකසුම් රාමු.

Frameworks යනු වෙබ් යෙදුම් වල බාහිර අතුරුමුහණත් නිර්මාණය කිරීමට භාවිතා කළ හැකි උපාංග වේ. වර්තමානයේ දී Angular, React සහ Vue ( මේ අතුරින් React සඳහා ඉහළ ඉල්ලුමක් පවතී ) යන frameworks ත්‍රිත්වය වැඩි වශයෙන් භාවිතා වේ. මෙයට හේතු වී ඇත්තේ මෙම උපාංග භාවිතයෙන් වෙබ් යෙදුම් නිර්මාණය කරන විට ඒ සඳහා යන කාලය සහ ශ්‍රමය අවම වීමයි.

කාලය සහ ශ්‍රමය ඉතිරි කර ගැනීමට මෙම frameworks තුළ විවිධ වූ මෙවලම් අන්තර්ගත වේ. මෙය ගැන අවබෝධයක් ලබා ගැනීමට React සහ Angular frameworks වල ඇති ලක්ෂණ පිළිබඳව විමසා බලමු.

React

React යනු පරිශීලක අතුරුමුහුණත් ගොඩනැගීම සඳහා වන JavaScript Library එකකි. අන්තර්ක්‍රියාකාරී UI හෙවත් පරිශීලක අතුරු මුහුණත් නිර්මාණය කිරීම පහසු කිරීමට මෙහිදී යොදා ගනු ලබන්නේ components ලෙස හඳුන්වනු ලබන සංරචක වේ.


වෙබ් යෙදුමේ states හෙවත් අවස්ථා භාවිතයෙන්, කාර්යක්ෂමව අදාළ සංරචක යාවත්කාලීන කර, අවශ්‍ය ලෙස දත්ත වෙනස් වන විට ඊට අදාළ නිවැරදි සංරචක ලබා දෙයි. මෙලෙස සංකීර්ණ UI සෑදීමට ඒවා සම්පාදනය කළ හැකිය.

තවද ප්‍රකාශන බැලීම් තුළින් කේතය නිදොස් ( debug ) කිරීම පහසු කරයි.

React පිළිබඳව ඉතාමත් විස්තරාත්මක ලෙස එහි නිල වෙබ් අඩවියෙහි කරුණු සඳහන් කර ඇත. (https://reactjs.org)

Angular

Angular යනු කාර්යක්ෂම සහ සංකීර්ණ තනි පිටු යෙදුම් නිර්මාණය කිරීම සඳහා යෙදුම් සැකසුම් රාමුවකි. මෙය TypeScript යන භාෂාව මත ගොඩනගා ඇත.


මෙහි පහත සඳහන් සුවිශේෂතා ඇත.

  • පරිමාණය කළ හැකි (scalable) වෙබ් යෙදුම් තැනීම සඳහා සංරචක (components) පදනම් වූ රාමුවකි.

  • මාර්ගගත කිරීම (routing), ආකෘති කළමනාකරණය (forms management), සේවාදායක-සේවාදායක සන්නිවේදනය (client-server communication) සහ තවත් බොහෝ දේ ඇතුළුව විවිධ විශේෂාංග ආවරණය වන පරිදි හොඳින් ඒකාබද්ධ වූ පුස්තකාල (libraries) එකතුවකි.

  • කේතය සංවර්ධනය කිරීමට, ගොඩනැගීමට, පරීක්ෂා කිරීමට සහ යාවත්කාලීන කිරීමට විශේෂ වූ මෙවලම් කට්ටලයක් පවතී.


Angular පිළිබඳව ඉතාමත් විස්තරාත්මක ලෙස එහි නිල වෙබ් අඩවියෙහි කරුණු සඳහන් කර ඇත. (https://angular.io/docs)


සටහන - සහන් කොඩිතුවක්කු