Micro Frontend با ماژول فدراسیون در React

Summarize this content to 400 words in Persian Lang
این مقاله در اصل در اینجا منتشر شده است.

این مقاله یک نمای کلی از استفاده از معماری micro frontend و فدراسیون ماژول برای ساخت برنامه های کاربردی وب مقیاس پذیر و کارآمد را به همراه راهنمای گام به گام ساخت یک micro frontend با استفاده از فدراسیون ماژول در React ارائه می دهد.

Micro frontend چیست؟

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

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

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

چگونه کار می کند؟

Module Federation سیستمی است که به شما امکان می دهد از بخش هایی از یک برنامه کاربردی در یک برنامه دیگر بدون نیاز به وارد کردن کل برنامه استفاده کنید. این بدان معنی است که می توانید برنامه خود را به ماژول های کوچکتر تقسیم کنید و مدیریت و به روز رسانی آن را آسان تر کنید.

با فدراسیون ماژول، می توانید کد را بین چندین برنامه به اشتراک بگذارید.

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

فدراسیون ماژول مزایای متعددی دارد، از جمله:

مقیاس پذیری: با Module Federation، می توانید به راحتی بدون نیاز به بازنویسی کل برنامه، ویژگی های جدیدی را به برنامه خود اضافه کنید.
کارایی: با تقسیم برنامه خود به ماژول های کوچکتر، می توانید برنامه خود را کارآمدتر کنید و زمان بارگذاری و اجرا را کاهش دهید.
همکاری: Module Federation به توسعه دهندگان اجازه می دهد تا راحت تر با هم کار کنند، زیرا اشتراک گذاری کد بین برنامه ها را آسان تر می کند.

مثال

در اینجا یک نسخه آزمایشی برای ساخت یک فروند میکرو با استفاده از Module Federation ارائه شده است. ما قصد داریم دو اپلیکیشن بسازیم: Home App و Header App.

کد منبع کامل

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

مرحله 1 – ایجاد برنامه های کاربردی

یک برنامه React جدید با استفاده از create-react-app یا روش دلخواه خود ایجاد کنید. در دایرکتوری ریشه خود، دو برنامه ایجاد کنید:

npx create-react-app home-app

npx create-react-app header-app

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 2 – Webpack 5 را نصب کنید

در هر برنامه، وب پک 5 و وابستگی های مرتبط را نصب کنید.

#NPM
npm install -–save-dev webpack webpack-cli html-webpack-plugin webpack-dev-server babel-loader css-loader

#Yarn
yarn add -D webpack webpack-cli html-webpack-plugin webpack-dev-server babel-loader css-loader

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 3 – صفحه اصلی را سفارشی کنید

صفحه اصلی خود را سفارشی کنید به عنوان مثال، در home-app/App.js:

import React from ‘react’; // Must be imported for webpack to work
import ‘./App.css’;

function App() {
return (

);
}

export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

برنامه خانگی خود را اجرا کنید:

cd ./home-app && yarn && yarn start

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 4- سفارشی کردن صفحه سرصفحه

صفحه هدر خود را سفارشی کنید به عنوان مثال، در header-app/App.js:

import React from ‘react’; // Must be imported for webpack to work
import ‘./App.css’;

function App() {
return (

);
}

export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

برنامه هدر خود را اجرا کنید:

cd ./home-app && yarn && yarn start

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 5 – پیکربندی بسته وب

فایل webpack.config.js را در ریشه header-app/ و home-app/ ایجاد کنید:

//home-app/webpack.config.js
const HtmlWebpackPlugin = require(“html-webpack-plugin”);

module.exports = {
entry: “./src/index”,
mode: “development”,
devServer: {
port: 3000, // port 3001 for header-app
},
module: {
rules: [
{
test: /\.(js|jsx)?$/,
exclude: /node_modules/,
use: [
{
loader: “babel-loader”,
options: {
presets: [“@babel/preset-env”, “@babel/preset-react”],
},
},
],
},
{
test: /\.css$/i,
use: [“style-loader”, “css-loader”],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: “./public/index.html”,
}),
],
resolve: {
extensions: [“.js”, “.jsx”],
},
target: “web”,
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

header-app/src/index.js & home-app/src/index.js را تغییر دهید:

import React from ‘react’;
import ReactDOM from ‘react-dom/client’;
import ‘./index.css’;
import App from ‘./App’;

const root = ReactDOM.createRoot(document.getElementById(‘app’));
root.render(

);
Modify header-app/public/index.html & home-app/public/index.html:

React with Webpack

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اسکریپت شروع را در header-app/package.json و home-app/package.json تغییر دهید تا از پیکربندی بسته وب ما استفاده کنید:

“scripts”: {
“start”: “webpack serve”,
“build”: “webpack –mode production”,
},

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

برنامه header و home app خود را اجرا کنید:

cd home-app && yarn start
cd header-app && yarn start

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 6- پیکربندی فدراسیون ماژول

ابتدا باید یک فایل entry.js را به عنوان ورودی به هر یک از برنامه های خود اضافه کنیم.

ما به این لایه غیرمستقیم اضافی نیاز داریم، زیرا به Webpack اجازه می‌دهد تا تمام ورودی‌های لازم برای ارائه برنامه راه دور را بارگیری کند.

header-app/entry.js و home-app/entry.js را ایجاد کنید:

import(‘./index.js’)

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ورودی header-app/webpack.config.js و home-app/webpack.config.js را تغییر دهید

module.exports = {
entry: “./src/entry.js”,
//…
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 7- Header for Module Federation را نشان می دهد

اکنون باید در header-app/webpack.config.js Header را برای استفاده از home-app نمایش دهیم:

// header-app/webpack.config.js
const HtmlWebpackPlugin = require(“html-webpack-plugin”);
// import ModuleFederationPlugin from webpack
const ModuleFederationPlugin = require(“webpack/lib/container/ModuleFederationPlugin”);
// import dependencies from package.json, which includes react and react-dom
const { dependencies } = require(“./package.json”);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

module.exports = {
//…
plugins: [
//…
new ModuleFederationPlugin({
name: “HeaderApp”, // This application named ‘HeaderApp’
filename: “remoteEntry.js”, // output a js file
exposes: { // which exposes
“./Header”: “./src/App”, // a module ‘Header’ from ‘./src/App’
},
shared: { // and shared
…dependencies, // some other dependencies
react: { // react
singleton: true,
requiredVersion: dependencies[“react”],
},
“react-dom”: { // react-dom
singleton: true,
requiredVersion: dependencies[“react-dom”],
},
},
}),
],
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

برنامه را راه اندازی کنید، به http://localhost:3001/remoteEntry.js بروید. این مانیفست تمام ماژول هایی است که توسط برنامه هدر در معرض دید قرار می گیرند.

مرحله 8- فدراسیون ماژول را در برنامه Home اضافه کنید

اکنون باید ModuleFederationPlugin را به home-app/webpack.config.js اضافه کنیم:

// home-app/webpack.config.js
const HtmlWebpackPlugin = require(“html-webpack-plugin”);
// import ModuleFederationPlugin from webpack
const ModuleFederationPlugin = require(“webpack/lib/container/ModuleFederationPlugin”);
// import dependencies from package.json, which includes react and react-dom
const { dependencies } = require(“./package.json”);

module.exports = {
//…
plugins: [
//…
new ModuleFederationPlugin({
name: “HomeApp”, // This application named ‘HomeApp’
// This is where we define the federated modules that we want to consume in this app.
// Note that we specify “Header” as the internal name
// so that we can load the components using import(“Header/”).
// We also define the location where the remote’s module definition is hosted:
// Header@[http://localhost:3001/remoteEntry.js].
// This URL provides three important pieces of information: the module’s name is “Header”, it is hosted on “localhost:3001”,
// and its module definition is “remoteEntry.js”.
remotes: {
“HeaderApp”: “HeaderApp@http://localhost:3001/remoteEntry.js”,
},
shared: { // and shared
…dependencies, // other dependencies
react: { // react
singleton: true,
requiredVersion: dependencies[“react”],
},
“react-dom”: { // react-dom
singleton: true,
requiredVersion: dependencies[“react-dom”],
},
},
}),
],
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

برای استفاده از مولفه Header از برنامه راه دور، home-app/src/App.js را تغییر دهید:

import React, { lazy, Suspense } from ‘react’; // Must be imported for webpack to work
import ‘./App.css’;

const Header = lazy(() => import(‘HeaderApp/Header’));

function App() {
return (

Loading Header…}>

Demo home page

) } صادرات پیش فرض برنامه;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

و انجام شد! شما با موفقیت یک برنامه فدرال ماژول با هدر ایجاد کردید.معماری Micro Frontend و فدراسیون ماژول ابزارهای قدرتمندی برای ساخت برنامه های کاربردی وب مقیاس پذیر و کارآمد هستند. با شکستن یک صفحه یکپارچه بزرگ به قطعات کوچکتر و قابل مدیریت تر، تیم ها می توانند کارآمدتر و مستقل تر کار کنند. سپس فدراسیون ماژول‌ها به توسعه‌دهندگان اجازه می‌دهد تا کد را بین برنامه‌ها به اشتراک بگذارند، همکاری را ممکن می‌سازد و تلاش‌های تکراری را کاهش می‌دهد. با دنبال کردن مراحل ذکر شده در این مقاله، می توانید micro frontend خود را با فدراسیون ماژول در React بسازید و از این ابزار قدرتمند بهره ببرید.اگر سؤال دیگری دارید، در زیر نظر دهید یا مستقیماً در لینکدین با من تماس بگیرید.

npx create-react-app home-app

npx create-react-app header-app

#NPM
npm install -–save-dev webpack webpack-cli html-webpack-plugin webpack-dev-server babel-loader css-loader

#Yarn
yarn add -D webpack webpack-cli html-webpack-plugin webpack-dev-server babel-loader css-loader

import React from 'react'; // Must be imported for webpack to work
import './App.css';

function App() {
  return (
    
  );
}

export default App;

cd ./home-app && yarn && yarn start

import React from 'react'; // Must be imported for webpack to work
import './App.css';

function App() {
  return (
    
  );
}

export default App;

cd ./home-app && yarn && yarn start

//home-app/webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: "./src/index",
    mode: "development",
    devServer: {
        port: 3000,  // port 3001 for header-app
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)?$/,
                exclude: /node_modules/,
                use: [
                    {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"],
                    },
                    },
                ],
            },
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html",
        }),
    ],
    resolve: {
        extensions: [".js", ".jsx"],
    },
    target: "web",
};

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(
  
    
  
);
Modify header-app/public/index.html & home-app/public/index.html:



  
    
    
    
    
  
  
    

    

		

			

										

							
							 هم‌رسانی
						
						
				
					 فیس بوک
				
				
					 توییتر (X)
				
				
					 لینکدین
				
				
					 ‫تامبلر
				
				
					 ‫پین‌ترست
				
				
					 ‫رددیت
				
				
					 ‫VKontakte
				
				
					 ‫Odnoklassniki
				
				
					 پاکت
				
				
					 رایانامه
				
				
					 چاپ