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

最短最速に魂を売る! 新しいアーキテクチャとプロセスの提案!

Recruit
August 27, 2024

最短最速に魂を売る! 新しいアーキテクチャとプロセスの提案!

2024/07/23に、Developers Summit 2024 Summerで発表した、吉井と竹下の資料です。

Recruit

August 27, 2024
Tweet

More Decks by Recruit

Other Decks in Technology

Transcript

  1. システム開発は依存関係協調だらけ 画面定義 データベ ース設計 API設計 画面設計 API実装 画面実装 画面定義 画面定義

    共通API設計 画面設計 API設計 API実装 画面定義 1画面が複数APIと協調している 複数画面が1APIと協調してい る 複数画面や複数APIと協調している
  2. 新!多重並走アーキテクチャ FE 開発領域(1名 × 4) BE 開発領域(1名 × 4) •(1)密な「協調」は

    BE チームだけで完結するよう変更 •(2)UI コンポーネントを軸に「責務」をレーン毎に分断
  3. 一般的な BFF の実装方法 1. BE エンジニアは、Web API サーバーを開発 2. FE

    エンジニアは、BFF サーバーから Web API サーバーにリクエストを発行 BFF サーバー FE 開発領域 BE 開発領域 WEB API サーバー 2
  4. 一般的な BFF の実装方法 1. BE エンジニアは、Web API サーバーを開発 2. FE

    エンジニアは、BFF サーバーから Web API サーバーにリクエストを発行 3. FE エンジニアは、取得したデータを、UI に反映 BFF サーバー UI(ブラウザ表示) FE 開発領域 BE 開発領域 WEB API サーバー 2
  5. 一般的な BFF の実装方法 1. BE エンジニアは、Web API サーバーを開発 2. FE

    エンジニアは、BFF サーバーから Web API サーバーにリクエストを発行 3. FE エンジニアは、取得したデータを、UI に反映 UI を経由し、アプリケーションは持続的に操作されます。 BFF サーバー UI(ブラウザ表示) FE 開発領域 BE 開発領域 WEB API サーバー 2
  6. 一般的な BFF の実装方法 1. BE エンジニアは、Web API サーバーを開発 2. FE

    エンジニアは、BFF サーバーから Web API サーバーにリクエストを発行 3. FE エンジニアは、取得したデータを、UI に反映 「BFF サーバーをどう実装するか?」という問いは、状況によっては複雑です。 BFF サーバー UI(ブラウザ表示) FE 開発領域 BE 開発領域 WEB API サーバー 2
  7. 開発プロセスに潜むボトルネック • リクエストから、ユーザーID を特定 • 特定した ID を使用して、次のデータを取得 • 取得したデータを、さらに別のデータと結合する、、

    BFF サーバーの実装詳細をイメージしてみましょう。 BFF サーバー UI(ブラウザ表示) FE 開発領域 BE 開発領域 WEB API サーバー 2
  8. 開発プロセスに潜むボトルネック • リクエストから、ユーザーID を特定 • 特定した ID を使用して、次のデータを取得 • 取得したデータを、さらに別のデータと結合する、、

    FE/BE エンジニアは、このようなクエリを組み立てるために、 「密な協調」が求められます。 BFF サーバー UI(ブラウザ表示) FE 開発領域 協調 BE 開発領域 WEB API サーバー 2
  9. 開発プロセスに潜むボトルネック BFF サーバー FE 開発領域 まとめると、3つの工程は 「直列でしか開発を進められないウォーターフォール」といえます。 1. BE エンジニアは、Web

    API サーバーを開発 2. FE エンジニアは、BFF サーバーから Web API サーバーにリクエストを発行 3. FE エンジニアは、取得したデータを、UI に反映 UI(ブラウザ表示) BE 開発領域 WEB API サーバー 2
  10. 開発プロセスに潜むボトルネック BFF サーバー UI(ブラウザ表示) FE 開発領域 そして「どこが原因でバグが発生しているのか?」という調査は、 特定までに時間がかかります。 1. BE

    エンジニアは、Web API サーバーを開発 2. FE エンジニアは、BFF サーバーから Web API サーバーにリクエストを発行 3. FE エンジニアは、取得したデータを、UI に反映 バグ? バグ? バグ? バグ? BE 開発領域 WEB API サーバー 2
  11. 協調点の移動 BFF サーバー UI(ブラウザ表示) FE 開発領域 BE 開発領域 WEB API

    サーバー 1. BE エンジニアは、Web API サーバーを開発 2. FE エンジニアは、BFF サーバーから Web API サーバーにリクエストを発行 3. FE エンジニアは、取得したデータを、UI に反映 2
  12. 協調点の移動 BFF サーバー UI(ブラウザ表示) FE 開発領域 BE 開発領域 WEB API

    サーバー 1. BE エンジニアは、Web API サーバーを開発 2. FE エンジニアは、BFF サーバーから Web API サーバーにリクエストを発行 3. FE エンジニアは、取得したデータを、UI に反映 FE/BE 間の密な「協調」がボトルネックと仮定。 協調 2
  13. 協調点の移動 UI(ブラウザ表示) FE 開発領域 BE 開発領域 WEB API サーバー 1.

    BE エンジニアは、Web API サーバーを開発 2. FE エンジニアは、BFF サーバーから Web API サーバーにリクエストを発行 3. FE エンジニアは、取得したデータを、UI に反映 FE/BE 間で求められていた「協調」を、BE チームだけで完結するよう合意形成。 協調 2
  14. 協調点の移動 UI(ブラウザ表示) FE 開発領域 BE 開発領域 WEB API サーバー 1.

    BE エンジニアは、Web API サーバーを開発 2. FE エンジニアは、BFF サーバーから Web API サーバーにリクエストを発行 3. FE エンジニアは、取得したデータを、UI に反映 FE/BE 間を跨ぐ「協調」は、単一で単純なものに。 単純 2
  15. 協調点の移動 UI(ブラウザ表示) FE 開発領域 BE 開発領域 WEB API サーバー 1.

    BE エンジニアは、Web API サーバーを開発 2. FE エンジニアは、BFF サーバーから Web API サーバーにリクエストを発行 3. FE エンジニアは、取得したデータを、UI に反映 実装制約により必要な、最小限の機能のみを BFF サーバーに残す。 認証 / SSR 2
  16. ? • UI 表示に必要なデータ加工はどこで行うか?(要協調) • データ中心の API なのか?UI 中心の API

    なのか?(要協調) Web API サーバー 規約 ? UI コンポーネントにもとづく責務境界 3
  17. 今回のアーキテクチャ特性のおさらい FE 開発領域(1名 × 4) BE 開発領域(1名 × 4) •(1)密な「協調」は

    BE チームだけで完結するよう変更 •(2)UI コンポーネントを軸に「責務」をレーン毎に分断 4
  18. 今回のアーキテクチャ特性のおさらい FE 開発領域(1名 × 4) BE 開発領域(1名 × 4) UI

    コンポーネント軸で分断することで、各レーンの責務が明確に •(1)密な「協調」は BE チームだけで完結するよう変更 •(2)UI コンポーネントを軸に「責務」をレーン毎に分断 4
  19. 今回のアーキテクチャ特性のおさらい FE 開発領域(1名 × 4) BE 開発領域(1名 × 4) 規約に変更があった場合、FE/BE

    間の協調は最小限に •(1)密な「協調」は BE チームだけで完結するよう変更 •(2)UI コンポーネントを軸に「責務」をレーン毎に分断 変更 4
  20. 今回のアーキテクチャ特性のおさらい FE 開発領域(1名 × 4) BE 開発領域(1名 × 4) 単機能テスト(単体テスト)もレーン毎に実施でき、進捗管理なども容易に

    •(1)密な「協調」は BE チームだけで完結するよう変更 •(2)UI コンポーネントを軸に「責務」をレーン毎に分断 単機能 テスト 4
  21. この様なタスクの進め方にしました データベー ス 画面 画面 画面 画面パーツ 画面パーツ 画面パーツ 画面パーツ

    画面パーツ 画面パーツ 画面パーツ 画面パーツ 画面パーツ API API API API API API API API API データベース設計 画面定義 画面設計(UIパーツ化) API設計 製造
  22. データベー ス 画面 画面 画面 画面パーツ 画面パーツ 画面パーツ 画面パーツ 画面パーツ

    画面パーツ 画面パーツ 画面パーツ 画面パーツ データベース設 計 画面定義 画面設計(UIパーツ 化) 画面 画面 主要画面 定義 主要画面な数画面のみ固め 早期データベースFIX
  23. 後続作成する画面は Fixしたデータベースを制約を受ける 画面 画面 画面 画面パーツ 画面パーツ 画面パーツ 画面パーツ 画面パーツ

    画面パーツ 画面パーツ 画面パーツ 画面パーツ データベース設 計 画面定義 画面設計(UIパーツ 化) 画面 画面 主要画面 定義 データベー ス 主要画面は全体の約15% 最速で完了することだけを考えた MVPを開発で決めてしまう
  24. 想定外のコミュニケーション発生源 ビジネス 検討 要件定義 設計実装 テスト リリース前 エンハンス リリース後 エンハンス

    コーディング 中に仕様の矛 盾に気づく 並列開発チーム リリース データベース 設計FIX
  25. 想定外のコミュニケーション発生源 ビジネス 検討 要件定義 設計実装 テスト リリース前 エンハンス リリース後 エンハンス

    コーディング 中に仕様の矛 盾に気づく 並列開発チーム 後で、ビジネ ス要件の漏れ が発生する。 リリース データベース 設計FIX
  26. 想定外のコミュニケーション発生源 ビジネス 検討 要件定義 設計実装 テスト リリース前 エンハンス リリース後 エンハンス

    コーディング 中に仕様の矛 盾に気づく 並列開発チーム 後で、ビジネ ス要件の漏れ が発生する。 設計まで立ち返る 様な問題が発覚。 リリース データベース 設計FIX
  27. 想定外のコミュニケーション発生源 ビジネス 検討 要件定義 設計実装 テスト リリース前 エンハンス リリース後 エンハンス

    コーディング 中に仕様の矛 盾に気づく 並列開発チーム 後で、ビジネ ス要件の漏れ が発生する。 リリース データベース 設計FIX 設計まで立ち返る 様な問題が発覚。
  28. コミュニケーションパスの発生 ビジネス 検討 要件定義 設計実装 テスト リリース前 エンハンス リリース後 エンハンス

    コーディング 中に仕様の矛 盾に気づく 並列開発チーム 後で、ビジネ ス要件の漏れ が発生する。 リリース データベース 設計FIX 設計まで立ち返る 様な問題が発覚。
  29. コミュニケーションパスの増加場所を コントロールして、開発者を支援する ビジネス 検討 要件定義 設計実装 テスト リリース前 エンハンス リリース後

    エンハンス 並列開発チーム リリース コーディング 中に仕様の矛 盾に気づく 後で、ビジネ ス要件の漏れ が発生する。 データベース 設計FIX 設計まで立ち返る 様な問題が発覚。
  30. コミュニケーションパスを増やす 想定外の問題への対応 ビジネス 検討 要件定義 設計実装 テスト リリース前 エンハンス リリース後

    エンハンス 並列開発チーム リリース 取り込み 取り込み 取り込み 並列開発を破綻させないため に戦略的な先送りを 出来る期間を事前に設定。 コーディング 中に仕様の矛 盾に気づく 後で、ビジネ ス要件の漏れ が発生する。 データベース 設計FIX 設計まで立ち返る 様な問題が発覚。
  31. コミュニケーションパスを増やす 想定外の問題への対応 ビジネス 検討 要件定義 設計実装 テスト リリース前 エンハンス リリース後

    エンハンス 並列開発チーム リリース 取り込み 取り込み コーディング 中に仕様の矛 盾に気づく 取り込み 並列開発を破綻させないため に戦略的な先送りを 出来る期間を事前に設定。 後で、ビジネ ス要件の漏れ が発生する。 データベース 設計FIX 設計まで立ち返る 様な問題が発覚。
  32. コミュニケーションパスを増やす 想定外の問題への対応 ビジネス 検討 要件定義 設計実装 テスト リリース前 エンハンス リリース後

    エンハンス 並列開発チーム リリース 取り込み 取り込み 取り込み コーディング 中に仕様の矛 盾に気づく 取り込み 並列開発を破綻させないため に戦略的な先送りを 出来る期間を事前に設定。 後で、ビジネ ス要件の漏れ が発生する。 データベース 設計FIX 設計まで立ち返る 様な問題が発覚。
  33. コミュニケーションパスを増やす 想定外の問題への対応 ビジネス 検討 要件定義 設計実装 テスト リリース前 エンハンス リリース後

    エンハンス 並列開発チーム リリース 取り込み 取り込み 取り込み コーディング 中に仕様の矛 盾に気づく 取り込み 並列開発を破綻させないため に戦略的な先送りを 出来る期間を事前に設定。 後で、ビジネ ス要件の漏れ が発生する。 データベース 設計FIX 設計まで立ち返る 様な問題が発覚。
  34. コミュニケーションパスを増やす 想定外の問題への対応 ビジネス 検討 要件定義 設計実装 テスト リリース前 エンハンス リリース後

    エンハンス 並列開発チーム リリース 取り込み 取り込み 取り込み 開発するのに都合 の良い仕様で対応 取り込み 並列開発を破綻させないため に戦略的な先送りを 出来る期間を事前に設定。 後で、ビジネ ス要件の漏れ が発生する。 データベース 設計FIX 設計まで立ち返る 様な問題が発覚。
  35. コミュニケーションパスを増やす 想定外の問題への対応 ビジネス 検討 要件定義 設計実装 テスト リリース前 エンハンス リリース後

    エンハンス 要件の問題発 生 開発するのに都合 の良い仕様で対応 並列開発チーム リリース 取り込み 取り込み 取り込み この期間に エンジニアが巻き込 まれてしまう コミュニケーション を発生させない 並列開発を破綻させないため に戦略的な先送りを 出来る期間を事前に設定。 後で、ビジネ ス要件の漏れ が発生する。 データベース 設計FIX 設計まで立ち返る 様な問題が発覚。
  36. 協調の最小化による恩恵 FE 開発領域(1名 × 4) BE 開発領域(1名 × 4) •我々のアーキテクチャは「協調の最小化」を叶えます。

    •各レーンを結合する際には「協調」が必要です。 この時点の結合テストにおいてバグが発生することもあります。 バグ? 5
  37. 協調の最小化による恩恵 FE 開発領域(1名 × 4) BE 開発領域(1名 × 4) •我々のアーキテクチャは「協調の最小化」を叶えます。

    •各レーンを結合する際には「協調」が必要です。 しかしながら結合点が明確であるため、バグの特定は容易です。 バグ! 5
  38. 協調の最小化による恩恵 FE 開発領域(1名 × 4) BE 開発領域(1名 × 4) •我々のアーキテクチャは「協調の最小化」を叶えます。

    •各レーンを結合する際には「協調」が必要です。 これは、レーン単位で 単機能テストが完了している恩恵です。 バグ! 単機能 テスト 5