Upgrade to Pro — share decks privately, control downloads, hide ads and more …

組織フェーズを見据えたWebフロントエンドのアーキテクチャと変遷

shibe23
November 27, 2021

 組織フェーズを見据えたWebフロントエンドのアーキテクチャと変遷

10年間で約15万行のコードを抱え、jQuery -> React + DDD -> React + Redux とアーキテクチャの変遷を辿ってきたChatworkを事例として、 組織フェーズの変化によって発生する課題と、それらをアーキテクチャの観点からどのように乗り越えるか紐解きたいと思います。

shibe23

November 27, 2021
Tweet

More Decks by shibe23

Other Decks in Programming

Transcript

  1. Chatworkの歴史と組織規模の変遷 (登録ID数:各年12月末時点、2021年のみ9月末時点。従業員数: 各年10月末時点) 登録ID数 フロントエンド チームメンバー数 従業員数 + DDD 🔔

    2019/09/24 東証マザーズ上場 81名 87名 109名 154名 247名 3 3名 4名 6名 178.2万ID 241.6万ID 308.0万ID 395.2万ID 458.2万ID 約2.3倍
  2. Chatworkのフロントエンドの特徴について 5 例: メッセージが表示される、タイムライン上の未読ライン • ウィンドウがアクティブかどうか • 表示してから◯秒経過した • メッセージを送信したときは全て既読にする

    etc... クライアントサイドもビジネスロジックがてんこ盛り • あらゆる状態が1つのページで複雑に絡まり合っている ◦ メッセージ、ルーム、タスク、権限... • ルーティングで特定エンドポイントごとに区切ってリファクタリング、ができない ページという概念がない
  3. フロントエンドのアーキテクチャの変遷(1) 7 • 巨大なjQueryベースのSPA • Reactを導入し、ViewとModelの分離を試みた • 段階的にjQueryからReactへ置き換えるため、jQuery部分を明確に分離する必要がある ◦ DDDを元にしたDomain

    Modelの作成 ◦ ACL(腐敗防止層)によりアーキテクチャを分離し、jQuery部分への依存を制御 複雑化するjQueryからの脱却を目指し、ReactとDDDベースのモデリングを採用 + DDD
  4. フロントエンドのアーキテクチャの変遷(2) 10 • Propsを更新する仕組みが自前 • 常に最上位コンポーネントからのレンダリングをするため、レンダリングコストが高い • mutableに状態を管理するため差分比較コストが高い 技術面、組織面の課題からReduxを採用 +

    DDD 技術的課題 • 組織全体を拡大させていくフェーズに突入したが、実装に独自性が強くオンボーディングコストが高い 組織的課題 ⇒ Redux導入で再レンダリングの範囲を狭める   immutableにして差分比較コストを下げる ⇒ デファクトスタンダードである状態管理ライブラリの採用により   最初から共通言語で会話できるように
  5. これから:機能別組織への挑戦とモジュラモノリスを意識した構成へ 16 • Reduxの導入を進めながら、feature単位での分割を行う • モジュラモノリス化を目指して、モノレポ構成への移行を段階的に進める 組織全体で機能型組織への移行を検討 • 採用計画が順調に進み、人数のスケールに関する課題感がより切実なものに •

    職能型組織のため、機能開発はプロジェクトごとにメンバーをアサインする形式 ◦ リポジトリのメンテナンスが職能型組織に紐づく ◦ 一つの機能開発で複数のチームに合意をとらなくてはならない ◦ 組織がスケールするほど調整コストがかかり、デリバリーをスケールさせづらい 組織をスケールさせるために、モノリシックなSPAを分割していかなくてはいけない
  6. まとめ 17 • 適切なモデリングへの探求 • コードを疎結合に保ち、変更容易性を確保する • 新しいコードと古いコードの境界を設け、依存関係を制御する • 「アーキテクチャで解決すべき課題」は常に変わり続ける

    アーキテクチャの決定はプロダクトだけでなく、組織フェーズにも影響をうける • 過去のアーキテクチャもプロダクトや組織に貢献していれば負債ではない 環境の変化は激しい。技術的負債を返却しながら新しい環境に適応する必要がある どんなアーキテクチャにするとしても、大事なことは変わらない