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. freee会計での
    Module Federationによる
    マイクロフロントエンドの実践
    ichien
    2023年4⽉16⽇

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  19.  
    動作イメージ

    View full-size slide

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

    View full-size slide

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

    View full-size slide