فرنٹ اینڈ ڈویلپرانٹرویو کے جوابات

میں نے [X years] سے پروڈکشن React ایپلیکیشنز بنائے ہیں، جن میں functional components، hooks (useState, useEffect, useContext, useMemo, useCallback, custom hooks)، اور state management پیٹرنز (Context API, Redux Toolkit, Zustand) استعمال کیے ہیں۔ میں React کے rendering ماڈل کو گہرائی سے سمجھتا ہوں — میں اس بات کا تجزیہ کر سکتا ہوں کہ re-renders کب ہوتے ہیں اور غیر ضروری re-renders کو کیسے روکا جائے۔ میں نے Next.js کے ساتھ بھی کام کیا ہے برائے server-side rendering اور static generation، جو data fetching، hydration، اور deployment کے حوالے سے خاصی پیچیدگی بڑھاتا ہے۔

پرفارمنس کی شروعات پیمائش سے ہوتی ہے: Lighthouse اسکورز، Web Vitals (LCP, FID/INP, CLS) اور یوزر سینٹرک میٹرکس۔ میں bundle size کو optimize کرتا ہوں (code splitting, tree shaking, dynamic imports)، تصویر کی delivery (WebP، lazy loading، responsive images via srcset)، اور rendering کارکردگی (memoization، virtualization برائے طویل لسٹس) بہتر کرتا ہوں۔ میں third‑party scripts کا آڈٹ کر کے انہیں کم کرتا ہوں۔ میں CI میں performance budgets مقرر کرتا ہوں تاکہ regressions ڈپلائے ہونے سے پہلے پکڑے جائیں۔ پرفارمنس ایک فیچر ہے، اور اسے برقرار رکھنے کے لیے مسلسل نگرانی ضروری ہے۔

میں mobile-first ڈیزائن اپروچ اپناتا ہوں اور CSS Grid، Flexbox، اور responsive یونٹس (rem, %, vw/vh, clamp()) کا امتزاج استعمال کرتا ہوں۔ میں اصلی ڈیوائسز اور Chrome DevTools کے device emulation میں ٹیسٹ کرتا ہوں۔ cross-browser compatibility کے لیے میں Can I Use سے فیچر سپورٹ چیک کرتا ہوں، اور Chrome، Firefox، Safari، اور Edge میں ٹیسٹ کرتا ہوں۔ میں vendor prefixes کے لیے PostCSS اور autoprefixer استعمال کرتا ہوں۔ IE11 سپورٹ کے فیصلے کو میں کاروباری فیصلہ سمجھتا ہوں جن کے حقیقی لاگت کے مضمرات ہوتے ہیں — میں trade-offs واضح طور پر پیش کرتا ہوں بجائے اس کے کہ صرف ہاں یا نہ کہوں۔

میں components کو reusability اور single responsibility کے اصول کے مطابق ڈیزائن کرتا ہوں۔ میں presentational components (سادہ، کوئی side effects نہیں) کو container components (data fetching، state management) سے الگ رکھتا ہوں۔ میں design system یا component library کو بنیاد کے طور پر استعمال کرتا ہوں اور اس کے اوپر application-specific components بناتا ہوں۔ میں component API کو consumer کے نقطۂ نظر سے سوچتا ہوں: واضح، minimal، اور اچھی طرح typed props۔ میں Storybook کے ذریعے components کو document کرتا ہوں تاکہ designers اور دوسرے engineers انہیں دریافت اور سمجھ سکیں۔ اچھا component design duplication کم کرتا ہے اور کوڈ بیس کے scale ہونے پر اسے maintainable بناتا ہے۔

میں accessibility کو شروع سے شامل کرتا ہوں: semantic HTML کو بنیاد کے طور پر استعمال کرنا (nav, main, section, button، صرف divs نہیں)، جہاں HTML semantics کافی نہ ہوں وہاں ARIA attributes، visible focus states، مناسب colour contrast (کم از کم WCAG AA)، تمام interactive عناصر کے لیے keyboard navigability، اور screen reader ٹیسٹنگ (VoiceOver, NVDA)۔ میں CI میں خودکار accessibility چیکس کے لیے axe-core یا Lighthouse استعمال کرتا ہوں۔ میں accessibility کو ایک quality dimension سمجھتا ہوں، نہ کہ صرف compliance کا چیک باکس — قابل رسائی انٹرفیسز عموماً سب کے لیے بہتر ہوتے ہیں۔

میں نے CSS Modules، BEM، CSS-in-JS (styled-components, Emotion)، اور utility-first frameworks (Tailwind CSS) کے ساتھ کام کیا ہے۔ میری پسند پروجیکٹ پر منحصر ہے: Tailwind design-system-driven مصنوعات کے لیے، CSS Modules بڑے ٹیموں میں component isolation کے لیے، اور CSS-in-JS انتہائی dynamic styling کے لیے۔ میں CSS cascade، specificity، اور stacking context کو گہرائی سے سمجھتا ہوں — زیادہ تر CSS bugs ان کی غلط سمجھ سے پیدا ہوتے ہیں۔ میں theming کے لیے custom properties (CSS variables) اور consistency برقرار رکھنے کے لیے design tokens استعمال کرتا ہوں۔

میں designers کے ساتھ جلد شامل ہوتا ہوں — اس سے پہلے کہ ڈیزائنز حتمی ہوں۔ میں Figma ڈیزائنز کا جائزہ لیتا ہوں اور implementation کے مسائل (animation complexity، responsive behaviour کے gaps، accessibility مسائل) ڈیزائن کے مرحلے میں نشان زد کرتا ہوں، نہ کہ development کے دوران۔ میں designer کی زبان بولتا ہوں: visual design concepts، type scales، اور layout systems پر بات کر سکتا ہوں۔ میں ڈیزائن کو عین مطابق نافذ کرتا ہوں: spacing، typography، اور colour پر pixel-level توجہ معنی رکھتی ہے۔ جب مجبوراً ڈیزائن سے انحراف کرنا پڑے تو میں واضح طور پر communicate کرتا ہوں اور alignment کو یقینی بناتا ہوں۔

میں frontend کوڈ کی testing میں user-visible behaviour کو ٹیسٹ کرتا ہوں، نہ کہ implementation details۔ میں component testing کے لیے React Testing Library استعمال کرتا ہوں — user interactions کو simulate کر کے output پر assertions کرتا ہوں۔ میں کلیدی یوزر فلو (login, checkout, form submission) کے لیے integration tests لکھتا ہوں اور Cypress یا Playwright استعمال کرتا ہوں۔ utility functions کے لیے میں Jest کے ساتھ unit tests لکھتا ہوں۔ میں component اور integration tests میں external dependencies (API calls) کو MSW (Mock Service Worker) کے ذریعے mock کرتا ہوں۔ میں ایسی implementation-detail tests سے گریز کرتا ہوں جو tests کو brittle بنا دیں — tests کو confidence دینا چاہیے، maintenance burden پیدا نہیں کرنا چاہیے۔