$30 off During Our Annual Pro Sale. View Details »

BASEのフロントエンド組織の人数が2.5倍になって起きた変化 / Changes that occurred as the number of people in the front-end organization increased

BASEのフロントエンド組織の人数が2.5倍になって起きた変化 / Changes that occurred as the number of people in the front-end organization increased

Vue Fes Japan Online 2022のBASE株式会社のスポンサーセッションで登壇した資料です。
https://vuefes.jp/2022/sponsor-sessions/base

2020年9月に公開されたテックブログ「BASEにおけるVue.jsのこれまでとこれから」( https://devblog.thebase.in/entry/2020/09/17/110000 )から2年経ち、当時から比べるとフロントエンド組織の人数が2.5倍に増加しました。
本セッションでは、記事公開から2年の間の組織の変遷と合わせて、人数増加に伴って拡大したBASEのVue.jsのコードベースのmonorepo化と、既存のVue資産の運用と今後の展望についてお話をします。

がっちゃん

October 16, 2022
Tweet

More Decks by がっちゃん

Other Decks in Programming

Transcript

  1. © 2012-2022 BASE, Inc. 1 #vuefes_cloudsign @gatchan0807 BASEのフロントエンド組織の人数が 2.5倍になって起きた変化 VueFes

    Japan Online 2022 スポンサーセッション @gatchan0807 (がっちゃん)
  2. © 2012-2022 BASE, Inc. 2 #vuefes_cloudsign @gatchan0807 自己紹介 がっちゃん(Yuki Koga)

    @gatchan0807 • BASE株式会社 2021年1月入社 • 所属: BASE / Product Dev / CRM3 ◦ 「共通コンポーネントのテスト実装方法にあえてVRTを 選択した話」のプログラミングをするパンダさんと同じチーム • 好き:フロントエンド、個人開発、アーニャ(SPY×FAMILY) ◦ 「#アニャじぇね」というWebアプリを作ったので、 よければ遊んでみてください〜!
  3. © 2012-2022 BASE, Inc. 3 #vuefes_cloudsign @gatchan0807 感想や質問などの ツイート大歓迎!

  4. © 2012-2022 BASE, Inc. 4 © 2012-2022 BASE, Inc. 4

    今日お話すること
  5. © 2012-2022 BASE, Inc. 5 #vuefes_cloudsign @gatchan0807 今日お話すること 1 2

    BASEのフロントエンドは これからどこに進んでいくのか BASEでは中〜大規模になった Vue.jsアプリケーションをどのように運用しているのか
  6. © 2012-2022 BASE, Inc. 6 #vuefes_cloudsign @gatchan0807 以下の記事から2年経った今 2020年12月2日公開 Vue.js

    3 アップデート対応の現状報告 Vue.js 2.6からVue.js 3にアップデートしていく際にどのような作業を 行っていくのかの戦略と実施した具体的な作業の一部を 解説している記事 2020年9月17日公開 BASEにおけるVue.jsのこれまでとこれから 2018年時点のフロントエンド技術のリプレース時に、Vue.jsを 選択してから2020年末時点までの振り返りと BASEのフロントエンド技術に対する基本的な考え方が書かれた記事 https://devblog.thebase.in/entry/2020/12/02/160000 https://devblog.thebase.in/entry/2020/09/17/110000
  7. © 2012-2022 BASE, Inc. 7 © 2012-2022 BASE, Inc. 7

    BASEとは どんなプロダクトなのか
  8. © 2012-2022 BASE, Inc. 8 #vuefes_cloudsign @gatchan0807 コンセプト: 誰でも簡単に使える ネットショップ作成サービス

    • 商品・注文管理 • ショップデザイン • 顧客情報管理 などを行うショップオーナー向け機能 + • 商品検索 • 決済・注文(カート) などを行う購入者(カスタマー)向け機能
  9. © 2012-2022 BASE, Inc. 9 #vuefes_cloudsign @gatchan0807 ショップ運営に必須な機能とは別に、 ショップオーナーが 自身のショップに必要な機能だけを

    選択して利用できるようにする仕組み 拡張機能「BASE Apps」 抽選販売 App クーポン App 広告効果測定 App メッセージ App HTML編集 App 配送日設定 App ブログ App 定期振込 App 他にも外部サービスとの 連携Appも多数…
  10. © 2012-2022 BASE, Inc. 10 © 2012-2022 BASE, Inc. 10

    技術構成は どうなってるのか
  11. © 2012-2022 BASE, Inc. 11 #vuefes_cloudsign @gatchan0807 購入者向けページ

  12. © 2012-2022 BASE, Inc. 12 #vuefes_cloudsign @gatchan0807 ショップオーナー向けページ

  13. © 2012-2022 BASE, Inc. 13 #vuefes_cloudsign @gatchan0807 ショップオーナー向けページ ここのお話は パンダさんの発表にて

  14. © 2012-2022 BASE, Inc. 14 © 2012-2022 BASE, Inc. 14

    BASEというプロダクトと フロントエンド組織の繋がり
  15. © 2012-2022 BASE, Inc. 15 #vuefes_cloudsign @gatchan0807 2020年〜2022年にかけて、コロナ禍によるEC需要が高まり、 プロダクトの利用者が急増した プロダクト利用者の急増

  16. © 2012-2022 BASE, Inc. 16 #vuefes_cloudsign @gatchan0807 伴ってエンジニア組織の拡大 フロントエンド組織の人数 (業務委託メンバー含む)

    エンジニア組織全体の人数 (業務委託メンバー含む)
  17. © 2012-2022 BASE, Inc. 17 #vuefes_cloudsign @gatchan0807 組織の変遷 2018年12月 【数名】

    デザイナー組織からスピンオフしてフロントエンド組織誕生 (frontend チーム) 2021年1月 【10名弱】 フロントエンド組織が2チームに分割(gatchan0807 + 3名がJOIN) (frontend1 / frontend2 チーム) 2022年9月現在 【20名弱】 フロントエンド/バックエンド問わず所属する8チームに (CRMチーム、Sales Promotionチーム、 etc...) プロジェクトにメンバー数名をアサインする形 プロジェクトにチームごとにアサインする形
  18. © 2012-2022 BASE, Inc. 18 #vuefes_cloudsign @gatchan0807 組織の変遷 2018年12月 【数名】

    デザイナー組織からスピンオフしてフロントエンド組織誕生 (frontend チーム) 2021年1月 【10名弱】 フロントエンド組織が2チームに分割(gatchan0807 + 3名がJOIN) (frontend1 / frontend2 チーム) 2022年9月現在 【20名弱】 フロントエンド/バックエンド問わず所属する8チームに (CRMチーム、Sales Promotionチーム、 etc...) プロジェクトにメンバー数名をアサインする形 プロジェクトにチームごとにアサインする形
  19. © 2012-2022 BASE, Inc. 19 #vuefes_cloudsign @gatchan0807 組織の変遷 2018年12月 【数名】

    デザイナー組織からスピンオフしてフロントエンド組織誕生 (frontend チーム) 2021年1月 【10名弱】 フロントエンド組織が2チームに分割(gatchan0807 + 3名がJOIN) (frontend1 / frontend2 チーム) 2022年9月現在 【20名弱】 フロントエンド/バックエンド問わず所属する8チームに (CRMチーム、Sales Promotionチーム、 etc...) プロジェクトにメンバー数名をアサインする形 プロジェクトにチームごとにアサインする形
  20. © 2012-2022 BASE, Inc. 20 © 2012-2022 BASE, Inc. 20

    組織の変化に合わせて フロントエンドのコードを どう変化させてきたか
  21. © 2012-2022 BASE, Inc. 21 #vuefes_cloudsign @gatchan0807 フロントエンドのコードの変遷 〜2018年ごろ CakePHPのテンプレートエンジン機能

    + jQueryやバニラJSによるデータフェッチ
  22. © 2012-2022 BASE, Inc. 22 #vuefes_cloudsign @gatchan0807 フロントエンドのコードの変遷 2019年〜2020年ごろ CakePHPで大枠のルーティング

    + Vue.jsで機能単位で分けた小さなSPAで画面を構築
  23. © 2012-2022 BASE, Inc. 23 #vuefes_cloudsign @gatchan0807 フロントエンドのコードの変遷 2019年〜2020年ごろ CakePHPで大枠のルーティング

    + Vue.jsで機能単位で分けた小さなSPAで画面を構築
  24. © 2012-2022 BASE, Inc. 24 #vuefes_cloudsign @gatchan0807 フロントエンドのコードの変遷 2019年〜2020年ごろ CakePHPで大枠のルーティング

    + Vue.jsで機能単位で分けた小さなSPAで画面を構築
  25. © 2012-2022 BASE, Inc. 25 #vuefes_cloudsign @gatchan0807 フロントエンドのコードの変遷 2019年〜2020年ごろ CakePHPで大枠のルーティング

    + Vue.jsで機能単位で分けた小さなSPAで画面を構築
  26. © 2012-2022 BASE, Inc. 26 #vuefes_cloudsign @gatchan0807 フロントエンドのコードの変遷 2019年〜2020年ごろ CakePHPで大枠のルーティング

    + Vue.jsで機能単位で分けた小さなSPAで画面を構築 ローカル環境と デプロイ時のビルド時間の 肥大化が問題に!
  27. © 2012-2022 BASE, Inc. 27 #vuefes_cloudsign @gatchan0807 フロントエンドのコードの変遷 2021年〜現在 CakePHPで大枠のルーティング

    + 巨大になったVue.jsアプリケーションを パッケージに分割
  28. © 2012-2022 BASE, Inc. 28 #vuefes_cloudsign @gatchan0807 拡張機能「BASE Apps」という仕組みは フロントエンドパッケージの分割の単位としてピッタリで、

    ディレクトリを機能単位で分けて管理・開発している どんな単位で分割してる? app-delivery-date/ app-takeout/ items/
  29. © 2012-2022 BASE, Inc. 29 #vuefes_cloudsign @gatchan0807 (2020年末時点の記事からの抜粋) • Deprecatedな機能の置き換え

    • 社内UIライブラリ(BBQ)のVue3対応 • monorepo化と依存整理 • packageごとにバージョンを切り替えて徐々に移行 2020年末のブログ記事でも言及 https://devblog.thebase.in/entry/2020/12/02/160000
  30. © 2012-2022 BASE, Inc. 30 #vuefes_cloudsign @gatchan0807 (2020年末時点の記事からの抜粋) • Deprecatedな機能の置き換え

    • 社内UIライブラリ(BBQ)のVue3対応 • monorepo化と依存整理 • packageごとにバージョンを切り替えて徐々に移行 2020年末のブログ記事でも言及 https://devblog.thebase.in/entry/2020/12/02/160000
  31. © 2012-2022 BASE, Inc. 31 © 2012-2022 BASE, Inc. 31

    BASEのmonorepo化の 工夫と苦労
  32. © 2012-2022 BASE, Inc. 32 #vuefes_cloudsign @gatchan0807 BASEのmonorepoの特徴 → 機能単位で分けるmonorepo

  33. © 2012-2022 BASE, Inc. 33 #vuefes_cloudsign @gatchan0807 ディレクトリ構成(イメージ) - web

    - frontend - src - app - items - orders - apps/ - coupon - domain - infra - components - web - frontend - shopadmin - items - orders - app-coupon - packages - api-client - util Before After パッケージ単位 パッケージ単位 パッケージ単位 パッケージ単位 パッケージ単位 パッケージ単位
  34. © 2012-2022 BASE, Inc. 34 #vuefes_cloudsign @gatchan0807 2022年8月 ついに約90個のパッケージの 🎉monorepo化完了!🎉

  35. © 2012-2022 BASE, Inc. 35 #vuefes_cloudsign @gatchan0807 monorepo化のメリット • ビルド単位が細かくなる

    ◦ ビルドの並列化が可能になる ◦ ビルド成果物をキャッシュしておくことができるようになる • BASE Appsや機能(パッケージ)の独立性が保たれる ◦ 大人数での開発にも耐えやすくなる(スケールしやすくなる)
  36. © 2012-2022 BASE, Inc. 36 #vuefes_cloudsign @gatchan0807 • ビルドのワークフロー /

    ビルド成果物の管理が煩雑になり、速度も低下 ◦ 細かく分けた事によってオーバーヘッドが生まれ、そのまま全てビルドする形だと フルビルドにかかる時間が長くなってしまった • ボイラープレートが増え、パッケージの新規作成が大変 ◦ package.json / webpack.config.jsなど、パッケージごとに用意する必要が あるものがたくさんあって、開発初期の手間が増えてしまった monorepo化しても残った課題
  37. © 2012-2022 BASE, Inc. 37 #vuefes_cloudsign @gatchan0807 • ビルドのワークフロー /

    ビルド成果物の管理が煩雑になり、速度も低下 ◦ 細かく分けた事によってオーバーヘッドが生まれ、そのまま全てビルドする形だと フルビルドにかかる時間が長くなってしまった ⇒ Turborepoの導入 • ボイラープレートが増え、パッケージの新規作成が大変 ◦ package.json / webpack.config.jsなど、パッケージごとに用意する必要が あるものがたくさんあって、開発初期の手間が増えてしまった ⇒ scaffdogの導入 monorepo化しても残った課題
  38. © 2012-2022 BASE, Inc. 38 #vuefes_cloudsign @gatchan0807 Turborepoの導入 〜ビルド並列化とキャッシュ利用〜

  39. © 2012-2022 BASE, Inc. 39 #vuefes_cloudsign @gatchan0807 Next.js / SWR

    / Hyperなどを提供するVercelが 開発しているmonorepoに適したビルドシステム で、以下のような機能が予め用意されている • ビルド成果物のキャッシュ • 並列実行の最適化 • パッケージ間の依存関係を考慮した再ビルド ◦ ※パッケージごとに設定されたビルドコマンドを呼び出す形 Turborepoとは
  40. © 2012-2022 BASE, Inc. 40 #vuefes_cloudsign @gatchan0807 Turborepoを導入したことによって ローカル環境・デプロイサーバー共に 高速化成功!🎉

    336秒 → 292秒 44秒改善! ※Turborepo導入時の記録
  41. © 2012-2022 BASE, Inc. 41 #vuefes_cloudsign @gatchan0807 monorepo化が進んだ今は さらに恩恵を受けられている! フルビルド時:

    567秒 フルキャッシュ時: 12秒 一部パッケージにのみ 変更があった時: 85秒
  42. © 2012-2022 BASE, Inc. 42 #vuefes_cloudsign @gatchan0807 scaffdogの導入 〜新しいパッケージを簡単に作る〜

  43. © 2012-2022 BASE, Inc. 43 #vuefes_cloudsign @gatchan0807 scaffdogとは @wadackel さんが開発している

    Markdownベースのスキャフォールディングツール 以下のような特徴がある • 1つの.mdファイルの中に出力する複数ファイルの テンプレートを記述できる • h1とcodeブロック部分以外はメモとして 利用できるので、後から読みやすい
  44. © 2012-2022 BASE, Inc. 44 #vuefes_cloudsign @gatchan0807 scaffdogを導入したことによって 新しいパッケージを対話式CLIで生成でき、 属人化せずに作成の手間が省けるように

    🎉
  45. © 2012-2022 BASE, Inc. 45 © 2012-2022 BASE, Inc. 45

    BASEのフロントエンドの これから
  46. © 2012-2022 BASE, Inc. 46 #vuefes_cloudsign @gatchan0807 monorepo化後の未来 monorepo化によって、BASE Appsや基本機能内の

    影響範囲を(ライブラリ等込で)明確に区切ることができた
  47. © 2012-2022 BASE, Inc. 47 #vuefes_cloudsign @gatchan0807 monorepo化後の未来 ⇒ BASE

    Appsや基本機能の新規開発・リニューアル時に、 Vueのバージョンやフレームワーク / ライブラリに縛られずに 個別に技術選定・アップデートをできるように monorepo化によって、BASE Appsや基本機能内の 影響範囲を(ライブラリ等込で)明確に区切ることができた
  48. © 2012-2022 BASE, Inc. 48 #vuefes_cloudsign @gatchan0807 ⇒ BASE Appsや基本機能の新規開発・リニューアル時に、

    Vueのバージョンやフレームワーク / ライブラリに縛られずに 個別に技術選定・アップデートをできるように monorepo化後の未来 monorepo化によって、BASE Appsや基本機能内の 影響範囲を(ライブラリ等込で)明確に区切ることができた これからここをやっていくぞ!!!
  49. © 2012-2022 BASE, Inc. 49 © 2012-2022 BASE, Inc. 49

    まとめ
  50. © 2012-2022 BASE, Inc. 50 #vuefes_cloudsign @gatchan0807 今日お話すること(まとめ) 1 BASEでは中〜大規模になった

    Vue.jsアプリケーションをどのように運用しているのか
  51. © 2012-2022 BASE, Inc. 51 #vuefes_cloudsign @gatchan0807 今日お話すること(まとめ) BASEではmonorepoを活用して、 既存のVueのアセットを運用・改善しています!

    1 BASEでは中〜大規模になった Vue.jsアプリケーションをどのように運用しているのか
  52. © 2012-2022 BASE, Inc. 52 #vuefes_cloudsign @gatchan0807 今日お話すること(まとめ) BASEのフロントエンドは これからどこに進んでいくのか

    2 BASEでは中〜大規模になった Vue.jsアプリケーションをどのように運用しているのか 1 BASEではmonorepoを活用して、 既存のVueのアセットを運用・改善しています!
  53. © 2012-2022 BASE, Inc. 53 #vuefes_cloudsign @gatchan0807 今日お話すること(まとめ) BASEのフロントエンドは これからどこに進んでいくのか

    2 BASEでは中〜大規模になった Vue.jsアプリケーションをどのように運用しているのか 1 BASEではmonorepoを活用して、 既存のVueのアセットを運用・改善しています! monorepoに分けたパッケージ内で細かくライブラリ アップデートや機能改善を行っていきます!
  54. © 2012-2022 BASE, Inc. 54 #vuefes_cloudsign @gatchan0807 今日お話しできなかったこと

  55. © 2012-2022 BASE, Inc. 55 #vuefes_cloudsign @gatchan0807 などなど、他にもお話したいト ピックはたくさん… 今日お話しできなかったこと

    BASEのノーコードエディタ (ショップデザイン編集機能)について カート機能の大規模リプレイス(Next.js)
  56. © 2012-2022 BASE, Inc. 56 #vuefes_cloudsign @gatchan0807 などなど、他にもお話したいト ピックはたくさん… 今日お話しできなかったこと

    BASEのノーコードエディタ (ショップデザイン編集機能)について カート機能の大規模リプレイス(Next.js) 「BASE テックブログ」で検索!🔍 or カジュアル面談まで󰡇
  57. © 2012-2022 BASE, Inc. 57 #vuefes_cloudsign @gatchan0807 (2020年末時点の記事からの抜粋) • Deprecatedな機能の置き換え

    • 社内UIライブラリ(BBQ)のVue3対応 • monorepo化と依存整理 • packageごとにバージョンを切り替えて徐々に移行 2020年末のブログ記事でも言及 https://devblog.thebase.in/entry/2020/12/02/160000 monorepo化以外の部分は 現在進行中!
  58. © 2012-2022 BASE, Inc. 58 © 2012-2022 BASE, Inc. 58

    We are hiring! https://herp.careers/v1/base