ශ්‍රී ලංකාවේ නවතම තාක්ෂණික පුවත් 2026-07-21, Tuesday
💻 ක්‍රමලේඛනය · 🕒 කියවීමට විනාඩි 2 · 👁 1

React ව්‍යාපාරික කේතය සරල කරගන්න Feature‑Sliced Design (FSD) නව පදනම

React ව්‍යාපාරික කේතය සරල කරගන්න Feature‑Sliced Design (FSD) නව පදනම

React හෝ Next.js වගේ SPA පද්ධති අරඹන වෙලාවේ, බොහෝ කණ්ඩායම් ෆයිල්වල වර්ග අනුව "components", "hooks" වැනි ෆෝල්ඩර වලට ගොඩක් තබා ඉදිරියට යනවා. ඉතින් ඉස්සර කෙලවරේ මෙහෙම කරලා හොඳයි, නමුත් යෙදුම විශාල වෙලා යනකොට ව්‍යාපාරික ලොජික් එක තවත් තැන් වලට පතුරයි. "User Authentication" වගේ එක් විශේෂතාවක් යාවත්කාලීන කරන්න යනවට, අඩුම තරම් අඩු ෆෝල්ඩර ගණනක් හරහා සෙවිය යුතු වෙනවා.

Smart Tech Devs ආයතනයේ ඉදිරිපත් කරන Feature‑Sliced Design (FSD) කියන්නේ කේතය ව්‍යාපාරික ධාරිතාව අනුව කාණ්ඩ කරගන්න නව මාර්ගයක්. තාක්ෂණික විස්තරවලට නොවේ, ඒ වෙනුවට ව්‍යාපාරික කොටස් (domain) පදනමක් කරගෙන, පාරිභෝගිකයට සැලසෙන අගය මත පදනම්ව කේතය වෙන් කරයි. මෙය කේතය පිරිසිදු, පරිපාලනයට පහසු, සහ නව සංවර්ධකයන්ට ඉක්මනින් හුරු වීමට ඉඩ සලසයි.

FSD හි මූලික අදහස්

  • Entry Points (Routes) – URL එකක් සහ Page component එකක් එකතු කරන තැනක්. මෙහි ලොජික් අඩුයි, පමණක් මාර්ගය නිර්දේශ කරයි.
  • Page Composition – Route එකක් ක්‍රියාත්මක වීමෙන් Page එක render වෙයි. Page එක UI එක ගොඩනැගීමට widgets එකතු කරයි, Features පරිශීලක ක්‍රියාකාරකම් හා workflow පාලනය කරයි.
  • Feature‑Sliced Directory Structure – src/app, pages, features, entities, shared වැනි ෆෝල්ඩර වලින් වර්ගීකරණය කරයි. උදාහරණයක් ලෙස auth/features/auth/ui/LoginForm.tsx, entities/User/api/fetchUser.ts වැනි විශේෂිත කොටස් එකට එකතු වේ.

ශ්‍රී ලංකාවට ඇති වැදගත්කම

ශ්‍රී ලංකාවේ තාක්ෂණික සමාජය තවමත් කේත ගොඩනැගීමේ ගැටලු වලට මුහුණ දෙමින් පවතී. FSD ක්‍රමවේදය අනුගමනය කිරීමෙන්:

  • අධ්‍යයන ආයතන වල සිසුන්ට ව්‍යාපෘති පරිපාලනයේ නව මනෝභාවයක් ලබා ගත හැකිය. ඔවුන්ට කොඩ් බේස් එකේ කොටස් ඉක්මනින් හඳුනාගත හැකි වේ.
  • දේශීය startups ලා කේතය අඩු පරිසරයක් තුළ සකස් කර, නව සංවර්ධකයන්ට onboarding කාලය කෙටි කර, වෙළඳපලට ඉක්මනින් පිවිසීමට උපකාරී වේ.
  • වඩාත්ම විශාල ආයතනවලට maintainability සහ scalability ඉහළ යාම නිසා, දේශීය IT සේවා සපයන්නන්ට ගුණාත්මක සේවාවන් ලබා දීමට හැකියාව ලැබේ.

එමෙන්ම, FSD ආකෘතියේ ලොජික් වෙන් කිරීම API, UI, state management වැනි තත්ත්වයන් අතර සම්බන්ධතාවය පැහැදිලි කරයි. මෙය කේතය පරීක්ෂා කිරීම, unit test ලිවීම, සහ CI/CD පයිප්ලයින් නිර්මාණය කිරීම පහසු කරයි.

සාරාංශයෙන්, Feature‑Sliced Design යනු React/Next.js ව්‍යාපෘතිවල කේත ගොඩනැගීමේ ගැටලු විසඳීමට නව, සරල, සහ ව්‍යාපාරික‑මූලික ක්‍රමයක්. ශ්‍රී ලංකාවේ සංවර්ධකයන්ට මේ ආකාරය අනුගමනය කිරීමෙන් වැඩි දියුණු කාර්යක්ෂමතාව, වේගවත් අධ්‍යාපනය, සහ තරඟකාරීත්වය ලැබෙනු ඇත.

💡 ඔබේ කේතය Feature‑Sliced Design සමඟ නැවත සැලසුම් කර බලන්න!
මූලාශ්‍රය මෙම ලිපිය AI මගින් රචිත මුල් සාරාංශයකි. සම්පූර්ණ වාර්තාව කියවන්න:
Dev.to ↗
#React #FSD #Code Architecture #Sri Lanka #Developers