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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

© 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

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

© 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...）プロジェクトにメンバー数名をアサインする形プロジェクトにチームごとにアサインする形

Slide 18

Slide 18 text

© 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...）プロジェクトにメンバー数名をアサインする形プロジェクトにチームごとにアサインする形

Slide 19

Slide 19 text

© 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...）プロジェクトにメンバー数名をアサインする形プロジェクトにチームごとにアサインする形

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

© 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

Slide 30

Slide 30 text

© 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

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

© 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 パッケージ単位パッケージ単位パッケージ単位パッケージ単位パッケージ単位パッケージ単位

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Slide 42

Slide 42 text

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Slide 46

Slide 46 text

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Slide 50

Slide 50 text

Slide 51

Slide 51 text

Slide 52

Slide 52 text

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

Slide 55

Slide 55 text

Slide 56

Slide 56 text

Slide 57

Slide 57 text

© 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化以外の部分は現在進行中！

Slide 58

Slide 58 text