Pagelyze बनवताना मला React बद्दल काय शिकायला मिळाले

Pagelyze बनवल्यामुळे React बद्दलचा माझा दृष्टिकोन बदलला. मी केवळ सिद्धांतांकडे (theory) पाहणे थांबवले आणि प्रॉडक्ट आर्किटेक्चरकडे (product architecture) पाहण्यास सुरुवात केली.

Pagelyze हे एक वेबसाइट ऑडिट टूल आहे. हे कोणतेही छोटे सराव ॲप (practice app) नाही. ते ऑडिट रिपोर्ट्स, स्कोरिंग लॉजिक आणि डॅशबोर्ड्स हाताळते. यामुळेच, मला एका प्रश्नाचे उत्तर द्यावे लागले:

प्रॉडक्ट जसजसे वाढेल, तसा हा कोड स्वच्छ (clean) राहील का?

useState किंवा useEffect सारखे Hooks महत्त्वाचे आहेत. पण ते पूर्ण चित्र नाही. तुम्ही आधुनिक सिंटॅक्स (modern 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) आहे. एक युजर लँडिंग पेजवरून मोफत ऑडिटकडे जातो, त्यानंतर रिपोर्टकडे आणि शेवटी सर्व्हिस इन्क्वायरीकडे जातो. चांगले राउटिंग त्यांना पुढच्या टप्प्याकडे मार्गदर्शन करते.

स्पष्टतेने (clarity) निर्मिती करा. अडथळा (bottleneck) शोधा. तो विशिष्ट भाग सुधारा.

React च्या सर्वोत्तम पद्धती (best practices) म्हणजे निर्णय घेणे. एखादा कंपोनंट कशाचा मालक असेल, हे तुम्ही ठरवता. स्टेट कुठे राहील, हे तुम्ही ठरवता. एखादे राउट युजरला मदत करते की नाही, हे तुम्ही ठरवता.

Pagelyze ही माझी परीक्षा आहे. मी एखादी स्क्रीन बनवू शकतो का, याची मी परीक्षा घेत नाहीये. प्रॉडक्ट जसजसे वाढेल, तसा मी ते स्वच्छ (clean) ठेवू शकतो का, याची मी परीक्षा घेत आहे.

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