Monorepo و Micro-Frontends با استفاده از Module Federation + Vite

✨ مقدمه ✨:

مونورپو

monorepo یک مخزن واحد است که چندین پروژه مرتبط اما مستقل را مدیریت می کند. توسعه را با فعال کردن استفاده مجدد از کد، ساده کردن وابستگی ها و تقویت همکاری تیمی بهتر در مقایسه با مخازن جداگانه ساده می کند.

Micro Frontend

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

ماژول فدراسیون و Vite

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

به سرعت: این ابزار مدرن‌تری برای ساخت فرانت‌اند است، ابزاری که امکان راه‌اندازی سریع سرور و جایگزینی فوری ماژول داغ را فراهم می‌کند، با پشتیبانی عالی از ویژگی‌های جاوا اسکریپت مدرن و گسترش عملکرد آن با استفاده از سیستم افزونه.

مشکلاتی که این ابزارها می توانند حل کنند:

• تیم های مقیاس بندی
• مدیریت وابستگی ها
• افزایش سرعت توسعه

با ترکیب این الگوها و ابزارها، می توان برنامه های کاربردی جلویی مقیاس پذیر، قابل نگهداری و با کارایی بالا ساخت که نیازهای توسعه وب مدرن را برآورده می کند.

ترکیب Monorepos، Micro-Frontends، Module Federation و Vite 💡💡:

تاثیر

با ترکیب این فناوری‌ها، معماری قدرتمند و انعطاف‌پذیری را برای ساخت اپلیکیشن‌های وب در مقیاس بزرگ و پیچیده ایجاد می‌کنید. در اینجا یک تفکیک از تأثیرات کلیدی آورده شده است:

• مقیاس پذیری پیشرفته: استقرار مستقل و به‌روزرسانی‌های micro-frontend در یک monorepo.
• تجربه توسعه‌دهنده بهبود یافته: توسعه سریعتر با Vite و گردش کار ساده.
• عملکرد بهینه شده: بارگذاری بر اساس درخواست کد با Module Federation زمان بارگذاری اولیه را کاهش می دهد.
• قابلیت نگهداری بهتر: ماژولار میکرو فرانتند سازماندهی کد را بهبود می بخشد و کوپلینگ را کاهش می دهد.

🔥🔥 این تئوری بس است، بیایید کمی عمل ببینیم! 🔥🔥

چگونه آن را انجام دهیم؟

1: راه اندازی Monorepo

یک ابزار مدیریت monorepo مانند انتخاب کنید یاد بگیرید یا Nx. (انتخاب کنیم Nx برای این پروژه آزمایشی)

• بیایید یک پوشه ایجاد کنیم و مقداردهی اولیه کنیم Nx فضای کاری وجود دارد

mkdir my-monorepo
cd my-monorepo

2: Nx Cli را نصب کنید:

• نصب کنید Nx CLI به صورت جهانی وارد سیستم شما شود

npm add --global nx@latest 

npx create-nx-workspace@latest

• استفاده کنید Nx CLI برای ایجاد برنامه ها و کتابخانه های جدید در فضای کاری خود

nx g @nx/next:application host-app
.
.
.
nx g @nx/react:application my-remote-app
.
.
.
nx g @nx/react:library my-utils

3: پیکربندی Vite And Implement Module Federation:

• را نصب کنید @originjs/vite-plugin-federation پلاگین در هر میکرو فرانتند vite.config.js.

npm i @originjs/vite-plugin-federation -D

• ایجاد یک vite.config.js (اگر توسط Nx) و آن را پیکربندی کنید.
• پیاده سازی بسته فدراسیون ماژول.

پیکربندی Host-App Vite:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
     react(),
     federation({
      name: 'host-app',
      remoteApp: {},  // add Urls of your remote apps here
     shared: {
        react: {
          singleton: true,
          requiredVersion: '18.2.0',
        },
        'react-dom': {
          singleton: true,
          requiredVersion: '18.2.0',
        },
      },
    }),
  ],
});

پیکربندی Remote-App Vite:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
     react(),
     name: 'my-remote-app', // unique app name for your remote module
     filename: 'remoteEntry.js',
     exposes: {}, // add the path of any components you want to expose to the host app
     shared: {
       react: {
         singleton: true,
         requiredVersion: '18.2.0',
       },
       'react-dom': {
         singleton: true,
         requiredVersion: '18.2.0',
       },
     },
    }),
  ],
});

ساختار پروژه شما باید به این شکل باشد

my-monorepo/
├── apps/
│   ├── host-app/
│   │   ├── package.json
│   │   ├── vite.config.js
│   │   ├── src/
│   │   └── ...
│   ├── my-utils/
│   │   ├── package.json
│   │   ├── src/
│   │   └── ...
│   └── my-remote-app/
│       ├── package.json
│       ├── vite.config.js
│       ├── src/
│       └── ...
└── nx.json

🎉 تبریک، برنامه شما اکنون پیکربندی شده است. 🎉
اکنون، پیش بروید و یک مؤلفه ایجاد کنید و آن را در معرض برنامه میزبان قرار دهید.

چگونه یک کامپوننت راه دور به هاست اضافه کنیم؟

بیایید فرض کنیم یک مؤلفه را به عنوان «AppComponent» در معرض دید قرار داده اید و نام راه دور شما «remoteApp» است.

const RemoteComponent = React.lazy(() => import('remoteApp/AppComponent'));

Loading....>}>
  

*توجه: * مطمئن شوید که یک URL راه دور به هاست اضافه کنید vite.config.js فایل

سناریوهای دنیای واقعی 🌟🌟:

پلتفرم های تجارت الکترونیک در مقیاس بزرگ: همین تیم می تواند به طور مستقل روی صفحات محصول، فرآیندهای پرداخت و حساب های کاربری کار کند.
برنامه های کاربردی سازمانی: ویژگی ها را می توان توسط بخش های مختلف در یک پلت فرم مشترک مدیریت کرد.
تیم های مختلف می توانند ویجت ها یا داشبوردهای فردی را ایجاد و نگهداری کنند.

🔗 کد پروژه آزمایشی من را اینجا ببینید 🚀🚀: پروژه Monorepo

نتیجه گیری

Monorepos، Micro-frontends، Module Federation و Vite، با استفاده از نقاط قوت تمامی فناوری‌های فوق، می‌توانند به سازمان‌ها کمک کنند تا برنامه‌های وب مقیاس‌پذیر، قابل نگهداری و با کارایی بالا بسازند که نیازهای توسعه مدرن و نیازهای تجاری را برآورده کند.

منابع اضافی:

مستندات Nx
Vite Documentation
فدراسیون ماژول Webpack
معماری Micro-Frontend

در صورت داشتن سوال یا نیاز به کمک در اجرای این راه اندازی برای پروژه خود، با خیال راحت تماس بگیرید. بیایید چیزی شگفت انگیز بسازیم! 🚀