マイクロフロントエンドについての調査をまとめていきます。
今回はマイクロフロントエンドの概要について記します。後にマイクロフロントエンドの実装方法、技術なども投稿します。
マイクロフロントエンドとは
複雑、肥大化したアプリケーションの開発のため解決策、アイデア。
バックエンドからフロントエンド混合のMicroservicesチームを構成して、それぞれのチームがデータベースから UI に至るまでをすべて実装する。
因みに「Microservice」とはアプリケーションの構成要素を独立したサービス群 (マイクロサービス) へと分け、連携させる手法。
↑一般的なマイクロサービスの構造 [1]
↑マイクロフロントエンドの構造 [1]
マイクロフロントエンドの根底にある考え
使う技術やコードなどの面でそれぞれチーム毎に独立させようという点が重要。
技術
各チームは技術において他チームの影響を受けない。
フレームワークに関しても同様で、それぞれのチームがそれぞれに適したReact,Angular,Vue.jsなどのフレームワークを使うことができる。
コードやルール
技術同様、実際のコードも共有しない。
状態やグローバル変数、コーディングルールなども互いに依存しないよう独立して機能させる。
コンフリクトを避けるためprefixを決めておくとよい。
ブラウザネイティブの API を使う
コンポーネント間のデータのやりとりには、できるだけブラウザネイティブのイベントを使いましょう。
もしコンポーネント間をつなぐ自作の API が必要ならできるだけシンプルにしましょう。
参考
[1] フロントエンドエンジニアは Micro Frontends の夢を見るか
これが一番分かりやすかったので、これを読めば大体わかります。
[2] [翻訳記事]マイクロフロントエンド
詳しく書かれています
この記事について
この記事はThinkings株式会社にて長期インターンの業務として社内Qiitaに投稿したものを、私の個人用Qiitaに再投稿したものになります。許可を受けて再投稿しております。
また、2020/11/12に社内Qiitaに投稿されたものです。