Slide 1

Slide 1 text

freee会計での Module Federationによる マイクロフロントエンドの実践 ichien 2023年4⽉16⽇

Slide 2

Slide 2 text

ここに円に切り抜いた画像を入れてく ださい ichien 2021年にfreeeに⼊社。 中部オフィスに所属。 freee会計の会計事務所向けの新機能開発をやりつつ、 地⽅オフィスでの働き⽅アップデート活動も⾏っている。 趣味は散歩。 Webアプリケーションエンジニア

Slide 3

Slide 3 text

  アジェンダ ● 背景編 ○ なぜwebpack v5のModule Federationを採⽤に⾄ったのか ● 実践編 ○ どうやって実現したのか

Slide 4

Slide 4 text

  ● メイン技術は、React/JavaScript/FlowType/Flux ● バンドラーはwebpack ● Multi Page Application. 画⾯ごとのentryファイル数は250以上. ● ⼤規模フロントコードをwebpackでbuild. 画⾯共通のvendor.jsが誕⽣している. ● Railsベースで10年メンテナンスしている. freee会計のフロントエンド技術構成 ※ 関連する「会計フロントエンドのTypeScript化」セッションがあります。 ぜひ参加してみてください!

Slide 5

Slide 5 text

  作ったもの:freee会計の「仕訳の⼀覧‧登録」

Slide 6

Slide 6 text

  開発で成し遂げたいこと ● インストール型ソフトに匹敵する操作体験をwebで作り出す ○ キーボードのみでの⾼速な移動操作 ○ APIデータのキャッシュ、楽観的UIを駆使した快適なインタラクション ● 未知なる要件を試⾏錯誤できる環境の構築 ○ 簿記知識を必須としないfreee会計で、 税理⼠さん向けの仕訳形式による取引登録機能は、未踏領域への挑戦

Slide 7

Slide 7 text

  ● 課題 ● 開発をフィードバックループを⼩さく‧たくさん回しながら始めていきたい. ● しかし、freee会計が⼤規模すぎてつらい ● 理想 ○ コードベース/デプロイフローを分離することで、⼤きいものを分割して扱いやすくしたい 課題と理想、そして マイクロサービスのアプローチを適⽤できないか 👇 マイクロフロントエンド ● 課題 ● ⼊⼒操作にインタラクションが⾮常に多いため、FEの状態管理が複雑になるのは確実 ● 理想 ○ 要件にあったモダンなFE技術選定を⾃分達でしたい (data fetching library, TypeScriptなど)

Slide 8

Slide 8 text

  マイクロフロントエンドで考えたこと ● 分割:分離する境界を決める ● 結合:分離したものを1つのプロダクトで動かすにはどうするか

Slide 9

Slide 9 text

  マイクロフロントエンドについて 分割 ● ⽔平分割/垂直分割 ○ 画⾯単位から新規作成するため、垂直分割を選択 ※ https://lucamezzalira.medium.com/micro-frontends-decisions-framework-ebcd22256513

Slide 10

Slide 10 text

  マイクロフロントエンドについて 結合 ● 検討したのは2パターン ○ コード/デプロイフロー分離が⽬的なので、client sideを選択 合成パターン 説明 client side ブラウザでHTML/CSS/JSを⽤いてランタイムでレンダリング build time JS/CSSなどのassets build時にソースコード結合

Slide 11

Slide 11 text

  client sideでの合成⽅法を検討 ● 検討した2案 ○ webComponents ○ webpack5 Module Federation

Slide 12

Slide 12 text

  Module federationとは ● webpack5の新機能で、JavaScriptアプリ(host)は別のアプリ(remote)から コードを動的にロードできる機構を提供 ● これにより、マイクロフロントエンドが実現しやすい ● 共通の依存ライブラリのロード制御もでき、 1つのwebpackのビルドであるかのように振る舞える ● マイクロフロントエンドのオーケストレーションツールと理解 (個⼈の意⾒) https://module-federation.github.io/ より https://github.com/module-federation より

Slide 13

Slide 13 text

  client sideでの合成⽅法を検討 ● 検討した2案 ○ webComponents ○ webpack5 Module Federation ● 採⽤理由 (2021/12時点) ○ webpack5の新featureで試してみたかった.(当時はもっと話題になると思ってた.) ○ Reactの書き味はそのまま。webpack pluginがいい感じにしてくれるので、実 践コストは低い ○ 依存ライブラリの共有が可能で、ファイルダウンロードのコスト増を防げる 採用!

Slide 14

Slide 14 text

  図解 Container Component (host) Content Component (remote)

Slide 15

Slide 15 text

  CDN 図解 remoteEntry.js Content Component remote: Content host: freee会計 Container Component 1. entryファイルをfetch 0. build & upload 2. 取得したentryファイルか ら、conent Componentの場 所をwebpackが⾃動解決して fetch & render

Slide 16

Slide 16 text

  0. build & upload :webpack.configの設定 host remote ● ModuleFederationPluginを利⽤

Slide 17

Slide 17 text

  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

Slide 18

Slide 18 text

  ● CDN起点で動作環境ごとに分離したremoteEntry.jsを取得するhook ● host側はremoteのasset置き場を実⾏時に判断します。 これにより、remote側はCDNにアップロードだけすればコード変更が可能になります。 1&2. fetch & render host

Slide 19

Slide 19 text

  動作イメージ

Slide 20

Slide 20 text

  運⽤して⾒えてきた課題 ● リポジトリ分離の結果、freee会計本体の課題感理解や カイゼンに対する関⼼が⾼まりづらい ● turbopack, rspackといった、より⾼速なバンドラーの登場 ○ rspackはサポートを表明しているが、今後の動向を注視する必要がある ○ webComponents化も選択肢に戻ってくる ○ 会計の技術構成次第で、build time合成になる可能性も捨てきれない

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

  参考情報 マイクロフロントエンド ● 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