BASEのフロントエンド組織の人数が2.5倍になって起きた変化

BASEのフロントエンド組織の人数が 2.5倍になって起きた変化 VueFes Japan Online 2022 スポンサーセッション @gatchan0807 （がっちゃん） © 2012-2022 BASE, Inc. #vuefes_cloudsign @gatchan0807 1

#vuefes_cloudsign @gatchan0807 自己紹介 がっちゃん（Yuki Koga） @gatchan0807 ● BASE株式会社 2021年1月入社 ● 所属: BASE / Product Dev / CRM3 ○ 「共通コンポーネントのテスト実装方法にあえてVRTを 選択した話」のプログラミングをするパンダさんと同じチーム ● 好き：フロントエンド、個人開発、アーニャ（SPY×FAMILY） ○ 「#アニャじぇね」というWebアプリを作ったので、 よければ遊んでみてください〜！ © 2012-2022 BASE, Inc. 2

#vuefes_cloudsign @gatchan0807 感想や質問などの ツイート大歓迎！ © 2012-2022 BASE, Inc. 3

今日お話すること © 2012-2022 BASE, Inc. 4

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

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

• https://devblog.thebase.in/entry/2020/12/02/160000
• https://devblog.thebase.in/entry/2020/09/17/110000

BASEとは どんなプロダクトなのか © 2012-2022 BASE, Inc. 7

#vuefes_cloudsign @gatchan0807 コンセプト： 誰でも簡単に使える ネットショップ作成サービス ● 商品・注文管理 ● ショップデザイン ● 顧客情報管理 などを行うショップオーナー向け機能 + ● 商品検索 ● 決済・注文（カート） などを行う購入者（カスタマー）向け機能 © 2012-2022 BASE, Inc. 8

#vuefes_cloudsign @gatchan0807 拡張機能「BASE Apps」 ショップ運営に必須な機能とは別に、 ショップオーナーが 自身のショップに必要な機能だけを 選択して利用できるようにする仕組み 抽選販売 App クーポン App 広告効果測定 App メッセージ App HTML編集 App 配送日設定 App ブログ App 定期振込 App 他にも外部サービスとの 連携Appも多数… © 2012-2022 BASE, Inc. 9

技術構成は どうなってるのか © 2012-2022 BASE, Inc. 10

#vuefes_cloudsign @gatchan0807 購入者向けページ © 2012-2022 BASE, Inc. 11

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

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

BASEというプロダクトと フロントエンド組織の繋がり © 2012-2022 BASE, Inc. 14

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

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

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

組織の変化に合わせて フロントエンドのコードを どう変化させてきたか © 2012-2022 BASE, Inc. 20

フロントエンドのコードの変遷 #vuefes_cloudsign @gatchan0807 〜2018年ごろ CakePHPのテンプレートエンジン機能 + jQueryやバニラJSによるデータフェッチ © 2012-2022 BASE, Inc. 21

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

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

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

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

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

フロントエンドのコードの変遷 #vuefes_cloudsign @gatchan0807 2021年〜現在 CakePHPで大枠のルーティング + 巨大になったVue.jsアプリケーションを パッケージに分割 © 2012-2022 BASE, Inc. 27

#vuefes_cloudsign @gatchan0807 どんな単位で分割してる？ 拡張機能「BASE Apps」という仕組みは フロントエンドパッケージの分割の単位としてピッタリで、 ディレクトリを機能単位で分けて管理・開発している app-delivery-date/ app-takeout/ © 2012-2022 BASE, Inc. items/ 28

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

• https://devblog.thebase.in/entry/2020/12/02/160000

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

• https://devblog.thebase.in/entry/2020/12/02/160000

BASEのmonorepo化の 工夫と苦労 © 2012-2022 BASE, Inc. 31

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

#vuefes_cloudsign @gatchan0807 ディレクトリ構成（イメージ） After Before - web - web - frontend - src - frontend - shopadmin パッケージ単位 - app - items パッケージ単位 - items - orders パッケージ単位 - orders - app-coupon パッケージ単位 - apps/ - packages - coupon - domain - api-client パッケージ単位 - util パッケージ単位 - infra - components © 2012-2022 BASE, Inc. 33

#vuefes_cloudsign @gatchan0807 2022年8月 ついに約90個のパッケージの 🎉monorepo化完了！🎉 © 2012-2022 BASE, Inc. 34

#vuefes_cloudsign @gatchan0807 monorepo化のメリット ● ビルド単位が細かくなる ○ ビルドの並列化が可能になる ○ ビルド成果物をキャッシュしておくことができるようになる ● BASE Appsや機能（パッケージ）の独立性が保たれる ○ 大人数での開発にも耐えやすくなる（スケールしやすくなる） © 2012-2022 BASE, Inc. 35

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

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

#vuefes_cloudsign @gatchan0807 Turborepoの導入 〜ビルド並列化とキャッシュ利用〜 © 2012-2022 BASE, Inc. 38

#vuefes_cloudsign @gatchan0807 Turborepoとは Next.js / SWR / Hyperなどを提供するVercelが 開発しているmonorepoに適したビルドシステム で、以下のような機能が予め用意されている ● ビルド成果物のキャッシュ ● 並列実行の最適化 ● パッケージ間の依存関係を考慮した再ビルド ○ ※パッケージごとに設定されたビルドコマンドを呼び出す形 © 2012-2022 BASE, Inc. 39

#vuefes_cloudsign @gatchan0807 Turborepoを導入したことによって ローカル環境・デプロイサーバー共に 高速化成功！🎉 336秒 → 292秒 44秒改善！ ※Turborepo導入時の記録 © 2012-2022 BASE, Inc. 40

#vuefes_cloudsign @gatchan0807 monorepo化が進んだ今は さらに恩恵を受けられている！ フルビルド時: 567秒 一部パッケージにのみ 変更があった時: 85秒 © 2012-2022 BASE, Inc. フルキャッシュ時: 12秒 41

#vuefes_cloudsign @gatchan0807 scaffdogの導入 〜新しいパッケージを簡単に作る〜 © 2012-2022 BASE, Inc. 42

#vuefes_cloudsign @gatchan0807 scaffdogとは @wadackel さんが開発している Markdownベースのスキャフォールディングツール 以下のような特徴がある ● 1つの.mdファイルの中に出力する複数ファイルの テンプレートを記述できる ● h1とcodeブロック部分以外はメモとして 利用できるので、後から読みやすい © 2012-2022 BASE, Inc. 43

• https://twitter.com/wadackel

#vuefes_cloudsign @gatchan0807 scaffdogを導入したことによって 新しいパッケージを対話式CLIで生成でき、 属人化せずに作成の手間が省けるように 🎉 © 2012-2022 BASE, Inc. 44

BASEのフロントエンドの これから © 2012-2022 BASE, Inc. 45

#vuefes_cloudsign @gatchan0807 monorepo化後の未来 monorepo化によって、BASE Appsや基本機能内の 影響範囲を（ライブラリ等込で）明確に区切ることができた © 2012-2022 BASE, Inc. 46

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

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

まとめ © 2012-2022 BASE, Inc. 49

今日お話すること（まとめ） 1 #vuefes_cloudsign @gatchan0807 BASEでは中〜大規模になった Vue.jsアプリケーションをどのように運用しているのか © 2012-2022 BASE, Inc. 50

今日お話すること（まとめ） 1 #vuefes_cloudsign @gatchan0807 BASEでは中〜大規模になった Vue.jsアプリケーションをどのように運用しているのか BASEではmonorepoを活用して、 既存のVueのアセットを運用・改善しています！ © 2012-2022 BASE, Inc. 51

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

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

#vuefes_cloudsign @gatchan0807 今日お話しできなかったこと © 2012-2022 BASE, Inc. 54

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

#vuefes_cloudsign @gatchan0807 今日お話しできなかったこと BASEのノーコードエディタ （ショップデザイン編集機能）について カート機能の大規模リプレイス（Next.js） 「BASE テックブログ」で検索！🔍 or カジュアル面談まで󰡇 などなど、他にもお話したいト ピックはたくさん… © 2012-2022 BASE, Inc. 56

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

• https://devblog.thebase.in/entry/2020/12/02/160000

We are hiring! https://herp.careers/v1/base © 2012-2022 BASE, Inc. 58

• https://herp.careers/v1/base