M

MLOG

فارسی

قدرت میکروسرویس‌های فرانت‌اند را با فدراسیون ماژول جاوااسکریپت در Webpack 5 آزاد کنید. ساخت اپلیکیشن‌های وب مقیاس‌پذیر، قابل نگهداری و مستقل را بیاموزید.

فدراسیون ماژول جاوااسکریپت با Webpack 5: راهنمای جامع میکروسرویس‌های فرانت‌اند

در چشم‌انداز همیشه در حال تحول توسعه وب، ساخت اپلیکیشن‌های بزرگ و پیچیده می‌تواند یک کار دلهره‌آور باشد. معماری‌های یکپارچه (monolithic) سنتی اغلب منجر به افزایش زمان توسعه، گلوگاه‌های استقرار و چالش‌هایی در حفظ کیفیت کد می‌شوند. میکروسرویس‌های فرانت‌اند به عنوان یک الگوی معماری قدرتمند برای مقابله با این چالش‌ها ظهور کرده‌اند که به تیم‌ها اجازه می‌دهد بخش‌های مستقلی از یک اپلیکیشن وب بزرگتر را بسازند و مستقر کنند. یکی از امیدوارکننده‌ترین فناوری‌ها برای پیاده‌سازی میکروسرویس‌های فرانت‌اند، فدراسیون ماژول جاوااسکریپت (JavaScript Module Federation) است که در Webpack 5 معرفی شد.

میکروسرویس‌های فرانت‌اند (Micro-frontends) چیستند؟

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

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

مزایای میکروسرویس‌های فرانت‌اند:

چالش‌های میکروسرویس‌های فرانت‌اند:

فدراسیون ماژول جاوااسکریپت چیست؟

فدراسیون ماژول جاوااسکریپت یک ویژگی Webpack 5 است که به شما اجازه می‌دهد کد را بین اپلیکیشن‌های جاوااسکریپت که به طور جداگانه کامپایل شده‌اند در زمان اجرا به اشتراک بگذارید. این ویژگی به شما امکان می‌دهد بخش‌هایی از اپلیکیشن خود را به عنوان «ماژول» در معرض دید قرار دهید تا توسط اپلیکیشن‌های دیگر مصرف شوند، بدون اینکه نیازی به انتشار آن‌ها در یک مخزن مرکزی مانند npm باشد.

فدراسیون ماژول را به عنوان راهی برای ایجاد یک اکوسیستم فدرال از اپلیکیشن‌ها در نظر بگیرید، جایی که هر اپلیکیشن می‌تواند عملکرد خود را ارائه دهد و از عملکرد اپلیکیشن‌های دیگر استفاده کند. این امر نیاز به وابستگی‌های زمان ساخت (build-time) را از بین می‌برد و امکان استقرارهای واقعاً مستقل را فراهم می‌کند.

به عنوان مثال، یک تیم سیستم طراحی (design system) می‌تواند کامپوننت‌های رابط کاربری را به عنوان ماژول در معرض دید قرار دهد و تیم‌های مختلف اپلیکیشن می‌توانند این کامپوننت‌ها را مستقیماً از اپلیکیشن سیستم طراحی مصرف کنند، بدون اینکه نیاز به نصب آن‌ها به عنوان پکیج npm داشته باشند. هنگامی که تیم سیستم طراحی کامپوننت‌ها را به‌روزرسانی می‌کند، تغییرات به طور خودکار در تمام اپلیکیشن‌های مصرف‌کننده منعکس می‌شود.

مفاهیم کلیدی در فدراسیون ماژول:

راه‌اندازی فدراسیون ماژول با Webpack 5: یک راهنمای عملی

بیایید یک مثال عملی از راه‌اندازی فدراسیون ماژول با Webpack 5 را بررسی کنیم. ما دو اپلیکیشن ساده ایجاد خواهیم کرد: یک اپلیکیشن Host (میزبان) و یک اپلیکیشن Remote (از راه دور). اپلیکیشن Remote یک کامپوننت را در معرض دید قرار می‌دهد و اپلیکیشن Host آن را مصرف می‌کند.

۱. راه‌اندازی پروژه

دو دایرکتوری جداگانه برای اپلیکیشن‌های خود ایجاد کنید: `host` و `remote`.

```bash mkdir host remote cd host npm init -y npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev npm install react react-dom cd ../remote npm init -y npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev npm install react react-dom ```

۲. پیکربندی اپلیکیشن Remote

در دایرکتوری `remote`، فایل‌های زیر را ایجاد کنید:

src/index.js:

```javascript import React from 'react'; import ReactDOM from 'react-dom/client'; import RemoteComponent from './RemoteComponent'; const App = () => (

Remote Application

); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ```

src/RemoteComponent.jsx:

```javascript import React from 'react'; const RemoteComponent = () => (

This is a Remote Component!

Rendered from the Remote Application.

); export default RemoteComponent; ```

webpack.config.js:

```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); const path = require('path'); module.exports = { entry: './src/index', mode: 'development', devServer: { port: 3001, static: { directory: path.join(__dirname, 'dist'), }, }, output: { publicPath: 'auto', }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react', '@babel/preset-env'], }, }, }, ], }, plugins: [ new ModuleFederationPlugin({ name: 'remote', filename: 'remoteEntry.js', exposes: { './RemoteComponent': './src/RemoteComponent', }, shared: { react: { singleton: true, eager: true }, 'react-dom': { singleton: true, eager: true }, }, }), new HtmlWebpackPlugin({ template: './public/index.html', }), ], resolve: { extensions: ['.js', '.jsx'], }, }; ```

فایل `public/index.html` را با ساختار HTML پایه ایجاد کنید. مهم این است که `

` را داشته باشد.

۳. پیکربندی اپلیکیشن Host

در دایرکتوری `host`، فایل‌های زیر را ایجاد کنید:

  • `src/index.js`: نقطه ورود برای اپلیکیشن.
  • `webpack.config.js`: فایل پیکربندی Webpack.

src/index.js:

```javascript import React, { Suspense } from 'react'; import ReactDOM from 'react-dom/client'; const RemoteComponent = React.lazy(() => import('remote/RemoteComponent')); const App = () => (

Host Application

Loading Remote Component...
}>
); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ```

webpack.config.js:

```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); const path = require('path'); module.exports = { entry: './src/index', mode: 'development', devServer: { port: 3000, static: { directory: path.join(__dirname, 'dist'), }, }, output: { publicPath: 'auto', }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react', '@babel/preset-env'], }, }, }, ], }, plugins: [ new ModuleFederationPlugin({ name: 'host', remotes: { remote: 'remote@http://localhost:3001/remoteEntry.js', }, shared: { react: { singleton: true, eager: true }, 'react-dom': { singleton: true, eager: true }, }, }), new HtmlWebpackPlugin({ template: './public/index.html', }), ], resolve: { extensions: ['.js', '.jsx'], }, }; ```

فایل `public/index.html` را با ساختار HTML پایه ایجاد کنید (مشابه اپلیکیشن remote). مهم این است که `

` را داشته باشد.

۴. نصب Babel

در هر دو دایرکتوری `host` و `remote`، وابستگی‌های Babel را نصب کنید:

```bash npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader ```

۵. اجرای اپلیکیشن‌ها

در هر دو دایرکتوری `host` و `remote`، اسکریپت زیر را به `package.json` اضافه کنید:

```json "scripts": { "start": "webpack serve" } ```

حالا، هر دو اپلیکیشن را اجرا کنید:

```bash cd remote npm start cd ../host npm start ```

مرورگر خود را باز کرده و به `http://localhost:3000` بروید. باید اپلیکیشن Host را ببینید که کامپوننت Remote در داخل آن رندر شده است.

توضیح گزینه‌های کلیدی پیکربندی:

تکنیک‌های پیشرفته فدراسیون ماژول

فدراسیون ماژول ویژگی‌های پیشرفته زیادی را ارائه می‌دهد که می‌تواند به شما در ساخت معماری‌های میکروسرویس فرانت‌اند پیچیده‌تر کمک کند.

Remoteهای پویا

به جای کدنویسی سخت (hardcoding) URLهای اپلیکیشن‌های از راه دور در پیکربندی Webpack، می‌توانید آن‌ها را به صورت پویا در زمان اجرا بارگذاری کنید. این به شما امکان می‌دهد به راحتی مکان اپلیکیشن‌های از راه دور را بدون نیاز به بازسازی اپلیکیشن میزبان به‌روز کنید.

به عنوان مثال، می‌توانید URLهای اپلیکیشن‌های از راه دور را در یک فایل پیکربندی یا یک پایگاه داده ذخیره کرده و آن‌ها را به صورت پویا با استفاده از جاوااسکریپت بارگذاری کنید.

```javascript // در webpack.config.js remotes: { remote: `promise new Promise(resolve => { const urlParams = new URLSearchParams(window.location.search); const remoteUrl = urlParams.get('remote'); // فرض کنید remoteUrl چیزی شبیه 'http://localhost:3001/remoteEntry.js' است const script = document.createElement('script'); script.src = remoteUrl; script.onload = () => { // کلید فدراسیون ماژول این است که اپلیکیشن ریموت // با استفاده از نامی که در ریموت تعریف شده در دسترس است resolve(window.remote); }; document.head.appendChild(script); })`, }, ```

حالا می‌توانید اپلیکیشن میزبان را با یک پارامتر کوئری `?remote=http://localhost:3001/remoteEntry.js` بارگذاری کنید.

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

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

شما می‌توانید محدوده نسخه هر ماژول اشتراکی را در پیکربندی Webpack مشخص کنید.

```javascript // در webpack.config.js shared: { react: { singleton: true, eager: true, requiredVersion: '^18.0.0' }, 'react-dom': { singleton: true, eager: true, requiredVersion: '^18.0.0' }, }, ```

بارگذارنده‌های ماژول سفارشی

فدراسیون ماژول به شما اجازه می‌دهد بارگذارنده‌های ماژول سفارشی را تعریف کنید که می‌توانند برای بارگذاری ماژول‌ها از منابع مختلف یا در فرمت‌های مختلف استفاده شوند. این می‌تواند برای بارگذاری ماژول‌ها از یک CDN یا از یک رجیستری ماژول سفارشی مفید باشد.

اشتراک‌گذاری وضعیت (State) بین میکروسرویس‌های فرانت‌اند

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

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

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

نمونه‌های دنیای واقعی از فدراسیون ماژول در عمل

در حالی که مطالعات موردی خاص اغلب محرمانه هستند، در اینجا چند سناریوی کلی وجود دارد که فدراسیون ماژول می‌تواند در آن‌ها فوق‌العاده مفید باشد:

نتیجه‌گیری

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

آینده توسعه فرانت‌اند بدون شک به سمت معماری‌های ماژولار و توزیع‌شده متمایل است. فدراسیون ماژول ابزاری حیاتی برای ساخت این سیستم‌های مدرن فراهم می‌کند و به تیم‌ها امکان می‌دهد اپلیکیشن‌های پیچیده را با سرعت، انعطاف‌پذیری و پایداری بیشتری ایجاد کنند. با بلوغ این فناوری، می‌توانیم انتظار داشته باشیم که موارد استفاده نوآورانه‌تر و بهترین شیوه‌های بیشتری ظهور کنند.