What Building Pagelyze Taught Me About React
ساخت Pagelyze دیدگاه من را نسبت به React تغییر داد. من از نگاه کردن به تئوری دست کشیدم و شروع کردم به نگاه کردن به معماری محصول.
Pagelyze یک ابزار ممیزی (audit) وبسایت است. این یک اپلیکیشن تمرینی کوچک نیست. این ابزار گزارشهای ممیزی، منطق امتیازدهی و داشبوردها را مدیریت میکند. به همین دلیل، باید به یک سوال پاسخ میدادم:
آیا این کد با رشد محصول، تمیز باقی خواهد ماند؟
هوکهایی مثل useState یا useEffect مهم هستند، اما تمام ماجرا نیستند. شما میتوانید از سینتکس مدرن استفاده کنید اما همچنان با کدی شلوغ و نامنظم برای نگهداری روبرو باشید. مشکل معمولاً بر سر «مسئولیتپذیری» است.
در یک ساختار بد، یک فایل همه چیز را از بارگذاری دادهها گرفته تا نمایش نتایج مدیریت میکند. این روش با مقیاسپذیر شدن پروژه شکست میخورد.
راه بهتر این است که کامپوننتها را بر اساس هدفشان تقسیم کنید:
- AuditSummary
- LeadCheckPanel
- EvidenceList
- ServiceRecommendationCard
- ReportActions
هر بخش یک وظیفه مشخص دارد. شما میتوانید طراحی یک کارت را بدون از کار انداختن منطق دادههایتان تغییر دهید.
از پرسیدن این سوال که «آیا باید از Redux استفاده کنم یا Context؟» دست بردارید. بپرسید «چه کسی به این state نیاز دارد؟»
- وضعیت UI محلی: تبها و مودالها
- وضعیت فرم: URLها و اعتبارسنجی
- وضعیت سرور: گزارشها و اسکنها
- وضعیت سراسری: پروفایل کاربر و دسترسیها
هوکهای سفارشی (Custom hooks) باید نشاندهنده رفتار باشند. آنها نباید صرفاً کد نامنظم را به فایل دیگری منتقل کنند. یک هوک خوب دادهها را واکشی (fetch) میکند تا کامپوننت صفحه فقط وظیفه هماهنگی نمایش در صفحه را داشته باشد.
پوشههای خود را بر اساس ویژگی (feature) ساختاردهی کنید:
- features/audit-report/
- features/lead-rescue/
- features/dashboard/
مسیریابی (Routing) چیزی فراتر از صرفاً URLهاست. مسیریابی یعنی سفر کاربر. کاربر از یک صفحه فرود (landing page) به یک ممیزی رایگان، سپس به یک گزارش و در نهایت به استعلام خدمات میرود. مسیریابی خوب، کاربر را به مرحله بعد هدایت میکند.
با وضوح بسازید. گلوگاه را پیدا کنید. همان بخش خاص را اصلاح کنید.
بهترین روشهای React در مورد تصمیمگیریها هستند. شما تصمیم میگیرید که یک کامپوننت مالک چه چیزی باشد. شما تصمیم میگیرید که state کجا قرار بگیرد. شما تصمیم میگیرید که آیا یک مسیر به کاربر کمک میکند یا خیر.
Pagelyze آزمون من است. من در حال تست کردن این نیستم که آیا میتوانم یک صفحه بسازم یا خیر؛ بلکه در حال تست این هستم که آیا میتوانم با رشد محصول، آن را تمیز نگه دارم یا خیر.
Source: https://dev.to/prazink/what-building-pagelyze-taught-me-about-react-best-practices-5fhb