スケーラブルな Web アプリケーション用の avaScript マイクロフロントエンド パターン

多作な作家として、アマゾンで私の本を探索することをお勧めします。 継続的なサポートのために、Medium での私の取り組みを忘れずにフォローしてください。ありがとう！あなたのエンゲージメントは非常に貴重です!

マイクロフロントエンド アーキテクチャは、大規模で保守可能な Web アプリケーションを構築するためのソリューションとして大きな注目を集めています。 私は数多くの大規模なプロジェクトに取り組んできたので、モノリシックなフロントエンドをより小さく、より管理しやすいユニットに分解することの利点を直接経験してきました。この記事では、アプリケーションの柔軟性と拡張性を強化するための 8 つの JavaScript マイクロフロントエンド アーキテクチャ パターンについて詳しく説明します。

モノレポの構造

マイクロフロントエンドの実装における重要な最初の決定には、コードベースの編成が含まれます。 単一リポジトリ内に複数のフロントエンド アプリケーションを収容するモノリポジトリ構造は、非常に有益であることが証明されています。

Monorepos は、マイクロフロントエンド間のコード共有を簡素化し、バージョン管理を合理化します。 これらは一貫性を促進し、依存関係の管理を簡素化します。

モノリポジトリ構造のサンプル:

<code>my-microfrontend-app/
├── packages/
│   ├── header/
│   ├── footer/
│   ├── product-list/
│   └── shopping-cart/
├── shared/
│   ├── components/
│   └── utils/
├── package.json
└── lerna.json</code>

各マイクロフロントエンドは、packages ディレクトリ内に個別のパッケージとして存在します。共有リソースは shared ディレクトリにあります。

モジュールフェデレーション

Webpack 5 のモジュール フェデレーションは、アプリケーション間でコードを動的にロードして共有します。これはマイクロフロントエンドに最適で、ランタイム コンポーネントのロードを可能にします。

基本的なモジュール フェデレーション構成:

<code>// webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  // ...other webpack config
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};</code>

これにより、他のマイクロフロントエンドで使用できるように Button の app1 コンポーネントが公開されます。

カスタム要素

Web コンポーネント、特にカスタム要素は、再利用可能なフレームワークに依存しないコンポーネントを作成します。 これは、チームが異なるフレームワークを利用する可能性があるマイクロフロントエンド アーキテクチャでは非常に重要です。

カスタム要素の例:

<code>class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `

        /* Styles for the custom element */
      <div>
        <h1 id="My-Custom-Element">My Custom Element</h1>
        <p>This is a custom element used in a microfrontend architecture.</p>
      </div>
    `;
  }
}

customElements.define('my-custom-element', MyCustomElement);</code>

この要素は、基礎となるフレームワークに関係なく、マイクロフロントエンド全体で機能します。

単一 SPA フレームワーク

Single-SPA は、専用のマイクロフロントエンド フレームワークです。これにより、独自に開発およびデプロイされたマイクロフロントエンドからのアプリケーションの構築が容易になります。

基本的なシングル SPA セットアップ:

<code>import { registerApplication, start } from 'single-spa';

registerApplication({
  name: 'app1',
  app: () => import('./app1/main.js'),
  activeWhen: '/app1',
});

registerApplication({
  name: 'app2',
  app: () => import('./app2/main.js'),
  activeWhen: '/app2',
});

start();</code>

これにより、app1 と app2 が登録され、ルートに基づいてアクティブ化されます。

イベント駆動型コミュニケーション

疎結合されたマイクロフロントエンド間の効果的な通信は不可欠です。パブリッシュ/サブスクライブまたはカスタム イベントを使用したイベント駆動型のアプローチは非常に効果的です。

カスタム イベントの例:

<code>// In one microfrontend
const event = new CustomEvent('itemAdded', { detail: { itemId: 123 } });
window.dispatchEvent(event);

// In another microfrontend
window.addEventListener('itemAdded', (event) => {
  console.log('Item added:', event.detail.itemId);
});</code>

これにより、内部の詳細を公開することなく通信が可能になります。

共有状態管理

多くの状況ではイベント駆動型の通信で十分ですが、集中状態管理 (Redux、MobX) によりマイクロフロントエンド間の一貫性が保証されます。

基本的な Redux の例:

<code>my-microfrontend-app/
├── packages/
│   ├── header/
│   ├── footer/
│   ├── product-list/
│   └── shopping-cart/
├── shared/
│   ├── components/
│   └── utils/
├── package.json
└── lerna.json</code>

共有状態により、一貫したデータ アクセスが保証されます。

アセット読み込み戦略

パフォーマンスは非常に重要です。 遅延読み込みなどのスマートなアセット読み込みが不可欠です。 React の例:

<code>// webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  // ...other webpack config
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};</code>

遅延読み込みにより、初期バンドル サイズが削減されます。

標準化されたビルドプロセス

マイクロフロントエンド全体で一貫したビルド プロセスは、デプロイメントを簡素化し、エラーを減らすために非常に重要です。 package.json の例:

<code>class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `

        /* Styles for the custom element */
      <div>
        <h1 id="My-Custom-Element">My Custom Element</h1>
        <p>This is a custom element used in a microfrontend architecture.</p>
      </div>
    `;
  }
}

customElements.define('my-custom-element', MyCustomElement);</code>

一貫したビルド ツールにより均一性が確保されます。

これらのパターンはマイクロフロントエンド アーキテクチャを強化します。 ただし、各プロジェクトはユニークであり、適切なパターンを選択することが重要であることに注意してください。 導入を成功させるには、慎重な計画が不可欠です。

---

101 冊

101 Books は、著者 Aarav Joshi が共同設立した AI を活用した出版社です。 当社の AI テクノロジーは出版コストを低く抑えており、書籍によっては $4 という低価格で、知識にアクセスできるようにしています。

Amazon で私たちの本 Golang Clean Code を見つけてください。

最新情報を入手してください! Aarav Joshi を検索して、その他のタイトルや特別オファーをご覧ください!

私たちの作品

私たちの仕事をご覧ください:

インベスターセントラル | 投資家中央スペイン人 | 中央ドイツの投資家 | スマートな暮らし | エポックとエコー | 不可解な謎 | ヒンドゥーヴァ | エリート開発者 | JS スクール

---

私たちは中程度です

Tech Koala Insights | エポックズ＆エコーズワールド | インベスター・セントラル・メディア | 不可解な謎 中 | 科学とエポックミディアム | 現代ヒンドゥーヴァ

以上がスケーラブルな Web アプリケーション用の avaScript マイクロフロントエンド パターンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。