Micro Frontends

メモ

いろんなフレームワークをいろんなチームが使うため

まじかよ.icon

2016年末に出てきた考え方らしい

考え方はweb appは独立した複数チームに開発された機能を集約したもの

https://gyazo.com/e7d3c4c5f0f3cf9a8ad9cbccd1158a31

https://gyazo.com/31f3214150b2edfdf995d3f833410179

上で言う右側のアプリについて考えよう

サーバがrenderしたものだけでは不十分な世界線

micro frontendsの考え方

技術選定が自由にできる

作ったものはCustom Elementsで呼び出す

コード同士は分離されるべき

stateもglobal variableも共有せず、リポジトリも分ける

チームのprefixを決める

疑似scoped CSSなりを実現するため、prefixを必ず決める

手運用はつらそう。。。sota1235.icon

code:html

<html>

<body>

<red-footer></red-footer>

<blue-footer></blue-footer>

<green-body></green-body>

</body>

</html>

チーム間のデータのやり取りはBrowserのnative APIを通そう

もしやるならできるだけシンプルに保つ

強いサイトを作る

JSがコケたり実行される前でも使いやすくあるべき

SSRなりしような

SSRしようと思うとCustom Elementsが対応してなくてつらい

感想

相当チームがでかくないとペイしない

エコシステムを整えるのが超大変だと思う

複数のCustom Elementsを使ったときのパフォーマンスが一番気になる

3つならいいけど10, 20個とかなったときのモニタリングとかどうするんだろうって感じ

100人フロントエンドエンジニアがいたらやってもいいかなって感じ

Custom Elementsを利用したアーキテクチャの刷新をGitHubがやったらしい

なるほどなー