ඔබේ වෙබ් අඩවියෙහි බොත්තමක් ක්ලික් කරලා, ඇනීමේ පැනීමක්, දත්ත ගෙවීම, පෙන්වීම, පළමු ප්රතිඵලය උද්දීපනය කිරීම – මේ සියල්ලක් පරිශීලකයාට පියවරෙන් පියවර දක්නට ලැබේ. එත් ඒ පියවරවල අඩංගු කේතය එතරම් පැහැදිලිද?
මෙම ලිපියෙහි ලේඛකයා UI කේතය UI පරිදිම කියවීමට හැකිදැයි පරීක්ෂා කරයි. React භාවිතයෙන් එම අන්තර්ක්රියාව කෙසේ සිදු කළ හැකිද කියා උදාහරණයක් දක්වා, එම කේතය තේරුම් ගැනීමට අවශ්ය state, class, promise, timer වැනි අංශ බෙදා හරිනවා. පසුකාලීනව TargetJS නම් නව ෆ්රේම්වර්ක් එකෙන් ඒම එක අන්තර්ක්රියාව කොහොමත් සරලව ලියන්න පුළුවන් කියලා පෙන්වයි.
React උදාහරණය එකේ useState හරහා බොත්තම සක්රිය කිරීම, API අමතා දත්ත ලබා ගැනීම, UI එකට නව දත්ත පෙන්වීම, පළමු පේළිය උද්දීපනය කිරීම යන පියවර වෙන වෙනට state වලින් පාලනය කරයි. CSS class එකක් animation සම්බන්ධ කරයි, await සහ setTimeout මඟින් පියවර අතර කාලය සකසයි.
TargetJS උදාහරණය එකේ එම පියවර සියල්ලක් එකම App කොන්ෆිග්රේෂන් එකේ සකස් කරයි. බොත්තම ක්ලික් කරන විට setTarget මගින් HTML, scale, backgroundColor වෙනස් කරයි, API URL එකක් fetch$$ ලෙස සකසා දත්ත ලබා ගනී, පසුදා UI අංගයන්ට animation සහ highlight එකක් එකතුවෙන් අනුයුක්ත කරයි. කේතය කෙටි, පැහැදිලි, සහ UI එකේ සිදුවන දේවල් සමඟ සම්බන්ධතාවයක් තබාගෙන ඉන්නවා.
ශ්රී ලංකාවට ඇති වැදගත්කම
- විකසකයන්ට UI‑logic එකක් UI‑look එකේම කියවීමට හැකිවීමෙන් කේතයේ පරිකථනය පහසු වේ.
- අධ්යයන ආකෘතිවල UI‑animation, API‑fetch වැනි නව තාක්ෂණික පදනම් ඉගෙන ගැනීමට TargetJS වැනි ලාභදායී උදාහරණ ලබාගත හැක.
- ව්යාපාරිකයන්ට UI‑performance අගය කිරීම, පරිශීලක අත්දැකීම (UX) උත්තරීතර කිරීම සඳහා කේත‑සංරචනයේ නව පද්ධති හඳුන්වා දිය හැක.
සාරාංශයෙන්, UI කේතය UI වගේ කියවීමට හැකි වන්නේ කේතය UI‑දෘශ්ය පදනමට සම්බන්ධ කරන පදනම් ව්යුහයන් නිවැරදිව සකස් කළ විටයි. React වැනි ප්රචලිත ෆ්රේම්වර්ක් එකත් TargetJS වැනි නව පදනමත් එකට එකතු කරමින්, ශ්රී ලංකාවේ තාක්ෂණික සමාජය ඉක්මනින් නව පරම්පරාවකට පත් වීමට අවස්ථා ලැබේ.
ඔබේ ව්යාපෘතියේ UI‑කේතය වඩාත් පාරදර්ශී කරගැනීමට අදම මේ සංකල්ප පරීක්ෂා කර බලන්න.
