Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

1coin
April 16, 2023

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

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

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

1coin

April 16, 2023
Tweet

More Decks by 1coin

Other Decks in Technology

Transcript

  1.   • メイン技術は、React/JavaScript/FlowType/Flux • バンドラーはwebpack • Multi Page Application. 画⾯ごとのentryファイル数は250以上.

    • ⼤規模フロントコードをwebpackでbuild. 画⾯共通のvendor.jsが誕⽣している. • Railsベースで10年メンテナンスしている. freee会計のフロントエンド技術構成 ※ 関連する「会計フロントエンドのTypeScript化」セッションがあります。 ぜひ参加してみてください!
  2.   • 課題 • 開発をフィードバックループを⼩さく‧たくさん回しながら始めていきたい. • しかし、freee会計が⼤規模すぎてつらい • 理想 ◦

    コードベース/デプロイフローを分離することで、⼤きいものを分割して扱いやすくしたい 課題と理想、そして マイクロサービスのアプローチを適⽤できないか 👇 マイクロフロントエンド • 課題 • ⼊⼒操作にインタラクションが⾮常に多いため、FEの状態管理が複雑になるのは確実 • 理想 ◦ 要件にあったモダンなFE技術選定を⾃分達でしたい (data fetching library, TypeScriptなど)
  3.   マイクロフロントエンドについて 結合 • 検討したのは2パターン ◦ コード/デプロイフロー分離が⽬的なので、client sideを選択 合成パターン 説明

    client side ブラウザでHTML/CSS/JSを⽤いてランタイムでレンダリング build time JS/CSSなどのassets build時にソースコード結合
  4.   Module federationとは • webpack5の新機能で、JavaScriptアプリ(host)は別のアプリ(remote)から コードを動的にロードできる機構を提供 • これにより、マイクロフロントエンドが実現しやすい • 共通の依存ライブラリのロード制御もでき、

    1つのwebpackのビルドであるかのように振る舞える • マイクロフロントエンドのオーケストレーションツールと理解 (個⼈の意⾒) https://module-federation.github.io/ より https://github.com/module-federation より
  5.   client sideでの合成⽅法を検討 • 検討した2案 ◦ webComponents ◦ webpack5 Module

    Federation • 採⽤理由 (2021/12時点) ◦ webpack5の新featureで試してみたかった.(当時はもっと話題になると思ってた.) ◦ Reactの書き味はそのまま。webpack pluginがいい感じにしてくれるので、実 践コストは低い ◦ 依存ライブラリの共有が可能で、ファイルダウンロードのコスト増を防げる 採用!
  6.   CDN 図解 remoteEntry.js Content Component remote: Content host: freee会計

    Container Component 1. entryファイルをfetch 0. build & upload 2. 取得したentryファイルか ら、conent Componentの場 所をwebpackが⾃動解決して fetch & render
  7.   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
  8.   参考情報 マイクロフロントエンド • 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