マイクロフロントエンド

マイクロサービスは、みなさん、知っていると思います。
別記事の「GraphQL Federation とマイクロサービス」でも説明しました。

GraphQL Federation によって、マイクロサービスをより細かい単位で構成することができます。
サービスを小さくできるということは、多様なシステムに組み込みやすくなります。
小さいということは、ロジックも、複雑にならずに済みます。
複雑じゃないということは、バグも少なくなるし、開発効率も高くできます。
良いこと尽くめだけど、性能についてはやや気になります。

ここまでは、サーバーサイドの話です。

フロントエンドは、どうなるかというと、通常は、1つのアプリとして実装されます。
SPAとして構築する場合は、React や Vue、Angularの1種類を選択して開発することになります。
サーバーサイドのようにマイクロに分割するのが難しいです。
難しいというか、webpack などで、1つにパッケージングしてリリースするのが一般的で、静的に統合buildするというのが定石となっています。
1つのモジュールを小さくできたときのメリットは、上記のサーバーサイドのそれと同じなので、なんとかしたいものです。

そんな悩みを解決してくれそうなのが、マイクロフロントエンド です。

フロントエンドも、マイクロに分割独立させようというものです。
webpack などがそれを実現するモジュールフェデレーションという機能を提供していて、主要ブラウザもサポートしているので、安心して舵を取ることができます。

面白いのは、React、Vue、Angularが混在して使えるという点です。
例えば、ユーザー管理マイクロサービスと対になる形でユーザー管理フロントエンドをReactで開発していて、リソース管理も対になる形でフロントエンドをVueで開発して、それを1つの画面にガッチャンコできるということ。
まぁ、大規模な開発で複数チームが混在する場合はあるだろうけど、小中規模では、あまりそこまで極端な開発をすることはないとは思います。

モジュールフェデレーションでは、ホスト側とリモート側という表現をしますが、ホストはブラウザが最初に読み込むメインの画面のことで、リモートは、include されるマイクロ化されたフロントモジュールです。
include と言ってるのは、静的にパッケージするのではなく、動的 include です。内部的には、 `<script src=”https://micro.example.com/user-service/v1.0/bundle.js“></script>` このようなコードが動的に生成されるみたいです。

ホスト側では、リモートのモジュールで発生したイベントをフックすることができるので、インターセプターのようなことができます。つまり、マイクロフロントエンドも、プラグインによる機能への介入ができるということになります。再利用性と拡張性が高くなります。

設計パターンとしては、マイクロサービスとマイクロフロントエンドとが必ずしも対になるわけではなく、おそらく、マイクロ化するモジュール単位は、サーバーサイドとフロントエンドでは異なると思います。それをうまく統合するのが、 GraphQL Federation ですが、このインターフェース設計は、とても重要で要になるのだろうと思います。

サーバーサイドもフロントエンドも小さく小さく開発できそうなことが、見えてきました。
システム構成をうまく考えると、ちょっとしたプラットフォームにもなりそうです。