چگونه در React معماری میکرو فرانت اند پیاده سازی کنیم؟

معماری‌های Micro-Frontend یک برنامه Front-end را به «microapps» منفرد و نیمه مستقل تجزیه می‌کنند که به طور آزاد با هم کار می‌کنند. این می تواند به مدیریت بیشتر پروژه های بزرگ کمک کند، به عنوان مثال. هنگام انتقال از پایگاه‌های کد قدیمی.

ممکن است از تیم بک اند خود شنیده باشید که آنها از یک رویکرد میکروسرویس برای ساخت بک‌اند استفاده می‌کنند. اما اگر بتوانیم از همین رویکرد در ساخت view های خود استفاده کنیم، چه؟

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

میکرو فرانت اند (Micro Frontend) چیست؟

اصطلاح "micro frontend" به یک روش و یک رویکرد توسعه برنامه اشاره دارد که تضمین می کند فرانت اند برنامه به بخش های کوچکتر و قابل مدیریت تر تقسیم می شود که اغلب به طور جداگانه توسعه داده می شوند، آزمایش می شوند و مستقر می شوند. این مفهوم شبیه به نحوه تجزیه backend به اجزای کوچکتر در فرآیند میکروسرویس ها است. به صورت خیلی خلاصه مفهوم توسعه یافته میکروسرویس ها در دنیای فرانت اند میکرو فرانت اند نامیده می شود.

هر میکرو فرانت شامل کدی برای یک زیرمجموعه (یا "ویژگی") از کل وب سایت است. این مولفه ها توسط چندین گروه مدیریت می شوند که هر یک بر جنبه خاصی از کسب و کار یا هدف خاصی تمرکز دارند.

React به عنوان یک فناوری frontend که به طور گسترده مورد استفاده قرار می گیرد، گزینه خوبی برای ساخت معماری micro frontend است. همراه با react، می‌توانیم از ابزار vite.js برای فرآیند توسعه روان اپلیکیشن‌های micro frontend استفاده کنیم.

برای بررسی بیشتر میکرو فرانت اند می توانید این مقاله را بررسی کنید.

بررسی معماری میکرو فرانت اند در React

به طور سنتی، هنگام ساخت یک برنامه frontend، همه پایگاه کد، از جمله کامپوننت ها، دارایی ها، مسیریابی و منطق تجاری مورد نیاز برای فرانت اند، در یک برنامه اصلی نوشته می شوند، که سپس توسط سرور ارائه می شود. با این حال، با ظهور فریمورک های مختلف جاوا اسکریپت UI که امروزه توسط اکثر سازمان ها استفاده می شود، اشکالات یا محدودیت هایی در ارتباط با این چارچوب وجود دارد. به عنوان مثال، با افزایش اندازه برنامه، زمان بارگذاری در مرورگر افزایش می یابد.

یک برنامه e-commerce را در نظر بگیرید که با استفاده از React ساخته شده است و دارای عملکردهایی مانند جستجوی محصول، خرید و ردیابی سفارش است. در یک برنامه فرانت یکپارچه، این صفحات گنجانده می شوند.

در یک برنامه تجارت الکترونیک React، برنامه در تکه های اصلی جاوا اسکریپت تعبیه شده است که هر زمان که کسی از سایت بازدید می کند توسط مرورگر بارگذاری می شود. کاربر باید منتظر باشد تا تمام فایل های جاوا اسکریپت را که شامل کل برنامه frontend می شود دانلود کند. این می تواند زمان بارگذاری اولیه برنامه را به میزان قابل توجهی افزایش دهد.

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

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

بنابراین، می‌توانیم اپلیکیشن e-commerce را به ویژگی‌های محصول، سفارش و تحویل تقسیم کنیم. برنامه micro frontend محصول فقط رابط کاربری مربوط به فهرست محصول و جستجو را ارائه می دهد. برنامه micro frontend سفارش مسئول رابط کاربری مربوط به سفارش خواهد بود، و micro frontend مسئول ویژگی ردیابی محصول خواهد بود.

مزایای Micro Frontends

در اینجا مزایای کلیدی معماری Micro Frontend آورده شده است:

ارتقاء تدریجی

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

با این روش، تیم ها می توانند مدیریت کلی وابستگی ها، UX، زمان بارگذاری، طراحی و موارد دیگر را بهبود بخشند.

پایگاه های کد ساده

بسیاری از اوقات، برخورد با یک پایگاه کد بزرگ و پیچیده برای توسعه دهندگان آزاردهنده می شود.
معماری Micro Frontend کد شما را به بخش‌های ساده‌تر و قابل مدیریت‌تر جدا می‌کند و وضوح مورد نیاز برای نوشتن کد بهتر را به شما می‌دهد.

استقرار مستقل

استقرار مستقل هر جزء با استفاده از Micro frontend امکان پذیر است.

Tech Agnostic

می‌توانید هر برنامه را مستقل از بقیه نگه دارید و با استفاده از micro frontend آن را به عنوان یک مؤلفه مدیریت کنید.
هر برنامه را می توان با استفاده از یک چارچوب یا کتابخانه متفاوت مطابق با الزامات توسعه داد.

تیم های خودمختار

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

محدودیت های Micro Frontends

در اینجا محدودیت های کلیدی معماری Micro Frontend آورده شده است:

سایزهای دانلود بزرگتر

گفته می شود که Micro Frontends به دلیل وابستگی های اضافی، حجم دانلود را افزایش می دهد.
نرخ دانلود بزرگتر از این واقعیت ناشی می شود که هر برنامه با React یا یک کتابخانه / فریمورک مرتبط ساخته شده است و باید هر زمان که کاربر نیاز به دسترسی به آن صفحه خاص داشته باشد، مورد نیاز را دانلود کند.

تغییرات محیطی

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

پیچیدگی مدیریت

Micro Frontend دارای مخازن اضافی، فناوری ها، گردش کار توسعه، خدمات، دامنه ها و غیره مطابق با نیاز پروژه است.

مسائل مربوط به انطباق

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

اکنون، بیایید ببینیم که چگونه می توان معماری Micro Frontend را با React و سایر ابزارهای مرتبط ساخت.

معماری Micro Frontend با استفاده از React

Micro Frontends نقش طراحی یکپارچه را ایفا می کنند که سال ها به عنوان استاندارد در توسعه برنامه ها عمل کرده است. پس زمینه محبوبیت طرح های یکپارچه گسترده است. در نتیجه، بسیاری از توسعه دهندگان برجسته نرم افزار و چهره های تجاری حامیان مشتاق هستند. با این حال، با گذشت زمان، فناوری ها و مفاهیم جدیدی ظاهر می شوند که بهتر از آن چیزی هستند که همه فکر می کنند به آن عادت کرده اند.

مفهوم "micro frontend" در React منحصر به فرد نیست. در عوض، نشان دهنده تحولی از سبک های معماری قبلی است. اساس معماری میکروسرویس به طور گسترده تحت تأثیر روندهای نوآورانه انقلابی در رسانه های اجتماعی، فناوری ابری و اینترنت اشیا قرار گرفته است تا به سرعت در صنعت نفوذ کند.

به دلیل تغییر به استقرار مداوم، micro frontend با react مزایای بیشتری را برای شرکت ها فراهم می کند، مانند:

مقیاس پذیری بالا
استقرار سریع
مهاجرت و ارتقاء موثر
تکنولوژی-استقلال
ایزوله سازی مشکلی نداره
سطوح بالای استقرار و اتوماسیون
کاهش زمان و هزینه توسعه
تهدیدات کمتر برای ایمنی و قابلیت اطمینان کاهش یافته است

بیایید مراحل ایجاد اولین معماری micro frontend خود را با استفاده از react طی کنیم:

ساخت Micro Frontend با React و Vite

ساختار پروژه را تنظیم کنید

برای شروع، بیایید یک سلسله مراتب پوشه به صورت زیر ایجاد کنیم.

# Create folder named react-vite-federation-demo
# Folder Hierarchy 
--/packages
----/application
----/shared

دستورالعمل های زیر شما را در مسیر سریع تر قرار می دهد:

mkdir react-vite-federation-demo && cd ./react-vite-federation-demo
mkdir packages && cd ./packages

کار بعدی این است که از Vite CLI برای ایجاد دو دایرکتوری جداگانه استفاده کنید:

1. application، یک برنامه react که از کامپوننت ها استفاده می کند،
2. shared، که آنها را در دسترس سایر برنامه ها قرار می دهد.

#./react-vite-federation-demo/packages
pnpm create vite application --template react
pnpm create vite shared --template react

جهت بررسی تفاوت بین CRE و Vite و اینکه کدام یک بهتر است این مقاله را بررسی کنید.

فضای کاری pnpm را تنظیم کنید

اکنون که می دانید با پروژه های متعددی در پوشه پکیج کار می کنید، می توانید فضای کاری pnpm خود را بر اساس آن تنظیم کنید.

برای این منظور یک فایل پکیج در دایرکتوری ریشه پکیج ایجاد می شود:

touch package.json

کد زیر را برای تعریف عناصر مختلف در فایل package.json قرار دهید.

{
  "name": "react-vite-federation-demo", 
  "version": "1.1.0",
  "private": true,   
  "workspaces": [
    "packages/*"
  ],
  "scripts": {
    "build": "pnpm  --parallel --filter \"./**\" build",
    "preview": "pnpm  --parallel --filter \"./**\" preview",
    "stop": "kill-port --port 5000,5001"
  },
  "devDependencies": {
    "kill-port": "^2.0.1",
    "@originjs/vite-plugin-federation": "^1.1.10"
  }
}

این فایل package.json جایی است که شما پکیج ها و اسکریپت های مشترک را برای توسعه و اجرای برنامه های خود به صورت موازی مشخص می کنید.

سپس، فایلی به نام "pnpm-workspace.yaml" بسازید تا پیکربندی فضای کاری pnpm را نیز در بر گیرد:

touch pnpm-workspace.yaml

بیایید پکیج های شما را با تنظیمات اولیه نشان دهیم:

# pnpm-workspace.yaml
packages:
  - 'packages/*'

پکیج های مربوط به هر برنامه اکنون برای نصب در دسترس هستند:

pnpm install

افزودن کامپوننت های مشترک (تنظیم پکیج «shared»)

برای نشان دادن، اجازه دهید یک کامپوننت اصلی دکمه ایجاد کنیم و آن را در پکیج shared خود قرار دهیم.

cd ./packages/shared/src && mkdir ./components
cd ./components && touch Button.jsx

برای شناسایی دکمه، کد زیر را در Button.jsx اضافه کنید:

import React from "react";
import "./Button.css"
export default ({caption = "Shared Button"}) => <button className='shared-button'>{caption}</button>;

بیایید فایل CSS را برای دکمه خود اضافه کنیم:

touch Button.css

حالا برای افزودن استایل ها کد زیر را در Button.css بنویسید:

.shared-button {
    background-color:#ADD8E6;;
    color: white;
    border: 1px solid white;
    padding: 16px 30px;
    font-size: 20px;
    text-align: center;
}

وقت آن است که دکمه را برای استفاده توسط vite-plugin-federation آماده کنیم، پس بیایید این کار را اکنون انجام دهیم. برای این کار باید فایل vite.config.js را با تنظیمات زیر تغییر دهید:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import federation from '@originjs/vite-plugin-federation'
import dns from 'dns'
 
dns.setDefaultResultOrder('verbatim')
 
export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'shared',
      filename: 'shared.js',
      exposes: {
        './Button': './src/components/Button'
      },
      shared: ['react']
    })
  ],
  preview: {
    host: 'localhost',
    port: 5000,
    strictPort: true,
    headers: {
      "Access-Control-Allow-Origin": "*"
    }
  },
  build: {
    target: 'esnext',
    minify: false,
    cssCodeSplit: false
  }
})

بخش های  پلاگین ها، preview و build را در این فایل تنظیم کنید.

از کامپوننت مشترک استفاده کنید و پکیج Application را تنظیم کنید

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

import "./App.css";
import { useState } from "react";
import Button from "shared/Button";
function Application() {
const [count, setCount] = useState(0);
return (
<div className="Application">
<h1>Application 1</h1>
<div className="card">
<Button onClick={() => setCount((count) => count + 1)} />
</div>
count is {count}
</div>
);
}
export default Application;

موارد زیر باید در فایل vite.config.js انجام شود:

import { defineConfig } from 'vite'
import federation from '@originjs/vite-plugin-federation'
import dns from 'dns'
import react from '@vitejs/plugin-react'
 
dns.setDefaultResultOrder('verbatim')
 
export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'application',
      remotes: {
        shared: 'http://localhost:5000/assets/shared.js',
      },
      shared: ['react']
    })
  ],
  preview: {
    host: 'localhost',
    port: 5001,
    strictPort: true,
  },
  build: {
    target: 'esnext',
    minify: false,
    cssCodeSplit: false
  }
})

در این مرحله، افزونه خود را برای استفاده از یک بسته انجمن نیز پیکربندی می‌کنید. خطوط دقیقاً با قالب بسته بندی استاندارد مطابقت دارند.

راه اندازی برنامه

دستورات زیر به شما کمک می کند تا برنامه های خود را بسازید و راه اندازی کنید:

pnpm build && pnpm preview

برنامه react مشترک ما در "localhost:5000" قابل دسترسی است.

در "localhost:5001"، برنامه خود را با دکمه ای از برنامه shared application در "localhost:5000" خواهید دید.

در صورتی که از webpack استفاده می کنید و می خواهید به Vite مهاجرت کنید این مقاله را بررسی کنید.

نتیجه

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

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