ඉතා විශාල React යෙදුම් නිර්මාණය කරන කාලයේ, කේත ගබඩාවක් බරපතළ bottleneck එකක් වුණා. නව සංස්කරණයක් තැනීමට ගතවන කාලය දිගු වෙලා, merge conflict ගණනාවක් දිනයක් පුරා සිදුවෙයි. මේ නිසා Support Chat එකේ දෝෂයක් Checkout ප්රවාහයම බිඳ දමයි. එවැනි ගැටලු වලින් මුකුණුවීමට, Smart Tech Devs සමාගම Micro‑Frontends නාමාවලිය භාවිතා කරයි.
Micro‑Frontends යනු, එකම UI එකේ විවිධ කොටස් වෙනම කණ්ඩායම් වලින් නිර්මාණය, පරීක්ෂණ සහ නිකුත් කිරීමේ හැකියාව ලබා දෙන ආකෘතියයි. Next.js හි Webpack Module Federation භාවිතා කරමින්, මෙම ආකෘතිය සැලසීම ඉතා සරලයි. පළමුව Host යෙදුම (ප්රධාන shell) සහ එකක් හෝ වැඩි Remote යෙදුම් (උදා: Dashboard, Billing) සකස් කරයි. Remote යෙදුමේ අවශ්ය කොම්පොනන්ට් එකක් next.config.js තුළ exposes ලෙස ප්රකාශ කරයි, ඉන්පසු Host යෙදුමෙන් dynamic import මගින් ඒ කොම්පොනන්ට් එක රන්ටයිම් එකට ලබා ගත හැක.
උදාහරණයක් ලෙස Billing යෙදුමේ InvoiceList කොම්පොනන්ට් එක Remote ලෙස ප්රකාශ කර, Host Dashboard එකේ dynamic(() => import('billing_app/InvoiceList')) ලෙස ඇතුළත් කරයි. එවිට Dashboard පේජ් එක ලෝඩ් වීමේදී Billing සේවාදායකයාගෙන් ඒ කොම්පොනන්ට් එක බාගත කර, <Suspense> මගින් ලෝඩ් ස්පිනර් පෙන්වයි.
ශ්රී ලංකාවට ඇති වැදගත්කම
ශ්රී ලංකාවේ තාක්ෂණික ආයතන, startup කණ්ඩායම් සහ විශ්වවිද්යාල සිසුන්ට මේ ආකෘතියෙන් ලැබෙන වාසි බොහොමයක් වේ.
- වේගවත් නිකුත් කිරීම: එක් කණ්ඩායමක් තම Billing UI එක දිනයකට පළමු වරට නවීකරණය කළ හැක, මූලික ගබඩාවට බලපාන්නේ නැත.
- Merge conflict අඩු කිරීම: කණ්ඩායම් අතර කේත ගැටලු අඩුවේ, වැඩි දියුණුකමක් වේ.
- දෝෂ තරඟකාරීත්වය: එක් Remote එකේ වැරදි තවත් කොටස්වලට බලපාන්නේ නැති බැවින්, සම්පූර්ණ යෙදුමේ අඩුවක් නොවේ.
- ඉගෙනීමේ අවස්ථා: සිසුන්ට modern front‑end architecture අත්හදා බලන්න, real‑world project වලට සූදානම් වීමට අවස්ථාව ලැබේ.
එමෙන්ම, ශ්රී ලංකාවේ IT සේවා සපයන්නන්ට ගනුදෙනුකරුවන්ට වේගවත්, ස්ථායි UI අත්දැකීමක් ලබා දීමට මෙම ක්රමය උපකාරී වේ.
සාරාංශයෙන්, Module Federation සමඟ Micro‑Frontends භාවිතා කිරීම, React‑මූලික ව්යාපෘතිවල scalability, autonomy, සහ fault‑tolerance වර්ධනය කරයි. ඔබේ කණ්ඩායමට මේ ආකෘතියක් ඇතුළත් කර ගැනීමට අවශ්ය නම්, Next.js සහ Webpack සැකසුම් කෙරෙහි අවධානය යොමු කරන්න.
