frontend-interview-questions

1. چگونه یک معماری میکروفرانت‌اند برای یک برنامه بزرگ React که بین چندین تیم تقسیم شده طراحی می‌کنید؟

پاسخ:

من با تقسیم برنامه بر اساس مرزهای دامنه (مثل احراز هویت، داشبورد، پرداخت) شروع می‌کنم و مالکیت را به هر تیم اختصاص می‌دهم. هر تیم میکروفرانت‌اند (MFE) خود را به‌صورت مستقل می‌سازد و اغلب به‌صورت جداگانه مستقر می‌کند.

رویکردها:

• فدراسیون ماژول (Webpack 5) برای ادغام در زمان اجرا.
• Single-SPA برای مسیریابی و هماهنگی.
• iframeها (به‌ندرت، برای جداسازی سیستم‌های قدیمی).

مثال (فدراسیون ماژول):

// Host (پوسته اپلیکیشن)
import('checkout/CheckoutApp');

// checkout webpack.config.js
new ModuleFederationPlugin({
  name: 'checkout',
  filename: 'remoteEntry.js',
  exposes: {
    './CheckoutApp': './src/CheckoutApp',
  },
});

2. رویکرد شما برای مدیریت وابستگی‌های مشترک در یک اکوسیستم میکروفرانت‌اند React چیست؟

پاسخ:

استفاده از پیکربندی shared فدراسیون ماژول Webpack برای جلوگیری از تکرار:

shared: {
  react: { singleton: true, requiredVersion: '^18.0.0' },
  'react-dom': { singleton: true },
}

ملاحظات کلیدی:

• تثبیت نسخه‌ها در تمام مخازن (از طریق .npmrc یا یک پایه مشترک package.json).
• استفاده از peerDependencies هنگام بسته‌بندی کامپوننت‌ها.
• هم‌راستا کردن رزولوشن وابستگی‌ها در طول CI برای شناسایی زودهنگام تعارض‌ها.

3. چگونه اشتراک وضعیت بین میکروفرانت‌اندها در یک برنامه React را مدیریت می‌کنید؟

پاسخ: یکی از موارد زیر را بر اساس نیازهای جداسازی استفاده کنید:

• باس رویداد جهانی (مثل window.dispatchEvent) برای جفت‌سازی شل.
• کانتینر وضعیت مشترک (مثل zustand، redux یا valtio) که از طریق فدراسیون ماژول ارائه می‌شود:

// هاست فروشگاه ریموت را مصرف می‌کند
import useCartStore from 'cart/store';

• سرویس انتشار/اشتراک سفارشی یا RxJS برای ارتباطات بین‌اپلیکیشنی.

وضعیت مشترک را حداقل نگه دارید تا استقلال MFE حفظ شود.

4. استراتژی شما برای مسیریابی در یک برنامه میکروفرانت‌اند React چیست؟

پاسخ: دو استراتژی رایج:

• Single-SPA یا مسیریاب سطح هاست مالکیت مسیر را به MFEها واگذار می‌کند:

<Route path="/checkout/*" element={<CheckoutApp />} />

• مسیریاب‌های مستقل داخل MFEها که تحت مسیرهای پایه خاص مونت می‌شوند:

<BrowserRouter basename="/checkout">...</BrowserRouter>

از پیشوندهای URL و ساختار مسیر ثابت برای جلوگیری از برخورد استفاده کنید.

5. چگونه ثبات رابط کاربری/تجربه کاربری را در میکروفرانت‌اندهای ساخته‌شده توسط تیم‌های مختلف تضمین می‌کنید؟

پاسخ:

• ساخت و نگهداری یک سیستم طراحی به‌عنوان بسته مشترک (Storybook + npm).
• اعمال قوانین لینتینگ، تم‌سازی، فاصله‌گذاری و پاسخ‌گویی از طریق CI.
• استفاده از CSS-in-JS یا CSS Modules برای جلوگیری از نشت استایل.

اختیاری: اعمال تم‌سازی در زمان اجرا یا توکن‌های طراحی برای یکپارچه‌سازی برند.

6. رویکرد شما برای تست سرتاسری یک برنامه میکروفرانت‌اند React چیست؟

پاسخ:

• هر MFE باید تست‌های واحد + ادغام داشته باشد (Jest، RTL).
• برای E2E، از ابزارهایی مثل Cypress یا Playwright در برابر پوسته یکپارچه استفاده کنید.
• APIها را از طریق MSW یا محیط‌های تست بک‌اند مدل کنید.
• تست‌ها را به‌صورت موازی برای هر MFE در CI اجرا کنید تا زمان ساخت کاهش یابد.

7. چگونه میکروفرانت‌اندها را در یک خط لوله CI/CD برای یک پروژه React مستقر می‌کنید؟

پاسخ:

• هر MFE به‌صورت مستقل، اغلب به CDN یا S3 مستقر می‌شود.
• MFEها را از طریق یک remoteEntry.js (فدراسیون ماژول) ارائه کنید.
• مراحل CI/CD:
  1. لینت، تست، ساخت
  2. آپلود آرتیفکت‌ها (مثل S3)
  3. به‌روزرسانی مانیفست یا پیکربندی هاست

از نسخه‌بندی معنایی و ریموت‌های خاص محیط برای پشتیبانی از تست چندمحیطی استفاده کنید.

8. فرآیند شما برای اشکال‌زدایی یک برنامه میکروفرانت‌اند React وقتی مشکلات چندین ماژول را در بر می‌گیرند چیست؟

پاسخ:

1. بازتولید مشکل در یک محیط توسعه یکپارچه.
2. بررسی کنسول/شبکه مرورگر برای remoteEntry.js گمشده یا نادرست.
3. استفاده از نقشه‌های منبع و لاگ‌های هاست برای قابلیت ردیابی.
4. افزودن تگ‌های نسخه به هر MFE در طول ساخت.
5. استفاده از واردات دینامیک با لاگ‌گیری برای تأیید رفتار بارگذاری.

پرچم‌های ویژگی را برای غیرفعال کردن انتخابی MFEها برای جداسازی سریع‌تر اضافه کنید.

9. چگونه بهینه‌سازی عملکرد را در یک معماری میکروفرانت‌اند مدیریت می‌کنید؟

پاسخ:

• استفاده از تقسیم کد در داخل هر MFE.
• استفاده از tree shaking و کتابخانه‌های مشترک برای کاهش حجم بسته.
• فعال‌سازی HTTP/2 یا پیش‌بارگذاری برای تکه‌های ریموت.
• بارگذاری تنبل MFEها:

const CheckoutApp = React.lazy(() => import('checkout/CheckoutApp'));

• کش کردن remoteEntry.js با استفاده از هدرهای طولانی‌مدت با نسخه‌بندی برای شکستن کش.

10. چگونه یک تیم را برای پذیرش رویکرد میکروفرانت‌اند در یک کدبیس React آماده می‌کنید؟

پاسخ:

1. ارائه مستندات معماری و دیاگرام‌های سطح بالا.
2. راه‌اندازی مخازن قالب با ابزارها (مثل فدراسیون ماژول، تست).
3. برگزاری جلسات آماده‌سازی و راهنمایی‌ها.
4. معرفی یک پورتال توسعه‌دهنده برای کشف ریموت‌ها، ماژول‌های مشترک و استفاده از سیستم طراحی.
5. برنامه‌نویسی جفتی + بررسی‌های کد با تمرکز بر مرزها و APIهای مبتنی بر قرارداد.

APIهای داخلی را ساده و مبتنی بر رابط نگه دارید تا جفت‌سازی تنگ به حداقل برسد.

This site is open source. Improve this page.