【JDオープンソースプロジェクト】マイクロフロントエンドフレームワークMicroApp 1.0正式リリース

[Yuan Chuang Conference プレビュー] 1024 プログラマーズ デー (2 日前)、オープンソース中国オフィスに集合、AI について話しましょう! >>>

導入

MicroAppは、JDフロントエンドチームが立ち上げたマイクロフロントエンドフレームワークで、コンポーネントベースの考え方を採用し、WebComponentクラスをベースにマイクロフロントエンドを描画することで、導入難易度の軽減と作業効率の向上を目指しています。MicroApp はテクノロジー スタックとは何の関係もなく、ビジネスにも結びついていないため、あらゆるフロントエンド フレームワークで使用できます。

• ソースコードアドレス: https://github.com/micro-zoe/micro-app
• 公式サイトアドレス： https: //micro-zoe.github.io/micro-app

マイクロ フロントエンドは、ページ統合ソリューションです。その核心は、巨大なフロントエンド アプリケーションを複数の独立した柔軟な小さなアプリケーションに分割することです。各アプリケーションは、独立して開発、独立して実行、独立してデプロイでき、その後、これらの小さなアプリケーションは、完全なアプリケーションに統合することも、長期間実行されている関連性のない複数のアプリケーションを 1 つのアプリケーションに統合することもできます。マイクロ フロントエンドは、複数のプロジェクトを 1 つに統合するだけでなく、プロジェクト間の結合を減らし、プロジェクトのスケーラビリティを向上させることができます。完全なフロントエンド ウェアハウスと比較して、マイクロ フロントエンド アーキテクチャのフロントエンド ウェアハウスは小さくなる傾向があります。そしてより柔軟に。

アップグレードのハイライト

MicroApp がオープンソースになってから 1 年以上が経過しました。この間、サンドボックスのパフォーマンス、Vite の互換性、ルーティングの競合など、多くの問題に関するフィードバックを受け取りました。これらの問題を解決するために、多くの機能をアップグレードおよび再構築しました。コア機能の継続的な磨きと検証を経て、ついに MicroApp 1.0 の正式版がリリースされました。

正式版へのアップグレードは主に次の点です。

1. より簡単なアクセス方法

2. サンドボックスのパフォーマンス

3. 仮想ルーティング システム

4. スタイルの分離

5. viteと互換性があります

6. 開発ツール

1 行のコード埋め込み

MicroApp は WebComponent のアイデアを活用し、カスタマイズされた ShadowDom と組み合わせた CustomElement を使用して、マイクロ フロント エンドを WebComponent のようなコンポーネントにカプセル化し、マイクロ フロント エンドのコンポーネント化されたレンダリングを実現します。これをベースに、JS分離、スタイル分離、ルーティング分離を実装することで、サブアプリケーションのアクセスコストを削減し、サブアプリケーションはクロスドメインリクエストを許可する設定のみで、マイクロフロントエンドにアクセスできるようになります。任意のコードを変更する 使用方法はiframeと同じ ほぼ同じですが、iframeの問題はありません。

アクセス方法は以下の通りです。

JSサンドボックスのジレンマ

MicroApp がオープンソースになった後、コミュニティからいくつかのフィードバックを受け取りましたが、パフォーマンスに関する問題の 1 つが私たちの注目を集めました。これは MicroApp だけに存在する問題ではなく、マイクロ フロントエンドの長年の問題であり、コミュニティではサンドボックスのパフォーマンスの問題について多くの議論が行われていますが、まだ完全な解決策はありません。

MicroApp は、qiankun と同じプロキシ + サンドボックス ソリューションを使用します。これは、js サンドボックスの現在の主流ソリューションでもあります。with サンドボックスの機能は非常に完成度が高いですが、パフォーマンスの低下は明らかです。コミュニティでは with サンドボックスのパフォーマンスの問題について議論が尽きませんが、特に完璧な解決策はありません。 js のスコープ チェーン。これにより、大量のリクエストが繰り返されます。問題の根本は with にありますが、完全に with の問題ではありません。正確に言うと、with と proxy の重ね合わせによって引き起こされます。with と proxy のパフォーマンスは本質的に高くありません。解決策が必要です。読み取り操作の場合、MicroApp が採用するソリューションは、可変プレフィックスと非同期アンチシェイクです。

• 変数の接頭辞: Object.defineProperty を使用してグローバル変数を定義し、get および set を通じて応答データを設定することを指します。第 1 に、プロキシの get での冗長な操作を回避するためです。第 2 に、defineProperty のパフォーマンスがプロキシのパフォーマンスよりも優れています。

• 非同期アンチシェイク: サブアプリケーションの実行中に Promise にマークを付けることを指し、前の Promise の実行が完了するまで次の Promise が入力されないようにすることで、並列トリガーを回避し、Promise が頻繁にトリガーされるのを防ぎます。パフォーマンスの損失。

これをベースに、MicroApp サンドボックスでは、スナップショット、キャッシュ、プリロードなどの機能も提供しており、機能はそのままに、サンドボックスのパフォーマンス問題を完全に解決し、ネイティブ JS と同等の動作効率を実現しています。

仮想ルーティング システム

マイクロ フロントエンドはレンダリングのために複数の異なる Web アプリケーションを統合しますが、ブラウザーにはルーティング システムが 1 つしかないため、アプリケーション間でルーティングの競合が簡単に発生する可能性があり、最も一般的なのは vue3 のルーティングの競合問題です。

上記は、マイクロ フロントエンド環境における競合問題に対する vue-router 作者の回答です。彼は、vue-router が十分なシナリオをカバーしており、マイクロ フロントエンドの問題はマイクロ ルーターによって解決されるべきであると信じています。 -フロントエンド。

最初にソースを開いたとき、ルーティングを分離しませんでした。MicroApp に関してユーザーが抱えていた問題のほぼ半分はルーティングに関連していました。これは、同時に複数のアプリケーションのレンダリングを満たすことができるルーティング システムは競合を引き起こしやすいためです。また、非常に直感に反し、理解するのが難しいため、仮想ルーティング システムが開始されました。

コンセプトマップ：

仮想ルーティング システムは、ブラウザのルーティング動作と一致しています。位置や履歴などのコア ルーティング API をカスタマイズすることによって、popState および hashChange イベントを書き換え、ルーティング ナビゲーションとイベントをインターセプトし、ブラウジングをシミュレートするための一連のカスタム API を提供します。サーバー環境での Web アプリケーションのレンダリング、ジャンプ、リターン。サブアプリケーションはこの仮想ルーティング システム内で実行され、ベース アプリケーションのルーティングから分離されるため、相互影響が回避され、サブアプリケーションとベース アプリケーション間の対話機能が強化されます。仮想ルーティングシステムにより、ベースアプリケーションはサブアプリケーションのルーティング情報を容易に取得し、サブアプリケーションのジャンプを制御することができ、サブアプリケーションのルーティング情報はパラメータとしてブラウザアドレスに同期されます。さらに、仮想ルーティング システムは、開発者の作業効率を向上させるための多くの機能も提供します。

スタイル分離スキームのアップグレード

MicroApp は当初、スタイル要素の CSSStyleSheet に基づいてスタイル分離を実装しました。つまり、スタイル要素に CSS 文字列を挿入して CSSStyleSheet を生成し、各 CSS ルールを走査し、プレフィックスを追加してスタイル分離を実現しました。

これは、CSS をフォーマットし、これに基づいて変更を加えるブラウザ自体の機能を使用する難しい方法であり、多くの作業を節約します。しかし、ここでも問題が発生し、異なるブラウザでは同じ CSS に対して異なる CSSStyleSheet が生成される可能性があり、そのため CSSStyleSheet の処理時に予期せぬ問題が発生し、結果として CSS のパフォーマンスが不安定になります。

そこで、MicroApp はスタイルの分離を実現する方法を変更しました。通常のルールを使用して CSS 文字列を最小単位に分割しました。各単位には CSS 情報が含まれています。すべての情報を整理して CSSTree を生成し、CSSTree の各ルールを調べ、スタイルの分離。

新しいソリューションは、異なるプラットフォーム間の差異を平滑化するだけでなく、一般的に古いバージョンと比較してパフォーマンスが 30% 以上向上し、より柔軟な構成を備えています。

/* 对指定的选择器禁用样式隔离 *
/*! scopecss-disable .test1, .test2 */
.test1 {
  color: red;
}
.test2 {
  color: yellow;
}
.test3 {
  /* 在某一行中禁用样式隔离 */
  /*! scopecss-disable-next-line */
  background: url(/test.png);
}

vite互換性のある

以前のバージョンでは、MicroApp は vite へのアクセスもサポートしていましたが、vite は esm タイプの js ファイルをパッケージ化しているため、サンドボックスをオフにする必要があり、esm は with 環境では実行できませんが、これにより、ベースとサブサーバーの間で簡単に競合が発生する可能性があります。それらの間の競合には明らかにさらなる最適化が必要です。

この目的のために、私たちは Vite (より正確には esm タイプのプロジェクト用) 用の iframe サンドボックス ソリューションを開発しました。esm タイプの js ファイルを iframe に入れて実行し、サブアプリケーションの基礎となるプロトタイプ チェーンを書き換えることで、 jsと要素のインターセプトと処理を実装します。

iframe サンドボックスと with サンドボックスは実装方法や機能が若干異なり、with サンドボックスはより柔軟な操作が可能、iframe サンドボックスはより厳格な分離環境を備えており、それぞれに長所と短所があります。ユーザーは、より特殊なシナリオの適用範囲と互換性を満たすために、2 つのサンドボックスを柔軟に切り替えることができます。

マイクロアプリ開発ツール

Micro-App-DevTools は、MicroApp をベースにした Chrome ブラウザ プラグインで、MicroApp の開発および使用プロセスの効率を向上させることを目的としています。このプラグインは、デバッグの問題を効果的に解決し、データ通信をシミュレートし、ウィンドウ範囲を表示し、ルーティングを設定し、環境変数やその他の要求を取得できるため、ユーザーが MicroApp を理解し、使用するのに役立ちます。

プランの詳しい説明

Micro-App-DevTools は、子アプリケーションの開発環境をシミュレートし、親アプリケーションのデータを取得して、通信データを視覚的に表示し、開発とデバッグの効率を向上させます。ルーティングの場合、ネストされたアプリケーションのルーティングや親アプリケーションの複数のサブアプリケーションのルーティングを含むすべてのアプリケーションのルーティングが表示されるため、異なるチームのアプリケーションがそれぞれの問題をすばやく特定し、コラボレーションを促進できます。また、スコープをすばやく見つけてトラブルシューティングの効率を向上させるためのグローバル変数と強調表示されたウィンドウ関数も提供し、アイコン、右クリック、およびコンソールのショートカットも統合して、ユーザーがすぐに使い始めてゼロコストで使用できるようにします。

要約する

MicroApp 1.0 がリリースされました。私たちは開発者の質問やフィードバックに積極的に対応し、より多くの開発者が効率と開発エクスペリエンスを向上できるよう改善を続けていきます。皆さんも MicroApp を使用して共同構築に参加してください。また、GitHub でスターを付けてサポートしていただければ幸いです~

MicroApp の Github アドレス:

https://github.com/micro-zoe/micro-app

Micro-App-DevTools Github アドレス:

https://github.com/micro-zoe/micro-app-chrome-plugin

MicroApp公式Webサイトのアドレス：

https://micro-zoe.github.io/micro-app

著者: JD Retail 馬国華

出典：JD Cloud Developer Community 転載の際は出典を明記してください

Qt 6.6が正式リリース Gomeアプリの抽選ページのポップアップウィンドウが創設者を侮辱 Ubuntu 23.10が正式リリース 金曜日を利用してアップグレードするのもいいかもしれません！ RISC-V: 単一の企業や国によって管理されていない Ubuntu 23.10 リリース エピソード: ヘイトスピーチが含まれているため ISO イメージが緊急に「リコール」された ロシアの企業は Loongson プロセッサをベースにしたコンピュータとサーバーを製造している ChromeOS は Google デスクトップを使用する Linux ディストリビューション環境 23 歳の 博士課程学生が Firefox の 22 年前の「ゴーストバグ」を修正 TiDB 7.4 リリース: MySQL 8.0 と正式互換 Microsoft が Windows Terminal Canary バージョンを発表

{{名前}}

{{名前}}