Pagelyze بنانے سے میں نے React کے بارے میں کیا سیکھا

Pagelyze بنانے سے React کے بارے میں میرا نظریہ بدل گیا۔ میں نے صرف تھیوری دیکھنا چھوڑ دیا اور پروڈکٹ آرکیٹیکچر (product architecture) پر توجہ دینا شروع کر دی۔

Pagelyze ایک ویب سائٹ آڈٹ ٹول ہے۔ یہ کوئی چھوٹا سا پریکٹس ایپ نہیں ہے۔ یہ آڈٹ رپورٹس، اسکورنگ لاجک، اور ڈیش بورڈز کو سنبھالتا ہے۔ اس وجہ سے، مجھے ایک سوال کا جواب دینا پڑا:

کیا پروڈکٹ کے بڑھنے کے ساتھ ساتھ یہ کوڈ صاف ستھرا (clean) رہے گا؟

useState یا useEffect جیسے Hooks اہم ہیں۔ لیکن یہ پوری کہانی نہیں ہیں۔ آپ جدید سنٹیکس (syntax) استعمال کر سکتے ہیں لیکن پھر بھی آپ کو ایک الجھے ہوئے کوڈ کو برقرار رکھنا پڑ سکتا ہے۔ مسئلہ عام طور پر ذمہ داری (responsibility) کا ہوتا ہے۔

ایک ناقص سیٹ اپ میں، ایک ہی فائل ڈیٹا لوڈ کرنے سے لے کر نتائج دکھانے تک سب کچھ سنبھالتی ہے۔ جیسے جیسے آپ اسکیل (scale) کرتے ہیں، یہ طریقہ ناکام ہو جاتا ہے۔

ایک بہتر طریقہ یہ ہے کہ کمپوننٹس (components) کو ان کے مقصد کے لحاظ سے تقسیم کیا جائے:

  • AuditSummary
  • LeadCheckPanel
  • EvidenceList
  • ServiceRecommendationCard
  • ReportActions

ہر حصے کا ایک ہی کام ہے۔ آپ اپنے ڈیٹا لاجک کو خراب کیے بغیر کارڈ کا ڈیزائن تبدیل کر سکتے ہیں۔

یہ پوچھنا چھوڑ دیں کہ کیا آپ کو Redux یا Context استعمال کرنا چاہیے یا نہیں۔ بلکہ یہ پوچھیں کہ اسٹیٹ (state) کی ضرورت کسے ہے۔

  • Local UI state: ٹیبز (tabs) اور ماڈلز (modals)
  • Form state: URLs اور ویلیڈیشن (validation)
  • Server state: رپورٹس اور اسکینز
  • Global state: یوزر پروفائل اور پرمیشنز (permissions)

Custom hooks کو طرزِ عمل (behavior) کی نمائندگی کرنی چاہیے۔ انہیں صرف الجھے ہوئے کوڈ کو دوسری فائل میں منتقل نہیں کرنا چاہیے۔ ایک اچھا ہک (hook) ڈیٹا فیچ (fetch) کرتا ہے تاکہ پیج کمپوننٹ صرف اسکرین کو کوآرڈینیٹ (coordinate) کرے۔

اپنے فولڈرز کو فیچر (feature) کے لحاظ سے ترتیب دیں:

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

روٹنگ (Routing) محض URLs سے بڑھ کر ہے۔ یہ صارف کا سفر (user journey) ہے۔ ایک صارف لینڈنگ پیج سے فری آڈٹ پر جاتا ہے، پھر رپورٹ پر، اور آخر کار سروس کی انکوائری تک پہنچتا ہے۔ اچھی روٹنگ انہیں اگلے مرحلے کی طرف رہنمائی کرتی ہے۔

وضاحت کے ساتھ تعمیر کریں۔ رکاوٹ (bottleneck) تلاش کریں۔ اس مخصوص حصے کو ٹھیک کریں۔

React کی بہترین مشقیں (best practices) فیصلوں کے بارے میں ہیں۔ آپ فیصلہ کرتے ہیں کہ ایک کمپوننٹ کا اختیار کیا ہے۔ آپ فیصلہ کرتے ہیں کہ اسٹیٹ کہاں رہے گی۔ آپ فیصلہ کرتے ہیں کہ آیا کوئی روٹ صارف کی مدد کرتا ہے یا نہیں۔

Pagelyze میرا امتحان ہے۔ میں یہ نہیں آزما رہا کہ کیا میں ایک اسکرین بنا سکتا ہوں۔ میں یہ آزما رہا ہوں کہ کیا میں پروڈکٹ کے بڑھنے کے ساتھ اسے صاف ستھرا رکھ سکتا ہوں۔

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