What Building Pagelyze Taught Me About React

Pagelyze നിർമ്മിച്ചത് React-നെ കുറിച്ചുള്ള എന്റെ കാഴ്ചപ്പാട് മാറ്റിമറിച്ചു. ഞാൻ തിയറി നോക്കുന്നത് നിർത്തി ഉൽപ്പന്നത്തിന്റെ ആർക്കിടെക്ചറിലേക്ക് (product architecture) ശ്രദ്ധ കേന്ദ്രീകരിച്ചു തുടങ്ങി.

Pagelyze ഒരു വെബ്‌സൈറ്റ് ഓഡിറ്റ് ടൂളാണ്. ഇതൊരു ചെറിയ പ്രാക്ടീസ് ആപ്പല്ല. ഇത് ഓഡിറ്റ് റിപ്പോർട്ടുകൾ, സ്കോറിംഗ് ലോജിക്, ഡാഷ്‌ബോർഡുകൾ എന്നിവ കൈകാര്യം ചെയ്യുന്നു. ഇക്കാരണത്താൽ, എനിക്ക് ഒരു ചോദ്യത്തിന് ഉത്തരം കണ്ടെത്തേണ്ടി വന്നു:

ഉൽപ്പന്നം വളരുന്നതിനനുസരിച്ച് ഈ കോഡ് വൃത്തിയായി (clean) നിലനിൽക്കുമോ?

useState അല്ലെങ്കിൽ useEffect പോലുള്ള ഹുക്കുകൾ (Hooks) പ്രധാനമാണ്. എന്നാൽ അവ മാത്രമല്ല പ്രധാനം. നിങ്ങൾ ആധുനിക സിന്റാക്സ് ഉപയോഗിച്ചാലും പരിപാലിക്കാൻ പ്രയാസമുള്ള ഒരു കുഴപ്പക്കാമായ കോഡ് (mess) ഉണ്ടാകാം. ഇതിന്റെ പ്രധാന പ്രശ്നം സാധാരണയായി ഉത്തരവാദിത്തമാണ് (responsibility).

മോശമായ ഒരു സെറ്റപ്പിൽ, ഡാറ്റ ലോഡ് ചെയ്യുന്നത് മുതൽ ഫലങ്ങൾ കാണിക്കുന്നത് വരെയുള്ള എല്ലാ കാര്യങ്ങളും ഒരു ഫയൽ തന്നെ കൈകാര്യം ചെയ്യുന്നു. പ്രോജക്റ്റ് വലുതാകുമ്പോൾ ഇത് പരാജയപ്പെടും.

ഇതിനൊരു മികച്ച മാർഗ്ഗം കോമ്പണന്റുകളെ (components) അവയുടെ ആവശ്യാനുസരണം വേർതിരിക്കുക എന്നതാണ്:

  • AuditSummary
  • LeadCheckPanel
  • EvidenceList
  • ServiceRecommendationCard
  • ReportActions

ഓരോ ഭാഗത്തിനും ഓരോ ജോലിയുണ്ട്. ഡാറ്റാ ലോജിക് തെറ്റിക്കാതെ തന്നെ നിങ്ങൾക്ക് ഒരു കാർഡിന്റെ ഡിസൈൻ മാറ്റാൻ കഴിയും.

Redux വേണോ അതോ Context വേണോ എന്ന് ചോദിക്കുന്നത് നിർത്തുക. പകരം, ആർക്കാണ് ഈ സ്റ്റേറ്റ് (state) ആവശ്യമെന്ന് ചോദിക്കുക.

  • Local UI state: ടാബുകളും മോഡലുകളും (tabs and modals)
  • Form state: URL-കളും വാലിഡേഷനും (URLs and validation)
  • Server state: റിപ്പോർട്ടുകളും സ്കാനുകളും (reports and scans)
  • Global state: യൂസർ പ്രൊഫൈലും പെർമിഷനുകളും (user profile and permissions)

കസ്റ്റം ഹുക്കുകൾ (Custom hooks) പെരുമാറ്റങ്ങളെ (behavior) പ്രതിനിധീകരിക്കണം. അവ കേവലം കുഴപ്പക്കാമായ കോഡിനെ മറ്റൊരു ഫയലിലേക്ക് മാറ്റാൻ വേണ്ടി മാത്രമാകരുത്. ഒരു നല്ല ഹുക്ക് ഡാറ്റ ഫെച്ച് ചെയ്യുന്നു, അങ്ങനെ പേജ് കോമ്പണന്റിന് സ്ക്രീൻ ഏകോപിപ്പിക്കാൻ (coordinate) മാത്രമേ സാധിക്കൂ.

നിങ്ങളുടെ ഫോൾഡറുകൾ ഫീച്ചറുകൾ അനുസരിച്ച് ക്രമീകരിക്കുക:

  • features/audit-report/
  • features/lead-rescue/
  • features/dashboard/

റൂട്ടിംഗ് (Routing) എന്നത് വെറും URL-കൾ മാത്രമല്ല. അത് ഉപയോക്താവിന്റെ യാത്രയാണ് (user journey). ഒരു ഉപയോക്താവ് ലാൻഡിംഗ് പേജിൽ നിന്ന് ഒരു സൗജന്യ ഓഡിറ്റിലേക്കും, പിന്നീട് ഒരു റിപ്പോർട്ടിലേക്കും, ഒടുവിൽ ഒരു സർവീസ് ഇൻക്വയറിയിലേക്കും പോകുന്നു. നല്ല റൂട്ടിംഗ് അവരെ അടുത്ത ഘട്ടത്തിലേക്ക് നയിക്കുന്നു.

വ്യക്തതയോടെ നിർമ്മിക്കുക. തടസ്സങ്ങൾ (bottleneck) കണ്ടെത്തുക. ആ പ്രത്യേക ഭാഗം മാത്രം പരിഹരിക്കുക.

React-ലെ മികച്ച രീതികൾ (best practices) തീരുമാനങ്ങളെ കുറിച്ചുള്ളതാണ്. ഒരു കോമ്പണന്റ് എന്താണ് കൈകാര്യം ചെയ്യേണ്ടതെന്ന് നിങ്ങൾ തീരുമാനിക്കുന്നു. സ്റ്റേറ്റ് എവിടെ ഇരിക്കണമെന്ന് നിങ്ങൾ തീരുമാനിക്കുന്നു. ഒരു റൂട്ട് ഉപയോക്താവിനെ സഹായിക്കുമോ എന്ന് നിങ്ങൾ തീരുമാനിക്കുന്നു.

Pagelyze എന്റെ പരീക്ഷണമാണ്. എനിക്ക് ഒരു സ്ക്രീൻ നിർമ്മിക്കാൻ കഴിയുമോ എന്നല്ല ഞാൻ പരീക്ഷിക്കുന്നത്. ഉൽപ്പന്നം വളരുന്നതിനനുസരിച്ച് അതിനെ വൃത്തിയായി നിലനിർത്താൻ എനിക്ക് കഴിയുമോ എന്നാണ് ഞാൻ പരീക്ഷിക്കുന്നത്.

Source: https://dev.to/prazink/what-building-pagelyze-taught-me-about-react-best-practices-5fhb