ഫ്രണ്ടെൻഡ് Nx വർക്ക്‌സ്‌പേസ്: വികസിപ്പിക്കാവുന്ന ആപ്ലിക്കേഷനുകൾക്കായുള്ള മോണോറെപ്പോ ഡെവലപ്‌മെൻ്റ്

ഇന്നത്തെ അതിവേഗ സോഫ്റ്റ്‌വെയർ ഡെവലപ്‌മെൻ്റ് ലോകത്ത്, വലിയ തോതിലുള്ള ഫ്രണ്ടെൻഡ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുകയും പരിപാലിക്കുകയും ചെയ്യുന്നത് വെല്ലുവിളി നിറഞ്ഞതാണ്. പ്രോജക്റ്റുകൾ വളരുന്നതിനനുസരിച്ച് ഡിപെൻഡൻസികൾ കൈകാര്യം ചെയ്യുക, കോഡിൻ്റെ സ്ഥിരത ഉറപ്പാക്കുക, ബിൽഡ് സമയം ഒപ്റ്റിമൈസ് ചെയ്യുക എന്നിവ കൂടുതൽ സങ്കീർണ്ണമാകുന്നു. ഒന്നിലധികം പ്രോജക്റ്റുകളും ലൈബ്രറികളും ഒരൊറ്റ റിപ്പോസിറ്ററിയിലേക്ക് ഏകീകരിക്കുന്നതിലൂടെ മോണോറെപ്പോകൾ ഒരു ശക്തമായ പരിഹാരം നൽകുന്നു. Nx, ഒരു സ്മാർട്ടും വികസിപ്പിക്കാവുന്നതുമായ ബിൽഡ് സിസ്റ്റം, നൂതന ടൂളിംഗും ഫീച്ചറുകളും ഉപയോഗിച്ച് മോണോറെപ്പോ ഡെവലപ്‌മെൻ്റ് മെച്ചപ്പെടുത്തുന്നു.

ഈ സമഗ്രമായ ഗൈഡ്, ഫ്രണ്ടെൻഡ് മോണോറെപ്പോ ഡെവലപ്‌മെൻ്റിനായി ഒരു Nx വർക്ക്‌സ്‌പേസ് ഉപയോഗിക്കുന്നതിൻ്റെ പ്രയോജനങ്ങൾ, പ്രധാന ആശയങ്ങൾ, പ്രായോഗിക ഉദാഹരണങ്ങൾ, മികച്ച രീതികൾ എന്നിവ ഉൾക്കൊള്ളുന്നു.

എന്താണ് ഒരു മോണോറെപ്പോ?

എല്ലാ പ്രോജക്റ്റുകളും അവയുടെ ഡിപെൻഡൻസികളും ഒരൊറ്റ റിപ്പോസിറ്ററിയിൽ സൂക്ഷിക്കുന്ന ഒരു സോഫ്റ്റ്‌വെയർ ഡെവലപ്‌മെൻ്റ് സ്ട്രാറ്റജിയാണ് മോണോറെപ്പോ. ഓരോ പ്രോജക്റ്റിനും അതിൻ്റേതായ റിപ്പോസിറ്ററി ഉള്ള പരമ്പരാഗത മൾട്ടി-റെപ്പോ സമീപനത്തിൽ നിന്ന് ഇത് വ്യത്യസ്തമാണ്.

മോണോറെപ്പോയുടെ പ്രധാന സവിശേഷതകൾ:

• സത്യത്തിൻ്റെ ഏക ഉറവിടം: എല്ലാ കോഡുകളും ഒരിടത്ത് നിലനിൽക്കുന്നു.
• കോഡ് പങ്കിടലും പുനരുപയോഗവും: പ്രോജക്റ്റുകളിലുടനീളം കോഡ് പങ്കിടാനും പുനരുപയോഗിക്കാനും എളുപ്പമാണ്.
• ലളിതമായ ഡിപെൻഡൻസി മാനേജ്മെൻ്റ്: പ്രോജക്റ്റുകളിലുടനീളമുള്ള ഡിപെൻഡൻസികൾ കൈകാര്യം ചെയ്യുന്നത് കൂടുതൽ ലളിതമാകുന്നു.
• അറ്റോമിക് മാറ്റങ്ങൾ: മാറ്റങ്ങൾ ഒന്നിലധികം പ്രോജക്റ്റുകളിൽ വ്യാപിപ്പിക്കാനും സ്ഥിരത ഉറപ്പാക്കാനും കഴിയും.
• മെച്ചപ്പെട്ട സഹകരണം: ബന്ധപ്പെട്ട പ്രോജക്റ്റുകളിൽ ടീമുകൾക്ക് സഹകരിക്കുന്നത് എളുപ്പമാക്കുന്നു.

എന്തുകൊണ്ട് ഫ്രണ്ടെൻഡ് ഡെവലപ്‌മെൻ്റിനായി ഒരു മോണോറെപ്പോ ഉപയോഗിക്കണം?

വലുതും സങ്കീർണ്ണവുമായ പ്രോജക്റ്റുകൾക്ക്, പ്രത്യേകിച്ച് ഫ്രണ്ടെൻഡ് ഡെവലപ്‌മെൻ്റിന് മോണോറെപ്പോകൾ കാര്യമായ നേട്ടങ്ങൾ നൽകുന്നു.

• മെച്ചപ്പെട്ട കോഡ് പങ്കിടൽ: ഫ്രണ്ടെൻഡ് പ്രോജക്റ്റുകൾ പലപ്പോഴും പൊതുവായ യുഐ ഘടകങ്ങൾ, യൂട്ടിലിറ്റി ഫംഗ്ഷനുകൾ, ഡിസൈൻ സിസ്റ്റങ്ങൾ എന്നിവ പങ്കിടുന്നു. ഒരു മോണോറെപ്പോ കോഡ് പങ്കിടൽ സുഗമമാക്കുകയും, തനിപ്പകർപ്പ് കുറയ്ക്കുകയും സ്ഥിരത പ്രോത്സാഹിപ്പിക്കുകയും ചെയ്യുന്നു. ഉദാഹരണത്തിന്, ഒരേ വർക്ക്‌സ്‌പേസിലെ ഒന്നിലധികം റിയാക്ട് ആപ്ലിക്കേഷനുകളിൽ ഒരു ഡിസൈൻ സിസ്റ്റം ലൈബ്രറി എളുപ്പത്തിൽ പങ്കിടാം.
• ലളിതമായ ഡിപെൻഡൻസി മാനേജ്മെൻ്റ്: ഒന്നിലധികം ഫ്രണ്ടെൻഡ് പ്രോജക്റ്റുകളിലുടനീളം ഡിപെൻഡൻസികൾ കൈകാര്യം ചെയ്യുന്നത് വെല്ലുവിളി നിറഞ്ഞതാണ്, പ്രത്യേകിച്ചും എപ്പോഴും വികസിച്ചുകൊണ്ടിരിക്കുന്ന ജാവാസ്ക്രിപ്റ്റ് ഇക്കോസിസ്റ്റത്തിൽ. ഒരു മോണോറെപ്പോ ഡിപെൻഡൻസികൾ കേന്ദ്രീകരിക്കുകയും പതിപ്പുകളും അപ്‌ഗ്രേഡുകളും കൈകാര്യം ചെയ്യുന്നതിനുള്ള ടൂളുകൾ നൽകുകയും ചെയ്തുകൊണ്ട് ഡിപെൻഡൻസി മാനേജ്മെൻ്റ് ലളിതമാക്കുന്നു.
• മെച്ചപ്പെട്ട ബിൽഡ് പ്രകടനം: Nx നൂതന ബിൽഡ് കാഷിംഗും ഡിപെൻഡൻസി അനാലിസിസും നൽകുന്നു, ഇത് വേഗതയേറിയതും കാര്യക്ഷമവുമായ ബിൽഡുകൾ സാധ്യമാക്കുന്നു. ഡിപെൻഡൻസി ഗ്രാഫ് വിശകലനം ചെയ്യുന്നതിലൂടെ, ഒരു മാറ്റം ബാധിച്ച പ്രോജക്റ്റുകൾ മാത്രം പുനർനിർമ്മിക്കാൻ Nx-ന് കഴിയും, ഇത് ബിൽഡ് സമയം ഗണ്യമായി കുറയ്ക്കുന്നു. നിരവധി ഘടകങ്ങളും മൊഡ്യൂളുകളുമുള്ള വലിയ ഫ്രണ്ടെൻഡ് ആപ്ലിക്കേഷനുകൾക്ക് ഇത് നിർണായകമാണ്.
• ലളിതമായ റീഫാക്ടറിംഗ്: ഒരു മോണോറെപ്പോയിൽ ഒന്നിലധികം പ്രോജക്റ്റുകളിലുടനീളം കോഡ് റീഫാക്ടറിംഗ് ചെയ്യുന്നത് എളുപ്പമാണ്. മാറ്റങ്ങൾ അറ്റോമിക് ആയി വരുത്താനും, സ്ഥിരത ഉറപ്പാക്കാനും, ബഗുകൾ ഉണ്ടാകാനുള്ള സാധ്യത കുറയ്ക്കാനും കഴിയും. ഉദാഹരണത്തിന്, ഒന്നിലധികം ആപ്ലിക്കേഷനുകളിൽ ഉപയോഗിക്കുന്ന ഒരു ഘടകത്തിൻ്റെ പേരുമാറ്റുന്നത് ഒരൊറ്റ കമ്മിറ്റിൽ ചെയ്യാൻ സാധിക്കും.
• മെച്ചപ്പെട്ട സഹകരണം: ഒരു പങ്കിട്ട കോഡ്ബേസും പൊതുവായ ഡെവലപ്‌മെൻ്റ് പരിതസ്ഥിതിയും നൽകിക്കൊണ്ട് ഫ്രണ്ടെൻഡ് ഡെവലപ്പർമാർക്കിടയിൽ മികച്ച സഹകരണം ഒരു മോണോറെപ്പോ വളർത്തുന്നു. ടീമുകൾക്ക് എളുപ്പത്തിൽ വ്യത്യസ്ത പ്രോജക്റ്റുകളിൽ സംഭാവന നൽകാനും അറിവും മികച്ച രീതികളും പങ്കിടാനും കഴിയും.

Nx-നെ പരിചയപ്പെടുത്തുന്നു: സ്മാർട്ടും വികസിപ്പിക്കാവുന്നതുമായ ബിൽഡ് സിസ്റ്റം

Nx ഒരു ശക്തമായ ബിൽഡ് സിസ്റ്റമാണ്, അത് നൂതന ടൂളിംഗും ഫീച്ചറുകളും ഉപയോഗിച്ച് മോണോറെപ്പോ ഡെവലപ്‌മെൻ്റ് മെച്ചപ്പെടുത്തുന്നു. ഇത് ഒരു സ്റ്റാൻഡേർഡ് ഡെവലപ്‌മെൻ്റ് അനുഭവം നൽകുന്നു, ബിൽഡ് പ്രകടനം മെച്ചപ്പെടുത്തുന്നു, ഡിപെൻഡൻസി മാനേജ്മെൻ്റ് ലളിതമാക്കുന്നു.

Nx-ൻ്റെ പ്രധാന സവിശേഷതകൾ:

• സ്മാർട്ട് ബിൽഡ് സിസ്റ്റം: Nx നിങ്ങളുടെ പ്രോജക്റ്റുകളുടെ ഡിപെൻഡൻസി ഗ്രാഫ് വിശകലനം ചെയ്യുകയും ബാധിച്ച പ്രോജക്റ്റുകൾ മാത്രം പുനർനിർമ്മിക്കുകയും ചെയ്യുന്നു, ഇത് ബിൽഡ് സമയം ഗണ്യമായി കുറയ്ക്കുന്നു.
• കോഡ് ജനറേഷൻ: പുതിയ പ്രോജക്റ്റുകൾ, ഘടകങ്ങൾ, മൊഡ്യൂളുകൾ എന്നിവ നിർമ്മിക്കുന്നതിനുള്ള കോഡ് ജനറേഷൻ ടൂളുകൾ Nx നൽകുന്നു, ഇത് ഡെവലപ്‌മെൻ്റ് വേഗത്തിലാക്കുകയും സ്ഥിരത ഉറപ്പാക്കുകയും ചെയ്യുന്നു.
• സംയോജിത ടൂളിംഗ്: റിയാക്ട്, ആംഗുലർ, വ്യൂ.ജെഎസ് പോലുള്ള ജനപ്രിയ ഫ്രണ്ടെൻഡ് ഫ്രെയിംവർക്കുകളുമായി Nx സംയോജിക്കുന്നു, ഇത് തടസ്സമില്ലാത്ത ഡെവലപ്‌മെൻ്റ് അനുഭവം നൽകുന്നു.
• പ്ലഗിൻ ഇക്കോസിസ്റ്റം: Nx-ന് സമ്പന്നമായ ഒരു പ്ലഗിൻ ഇക്കോസിസ്റ്റം ഉണ്ട്, അത് അധിക ടൂളുകളും ഇൻ്റഗ്രേഷനുകളും ഉപയോഗിച്ച് അതിൻ്റെ പ്രവർത്തനം വിപുലീകരിക്കുന്നു.
• ഇൻക്രിമെൻ്റൽ ബിൽഡുകൾ: Nx-ൻ്റെ ഇൻക്രിമെൻ്റൽ ബിൽഡ് സിസ്റ്റം മാറിയത് മാത്രം പുനർനിർമ്മിക്കുന്നു, ഇത് ഡെവലപ്‌മെൻ്റ് ഫീഡ്‌ബാക്ക് ലൂപ്പ് ഗണ്യമായി വേഗത്തിലാക്കുന്നു.
• കമ്പ്യൂട്ടേഷൻ കാഷിംഗ്: ബിൽഡുകളും ടെസ്റ്റുകളും പോലുള്ള ചെലവേറിയ കമ്പ്യൂട്ടേഷനുകളുടെ ഫലങ്ങൾ Nx കാഷെ ചെയ്യുന്നു, ഇത് പ്രകടനം കൂടുതൽ മെച്ചപ്പെടുത്തുന്നു.
• ഡിസ്ട്രിബ്യൂട്ടഡ് ടാസ്ക് എക്സിക്യൂഷൻ: വളരെ വലിയ മോണോറെപ്പോകൾക്കായി, ബിൽഡുകളും ടെസ്റ്റുകളും സമാന്തരമാക്കാൻ Nx-ന് ഒന്നിലധികം മെഷീനുകളിലുടനീളം ടാസ്ക്കുകൾ വിതരണം ചെയ്യാൻ കഴിയും.

ഫ്രണ്ടെൻഡ് ഡെവലപ്‌മെൻ്റിനായി ഒരു Nx വർക്ക്‌സ്‌പേസ് സജ്ജീകരിക്കുന്നു

ഒരു Nx വർക്ക്‌സ്‌പേസ് സജ്ജീകരിക്കുന്നത് ലളിതമാണ്. ഒരു പുതിയ വർക്ക്‌സ്‌പേസ് സൃഷ്‌ടിക്കാനും പ്രോജക്റ്റുകളും ലൈബ്രറികളും ചേർക്കാനും നിങ്ങൾക്ക് Nx CLI ഉപയോഗിക്കാം.

ആവശ്യകതകൾ:

• Node.js (പതിപ്പ് 16 അല്ലെങ്കിൽ അതിനുശേഷമുള്ളത്)
• npm അല്ലെങ്കിൽ yarn

ഘട്ടങ്ങൾ:

1. Nx CLI ഇൻസ്റ്റാൾ ചെയ്യുക:

               npm install -g create-nx-workspace
               
   
                 
                   Copy
                 
               
             

2. ഒരു പുതിയ Nx വർക്ക്‌സ്‌പേസ് സൃഷ്‌ടിക്കുക:

               npx create-nx-workspace my-frontend-workspace
               
   
                 
                   Copy
                 
               
             

   ഒരു പ്രീസെറ്റ് തിരഞ്ഞെടുക്കാൻ നിങ്ങളോട് ആവശ്യപ്പെടും. നിങ്ങളുടെ ഇഷ്ടപ്പെട്ട ഫ്രണ്ടെൻഡ് ഫ്രെയിംവർക്കിന് (ഉദാ. റിയാക്ട്, ആംഗുലർ, വ്യൂ.ജെഎസ്) അനുയോജ്യമായ ഒരു പ്രീസെറ്റ് തിരഞ്ഞെടുക്കുക.

3. ഒരു പുതിയ ആപ്ലിക്കേഷൻ ചേർക്കുക:

               nx generate @nx/react:application my-app
               
   
                 
                   Copy
                 
               
             

   ഈ കമാൻഡ് വർക്ക്‌സ്‌പേസിനുള്ളിൽ "my-app" എന്ന് പേരുള്ള ഒരു പുതിയ റിയാക്ട് ആപ്ലിക്കേഷൻ സൃഷ്‌ടിക്കുന്നു.

4. ഒരു പുതിയ ലൈബ്രറി ചേർക്കുക:

               nx generate @nx/react:library my-library
               
   
                 
                   Copy
                 
               
             

   ഈ കമാൻഡ് വർക്ക്‌സ്‌പേസിനുള്ളിൽ "my-library" എന്ന് പേരുള്ള ഒരു പുതിയ റിയാക്ട് ലൈബ്രറി സൃഷ്‌ടിക്കുന്നു. ആപ്ലിക്കേഷനുകളിലുടനീളം കോഡ് പങ്കിടുന്നതിനാണ് ലൈബ്രറികൾ ഉപയോഗിക്കുന്നത്.

നിങ്ങളുടെ Nx വർക്ക്‌സ്‌പേസ് ഓർഗനൈസുചെയ്യുന്നു

പരിപാലനക്ഷമതയ്ക്കും വിപുലീകരണത്തിനും നന്നായി ചിട്ടപ്പെടുത്തിയ ഒരു Nx വർക്ക്‌സ്‌പേസ് നിർണായകമാണ്. നിങ്ങളുടെ വർക്ക്‌സ്‌പേസ് ഘടന ചെയ്യുമ്പോൾ ഇനിപ്പറയുന്ന മാർഗ്ഗനിർദ്ദേശങ്ങൾ പരിഗണിക്കുക:

• ആപ്ലിക്കേഷനുകൾ: ആപ്ലിക്കേഷനുകൾ നിങ്ങളുടെ ഫ്രണ്ടെൻഡ് പ്രോജക്റ്റുകളുടെ എൻട്രി പോയിൻ്റുകളാണ്. അവ ഉപയോക്താക്കൾ കാണുന്ന ഇൻ്റർഫേസുകളെ പ്രതിനിധീകരിക്കുന്നു. ഉദാഹരണങ്ങളിൽ ഒരു വെബ് ആപ്ലിക്കേഷൻ, ഒരു മൊബൈൽ ആപ്ലിക്കേഷൻ, അല്ലെങ്കിൽ ഒരു ഡെസ്ക്ടോപ്പ് ആപ്ലിക്കേഷൻ എന്നിവ ഉൾപ്പെടുന്നു.
• ലൈബ്രറികൾ: ഒന്നിലധികം ആപ്ലിക്കേഷനുകളിൽ പങ്കിടാൻ കഴിയുന്ന പുനരുപയോഗിക്കാവുന്ന കോഡ് ലൈബ്രറികളിൽ അടങ്ങിയിരിക്കുന്നു. അവയുടെ പ്രവർത്തനത്തെ അടിസ്ഥാനമാക്കി അവയെ വിവിധ തരങ്ങളായി തിരിച്ചിരിക്കുന്നു.
• ഫീച്ചർ ലൈബ്രറികൾ: ഒരു പ്രത്യേക ഫീച്ചറിനായുള്ള ബിസിനസ്സ് ലോജിക്കും യുഐ ഘടകങ്ങളും ഫീച്ചർ ലൈബ്രറികളിൽ അടങ്ങിയിരിക്കുന്നു. അവ കോർ, യുഐ ലൈബ്രറികളെ ആശ്രയിച്ചിരിക്കുന്നു.
• യുഐ ലൈബ്രറികൾ: ഒന്നിലധികം ഫീച്ചറുകളിലും ആപ്ലിക്കേഷനുകളിലും ഉപയോഗിക്കാൻ കഴിയുന്ന പുനരുപയോഗിക്കാവുന്ന യുഐ ഘടകങ്ങൾ യുഐ ലൈബ്രറികളിൽ അടങ്ങിയിരിക്കുന്നു.
• കോർ ലൈബ്രറികൾ: യൂട്ടിലിറ്റി ഫംഗ്ഷനുകൾ, ഡാറ്റാ മോഡലുകൾ, വർക്ക്‌സ്‌പേസിൽ ഉടനീളം ഉപയോഗിക്കുന്ന മറ്റ് പൊതുവായ കോഡുകൾ എന്നിവ കോർ ലൈബ്രറികളിൽ അടങ്ങിയിരിക്കുന്നു.
• പങ്കിട്ട ലൈബ്രറികൾ (Shared Libraries): ഫ്രണ്ടെൻഡ് ഫ്രെയിംവർക്ക് (റിയാക്ട്, ആംഗുലർ, വ്യൂ.ജെഎസ്) പരിഗണിക്കാതെ ഒന്നിലധികം ആപ്ലിക്കേഷനുകളും ലൈബ്രറികളും ഉപയോഗിക്കാൻ കഴിയുന്ന ഫ്രെയിംവർക്ക്-അജ്ഞ്ഞോസ്റ്റിക് കോഡ് പങ്കിട്ട ലൈബ്രറികളിൽ അടങ്ങിയിരിക്കുന്നു. ഇത് കോഡ് പുനരുപയോഗം പ്രോത്സാഹിപ്പിക്കുകയും തനിപ്പകർപ്പ് കുറയ്ക്കുകയും ചെയ്യുന്നു.

ഉദാഹരണ ഡയറക്ടറി ഘടന:

my-frontend-workspace/
├── apps/
│   ├── my-app/
│   │   ├── src/
│   │   │   ├── app/
│   │   │   │   ├── app.tsx
│   │   │   │   └── app.module.css
│   │   │   └── main.tsx
│   │   └── project.json
│   └── my-other-app/
│       └── ...
├── libs/
│   ├── feature-my-feature/
│   │   ├── src/
│   │   │   └── lib/
│   │   │       └── feature-my-feature.tsx
│   │   └── project.json
│   ├── ui/
│   │   ├── src/
│   │   │   └── lib/
│   │   │       └── button/
│   │   │           └── button.tsx
│   │   └── project.json
│   ├── core/
│   │   ├── src/
│   │   │   └── lib/
│   │   │       └── api.ts
│   │   └── project.json
│   └── shared/
│       ├── src/
│       │   └── lib/
│       │       └── date-formatter.ts
│       └── project.json
├── tools/
│   └── generators/
├── nx.json
├── package.json
└── tsconfig.base.json

Nx ലൈബ്രറികൾ ഉപയോഗിച്ച് കോഡ് പങ്കിടലും പുനരുപയോഗവും

ഒരു മോണോറെപ്പോയിൽ കോഡ് പങ്കിടുന്നതിനും പുനരുപയോഗിക്കുന്നതിനുമുള്ള താക്കോലാണ് Nx ലൈബ്രറികൾ. നിങ്ങളുടെ കോഡ് വ്യക്തമായി നിർവചിക്കപ്പെട്ട ലൈബ്രറികളിലേക്ക് ഓർഗനൈസുചെയ്യുന്നതിലൂടെ, നിങ്ങൾക്ക് ഒന്നിലധികം ആപ്ലിക്കേഷനുകളിൽ ഘടകങ്ങളും സേവനങ്ങളും യൂട്ടിലിറ്റികളും എളുപ്പത്തിൽ പങ്കിടാൻ കഴിയും.

ഉദാഹരണം: ഒരു യുഐ ഘടകം പങ്കിടുന്നു

നിങ്ങൾക്ക് ഒന്നിലധികം റിയാക്ട് ആപ്ലിക്കേഷനുകളിൽ പങ്കിടാൻ ആഗ്രഹിക്കുന്ന ഒരു ബട്ടൺ ഘടകം ഉണ്ടെന്ന് കരുതുക. നിങ്ങൾക്ക് "ui" എന്ന് പേരുള്ള ഒരു യുഐ ലൈബ്രറി സൃഷ്‌ടിക്കാനും ഈ ലൈബ്രറിയിൽ ബട്ടൺ ഘടകം സ്ഥാപിക്കാനും കഴിയും.

1. ഒരു യുഐ ലൈബ്രറി സൃഷ്‌ടിക്കുക:

               nx generate @nx/react:library ui
               
   
                 
                   Copy
                 
               
             

2. ഒരു ബട്ടൺ ഘടകം സൃഷ്‌ടിക്കുക:

               nx generate @nx/react:component button --project=ui
               
   
                 
                   Copy
                 
               
             

3. ബട്ടൺ ഘടകം നടപ്പിലാക്കുക:

               // libs/ui/src/lib/button/button.tsx
   import styles from './button.module.css';
   
   interface ButtonProps {
    text: string;
    onClick: () => void;
   }
   
   export function Button({ text, onClick }: ButtonProps) {
    return (
    
    {text}
    
    );
   }
   
   export default Button;
               
   
                 
                   Copy
                 
               
             

4. ലൈബ്രറിയിൽ നിന്ന് ബട്ടൺ ഘടകം എക്‌സ്‌പോർട്ട് ചെയ്യുക:

               // libs/ui/src/index.ts
   export * from './lib/button/button';
               
   
                 
                   Copy
                 
               
             

5. ഒരു ആപ്ലിക്കേഷനിൽ ബട്ടൺ ഘടകം ഉപയോഗിക്കുക:

               // apps/my-app/src/app/app.tsx
   import { Button } from '@my-frontend-workspace/ui';
   
   function App() {
    return (
    
   
    
   Welcome to My App
     alert('Clicked!')} />
    
    );
   }
   
   export default App;
               
   
                 
                   Copy
                 
               
             

ലൈബ്രറികൾ ഉപയോഗിക്കുന്നതിലൂടെ, നിങ്ങളുടെ യുഐ ഘടകങ്ങൾ എല്ലാ ആപ്ലിക്കേഷനുകളിലും സ്ഥിരതയുള്ളതാണെന്ന് ഉറപ്പാക്കാൻ കഴിയും. നിങ്ങൾ യുഐ ലൈബ്രറിയിലെ ബട്ടൺ ഘടകം അപ്‌ഡേറ്റ് ചെയ്യുമ്പോൾ, ആ ഘടകം ഉപയോഗിക്കുന്ന എല്ലാ ആപ്ലിക്കേഷനുകളും സ്വയമേവ അപ്‌ഡേറ്റ് ചെയ്യപ്പെടും.

Nx വർക്ക്‌സ്‌പേസുകളിലെ ഡിപെൻഡൻസി മാനേജ്മെൻ്റ്

പ്രോജക്റ്റുകളും ലൈബ്രറികളും തമ്മിലുള്ള ഡിപെൻഡൻസികൾ കൈകാര്യം ചെയ്യുന്നതിന് Nx ശക്തമായ ടൂളുകൾ നൽകുന്നു. ഓരോ പ്രോജക്റ്റിൻ്റെയും അല്ലെങ്കിൽ ലൈബ്രറിയുടെയും `project.json` ഫയലിൽ നിങ്ങൾക്ക് ഡിപെൻഡൻസികൾ വ്യക്തമായി നിർവചിക്കാൻ കഴിയും.

ഉദാഹരണം: ഒരു ഡിപെൻഡൻസി പ്രഖ്യാപിക്കുന്നു

നിങ്ങളുടെ ആപ്ലിക്കേഷനായ "my-app" "core" എന്ന ലൈബ്രറിയെ ആശ്രയിച്ചിരിക്കുന്നുവെന്ന് കരുതുക. "my-app"-ൻ്റെ `project.json` ഫയലിൽ നിങ്ങൾക്ക് ഈ ഡിപെൻഡൻസി പ്രഖ്യാപിക്കാം.

            // apps/my-app/project.json
{
 "name": "my-app",
 "projectType": "application",
 ...
 "implicitDependencies": ["core"]
}
            

              
                Copy
              
            
          

ഡിപെൻഡൻസികൾ വ്യക്തമായി പ്രഖ്യാപിക്കുന്നതിലൂടെ, Nx-ന് നിങ്ങളുടെ വർക്ക്‌സ്‌പേസിൻ്റെ ഡിപെൻഡൻസി ഗ്രാഫ് വിശകലനം ചെയ്യാനും ഒരു ഡിപെൻഡൻസി മാറുമ്പോൾ ബാധിച്ച പ്രോജക്റ്റുകൾ മാത്രം പുനർനിർമ്മിക്കാനും കഴിയും. ഇത് ബിൽഡ് പ്രകടനം ഗണ്യമായി മെച്ചപ്പെടുത്തുന്നു.

Nx ഉപയോഗിച്ച് ബിൽഡ് പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യുക

Nx-ൻ്റെ സ്മാർട്ട് ബിൽഡ് സിസ്റ്റവും കമ്പ്യൂട്ടേഷൻ കാഷിംഗ് കഴിവുകളും ബിൽഡ് പ്രകടനം ഗണ്യമായി മെച്ചപ്പെടുത്തുന്നു. നിങ്ങളുടെ Nx വർക്ക്‌സ്‌പേസിലെ ബിൽഡ് പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിനുള്ള ചില നുറുങ്ങുകൾ ഇതാ:

• ഡിപെൻഡൻസി ഗ്രാഫ് വിശകലനം ചെയ്യുക: നിങ്ങളുടെ വർക്ക്‌സ്‌പേസിൻ്റെ ഡിപെൻഡൻസി ഗ്രാഫ് ദൃശ്യവൽക്കരിക്കാൻ `nx graph` കമാൻഡ് ഉപയോഗിക്കുക. സാധ്യതയുള്ള തടസ്സങ്ങൾ തിരിച്ചറിയുകയും ഡിപെൻഡൻസികൾ കുറയ്ക്കുന്നതിന് നിങ്ങളുടെ പ്രോജക്റ്റ് ഘടന ഒപ്റ്റിമൈസ് ചെയ്യുകയും ചെയ്യുക.
• കമ്പ്യൂട്ടേഷൻ കാഷിംഗ് ഉപയോഗിക്കുക: ബിൽഡുകളും ടെസ്റ്റുകളും പോലുള്ള ചെലവേറിയ കമ്പ്യൂട്ടേഷനുകളുടെ ഫലങ്ങൾ Nx കാഷെ ചെയ്യുന്നു. നിങ്ങളുടെ `nx.json` ഫയലിൽ കമ്പ്യൂട്ടേഷൻ കാഷിംഗ് പ്രവർത്തനക്ഷമമാക്കിയിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക.
• ടാസ്ക്കുകൾ സമാന്തരമായി പ്രവർത്തിപ്പിക്കുക: ഒന്നിലധികം സിപിയു കോറുകൾ ഉപയോഗിക്കുന്നതിന് Nx-ന് ടാസ്ക്കുകൾ സമാന്തരമായി പ്രവർത്തിപ്പിക്കാൻ കഴിയും. ടാസ്ക്കുകൾ സമാന്തരമായി പ്രവർത്തിപ്പിക്കാൻ `--parallel` ഫ്ലാഗ് ഉപയോഗിക്കുക.
• ഡിസ്ട്രിബ്യൂട്ടഡ് ടാസ്ക് എക്സിക്യൂഷൻ ഉപയോഗിക്കുക: വളരെ വലിയ മോണോറെപ്പോകൾക്കായി, ബിൽഡുകളും ടെസ്റ്റുകളും സമാന്തരമാക്കാൻ Nx-ന് ഒന്നിലധികം മെഷീനുകളിലുടനീളം ടാസ്ക്കുകൾ വിതരണം ചെയ്യാൻ കഴിയും.
• നിങ്ങളുടെ കോഡ് ഒപ്റ്റിമൈസ് ചെയ്യുക: ബിൽഡ് സമയം കുറയ്ക്കുന്നതിന് നിങ്ങളുടെ കോഡ് ഒപ്റ്റിമൈസ് ചെയ്യുക. ഉപയോഗിക്കാത്ത കോഡ് നീക്കം ചെയ്യുക, ചിത്രങ്ങൾ ഒപ്റ്റിമൈസ് ചെയ്യുക, നിങ്ങളുടെ ബണ്ടിലുകളുടെ വലുപ്പം കുറയ്ക്കുന്നതിന് കോഡ് സ്പ്ലിറ്റിംഗ് ഉപയോഗിക്കുക.

Nx വർക്ക്‌സ്‌പേസുകളിലെ ടെസ്റ്റിംഗ്

യൂണിറ്റ് ടെസ്റ്റുകൾ, ഇൻ്റഗ്രേഷൻ ടെസ്റ്റുകൾ, എൻഡ്-ടു-എൻഡ് ടെസ്റ്റുകൾ എന്നിവ പ്രവർത്തിപ്പിക്കുന്നതിന് Nx സംയോജിത ടെസ്റ്റിംഗ് ടൂളുകൾ നൽകുന്നു. വർക്ക്‌സ്‌പേസിലെ എല്ലാ പ്രോജക്റ്റുകൾക്കും അല്ലെങ്കിൽ ഒരു നിർദ്ദിഷ്ട പ്രോജക്റ്റിനും ടെസ്റ്റുകൾ പ്രവർത്തിപ്പിക്കുന്നതിന് നിങ്ങൾക്ക് `nx test` കമാൻഡ് ഉപയോഗിക്കാം.

ഉദാഹരണം: ടെസ്റ്റുകൾ പ്രവർത്തിപ്പിക്കുന്നു

            nx test my-app
            

              
                Copy
              
            
          

ഈ കമാൻഡ് "my-app" എന്ന ആപ്ലിക്കേഷൻ്റെ എല്ലാ ടെസ്റ്റുകളും പ്രവർത്തിപ്പിക്കുന്നു.

Jest, Cypress, Playwright പോലുള്ള ജനപ്രിയ ടെസ്റ്റിംഗ് ഫ്രെയിംവർക്കുകളെ Nx പിന്തുണയ്ക്കുന്നു. ഓരോ പ്രോജക്റ്റിൻ്റെയും `project.json` ഫയലിൽ നിങ്ങളുടെ ടെസ്റ്റിംഗ് എൻവയോൺമെൻ്റ് കോൺഫിഗർ ചെയ്യാൻ കഴിയും.

Nx ഉപയോഗിച്ചുള്ള കണ്ടിന്യൂസ് ഇൻ്റഗ്രേഷനും കണ്ടിന്യൂസ് ഡിപ്ലോയ്മെൻ്റും (CI/CD)

GitHub Actions, GitLab CI, Jenkins പോലുള്ള ജനപ്രിയ CI/CD സിസ്റ്റങ്ങളുമായി Nx തടസ്സമില്ലാതെ സംയോജിക്കുന്നു. നിങ്ങളുടെ CI/CD പൈപ്പ്ലൈനിലെ ബിൽഡുകൾ, ടെസ്റ്റുകൾ, ഡിപ്ലോയ്മെൻ്റുകൾ എന്നിവ ഓട്ടോമേറ്റ് ചെയ്യാൻ നിങ്ങൾക്ക് Nx-ൻ്റെ കമാൻഡ്-ലൈൻ ഇൻ്റർഫേസ് ഉപയോഗിക്കാം.

ഉദാഹരണം: GitHub Actions വർക്ക്ഫ്ലോ

നിങ്ങളുടെ Nx വർക്ക്‌സ്‌പേസ് നിർമ്മിക്കുകയും, ടെസ്റ്റ് ചെയ്യുകയും, വിന്യസിക്കുകയും ചെയ്യുന്ന ഒരു GitHub Actions വർക്ക്ഫ്ലോയുടെ ഉദാഹരണം ഇതാ:

            # .github/workflows/ci.yml
name: CI

on:
 push:
 branches: [main]
 pull_request:
 branches: [main]

jobs:
 build:
 runs-on: ubuntu-latest

 steps:
 - uses: actions/checkout@v3
 with:
 fetch-depth: 0
 - uses: actions/setup-node@v3
 with:
 node-version: 16
 cache: 'npm'
 - run: npm ci
 - run: npx nx affected --target=lint --base=origin/main --head=HEAD
 - run: npx nx affected --target=test --base=origin/main --head=HEAD --watchAll=false
 - run: npx nx affected --target=build --base=origin/main --head=HEAD
            

              
                Copy
              
            
          

ഈ വർക്ക്ഫ്ലോ ഇനിപ്പറയുന്ന ടാസ്ക്കുകൾ പ്രവർത്തിപ്പിക്കുന്നു:

• ലിൻ്റിംഗ്: ബാധിച്ച പ്രോജക്റ്റുകളിൽ ലിൻ്ററുകൾ പ്രവർത്തിപ്പിക്കുന്നു.
• ടെസ്റ്റിംഗ്: ബാധിച്ച പ്രോജക്റ്റുകളിൽ ടെസ്റ്റുകൾ പ്രവർത്തിപ്പിക്കുന്നു.
• ബിൽഡിംഗ്: ബാധിച്ച പ്രോജക്റ്റുകൾ നിർമ്മിക്കുന്നു.

Nx `affected` കമാൻഡ് നൽകുന്നു, ഇത് ഒരു മാറ്റം ബാധിച്ച പ്രോജക്റ്റുകളിൽ മാത്രം ടാസ്ക്കുകൾ പ്രവർത്തിപ്പിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഇത് നിങ്ങളുടെ CI/CD പൈപ്പ്ലൈനിൻ്റെ എക്സിക്യൂഷൻ സമയം ഗണ്യമായി കുറയ്ക്കുന്നു.

ഫ്രണ്ടെൻഡ് Nx വർക്ക്‌സ്‌പേസ് ഡെവലപ്‌മെൻ്റിനുള്ള മികച്ച രീതികൾ

Nx ഉപയോഗിച്ച് ഫ്രണ്ടെൻഡ് ആപ്ലിക്കേഷനുകൾ വികസിപ്പിക്കുന്നതിനുള്ള ചില മികച്ച രീതികൾ ഇതാ:

• സ്ഥിരമായ ഒരു കോഡിംഗ് ശൈലി പിന്തുടരുക: നിങ്ങളുടെ വർക്ക്‌സ്‌പേസിലുടനീളം സ്ഥിരമായ ഒരു കോഡിംഗ് ശൈലി നടപ്പിലാക്കാൻ Prettier പോലുള്ള ഒരു കോഡ് ഫോർമാറ്ററും ESLint പോലുള്ള ഒരു ലിൻ്ററും ഉപയോഗിക്കുക.
• യൂണിറ്റ് ടെസ്റ്റുകൾ എഴുതുക: കോഡിൻ്റെ ഗുണനിലവാരം ഉറപ്പാക്കാനും റിഗ്രഷനുകൾ തടയാനും നിങ്ങളുടെ എല്ലാ ഘടകങ്ങൾക്കും സേവനങ്ങൾക്കും യൂട്ടിലിറ്റികൾക്കും യൂണിറ്റ് ടെസ്റ്റുകൾ എഴുതുക.
• ഒരു ഡിസൈൻ സിസ്റ്റം ഉപയോഗിക്കുക: നിങ്ങളുടെ യുഐ ഘടകങ്ങളിലുടനീളം സ്ഥിരത ഉറപ്പാക്കാൻ ഒരു ഡിസൈൻ സിസ്റ്റം ഉപയോഗിക്കുക.
• നിങ്ങളുടെ കോഡ് ഡോക്യുമെൻ്റ് ചെയ്യുക: മറ്റ് ഡെവലപ്പർമാർക്ക് മനസ്സിലാക്കാനും പരിപാലിക്കാനും എളുപ്പമാക്കുന്നതിന് നിങ്ങളുടെ കോഡ് സമഗ്രമായി ഡോക്യുമെൻ്റ് ചെയ്യുക.
• വേർഷൻ കൺട്രോൾ ഉപയോഗിക്കുക: വേർഷൻ കൺട്രോളിനായി Git ഉപയോഗിക്കുക, സ്ഥിരമായ ഒരു ബ്രാഞ്ചിംഗ് സ്ട്രാറ്റജി പിന്തുടരുക.
• നിങ്ങളുടെ വർക്ക്ഫ്ലോ ഓട്ടോമേറ്റ് ചെയ്യുക: നിങ്ങളുടെ കോഡ് എല്ലായ്പ്പോഴും ടെസ്റ്റ് ചെയ്യുകയും സ്വയമേവ വിന്യസിക്കുകയും ചെയ്യുന്നുവെന്ന് ഉറപ്പാക്കാൻ CI/CD ഉപയോഗിച്ച് നിങ്ങളുടെ വർക്ക്ഫ്ലോ ഓട്ടോമേറ്റ് ചെയ്യുക.
• ഡിപെൻഡൻസികൾ കാലികമായി നിലനിർത്തുക: ഏറ്റവും പുതിയ ഫീച്ചറുകളിൽ നിന്നും സുരക്ഷാ പാച്ചുകളിൽ നിന്നും പ്രയോജനം നേടുന്നതിന് നിങ്ങളുടെ ഡിപെൻഡൻസികൾ പതിവായി അപ്‌ഡേറ്റ് ചെയ്യുക.
• പ്രകടനം നിരീക്ഷിക്കുക: നിങ്ങളുടെ ആപ്ലിക്കേഷനുകളുടെ പ്രകടനം നിരീക്ഷിക്കുകയും സാധ്യതയുള്ള തടസ്സങ്ങൾ തിരിച്ചറിയുകയും ചെയ്യുക.

നൂതന Nx ആശയങ്ങൾ

Nx-ൻ്റെ അടിസ്ഥാനകാര്യങ്ങളിൽ നിങ്ങൾ പ്രാവീണ്യം നേടിയ ശേഷം, നിങ്ങളുടെ ഡെവലപ്‌മെൻ്റ് വർക്ക്ഫ്ലോ കൂടുതൽ മെച്ചപ്പെടുത്തുന്നതിന് ചില നൂതന ആശയങ്ങൾ പര്യവേക്ഷണം ചെയ്യാവുന്നതാണ്:

• കസ്റ്റം ജനറേറ്ററുകൾ: പുതിയ പ്രോജക്റ്റുകൾ, ഘടകങ്ങൾ, മൊഡ്യൂളുകൾ എന്നിവയുടെ നിർമ്മാണം ഓട്ടോമേറ്റ് ചെയ്യുന്നതിന് കസ്റ്റം ജനറേറ്ററുകൾ സൃഷ്‌ടിക്കുക. ഇത് ഡെവലപ്‌മെൻ്റ് സമയം ഗണ്യമായി കുറയ്ക്കുകയും സ്ഥിരത ഉറപ്പാക്കുകയും ചെയ്യും.
• Nx പ്ലഗിനുകൾ: കസ്റ്റം ടൂളുകളും ഇൻ്റഗ്രേഷനുകളും ഉപയോഗിച്ച് Nx-ൻ്റെ പ്രവർത്തനം വിപുലീകരിക്കാൻ Nx പ്ലഗിനുകൾ വികസിപ്പിക്കുക.
• മൊഡ്യൂൾ ഫെഡറേഷൻ: നിങ്ങളുടെ ആപ്ലിക്കേഷൻ്റെ സ്വതന്ത്ര ഭാഗങ്ങൾ വെവ്വേറെ നിർമ്മിക്കാനും വിന്യസിക്കാനും മൊഡ്യൂൾ ഫെഡറേഷൻ ഉപയോഗിക്കുക. ഇത് വേഗതയേറിയ ഡിപ്ലോയ്മെൻ്റുകളും കൂടുതൽ ഫ്ലെക്സിബിലിറ്റിയും സാധ്യമാക്കുന്നു.
• Nx ക്ലൗഡ്: നൂതന ബിൽഡ് ഇൻസൈറ്റുകൾ, ഡിസ്ട്രിബ്യൂട്ടഡ് ടാസ്ക് എക്സിക്യൂഷൻ, റിമോട്ട് കാഷിംഗ് എന്നിവ ലഭിക്കുന്നതിന് Nx ക്ലൗഡുമായി സംയോജിപ്പിക്കുക.

ഉപസംഹാരം

ഫ്രണ്ടെൻഡ് മോണോറെപ്പോകൾ കൈകാര്യം ചെയ്യുന്നതിനുള്ള ശക്തവും കാര്യക്ഷമവുമായ ഒരു മാർഗ്ഗം Nx വർക്ക്‌സ്‌പേസുകൾ നൽകുന്നു. Nx-ൻ്റെ നൂതന ടൂളിംഗും ഫീച്ചറുകളും പ്രയോജനപ്പെടുത്തുന്നതിലൂടെ, നിങ്ങൾക്ക് കോഡ് പങ്കിടൽ, ബിൽഡ് പ്രകടനം, ഡെവലപ്പർ സഹകരണം എന്നിവ മെച്ചപ്പെടുത്താൻ കഴിയും, ഇത് വികസിപ്പിക്കാവുന്നതും പരിപാലിക്കാവുന്നതുമായ ഫ്രണ്ടെൻഡ് ആപ്ലിക്കേഷനുകളിലേക്ക് നയിക്കുന്നു. Nx സ്വീകരിക്കുന്നത് നിങ്ങളുടെ ഡെവലപ്‌മെൻ്റ് പ്രക്രിയയെ കാര്യക്ഷമമാക്കാനും നിങ്ങളുടെ ടീമിന് കാര്യമായ ഉൽപ്പാദനക്ഷമത വർദ്ധിപ്പിക്കാനും കഴിയും, പ്രത്യേകിച്ചും സങ്കീർണ്ണവും വലിയ തോതിലുള്ളതുമായ പ്രോജക്റ്റുകളിൽ പ്രവർത്തിക്കുമ്പോൾ. ഫ്രണ്ടെൻഡ് ലോകം വികസിച്ചുകൊണ്ടിരിക്കുമ്പോൾ, Nx ഉപയോഗിച്ച് മോണോറെപ്പോ ഡെവലപ്‌മെൻ്റിൽ വൈദഗ്ദ്ധ്യം നേടുന്നത് ഫ്രണ്ടെൻഡ് എഞ്ചിനീയർമാർക്ക് കൂടുതൽ മൂല്യവത്തായ ഒരു കഴിവായി മാറിക്കൊണ്ടിരിക്കുന്നു.

ഈ ഗൈഡ് ഫ്രണ്ടെൻഡ് Nx വർക്ക്‌സ്‌പേസ് ഡെവലപ്‌മെൻ്റിൻ്റെ ഒരു സമഗ്രമായ അവലോകനം നൽകിയിട്ടുണ്ട്. മികച്ച രീതികൾ പിന്തുടരുകയും നൂതന ആശയങ്ങൾ പര്യവേക്ഷണം ചെയ്യുകയും ചെയ്യുന്നതിലൂടെ, നിങ്ങൾക്ക് Nx-ൻ്റെ മുഴുവൻ കഴിവുകളും പ്രയോജനപ്പെടുത്താനും അതിശയകരമായ ഫ്രണ്ടെൻഡ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാനും കഴിയും.