مطور فرونت إند

إيه اللي بتختبره المقابلة دي

• React
• State management
• Accessibility
• Performance
• CSS
• Testing
• Javascript

اسئلة انترفيو مطور فرونت إند

1. سؤال 1نقطة التركيز: React

   اشرح لي كيف ستقوم بهيكلة تطبيق React كبير يحتوي على عشرات الصفحات وحالة مشتركة (shared state). ما هي الأنماط وهياكل المجلدات التي تستخدمها؟

   إيه اللي بتغطيه الإجابة القوية

   الإجابة القوية تغطي هيكلة المجلدات القائمة على الميزات (feature-based folder structure)، وتجميع الملفات ذات الصلة (co-location)، والفصل الواضح بين الاهتمامات (UI مقابل المنطق)، والوعي بـ barrel exports وتأثيرات tree-shaking، وتقسيم الكود بناءً على المسارات (route-based code splitting). كن مستعدًا لمناقشة: كيف تقرر ما هي الحالة التي يجب أن تكون في مخزن عام (global store) مقابل حالة المكون المحلي (local component state)؟ كيف تتعامل مع تقسيم الكود (code splitting) والتحميل الكسول (lazy loading)؟ ما هي اصطلاحات التسمية التي تتبعها للمكونات (components) والـ hooks؟

2. سؤال 2نقطة التركيز: State management

   صف تحديًا معقدًا لإدارة الحالة (state management) واجهته في تطبيق واجهة أمامية (frontend). كيف قمت بحله؟

   إيه اللي بتغطيه الإجابة القوية

   الإجابة القوية تغطي تحديد المشكلة بوضوح، وتقييم الخيارات (Context, Redux, Zustand, Jotai)، وفهم متى تكون الحالة العامة (global state) ضرورية حقًا، واعتبارات الأداء (إعادة العرض غير الضرورية - unnecessary re-renders)، وتطبيع حالة الخادم (normalization of server state). كن مستعدًا لمناقشة: لماذا اخترت هذا النهج المحدد لإدارة الحالة بدلاً من البدائل؟ كيف تعاملت مع الحالة المشتقة أو المحسوبة (derived or computed state)؟

3. سؤال 3نقطة التركيز: Accessibility

   كيف تتعامل مع جعل تطبيق الويب متاحًا للمستخدمين ذوي الإعاقة؟ أعطني تقنيات محددة قمت بتطبيقها.

   إيه اللي بتغطيه الإجابة القوية

   الإجابة القوية تغطي HTML الدلالي (semantic HTML)، وأدوار وتسميات ARIA (تستخدم بشكل صحيح، وليست مفرطة الاستخدام)، والتنقل بلوحة المفاتيح، وإدارة التركيز (focus management) في تطبيقات الصفحة الواحدة (SPAs)، واختبار قارئ الشاشة (VoiceOver, NVDA)، وتباين الألوان (color contrast)، والوعي بمعايير WCAG 2.1، والأدوات الآلية (axe-core, Lighthouse). كن مستعدًا لمناقشة: كيف تختبر مشكلات إمكانية الوصول أثناء التطوير؟ ما هي أصعب مشكلة إمكانية وصول اضطررت لحلها؟

4. سؤال 4نقطة التركيز: Performance

   حدثني عن وقت اضطررت فيه إلى تحسين أداء تطبيق واجهة أمامية (frontend) بشكل كبير. ما هي المقاييس التي ركزت عليها، وما هي التغييرات التي أجريتها؟

   إيه اللي بتغطيه الإجابة القوية

   الإجابة القوية تغطي Core Web Vitals (LCP, FID/INP, CLS)، واستخدام Lighthouse/WebPageTest، وتحليل الحزمة (bundle analysis)، وتحسين الصور، ومسار العرض الحرج (critical rendering path)، ومحلل أداء React (React profiler) لتحليل إعادة العرض (re-render analysis)، ومقاييس ملموسة قبل/بعد. كن مستعدًا لمناقشة: كيف قمت بقياس تأثير تغييراتك؟ ما هي المقايضات التي أجريتها بين الأداء وتجربة المطور؟

5. سؤال 5نقطة التركيز: CSS

   كيف ستقوم بتطبيق نظام تصميم (design system) مشترك عبر تطبيقات واجهة أمامية متعددة؟ ما هي القرارات الرئيسية التي ستحتاج إلى اتخاذها؟

   إيه اللي بتغطيه الإجابة القوية

   الإجابة القوية تغطي بنية مكتبة المكونات (component library architecture)، والمقايضات بين CSS-in-JS مقابل utility-first CSS مقابل CSS Modules، ورموز التصميم (design tokens)، وتوزيع monorepo أو حزمة npm، و Storybook للتوثيق، واختبار الانحدار البصري (visual regression testing)، و semver للتغييرات الكبيرة (breaking changes). كن مستعدًا لمناقشة: كيف تتعامل مع التخصيص (theming) والوضع الداكن (dark mode)؟ كيف تقوم بإصدار وتوزيع نظام التصميم؟

6. سؤال 6نقطة التركيز: React

   اشرح كيف تتعامل مع جلب البيانات (data fetching) في تطبيق React حديث. ما هي الأنماط التي تتبعها لحالات التحميل (loading states)، ومعالجة الأخطاء (error handling)، والتخزين المؤقت (caching)؟

   إيه اللي بتغطيه الإجابة القوية

   الإجابة القوية تغطي React Query/SWR أو مكتبة جلب بيانات مماثلة، ونمط stale-while-revalidate، وآلات حالة التحميل/الخطأ/النجاح (loading/error/success state machines)، وواجهة المستخدم المتفائلة مع التراجع (optimistic UI with rollback)، وقرارات SSR/SSG بناءً على احتياجات حداثة البيانات، وتجنب الشلالات (waterfalls). كن مستعدًا لمناقشة: كيف تتعامل مع التحديثات المتفائلة (optimistic updates) لعمليات التعديل (mutations)؟ متى تستخدم العرض من جانب الخادم (server-side rendering) مقابل جلب البيانات من جانب العميل (client-side fetching)؟

7. سؤال 7نقطة التركيز: Testing

   كيف تتعامل مع كتابة الاختبارات لمكونات الواجهة الأمامية (frontend components)؟ ما هي استراتيجية الاختبار الخاصة بك وأين تضع الحد لما يجب اختباره؟

   إيه اللي بتغطيه الإجابة القوية

   الإجابة القوية تغطي مكتبة الاختبار (React Testing Library)، واختبار السلوك وليس التنفيذ، ومحاكاة استدعاءات API (MSW)، وهرم الاختبار للواجهة الأمامية (العديد من اختبارات التكامل، القليل من اختبارات النهاية إلى النهاية)، واستخدام اختبار اللقطات (snapshot testing) باعتدال، والمحددات الموجهة للمستخدم (role, label). كن مستعدًا لمناقشة: كيف تقرر بين اختبارات الوحدة (unit tests)، واختبارات التكامل (integration tests)، واختبارات النهاية إلى النهاية (end-to-end tests) لميزة معينة؟ كيف تختبر المكونات التي تعتمد على واجهات برمجة تطبيقات خارجية (external APIs)؟

8. سؤال 8نقطة التركيز: React

   صف كيف ستبني نموذجًا معقدًا (complex form) بحقول ديناميكية، وتحقق شرطي (conditional validation)، وتنقل متعدد الخطوات. ما هي الأدوات والأنماط التي ستستخدمها؟

   إيه اللي بتغطيه الإجابة القوية

   الإجابة القوية تغطي اختيار مكتبة النماذج (React Hook Form, Formik)، والتحقق القائم على المخطط (schema-based validation) (Zod, Yup)، والمدخلات المتحكم بها مقابل غير المتحكم بها (controlled vs uncontrolled inputs)، والتحقق المؤجل (debounced validation)، واستمرارية المسودة (draft persistence) (localStorage, URL state)، وتجربة مستخدم واضحة للمراحل المتعددة (مؤشر التقدم، التنقل للخلف). كن مستعدًا لمناقشة: كيف تتعامل مع استمرارية حالة النموذج إذا انتقل المستخدم بعيدًا عن طريق الخطأ؟ كيف ستقوم بتطبيق التحقق من الحقول في الوقت الفعلي دون تدهور تجربة المستخدم (UX)؟

9. سؤال 9نقطة التركيز: Javascript

   كيف تتعامل مع المصادقة (authentication) والمسارات المحمية (protected routes) في تطبيق الصفحة الواحدة (single-page application)؟ اشرح لي التدفق من تسجيل الدخول إلى الوصول إلى مورد محمي.

   إيه اللي بتغطيه الإجابة القوية

   الإجابة القوية تغطي المقايضات بين JWT مقابل المصادقة القائمة على الجلسة (session-based auth)، وملفات تعريف الارتباط httpOnly مقابل localStorage، والتحديث الصامت باستخدام رموز التحديث (refresh tokens)، وحراس المسار (route guards)، وإعادة التوجيه إلى صفحة تسجيل الدخول مع عنوان URL للعودة، والوعي بـ XSS و CSRF، ومعالجة انتهاء صلاحية الرمز المميز (token expiration). كن مستعدًا لمناقشة: كيف تتعامل مع تحديث الرمز المميز دون تعطيل تجربة المستخدم؟ ما هي الاعتبارات الأمنية الخاصة بتخزين الرموز المميزة في المتصفح؟

10. سؤال 10نقطة التركيز: CSS

    حدثني عن وقت اضطررت فيه إلى تصحيح مشكلة تخطيط CSS صعبة بشكل خاص. ما هي المشكلة، وكيف قمت بحلها؟

    إيه اللي بتغطيه الإجابة القوية

    الإجابة القوية تغطي التصحيح المنهجي (DevTools, computed styles, box model inspection)، وفهم خوارزميات تخطيط flexbox/grid، ومشكلات سياق التراص (stacking context) و z-index، والغرائب الخاصة بالمتصفح، ونقاط توقف التصميم المتجاوب (responsive design breakpoints)، وإدارة خصوصية CSS (CSS specificity management). كن مستعدًا لمناقشة: ما هي الأدوات التي تستخدمها لتصحيح مشكلات CSS؟ كيف تضمن عرضًا متسقًا عبر المتصفحات؟

11. سؤال 11نقطة التركيز: Javascript

    كيف ستقوم بتطبيق التدويل (internationalization - i18n) في تطبيق React يحتاج إلى دعم كل من اللغات من اليسار إلى اليمين (LTR) ومن اليمين إلى اليسار (RTL)؟

    إيه اللي بتغطيه الإجابة القوية

    الإجابة القوية تغطي اختيار مكتبة i18n (react-intl, next-intl, i18next)، وتنسيق رسائل ICU للجمع (plurals)، وخصائص CSS المنطقية لـ RTL (inline-start/end)، ومعالجة سمة dir، وتنسيق التاريخ/الأرقام المدرك للموقع (locale-aware date/number formatting) (Intl API)، وسير عمل الترجمة (استخراج، تسليم للمترجم). كن مستعدًا لمناقشة: كيف تتعامل مع الجمع وتنسيق التاريخ/الأرقام عبر اللغات المختلفة؟ ما هو نهجك لإدارة ملفات الترجمة على نطاق واسع؟

12. سؤال 12نقطة التركيز: Performance

    اشرح كيف ستقوم بتحسين تطبيق React الذي يعاني من تقطيع ملحوظ في الأداء (jank) عند عرض قوائم كبيرة من البيانات.

    إيه اللي بتغطيه الإجابة القوية

    الإجابة القوية تغطي العرض الافتراضي للقوائم (virtualization) (react-window, react-virtuoso)، و React.memo و useMemo للحسابات المكلفة، واستخدام خاصية key، وتجنب إنشاء الكائنات/الدوال المضمنة في العرض (render)، ومحلل أداء React DevTools، و requestAnimationFrame للتحديثات المرتبطة بالتمرير. كن مستعدًا لمناقشة: متى تستخدم العرض الافتراضي للقوائم مقابل الترقيم (pagination)؟ كيف تقوم بتحليل إعادة عرض مكونات React؟

13. سؤال 13نقطة التركيز: React

    كيف تتعامل مع حدود الأخطاء (error boundaries) والتدهور السلس (graceful degradation) في تطبيق React قيد الإنتاج؟

    إيه اللي بتغطيه الإجابة القوية

    الإجابة القوية تغطي مكونات React Error Boundary، والحدود الدقيقة حول الميزات المستقلة (وليس غلافًا واحدًا عملاقًا)، وتصميم واجهة المستخدم الاحتياطية (fallback UI)، والإبلاغ عن الأخطاء (Sentry, LogRocket)، وآليات الاسترداد (أزرار إعادة المحاولة)، والتمييز بين الأخطاء القابلة للاسترداد والأخطاء الفادحة. كن مستعدًا لمناقشة: كيف تقرر دقة حدود الأخطاء الخاصة بك؟ كيف تبلغ عن أخطاء الواجهة الأمامية في الإنتاج؟

14. سؤال 14نقطة التركيز: CSS

    صف نهجك في التصميم المتجاوب (responsive design). كيف تضمن أن لوحة معلومات معقدة (dashboard) تعمل بشكل جيد على كل من أجهزة سطح المكتب والجوال؟

    إيه اللي بتغطيه الإجابة القوية

    الإجابة القوية تغطي التفكير في نهج 'الجوال أولاً' مقابل 'سطح المكتب أولاً'، واستعلامات الحاوية (container queries) مقابل استعلامات الوسائط (media queries)، والطباعة السائلة (fluid typography) (clamp)، والتعاون في التصميم (ليس مجرد تصغير سطح المكتب)، وأحجام أهداف اللمس (touch target sizes)، واستراتيجيات جداول البيانات المتجاوبة، ومنطق اختيار نقاط التوقف (breakpoint selection). كن مستعدًا لمناقشة: كيف تقرر ما الذي يجب عرضه أو إخفاؤه على الشاشات الأصغر؟ ما هو نهجك في الخطوط (typography) والمسافات المتجاوبة؟

15. سؤال 15نقطة التركيز: State management

    لقد انضممت للتو إلى فريق جديد وقاعدة كود الواجهة الأمامية (frontend codebase) بها ديون تقنية كبيرة. كيف ستقوم بتقييم الوضع واقتراح خطة لمعالجته؟

    إيه اللي بتغطيه الإجابة القوية

    الإجابة القوية تغطي نهج التدقيق المنهجي (حجم الحزمة، تغطية الاختبار، حداثة التبعيات، تغطية الأنواع)، وتحديد الأولويات بناءً على التأثير (ما الذي يعيق السرعة أكثر)، وإعادة الهيكلة التدريجية جنبًا إلى جنب مع عمل الميزات، والأهداف القابلة للقياس، والقدرة على تأطير الديون التقنية بمصطلحات الأعمال. كن مستعدًا لمناقشة: كيف تحدد أولويات الديون التي يجب معالجتها أولاً؟ كيف تحصل على موافقة أصحاب المصلحة الذين يرغبون في ميزات جديدة؟

أسئلة بتتسأل في أي انترفيو تقريبًا

• اتكلم عن نفسك
• كام الراتب المتوقع؟
• إيه هي نقاط قوتك وضعفك؟
• ليه عايز تشتغل معانا؟