ベリアル、硬化マイクロフロントエンドフレームワーク。

berialは、single-spa複製するマイクロフロントエンドフレームワークです。

用途

html
<one-app></one-app>
<two-app></two-app>

js
import { register, start } from 'berial'

register(
 'one-app',
 '"http://localhost:3000"/one.html',
 (location) => location.hash === '#/app1'
)
register(
 'two-app',
 '"http://localhost:3000"/two.html',
 (location) => location.hash === '#/app2'
)
start()

マイクロ・フロントエンド？

マイクロ・フロントエンドのフレームワークもほぼ同じで、おそらく以下のような機能が含まれていると思います。

ライフサイクル

ライフサイクル・コントロールは当初シングル・スパで行われ、同様の繰り返しキューがベリアルでも再現されています。

js
load  
importHtml -> parser -> shadowdom -> iframe -> sandbox -> bootstrap()
mount ステージ
マウント() -> umount() -> mount() -> unmount() -> ...

おそらくhtmlをインポートし、dom、css、スクリプトを解析し、domとcssをshadowに入れ、スクリプトの上にサンドボックスを置き、ライフサイクルを収集します。これはプロミスキューです。

ロードフェーズは一度だけ実行されます。

その後のルート切り替えは、マウントフックとアンマウントフックを交互に呼び出すだけです。

例えばReact.render()、unmoutも同じです。

最終的にberialは、イベントループのようなライフサイクルキューのセットを実装しました。

サンドックス

マイクロフロントエンドフレームワークのもう一つの機構であるサンドボックス機構には、おおよそ次の2つのオプションがあります。

そのひとつがスナップショット・サンドボックスで、ウィンドウを複数回トラバースして有効化・無効化することで機能しますが、これはベリアルには適用されません。

berialはサンドスカルプティングを使っているので、複数のアプリを共存させるための仕組みであり、同じウィンドウを共有することはできません。

iframeを作成し、ウィンドウのコピーであるiframe.contentWindowを乗っ取るトリックを使えば、答えはイエスです。

そしてプロキシをハイジャックすることで、ほぼ完璧なサンドボックスが出来上がります！

しかし、ハイジャックの問題など、注意すべき点がいくつかあります。ユーザがドキュメントにアクセスした場合、shadowRootにハイジャックする必要があり、document.appendChildにアクセスした場合、iframeにハイジャックする必要があります。

このサンドボックス全体が、バブルを捕獲するメカニズムや、バブルをハイジャックするレイヤーの層になっています。

最新のアップデートで、iframe.contentWindowを使用しない新しいアイデアを見つけました。

新しいアイデアは、コピーを読み書きすることです。これは、オーバーヘッドが多いウィンドウの完全なコピーであるimmerから来ています。

そのため、オブジェクトを書き込む際には、オンデマンドでコピーを作成します。

同様のメカニズムがベリアルにも適用され、ウィンドウのコピーが各サンドボックスに割り当てられる必要があります iframe.obj;

これは、iframeの制限を取り除き、サンドボックスのレイヤーを減らすなど、多くの利点があります。

ついでに言うと、最適化スペースを拡大するために、1つの大きな利便性を追加することができます。

htmlローダー

この部分は、この試合は、実際には全体のコンパイルプロセスを通過する必要がないため、現在のところ、純粋に定期的なものです。

ご興味のある方は、読んでみてください。また、将来的には、このメカニズムを使って、より良い規則性のある書き方や、より高いパフォーマンスを追求する予定です。

グローバルストア

ステートフル通信の最もシンプルなメカニズムは、Proxyを通して実装され、異なるAPP間の通信を容易にします。

そして、ユーザーがマウント段階を交互に複数回、状態を変更できるバッチプロセスが付属しています。