Jinsi Kujenga Pagelyze Vilivyonifundisha Kuhusu React

Kujenga Pagelyze kulibadilisha mtazamo wangu kuhusu React. Niliacha kuangalia nadharia na kuanza kuangalia usanifu wa bidhaa (product architecture).

Pagelyze ni zana ya ukaguzi wa tovuti. Si programu ndogo ya mazoezi tu. Inashughulikia ripoti za ukaguzi, mantiki ya alama (scoring logic), na dashibodi. Kwa sababu hiyo, ilibidi nijibu swali moja:

Je, msimbo huu utabaki ukiwa safi kadiri bidhaa inavyokua?

Hooks kama useState au useEffect ni muhimu. Lakini siyo kila kitu. Unaweza kutumia sintaksi ya kisasa na bado ukawa na mchanganyiko wa mambo ya kusimamia. Tatizo mara nyingi huwa ni uwajibikaji (responsibility).

Katika mpangilio mbaya, faili moja inashughulikia kila kitu kuanzia kupakia data hadi kuonyesha matokeo. Hii inafeli unapoendelea kukua (scale).

Njia bora ni kugawanya vipengele (components) kulingana na madhumuni:

  • AuditSummary
  • LeadCheckPanel
  • EvidenceList
  • ServiceRecommendationCard
  • ReportActions

Kila sehemu ina kazi moja. Unaweza kubadilisha muundo wa kadi bila kuharibu mantiki yako ya data.

Acha kuuliza kama unapaswa kutumia Redux au Context. Uliza ni nani anahitaji hali (state).

  • Hali ya UI ya ndani (Local UI state): tabs na modals
  • Hali ya fomu (Form state): URLs na uhakiki (validation)
  • Hali ya seva (Server state): ripoti na ukaguzi (scans)
  • Hali ya jumla (Global state): wasifu wa mtumiaji na ruhusa (permissions)

Custom hooks zinapaswa kuwakilisha tabia (behavior). Hazipaswi tu kuhamisha msimbo uliovurugika kwenda faili nyingine. Hook nzuri huchukua data ili kipengele cha ukurasa (page component) kiweze kuratibu tu skrini.

Panga folda zako kulingana na kipengele (feature):

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

Routing ni zaidi ya URLs tu. Ni safari ya mtumiaji. Mtumiaji anatoka kwenye ukurasa wa kwanza (landing page) kwenda kwenye ukaguzi wa bure, kisha kwenye ripoti, na hatimaye kwenye swali la huduma. Routing nzuri inawaongoza hatua inayofuata.

Jenga kwa uwazi. Tafuta sehemu inayozuia (bottleneck). Rekebisha sehemu hiyo mahususi.

Kanuni bora za React (React best practices) zinahusu maamuzi. Unaamua nini kipengele (component) kinamiliki. Unaamua hali (state) inaishi wapi. Unaamua kama njia (route) inamsaidia mtumiaji.

Pagelyze ni jaribio langu. Sijajaribu kama naweza kujenga skrini. Ninajaribu kama naweza kuweka bidhaa ikiwa safi kadiri inavyokua.

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