සරල JavaScript වලින් ඔබ්බට: Frameworks අවශ්ය වන්නේ ඇයි?
අපි 11 වන මොඩියුලයේදී HTML, CSS, සහ JavaScript භාවිතා කර වෙබ් පිටු නිර්මාණය කරන ආකාරය ඉගෙන ගත්තෙමු. සරල වෙබ් අඩවි සඳහා එය ප්රමාණවත් වුවත්, Facebook, Gmail, හෝ Netflix වැනි මහා පරිමාණ, දත්ත-ප්රමුඛ (data-driven) යෙදුමක් නිර්මාණය කිරීමේදී, සරල JavaScript (vanilla JS) භාවිතා කිරීම ඉතා සංකීර්ණ සහ අවුල් සහගත විය හැක. දත්ත වෙනස් වන සෑම විටම, වෙබ් පිටුවේ කුමන කොටස වෙනස් කළ යුතුදැයි අතින් (manually) ලිවීම ඉතා අපහසු කාර්යයකි.
මෙම අභියෝගයට විසඳුම ලෙස Frontend Frameworks බිහි විය. මෙම රාමු (frameworks) මගින් සංකීර්ණ UI (User Interface) නිර්මාණය කිරීම සඳහා ව්යුහගත සහ කාර්යක්ෂම ක්රමවේදයක් සපයයි. ඒවායේ ප්රධානතම සංකල්පය වන්නේ Component-Based Architecture යි.
උපමාව: මෙය හරියට LEGO වලින් යමක් තනනවා වැනිය. සම්පූර්ණ නිර්මාණයම එකම මැටි ගුලියකින් (vanilla JS) හදනවා වෙනුවට, අපි කුඩා, නැවත නැවත භාවිතා කළ හැකි LEGO කැබලි (Components) භාවිතා කරමු. උදාහරණයක් ලෙස, `Button`, `Navbar`, `UserProfileCard` වැනි components නිර්මාණය කර, ඒවා එකට එකතු කර සම්පූර්ණ UI එක ගොඩනගා ගත හැක.
නූතන වෙබ් යෙදුම්වල දැවැන්තයන්: React සහ Angular
Frontend frameworks බොහෝමයක් තිබුණත්, කර්මාන්තයේ වඩාත්ම ප්රචලිත සහ බලවත්ම දෙකක් ලෙස React සහ Angular හැඳින්විය හැක.
1. React (Developed by Facebook)
React යනු පරිශීලක අතුරුමුහුණත් නිර්මාණය කිරීම සඳහා වන පුස්තකාලයකි (library). එය සම්පූර්ණ රාමුවක් තරම් දැඩි නීතිරීති පනවන්නේ නැති අතර, සංවර්ධකයාට වැඩි නම්යශීලී බවක් ලබා දේ. React හි ප්රධාන අරමුණ, යෙදුමේ දත්ත ("state") වෙනස් වන විට, UI එක කාර්යක්ෂමව යාවත්කාලීන කිරීමයි.
- Virtual DOM: React, UI එකේ වෙනස්කම් ඉතා වේගයෙන් සිදු කිරීම සඳහා Virtual DOM නමින් තාක්ෂණයක් භාවිතා කරයි.
- JSX: JavaScript කේතය තුළම HTML වැනි සින්ටැක්ස් ලිවීමට ඉඩ සලසන JSX, components නිර්මාණය කිරීම ඉතා පහසු කරයි.
- පරිසර පද්ධතිය (Ecosystem): React යනු UI library එකක් පමණක් නිසා, routing (පිටු අතර මාරුවීම) සඳහා `React Router` වැනි සහ state management (සංකීර්ණ දත්ත කළමනාකරණය) සඳහා `Redux` වැනි වෙනත් libraries සමග එකට භාවිතා කරයි.
2. Angular (Developed by Google)
Angular යනු වෙබ් යෙදුම් නිර්මාණය කිරීම සඳහා වන සම්පූර්ණ රාමුවකි (framework). එය "batteries-included" දර්ශනය මත ගොඩනැගී ඇත, එනම් යෙදුමකට අවශ්ය වන බොහෝ දේ (routing, HTTP client, form management) Angular මගින්ම සපයයි. මෙය විශාල, සංකීර්ණ ව්යාපෘති සඳහා ඉතා ව්යුහගත ප්රවේශයක් ලබා දේ.
- TypeScript: Angular, JavaScript හි වැඩිදියුණු කළ අනුවාදයක් වන TypeScript භාවිතා කරයි. එමගින් කේතයේ ගුණාත්මකභාවය සහ නඩත්තුව පහසු වේ.
- ව්යුහගත ගෘහ නිර්මාණ ශිල්පය: Modules, Components, Services වැනි පැහැදිලි ව්යුහයක් අනුගමනය කරයි.
- Two-Way Data Binding: UI එකේ සිදුවන වෙනස්කම් ස්වයංක්රීයව දත්ත ආකෘතියේ (data model) යාවත්කාලීන කිරීම සහ එහි අනෙක් පැත්ත සිදුවීම, සංවර්ධනය වේගවත් කරයි.
අවසාන වශයෙන්
React ද Angular ද යන තේරීම ව්යාපෘතියේ අවශ්යතා සහ කණ්ඩායමේ කැමැත්ත මත රඳා පවතී. React නම්යශීලී බව සහ වේගවත් ආරම්භයක් ලබා දෙන අතර, Angular විශාල යෙදුම් සඳහා ශක්තිමත්, ව්යුහගත පදනමක් ලබා දේ. වැදගත්ම දෙය වන්නේ මෙම frameworks පිටුපස ඇති මූලික සංකල්ප, එනම් Component-Based Architecture සහ State Management අවබෝධ කර ගැනීමයි.
දැන් අපි Frontend සහ Backend යන අංශ දෙකම ගොඩනගන ආකාරය පිළිබඳව ඉගෙන ගෙන අවසන්. නමුත්, අප නිර්මාණය කළ මෘදුකාංගය නිවැරදිව, දෝෂ රහිතව ක්රියාත්මක වන්නේදැයි තහවුරු කරගන්නේ කෙසේද? ඕනෑම වෘත්තීය මෘදුකාංගයක අත්යවශ්යම කොටසක් වන "මෘදුකාංග පරීක්ෂාව සහ තත්ත්ව සහතිකය (Testing & QA)" පිළිබඳව අපි ඊළඟ මොඩියුලයෙන් සාකච්ඡා කරමු.