What Building Pagelyze Taught Me About React

Pagelyze ನಿರ್ಮಿಸುವುದು React ಬಗ್ಗೆ ನನ್ನ ದೃಷ್ಟಿಕೋನವನ್ನೇ ಬದಲಿಸಿತು. ನಾನು ಕೇವಲ ಸಿದ್ಧಾಂತಗಳನ್ನು (theory) ನೋಡುವುದನ್ನು ನಿಲ್ಲಿಸಿ, ಉತ್ಪನ್ನದ ವಾಸ್ತುಶಿಲ್ಪದ (product architecture) ಕಡೆಗೆ ಗಮನ ಹರಿಸಲು ಪ್ರಾರಂಭಿಸಿದೆ.

Pagelyze ಒಂದು ವೆಬ್‌ಸೈಟ್ ಆಡಿಟ್ ಸಾಧನವಾಗಿದೆ. ಇದು ಕೇವಲ ಒಂದು ಸಣ್ಣ ಅಭ್ಯಾಸದ ಅಪ್ಲಿಕೇಶನ್ (practice app) ಅಲ್ಲ. ಇದು ಆಡಿಟ್ ವರದಿಗಳು, ಸ್ಕೋರಿಂಗ್ ಲಾಜಿಕ್ ಮತ್ತು ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ. ಈ ಕಾರಣದಿಂದಾಗಿ, ನಾನು ಒಂದು ಪ್ರಶ್ನೆಗೆ ಉತ್ತರ ಕಂಡುಕೊಳ್ಳಬೇಕಾಯಿತು:

ಉತ್ಪನ್ನ ಬೆಳೆದಂತೆ ಈ ಕೋಡ್ ಸ್ವಚ್ಛವಾಗಿ (clean) ಉಳಿಯುತ್ತದೆಯೇ?

useState ಅಥವಾ useEffect ನಂತಹ Hooks ಮುಖ್ಯವಾಗಿವೆ. ಆದರೆ ಅವುಗಳಷ್ಟೇ ಎಲ್ಲವೂ ಅಲ್ಲ. ನೀವು ಆಧುನಿಕ ಸಿಂಟ್ಯಾಕ್ಸ್ (modern syntax) ಬಳಸಿದರೂ ಸಹ, ನಿರ್ವಹಿಸಲು ಕಷ್ಟವಾಗುವಂತಹ ಗೊಂದಲಮಯ ಕೋಡ್ ಇರಬಹುದು. ಸಮಸ್ಯೆ ಸಾಮಾನ್ಯವಾಗಿ ಜವಾಬ್ದಾರಿಯಲ್ಲಿದೆ (responsibility).

ಒಂದು ಕೆಟ್ಟ ವಿನ್ಯಾಸದಲ್ಲಿ (bad setup), ಡೇಟಾವನ್ನು ಲೋಡ್ ಮಾಡುವುದರಿಂದ ಹಿಡಿದು ಫಲಿತಾಂಶಗಳನ್ನು ತೋರಿಸುವವರೆಗೆ ಎಲ್ಲವನ್ನೂ ಒಂದೇ ಫೈಲ್ ನಿರ್ವಹಿಸುತ್ತದೆ. ನೀವು ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ವಿಸ್ತರಿಸಿದಾಗ (scale) ಇದು ವಿಫಲವಾಗುತ್ತದೆ.

ಉತ್ತಮ ಮಾರ್ಗವೆಂದರೆ ಉದ್ದೇಶಕ್ಕೆ ಅನುಗುಣವಾಗಿ ಘಟಕಗಳನ್ನು (components) ವಿಂಗಡಿಸುವುದು:

  • AuditSummary
  • LeadCheckPanel
  • EvidenceList
  • ServiceRecommendationCard
  • ReportActions

ಪ್ರತಿಯೊಂದು ಭಾಗಕ್ಕೂ ಒಂದು ಕೆಲಸವಿರುತ್ತದೆ. ನಿಮ್ಮ ಡೇಟಾ ಲಾಜಿಕ್ ಅನ್ನು ಹಾಳು ಮಾಡದೆಯೇ ನೀವು ಕಾರ್ಡ್ ವಿನ್ಯಾಸವನ್ನು ಬದಲಾಯಿಸಬಹುದು.

Redux ಅಥವಾ Context ಬಳಸಬೇಕೇ ಎಂದು ಕೇಳುವುದನ್ನು ನಿಲ್ಲಿಸಿ. ಬದಲಾಗಿ, ಸ್ಟೇಟ್ (state) ಯಾರಿಗೆ ಬೇಕು ಎಂದು ಕೇಳಿ.

  • Local UI state: ಟ್ಯಾಬ್‌ಗಳು ಮತ್ತು ಮಾಡಲ್‌ಗಳು (tabs and modals)
  • Form state: URLಗಳು ಮತ್ತು ವ್ಯಾಲಿಡೇಶನ್ (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) ಎಂದರೆ ಕೇವಲ URLಗಳಲ್ಲ. ಅದು ಬಳಕೆದಾರರ ಪ್ರಯಾಣ (user journey). ಬಳಕೆದಾರರು ಲ್ಯಾಂಡಿಂಗ್ ಪೇಜ್‌ನಿಂದ ಉಚಿತ ಆಡಿಟ್‌ಗೆ, ನಂತರ ವರದಿಗೆ ಮತ್ತು ಅಂತಿಮವಾಗಿ ಸೇವಾ ವಿಚಾರಣೆಗೆ (service inquiry) ಹೋಗುತ್ತಾರೆ. ಉತ್ತಮ ರೂಟಿಂಗ್ ಅವರು ಮುಂದಿನ ಹಂತಕ್ಕೆ ಹೋಗಲು ಮಾರ್ಗದರ್ಶನ ನೀಡುತ್ತದೆ.

ಸ್ಪಷ್ಟತೆಯೊಂದಿಗೆ ನಿರ್ಮಿಸಿ. ಅಡಚಣೆಯನ್ನು (bottleneck) ಪತ್ತೆಹಚ್ಚಿ. ಆ ನಿರ್ದಿಷ್ಟ ಭಾಗವನ್ನು ಸರಿಪಡಿಸಿ.

React best practices ಎಂದರೆ ನಿರ್ಧಾರಗಳ ಬಗ್ಗೆ ಇರುವುದು. ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಏನನ್ನು ಹೊಂದಿರಬೇಕು ಎಂಬುದನ್ನು ನೀವೇ ನಿರ್ಧರಿಸುತ್ತೀರಿ. ಸ್ಟೇಟ್ ಎಲ್ಲಿ ಇರಬೇಕು ಎಂಬುದನ್ನು ನೀವೇ ನಿರ್ಧರಿಸುತ್ತೀರಿ. ಒಂದು ರೂಟ್ ಬಳಕೆದಾರರಿಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆಯೇ ಎಂಬುದನ್ನು ನೀವೇ ನಿರ್ಧರಿಸುತ್ತೀರಿ.

Pagelyze ನನ್ನ ಪರೀಕ್ಷೆಯಾಗಿದೆ. ನಾನು ಕೇವಲ ಒಂದು ಸ್ಕ್ರೀನ್ ನಿರ್ಮಿಸಬಲ್ಲೆನೇ ಎಂದು ಪರೀಕ್ಷಿಸುತ್ತಿಲ್ಲ. ಬದಲಾಗಿ, ಉತ್ಪನ್ನ ಬೆಳೆದಂತೆ ಅದನ್ನು ಸ್ವಚ್ಛವಾಗಿಡಲು ನನಗೆ ಸಾಧ್ಯವೇ ಎಂದು ಪರೀಕ್ಷಿಸುತ್ತಿದ್ದೇನೆ.

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