マイクロフロントエンドは、マイクロサービスの概念をフロントエンドに拡張する。目標は、大規模なSPAを、さまざまなテクノロジーを使用し、別々のチームで開発および管理できる小さな独立したアプリケーションに分割することだ。
single-spaは、複数のフロントエンドアプリケーションの構成を単一のプロダクトに簡素化することにより、開発者がその目標を達成するのに役立つフレームワークだ。
single-spaプロジェクトのアーキテクチャは通常、3つ (またはそれ以上) に分けたアプリケーションで構成され、それぞれが独自のリポジトリを使用して個別のプロジェクトとして管理される。
これらのアプリケーションは、手動で構成することも、提供されている create-single-spa CLIツールを使用して生成することもできる。
すべてのsingle-spaの主要部分は、コンテナとプロジェクト構成だ。これは、個々のマイクロフロントエンドプロジェクトのロードとアンロードを調整する単純なHTML/JavaScriptアプリケーションだ。
個々のアプリケーションを管理するために、開発者は組み込みの root-config.js を使用して、各SPAを指定されたルート (route) に登録するか、より複雑なレイアウトオプションを可能にする、より高度なレイアウトエンジンを使用できる。
レイアウトエンジンは一般的なルーティングライブラリと非常によく似ており、開発者は複数のアウトレットを含むベーステンプレートを定義できる。アウトレットの一部は常に表示され、その他は現在のルートに基づいて表示される。
次の例では、公式の single-spa レイアウトドキュメントから抜粋して、固定されたヘッダSPAとフッタSPAのさまざまなユースケースと、URLに基づいてメインコンテンツを変更する動的コンテナを示す一般的なレイアウトを確認できる。
<html>
<head>
<template id="single-spa-layout">
<single-spa-router>
<nav class="topnav">
<application name="@organization/nav"></application>
</nav>
<div class="main-content">
<route path="settings">
<application name="@organization/settings"></application>
</route>
<route path="clients">
<application name="@organization/clients"></application>
</route>
</div>
<footer>
<application name="@organization/footer"></application>
</footer>
</single-spa-router>
</template>
</head>
</html>
フッタやヘッダなどの静的要素は、構成アプリケーションに直接統合できる可能性があるが、より複雑なものはすべて独自のアプリケーションとして管理する必要がある。
残りのSPAは、現在Angular、React、Vue、およびSvelteをサポートしているCLIツールを使用するか、オンラインガイドを使用して手動で構成して生成できる。
最後のステップでは、構成 index.ejs ファイルに新しいアプリケーションをインポートし、さまざまなアプリケーション (Angularアプリケーションのzone.jsなど) で使用できる共有ライブラリを追加 (またはコメント解除) する。
single-app はさまざまなフレームワークとセットアップをサポートしているため、インストールプロセスは少し難しいかもしれないが、初期セットアップが完了すると、統合は非常にスムーズになる。
single-spa をプロダクションに実装する前に、マイクロフロントエンドに関連する多くの落とし穴をカバーする single-spa 推奨セットアップを一読することを推奨する。
single-spaは、MITライセンスの下で利用可能なオープンソースソフトウェアだ。single-spa ガイドラインによる貢献を歓迎する。