freee会計でのModule Federationによるマイクロフロントエンドの実践

2023/04/16に開催されたfreee 技術の日 2023 - connpass https://freee.connpass.com/event/274961/ での発表資料です。

発表時間：14:10 - 14:25 @KATARIBAステージ

Transcript

1. freee会計での Module Federationによる マイクロフロントエンドの実践 ichien 2023年4⽉16⽇
2. ここに円に切り抜いた画像を入れてく ださい ichien 2021年にfreeeに⼊社。 中部オフィスに所属。 freee会計の会計事務所向けの新機能開発をやりつつ、 地⽅オフィスでの働き⽅アップデート活動も⾏っている。 趣味は散歩。 Webアプリケーションエンジニア
3. 　 アジェンダ • 背景編 ◦ なぜwebpack v5のModule Federationを採⽤に⾄ったのか • 実践編 ◦ どうやって実現したのか
4. 　 • メイン技術は、React/JavaScript/FlowType/Flux • バンドラーはwebpack • Multi Page Application. 画⾯ごとのentryファイル数は250以上. • ⼤規模フロントコードをwebpackでbuild. 画⾯共通のvendor.jsが誕⽣している. • Railsベースで10年メンテナンスしている. freee会計のフロントエンド技術構成 ※ 関連する「会計フロントエンドのTypeScript化」セッションがあります。 ぜひ参加してみてください！
5. 　 作ったもの：freee会計の「仕訳の⼀覧‧登録」
6. 　 開発で成し遂げたいこと • インストール型ソフトに匹敵する操作体験をwebで作り出す ◦ キーボードのみでの⾼速な移動操作 ◦ APIデータのキャッシュ、楽観的UIを駆使した快適なインタラクション • 未知なる要件を試⾏錯誤できる環境の構築 ◦ 簿記知識を必須としないfreee会計で、 税理⼠さん向けの仕訳形式による取引登録機能は、未踏領域への挑戦
7. 　 • 課題 • 開発をフィードバックループを⼩さく‧たくさん回しながら始めていきたい. • しかし、freee会計が⼤規模すぎてつらい • 理想 ◦ コードベース/デプロイフローを分離することで、⼤きいものを分割して扱いやすくしたい 課題と理想、そして マイクロサービスのアプローチを適⽤できないか 👇 マイクロフロントエンド • 課題 • ⼊⼒操作にインタラクションが⾮常に多いため、FEの状態管理が複雑になるのは確実 • 理想 ◦ 要件にあったモダンなFE技術選定を⾃分達でしたい (data fetching library, TypeScriptなど)
8. 　 マイクロフロントエンドで考えたこと • 分割：分離する境界を決める • 結合：分離したものを1つのプロダクトで動かすにはどうするか
9. 　 マイクロフロントエンドについて 分割 • ⽔平分割/垂直分割 ◦ 画⾯単位から新規作成するため、垂直分割を選択 ※ https://lucamezzalira.medium.com/micro-frontends-decisions-framework-ebcd22256513
10. 　 マイクロフロントエンドについて 結合 • 検討したのは2パターン ◦ コード/デプロイフロー分離が⽬的なので、client sideを選択 合成パターン 説明 client side ブラウザでHTML/CSS/JSを⽤いてランタイムでレンダリング build time JS/CSSなどのassets build時にソースコード結合
11. 　 client sideでの合成⽅法を検討 • 検討した2案 ◦ webComponents ◦ webpack5 Module Federation
12. 　 Module federationとは • webpack5の新機能で、JavaScriptアプリ(host)は別のアプリ(remote)から コードを動的にロードできる機構を提供 • これにより、マイクロフロントエンドが実現しやすい • 共通の依存ライブラリのロード制御もでき、 1つのwebpackのビルドであるかのように振る舞える • マイクロフロントエンドのオーケストレーションツールと理解 (個⼈の意⾒) https://module-federation.github.io/ より https://github.com/module-federation より
13. 　 client sideでの合成⽅法を検討 • 検討した2案 ◦ webComponents ◦ webpack5 Module Federation • 採⽤理由 (2021/12時点) ◦ webpack5の新featureで試してみたかった.（当時はもっと話題になると思ってた.） ◦ Reactの書き味はそのまま。webpack pluginがいい感じにしてくれるので、実 践コストは低い ◦ 依存ライブラリの共有が可能で、ファイルダウンロードのコスト増を防げる 採用！
14. 　 図解 Container Component (host) Content Component (remote)
15. 　 CDN 図解 remoteEntry.js Content Component remote: Content host: freee会計 Container Component 1. entryファイルをfetch 0. build & upload 2. 取得したentryファイルか ら、conent Componentの場 所をwebpackが⾃動解決して fetch & render
16. 　 0. build & upload ：webpack.configの設定 host remote • ModuleFederationPluginを利⽤
17. 　 0. build & upload ：webpack.configの設定 • build成果物を動作環境ごとのCDNにアップロード • 動作環境 ◦ integration：統合 ◦ staging：ステージング ◦ production：本番 動作環境 ファイル名 integration /assets/{integration_name}/remoteEntry.js /assets/{integration_name}/[name].[contenthash].js staging production /assets/staging-remoteEntry.js /assets/remoteEntry.js /assets/[name].[contenthash].js
18. 　 • CDN起点で動作環境ごとに分離したremoteEntry.jsを取得するhook • host側はremoteのasset置き場を実⾏時に判断します。 これにより、remote側はCDNにアップロードだけすればコード変更が可能になります。 1&2. fetch & render host
19. 　 動作イメージ
20. 　 運⽤して⾒えてきた課題 • リポジトリ分離の結果、freee会計本体の課題感理解や カイゼンに対する関⼼が⾼まりづらい • turbopack, rspackといった、より⾼速なバンドラーの登場 ◦ rspackはサポートを表明しているが、今後の動向を注視する必要がある ◦ webComponents化も選択肢に戻ってくる ◦ 会計の技術構成次第で、build time合成になる可能性も捨てきれない
22. 　 参考情報 マイクロフロントエンド • https://martinfowler.com/articles/micro-frontends.html • https://micro-frontends.org/ • O'Reilly Japan - マイクロフロントエンド module federation • Webpack 5 Module Federation: A game-changer in JavaScript architecture • Module Federation · GitHub • dynamic System Host - 実装時、参考にしたexample ◦ https://github.com/module-federation/utilities/tree/main/runtime/im portRemote