What Building Pagelyze Taught Me About React

Pagelyze બનાવવાથી React વિશેનો મારો દૃષ્ટિકોણ બદલાઈ ગયો. મેં માત્ર થિયરી (theory) જોવાનું છોડી દીધું અને પ્રોડક્ટ આર્કિટેક્ચર (product architecture) પર ધ્યાન આપવાનું શરૂ કર્યું.

Pagelyze એ વેબસાઇટ ઓડિટ ટૂલ છે. તે કોઈ નાની પ્રેક્ટિસ એપ નથી. તે ઓડિટ રિપોર્ટ્સ, સ્કોરિંગ લોજિક અને ડેશબોર્ડ્સ સંભાળે છે. આ કારણે, મારે એક પ્રશ્નનો જવાબ આપવો પડ્યો:

જેમ જેમ પ્રોડક્ટ વધશે તેમ શું આ કોડ ક્લીન (clean) રહેશે?

useState અથવા useEffect જેવા Hooks મહત્વપૂર્ણ છે. પરંતુ તે આખી વાત નથી. તમે આધુનિક સિન્ટેક્સ (syntax) નો ઉપયોગ કરી શકો છો છતાં પણ મેન્ટેન કરવા માટે અસ્તવ્યસ્ત કોડ હોઈ શકે છે. સમસ્યા સામાન્ય રીતે જવાબદારીની (responsibility) હોય છે.

ખરાબ સેટઅપમાં, ડેટા લોડ કરવાથી લઈને પરિણામો બતાવવા સુધીનું બધું જ એક જ ફાઇલમાં હોય છે. જ્યારે તમે સ્કેલ (scale) કરો છો ત્યારે આ પદ્ધતિ નિષ્ફળ જાય છે.

વધુ સારો રસ્તો એ છે કે ઘટકોને (components) તેમના હેતુ મુજબ વિભાજિત કરવા:

  • AuditSummary
  • LeadCheckPanel
  • EvidenceList
  • ServiceRecommendationCard
  • ReportActions

દરેક ભાગનું એક જ કામ છે. તમે તમારા ડેટા લોજિકને તોડ્યા વિના કાર્ડની ડિઝાઇન બદલી શકો છો.

તમારે Redux વાપરવું જોઈએ કે Context, એ પૂછવાનું બંધ કરો. એ પૂછો કે સ્ટેટ (state) ની જરૂર કોને છે.

  • Local UI state: ટેબ્સ અને મોડલ્સ (tabs and modals)
  • Form state: URLs અને વેલિડેશન (validation)
  • Server state: રિપોર્ટ્સ અને સ્કેન્સ (reports and scans)
  • Global state: યુઝર પ્રોફાઇલ અને પરમિશન (user profile and permissions)

Custom hooks એ વર્તણૂક (behavior) દર્શાવવા જોઈએ. તેમણે માત્ર અસ્તવ્યસ્ત કોડને બીજી ફાઇલમાં ખસેડવાનું કામ ન કરવું જોઈએ. એક સારો hook ડેટા ફેચ (fetch) કરે છે જેથી પેજ કમ્પોનન્ટ ફક્ત સ્ક્રીનને કોઓર્ડિનેટ (coordinate) કરવાનું કામ કરે.

તમારા ફોલ્ડર્સને ફીચર (feature) મુજબ ગોઠવો:

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

રાઉટિંગ (Routing) એ માત્ર URLs નથી. તે યુઝરની મુસાફરી (user journey) છે. એક યુઝર લેન્ડિંગ પેજથી ફ્રી ઓડિટ પર જાય છે, પછી રિપોર્ટ પર, અને અંતે સર્વિસ ઇન્ક્વાયરી પર જાય છે. સારું routing તેમને આગલા સ્ટેપ તરફ માર્ગદર્શન આપે છે.

સ્પષ્ટતા સાથે બનાવો. અવરોધ (bottleneck) શોધો. તે ચોક્કસ ભાગને સુધારો.

React ની શ્રેષ્ઠ પદ્ધતિઓ (best practices) નિર્ણયો વિશે છે. તમે નક્કી કરો છો કે કમ્પોનન્ટ પાસે શું હોવું જોઈએ. તમે નક્કી કરો છો કે સ્ટેટ (state) ક્યાં રહેશે. તમે નક્કી કરો છો કે રૂટ (route) યુઝરને મદદ કરે છે કે નહીં.

Pagelyze એ મારી કસોટી છે. હું એ ટેસ્ટ નથી કરી રહ્યો કે હું સ્ક્રીન બનાવી શકું છું કે નહીં. હું એ ટેસ્ટ કરી રહ્યો છું કે જેમ જેમ પ્રોડક્ટ વધે તેમ હું તેને ક્લીન રાખી શકું છું કે નહીં.

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