Pagelyze-ஐ உருவாக்குவது React பற்றி எனக்குக் கற்றுக்கொடுத்தது

Pagelyze-ஐ உருவாக்கியது React குறித்த எனது பார்வையை மாற்றியது. நான் கோட்பாடுகளை (theory) பார்ப்பதை நிறுத்திவிட்டு, தயாரிப்பு கட்டமைப்பை (product architecture) கவனிக்கத் தொடங்கினேன்.

Pagelyze என்பது ஒரு இணையதள தணிக்கை கருவி (website audit tool). இது ஒரு சிறிய பயிற்சி செயலி (practice app) அல்ல. இது தணிக்கை அறிக்கைகள் (audit reports), மதிப்பெண் கணக்கீட்டு தர்க்கம் (scoring logic) மற்றும் டேஷ்போர்டுகளைக் (dashboards) கையாள்கிறது. இதன் காரணமாக, நான் ஒரு கேள்விக்கு விடை காண வேண்டியிருந்தது:

தயாரிப்பு வளரும்போது இந்த குறியீடு (code) சுத்தமாக இருக்குமா?

useState அல்லது useEffect போன்ற Hooks முக்கியமானவை. ஆனால் அவை மட்டுமே முழுமையான விஷயம் அல்ல. நீங்கள் நவீன தொடரியலை (modern syntax) பயன்படுத்தினாலும், பராமரிக்க கடினமான குழப்பமான குறியீடுகளைக் கொண்டிருக்கலாம். இந்தப் பிரச்சனை பொதுவாகப் பொறுப்புப் பகிர்வு (responsibility) சார்ந்தது.

ஒரு மோசமான அமைப்பில், தரவை ஏற்றுவது (loading data) முதல் முடிவுகளைக் காண்பிப்பது வரை அனைத்தையும் ஒரே கோப்பு (file) கவனிக்கும். நீங்கள் விரிவாக்கம் செய்யும்போது (scale) இது தோல்வியடையும்.

ஒரு சிறந்த வழி, கூறுகளை (components) அவற்றின் நோக்கத்தின் அடிப்படையில் பிரிப்பதாகும்:

• AuditSummary
• LeadCheckPanel
• EvidenceList
• ServiceRecommendationCard
• ReportActions

ஒவ்வொரு பகுதியும் ஒரு வேலையை மட்டுமே செய்கிறது. உங்கள் தரவுத் தர்க்கத்தை (data logic) பாதிக்காமல் ஒரு கார்டு வடிவமைப்பை (card design) உங்களால் மாற்ற முடியும்.

Redux அல்லது Context பயன்படுத்த வேண்டுமா என்று கேட்பதை நிறுத்துங்கள். அந்தத் தரவு நிலைக்கு (state) யார் தேவை என்று கேளுங்கள்.

• Local UI state: டேப்கள் (tabs) மற்றும் மாடல்கள் (modals)
• Form state: URL-கள் மற்றும் சரிபார்ப்பு (validation)
• Server state: அறிக்கைகள் (reports) மற்றும் ஸ்கேன்கள் (scans)
• Global state: பயனர் சுயவிவரம் (user profile) மற்றும் அனுமதிகள் (permissions)

Custom hooks நடத்தையை (behavior) பிரதிபலிக்க வேண்டும். அவை குழப்பமான குறியீட்டை வெறும் மற்றொரு கோப்பிற்கு மாற்றுவதற்காக மட்டும் இருக்கக்கூடாது. ஒரு சிறந்த hook தரவைச் சேகரிக்கும் (fetches data), இதனால் பக்கக் கூறு (page component) திரையை ஒருங்கிணைக்கும் பணியை மட்டுமே செய்யும்.

உங்கள் கோப்புறைகளை (folders) அம்சங்களின் (features) அடிப்படையில் கட்டமைக்கவும்:

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

Routing என்பது வெறும் URL-கள் மட்டுமல்ல. அது பயனரின் பயணமாகும் (user journey). ஒரு பயனர் ஒரு லேண்டிங் பக்கத்திலிருந்து (landing page) இலவச தணிக்கைக்குச் செல்கிறார், பின்னர் ஒரு அறிக்கைக்குச் செல்கிறார், இறுதியாக ஒரு சேவை விசாரணைக்குச் செல்கிறார். சிறந்த routing அவர்களை அடுத்த கட்டத்திற்கு வழிநடத்தும்.

தெளிவுடன் உருவாக்குங்கள். தடைகளை (bottleneck) கண்டறியுங்கள். அந்த குறிப்பிட்ட பகுதியைச் சரிசெய்யுங்கள்.

React சிறந்த நடைமுறைகள் (best practices) என்பது முடிவுகளைப் பற்றியது. ஒரு கூறு எதைக் கையாள வேண்டும் என்பதை நீங்களே தீர்மானிக்கிறீர்கள். தரவு நிலை (state) எங்கு இருக்க வேண்டும் என்பதை நீங்களே தீர்மானிக்கிறீர்கள். ஒரு வழி (route) பயனருக்கு உதவுகிறதா என்பதை நீங்களே தீர்மானிக்கிறீர்கள்.

Pagelyze என்பது எனது சோதனை. என்னால் ஒரு திரையை (screen) உருவாக்க முடியுமா என்று நான் சோதிக்கவில்லை. ஒரு தயாரிப்பு வளரும்போது அதைச் சுத்தமாக வைத்திருக்க முடியுமா என்று நான் சோதிக்கிறேன்.

ஆதாரம்: https://dev.to/prazink/what-building-pagelyze-taught-me-about-react-best-practices-5fhb