1.フロントエンドマイクロは何ですか
フロントエンドマイクロマイクロメインドローバックエンドサービスのコンセプト。簡単に言えば、ビッグマック（モノリス）に小さなプロジェクトエンジニアリングフロントエンドに分割されます。彼らは完全に独立した開発、動作能力を備えています。システム全体は達成し、すべてのページの相互作用を実証するために、これらの小さなプロジェクトに協力します。
マイクロサービスあなたは比較を理解するために従うことができるように：
| マイクロサービス | マイクロフロントエンド |
|---|---|
| マイクロサービスは、一般的にインターフェースのセットで構成され、インターフェイスアドレスはURLです。サービスはリクエストのマイクロ・インターフェースを受信した場合には、適切なルーティングロジック、出力応答内容を検索します。 | マイクロ先端がページのセットで構成され、ページアドレスがURLです。要求は、フロントエンドマイクロページのURLを受信した場合、そのページのコンテンツをレンダリングするための適切なコンポーネントを見つけるためにルーティングされます。 |
| マイクロサービスは、すべてのクライアントを受信するための単一の入口インターフェイスを要求して、インターフェースが対応するサービスにルーティングサービスのURL、との整合関係に応じて、バックエンドのゲートウェイを持っています。 | マイクロフロントエンドマイクロルーティング応答URLによって、マイクロフロントエンドとの整合関係に応じて、すべてのアクセスにページをURLを受信する単一の入口として、対応する選択されたマイクロ・ローディングの前端をページのURLをフロントエンドローダーを有することになります。 |
1.1マイクロフロントエンドアーキテクチャ
マイクロ一般フロントエンドアーキテクチャは、次の方法により行うことができます。
- 複数のアプリケーションをリダイレクトするために、ルーティングHTTPサーバを使用します
- デザインコミュニケーション、などMooaとシングルSPAなど、さまざまなフレームワーク、上のローディング機構
- アセンブリを介して独立した複数のアプリケーションの組合せの単一のアプリケーションを構築します
- iFrameの。IFrameとメッセージパッシングのカスタムを使用して
- 純粋なWebコンポーネントを使用してビルドアプリケーション
- 組み合わせたWebコンポーネントの構築
2.なぜマイクロフロントエンドを使用します
主に以下のいくつかの角度から
- パッキングスピード
- ページの読み込み速度
- マルチユーザコラボレーション
- SASS製品のカスタマイズ
- 製品スプリット
2.1パッキングスピード
エンジニアリングはますますゆっくり梱包、成長しています。EDXは、全体のパッケージング工程を終える考えてみて、どのくらいの時間？静的リソースEDXニーズに20-30分をコンパイルします。
6ヶ月前、私たちは見たことがなかったか、B-エンドは、モノリスのエンジニアリング。20以上の依存、60の以上の公共アセンブリ、200ページ以上、700の以上のドッキングインタフェースはすでにありました。私たちは、WebPACKの2を使用し、DLLプラグイン、HappyPack 4を有効にします。図4は、私の個人的なホスト、おそらく5分でスレッドを使用してコンパイル。分割しない場合と、我々は今、約400ページ、1,000以上のドッキングインターフェースを行っています。
この平均時間は何でしょうか？それだけでも、チーム全体の効率に影響を与えるだろう、時間に私達の開発を遅らせることはありません。オンラインときなどドッカー、CI環境、で、時間がかかるが拡張されます。いくつかのバグの後に行を修復するためにすぐに展開した場合は、それが何であるかを時間を知るために来ていません。
マイクロフロントエンド変換を使用した後、我々は現在、30〜45秒の間に26マイクロフロントエンドエンジニアリング、パッケージ化された平均時間を持っています。
2.2マルチユーザコラボレーション
ブロックされている紛争のリスクを提出するマイクロフロントエンドのコードを使用した後、それは各プロジェクトに等しい株式に上がります。
コラボレーションでは、我々は、フロントエンドの代表チームで同じプロジェクトで非常に多くの人々の発展を3ヶ所を持って、競合の確率は、コードが非常に頻繁になり、影響が比較的大きい葛藤だった苦しみました。問題は、コード内で発生した場合、主要なCIは、他のすべての人のコードを失敗し、更新もブロックされます提出します。
2.3サス製品 - カスタマイズとローカライズ
ハートは、SaaSの製品を望んでいるが、顧客は常にカスタマイズを行います。
カスタマイズしばしば手段は、コード内の「カスタムビジネスロジック」にそれをこします。
ローカライズはすべての顧客にソースコードを配置する方法はないのコードのセキュリティ面を考慮しなければならない、カスタムを実装することができますか？
彼が購入していることだけで、顧客へのフロントエンドモジュールのソースコード - マイクロフロントエンド技術を通じ、我々は簡単にローカライズコードセキュリティの下限に到達することができます。カスタマイズ最も簡単なスタンドアローンの新しいモジュールもシンプル：新しいマイクロフロントエンドエンジニアリングを追加するためのデリバリー・チームは可能で、既存のR＆Dプロジェクトにそれをこすりする必要はありません。
マイクロフロントエンドアプリケーションを統合する方法3
マイクロプログラムの前で、私たちが解決しなければならないいくつかの問題があります。
- フロントエンドに対応する後端部の複数の必要
アプリケーション登録メカニズムのシームレスな統合を提供し、アプリケーションを完成
- オープン統一、大規模なプラットフォーム上でどのように異なるサブシステム事業を集中するには？
- サービス・モジュールの異なるユーザへの自由なアクセス権を禁止しながら、それが特定のサービス・モジュールのプラットフォームにアクセスできるように権限を与えるためにどのように？
- どのように同期機能を確保するために、新しいサブシステム、およびサブシステムのバージョン管理を迅速にアクセスするには？
統合アプリケーションおよびデプロイアプリケーションの独立したリリースビルド
3.1エントランスプロジェクト
最後の行は、単一ページのアプリケーションを実行し、アプリケーションの独立のプロジェクトの開発要件されます。だから我々は、様々なアプリケーションを統合するための新しい入り口のプロジェクトを作成しました。プロジェクト（ポータル）、加えて「サブ」の登録、マージ機能を提供するだけでなく、のような、いくつかの公的支援を提供への入り口
ユーザーのログインメカニズムが
SSOの問題へのユーザーのログインおよび認証を統一され、すべてのプロジェクトは、ビジネス・システム間でのユーザ認証のセキュリティの一貫性を保護するように、アクセスのバックエンドサーバーSSOに、ログイン状態を確認しています。公共リファレンスライブラリは、
すべてのビジネスプロジェクトは、独立したフロントエンドエンジニアリングで、そうなのVue、瞬間、lodashなどと同じ依存関係のいくつかがあるでしょう。これらの要素は、あまりにも多くの冗長コード、メモリ圧力が上昇を実行しているブラウザを引き起こすことがバインドされている彼らのvendor.jsにパックされている場合。我々は、これらの公共、公共アセンブリ、CSS、フォントに依存しているので、プロジェクトに上で、パッケージによるプロジェクトは、組立輸出を依存し、グローバルUMDの道に注入されます。メニューを取るための許可
グローバル例外ハンドラ
- グローバル数大きいカラム マイクロ前端[毎日のメモ] RBIによります
3.2ルート配布アプリケーション
単一ページのアプリケーションでは、我々はルート配布コンポーネントに基づいて行われます。フロントエンドマイクロプロジェクトでは、我々は、さまざまなアプリケーションへのルート配布する必要があります。
- HTTPリバースプロキシ
これは通常、リバースHTTPプロキシサーバによって達成することができます。しかし、これより集約複数のフロントエンド・アプリケーションへの道のように見えますが、我々は、彼らが完全に全体のように見えるようにすることを一緒に一緒にこれらの異なるアプリケーションを配置します。しかし、毎回BにAからユーザ・アプリケーションは、アプリケーションはページを更新する必要がある場合。
非同期的にロードされたJavaScriptクライアント
この方法では、Ajaxの負荷のアプリケーションを介してクライアントのブラウザで、異なるモジュールの内容は、対応するdiv要素に挿入されますが、手動でも仕事にそれのための各スクリプトタグを複製しなければなりません。
「サブプロジェクト」外部出力HTMLページはエントリを必要としない、リソースファイルしか出力できない、JS、CSS、フォントなどIMGSに含むリソースファイル、。1
2
3
4
5
6
7
8
9
10機能 （要素） {
[] .forEach.call（element.querySelectorAll（ 'スクリプト'）、関数（nonExecutableScript） { VARのスクリプト=文書 .createElement（ "スクリプト"）; script.setAttribute（ "SRC"、nonExecutableScript.src） ; script.setAttribute（ "タイプ"、 "テキスト/ javascriptの"）; element.appendChildを（スクリプト）; }）; }
文書 .querySelectorAll（'.LOADアプリ'）.forEach（loadPage）。コンポーネントのWebは
、VUEの再利用可能なコンポーネントをREACT。各コンポーネントは、独立して、それらのメインアプリケーションプログラムは、最終的なアプリケーションに組み込ま用いて開発されています。1
2
3
4
5
6
7クラス ヘッダー 延び のHTMLElement {
attachedCallback（）{
ReactDOM.render（ < アプリケーション />、this.createShadowRoot（））。
}
}
document.registerElement（ 'microfrontendsヘッダ'、ヘッダー）。
4.いくつかのフレームワーク
4.1シングル・スパ
単一-SPAは、フロントエンドアプリケーションで一緒に複数のJavaScript microfrontendsをもたらすためのフレームワークです。
負荷にシングルスパを構築するために反応する+ VUE 2のApp：https://dev.to/dabit3/building-micro-frontends-with-react-vue-and-single-spa-52op
公式文書：HTTPS：// single-spa.js.org/docs/getting-started-overview.html
公式デモ：https://single-spa.surge.sh/
デモ倉庫：https://github.com/CanopyTax/single-spa-examples
1 |
gitのクローン[email protected]：CanopyTax /シングルスパ- examples.git |