マイクロフロントエンド
マイクロ フロントエンドは、マイクロサービスの概念を開発のフロントエンド側に拡張します。 マイクロサービス アーキテクチャを使用してアプリケーションを小さな部分に分割し、フル機能を備えた強力なブラウザ アプリケーションを構築できます。 別々のチームが、異なるフレームワークを使用していても、それらの小さな部分の提供に集中できます。 完成すると、パーツがシームレスに組み合わされ、優れたユーザー エクスペリエンスが生まれます。
マイクロフロントエンドを実装するには、 フロントエンドクライアント拡張機能 を、 フラグメント や ウィジェット などのすぐに使用できるソリューションと組み合わせて使用します。 開発者は、さまざまなフレームワークを使用してアプリケーションを作成または拡張し、クライアント拡張機能を使用してそれらを Liferay に接続できます。
利用可能なフロントエンド クライアント拡張機能の 1 つは、 基本カスタム要素です。 基本的なカスタム要素は、Liferay のフロントエンド インフラストラクチャを使用して、外部のリモート アプリケーションを Liferay プラットフォームに登録し、ウィジェットとしてレンダリングします。 これにより、ユーザーはアプリケーションを個別に開発し、クライアント拡張機能を使用して基本的なカスタム要素を作成し、それらをページに追加できます。
カスタム要素クライアントの拡張は、構築、パッケージ化、ホスティングの方法に関係なく、あらゆるテクノロジーを使用できます。
以下の事例はこの概念を説明しています。
ケース1：レイライフ
Raylife は、Liferay 上に構築されたエージェント ポータル ソリューションです。 カスタマイズ可能なアクセラレータとして機能します。
Raylife には、さまざまなフィールドを持つ保険金請求のリストを表示する React ベースのクライアント拡張機能 、情報を視覚化するフラグメント ブロック (他のブロックに置き換えてさまざまな視覚化を表示できます)、ヘッダー、およびサイド メニュー バーの 4 つの個別のアプリケーションが必要です。
ページ上の要素は、DOM によってトリガーされるイベントを通じて通信し、同期通信を維持し、リソースを共有できます。
画面上のすべてのデータは、データの永続化のために ヘッドレス API と オブジェクト を介して取得されます。
異なるチームが同時にプロジェクトに取り組みました。 各チームがアプリケーションを担当しました。 クライアント拡張機能が使用されたため、各チームのコードは分離されました。 アプリケーションの 1 つは React をメイン フレームワークとして使用しましたが、他のアプリケーションは HTML、CSS、JavaScript を使用したカスタム フラグメントを通じて作成されました。
ケース2: コマースアプリケーション
電子ストア用の Web サイトを作成する必要があると想像してください。 Web サイトには、ヘッダー、フッター、および 4 つのアプリケーションが必要です。メイン ディスプレイ アプリケーション (製品名、画像、説明など)、カート/チェックアウト アプリケーション ([カートに追加] ボタンを含む)、メイン ディスプレイの製品に関連する製品を表示する関連製品アプリケーション、および製品に関する顧客のコメントと製品を評価するための星評価システムを含むコメント/評価セクションです。
レイアウト要素を使用 してページのレイアウトをカスタマイズしたり、ページ内でカスタマイズ可能な OOTB フラグメントとウィジェット (ヘッダー フラグメントやフッター フラグメントなど) を使用したり、クライアント拡張機能を通じて他のアプリケーションを追加したりできます。
さまざまなチームが、必要なフレームワークを使用して、さまざまなアプリケーションを独立して操作できます。 すべてのアプリケーションは、Liferay のネイティブ API (ヘッドレス API またはグローバル JavaScript API) のメリットを享受できます。
