معماری فرانت‌اند، Micro-Frontend و Monorepo: راهنمای سطح ارشد

کار ارشد فرانت‌اند فقط ساخت یک صفحه دیگر نیست؛ انتخاب این است که تیم‌ها، کدبیس‌ها و مرزهای runtime چطور با هم مقیاس می‌گیرند. بعد از پنج سال ساخت سامانه‌های production با React و Next.js—پلتفرم‌های بیمه، مینی‌اپ، پنل‌های ادمین RTL و PWA—سه تصمیم همیشه برمی‌گردند: ساختار فرانت‌اند، زمان درست برای micro-frontend، و اینکه monorepo کی پیچیدگی‌اش را جبران می‌کند.

معماری فرانت‌اندی که در محصول واقعی دوام می‌آورد

معماری سالم از مرز دامنه شروع می‌شود، نه مد پوشه‌بندی. ماژول‌های قابلیت، UI kit مشترک و لایه دسترسی به داده باید با نحوه تغییر محصول هم‌خوان باشند:

• هم‌مکانی بر اساس قابلیت (ثبت‌نام، خسارت، تسویه) به‌جای انباشت همه‌چیز در components/.
• قرارداد در لبه‌ها: Zod در مرز API، DTOهای typed و مدل خطای صریح.
• جدا کردن دغدغه‌های shell (auth، layout، i18n، telemetry) از منطق قابلیت.
• RTL و پرفورمنس را زود طراحی کنید—اگر بازارتان به آن‌ها نیاز دارد.

Micro-frontend: استقلال با هزینه

وقتی چند تیم با ریتم انتشار متفاوت روی یک سطح محصول کار می‌کنند، یا باید UI را داخل میزبان دیگری جاسازی کنید (مینی‌اپ پیام‌رسان، پرتال شریک)، micro-frontend معنا دارد. برای یک تیم و یک محصول منسجم، انتخاب پیش‌فرض اشتباه است.

• استراتژی ترکیب مشخص (module federation، iframe، و غیره)
• قراردادهای runtime نسخه‌دار (auth، theme، routing، analytics)
• انضباط design system مشترک
• مشاهده‌پذیری و مالکیت انتشار برای هر remote

تصمیم ارشد اغلب نشکستن است. یک modular monolith یا اپ Next.js ماژولار با پکیج‌های واضح ارزان‌تر است تا وقتی مقیاس سازمانی استقلال را اجباری کند.

Monorepo: یک ریپو، چند قرارداد

Monorepo فقط «همه کد در یک Git» نیست؛ یک گراف workspace با API عمومی بین پکیج‌هاست. درست اجرا شود (workspaces، Turborepo/Nx، پایپ‌لاین مشترک) refactor اتمیک، منبع واحد design system و CI سریع‌تر می‌دهد. بد اجرا شود، کشوی شلوغ با import دایره‌ای می‌شود.

• اجبار مرز پکیج‌ها
• اپ‌ها به لایبرری وابسته باشند، نه برعکس
• مدیریت تغییر برای چیزهای مشترک
• شکست CI روی نقض مرز

جمع‌بندی

از monorepo برای اشتراک design system و typeهای دامنه استفاده کنید. فرانت‌اند ماژولار را پیش‌فرض نگه دارید. Micro-frontend را فقط جایی بیاورید که انزوای تیم یا runtime نیاز محصول است—و همان remoteها را به‌عنوان پکیج در monorepo نگه دارید تا قراردادها دیده شوند.