$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

がっちゃん
October 16, 2022
Programming
0
1.8k

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 がっちゃん

See All by がっちゃん
アプリケーションのデプロイを高速化するためにnode_modulesに手を出した話 / A story about peeking inside node_modules to speed up the deployment of applications.
gatchan0807
0
1.7k
Changelogを読んで自分のエンジニアキャリアを作る
gatchan0807
1
1.5k
次元を超える事業家集団っぽいフロントエンドの話
gatchan0807
0
1.6k
PWACompatを本番導入してみた話 - PWANight #4 LT
gatchan0807
2
2.3k

Other Decks in Programming

See All in Programming
実践PubSubマイクロサービス / Implementation Pub Sub microservice
nrslib
3
940
Immutability Against The Machine
miciek
0
190
BigQuery のデータ品質やデータ活用を高める Dataplex 等の活用
mot_techtalk
4
750
Hono v3 and v4
yusukebe
4
2.5k
Gatlingによる負荷テスト入門
irof
6
530
Accelerating App Dev with Cloudflare Workers
chimame
1
200
集団意思決定の落とし穴と誰も望まない技術的負債
h0r15h0
0
2k
フロントエンドの書くべきだったテスト、書かなくてよかったテスト
takefumiyoshii
31
11k
OpenMPW 2023 技術ぽい理解
ryos36
0
150
非同期ツールキット「Vert.x」のご紹介
masatoshiitoh
0
120
DIY Python Debugger
parttimenerd
0
770
[Helvetic Ruby 2023] Profiling Ruby tests with Swiss precision
palkan
0
300

Featured

See All Featured
The Invisible Side of Design
smashingmag
291
49k
Robots, Beer and Maslow
schacon
154
7.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
257
12k
The Art of Programming - Codeland 2020
erikaheidi
39
12k
Docker and Python
trallard
31
2.4k
Testing 201, or: Great Expectations
jmmastey
26
6.1k
How to Ace a Technical Interview
jacobian
272
22k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
185
15k
Designing for Performance
lara
601
66k
Design by the Numbers
sachag
272
18k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
123
31k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
130
9.8k

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide