マルチテナント戦略における Server-Driven UIのリアーキテクチャ

「アーキテクチャを突き詰める Online Conference」にて、登壇した際の資料です。
イベントURL：https://findy.connpass.com/event/314782/

■ セッション内で紹介されていた資料のご紹介
・「Server-Driven UIの採用背景と実装について」
https://techblog.gaudiy.com/entry/2022/07/29/090000

■ Gaudiyエンジニア組織について
https://site.gaudiy.com/recruit/engineer

Transcript

1. マルチテナント戦略における Server-Driven UIのリアーキテクチャ ©️ Gaudiy Inc. Sho Nagai Software Engineer / Gaudiy inc.
2. Sho Nagai 自己紹介 ©️ Gaudiy Inc.
3. 01 _今日のテーマ 02 _SDUIとは 03 _リアーキテクチャに至った背景 04_どのようにリアーキテクチャしたか 05_リアーキテクチャによる成果 06_まとめ ©️ Gaudiy Inc.
4. ©️ Gaudiy Inc. 今日のテーマ 今日話すこと、はじめに伝えたいこと
5. ©️ Gaudiy Inc. マルチテナン ト戦略における Server-Driven UIのリ アーキテクチャ どんなマルチテナント戦略なのか？
6. 20 ©️ Gaudiy Inc. フ ァ ン の 熱 量 を 最 大 化 す る W e b 3 時 代 の フ ァ ン プ ラット フ ォ ー ム ©️ Gaudiy Inc.
7. サービス構成と特徴 1 ここで言うIPは、作品やキャラクターなどの知的財産 権を指していまA 1 という 構成で、マルチテナントにサービス提供していまA 1 提供するコミュニティが増えるほどに、提供したい画 面レイアウトや表示するコンテンツも多種多様になる 特徴を持っています １つのIPファンコミュニティ=１つのテナント コミュニティ機能 エンタメIP向けにファンコミュニティを立ち上げられるサービス ©️ Gaudiy Inc.
8. 特にサービスの顔であるホーム画面のカ スタマイズ性 IP毎の拘りに応えやすい戦略 ©️ Gaudiy Inc.
9. このカスタマイズ性を SDUIを使って実現しています 今日はこのSDUIを お話です リアーキテクチャした ©️ Gaudiy Inc.
10. はじめに伝えておきたいこと ひとつの にす ぎない 選択 今日話す内容は、僕らのプロダクト特性や環境に対して 一番効果的と判断して選択したリアーキテクチャの手法 です。 プロダクトが違えば、特性や環境も異なるため、SDUI の活用方法も変わってくると思いますが、話す内容が皆 さんの選択を助けるものになれば嬉しいです。 ©️ Gaudiy Inc.
11. ©️ Gaudiy Inc. SDUIとは Server-Driven UIとは何のことか、おさらい
12. SDUIのアーキテクチャ SDUI（Server-Driven UI）とは UIの表現方法をすべてサーバーサイドで決定し、クライアントに返す、という手法になります。 https://medium.com/airbnb-engineering/a-deep-dive-into-airbnbs-server- driven-ui-system-842244c5f5 ©️ Gaudiy Inc.
13. より詳しくは… テックブログの記事をご参照ください ©️ Gaudiy Inc.
14. ©️ Gaudiy Inc. リアーキテクチャに至った背景 何が発端でリアーキテクチャに至ったのか
15. リアーキテクチャに至った背景 ビジネス要件の拡大 積み残った技術負債 ©️ Gaudiy Inc.
16. 1 ©️ Gaudiy Inc. ファンコミュニティ（テナント）毎に表 示ロジックの拘りの増加 ビジネス要件の拡大
17. ビジネス要件の拡大 求められる柔軟性の増加 各ファンコミュニティの要望に答えやすいように、画面の作りを柔軟に扱え る設計にしなければいけない ©️ Gaudiy Inc.
18. 手を入れにくい既存の仕組み U 社内方針としてマイクロサービス化を推進する前に作 られたサービスであり、内部で直接に複数ドメインの データ取得をするなど、マイクロサービス構成に載れ てなR U Go言語主流とした中でKotlin言語のままであC U を挟んでいた BFF（BE for FE）からREST通信 積み残った技術負債 ©️ Gaudiy Inc.
19. 積み残った技術負債 技術負債の解消チャンス ©️ Gaudiy Inc.
20. ©️ Gaudiy Inc. どのようにリアーキテクチャしたか リアーキテクチャの進め方と改善したポイント
21. どのようにリアーキテクチャしたか ©️ Gaudiy Inc. ドメインの再整理 UI-Serviceの作成
22. SDUIに必要な要素の更新 ドメインの再整理 ©️ Gaudiy Inc.
23. UI-Serviceという表示ロジックを責務 に持つサービスを作成 UI-Serviceの作成 ©️ Gaudiy Inc.
24. ©️ Gaudiy Inc. 表示ロジックの更新 UI-Serviceの作成
25. protobufでSDUIを定義 UI-Serviceの作成 ©️ Gaudiy Inc.
26. ©️ Gaudiy Inc. リアーキテクチャによる成果 リアーキテクチャ後の反応と達成できたこと
27. リアーキテクチャによる成果 ©️ Gaudiy Inc. サービス価値の向上 X より提供する の施策に応えやす い画面を提供できるようになった ファンコミュニティ毎 技術負債の解消
28. ©️ Gaudiy Inc. サービス価値の向上 サービス価値に貢献できた 画面の要望に答えやすくなった
29. ©️ Gaudiy Inc. 技術負債の解消 リアーキテクチャ前
30. ©️ Gaudiy Inc. 技術負債の解消 リアーキテクチャ後
31. ©️ Gaudiy Inc. まとめ 今回のリアーキテクチャが正解とは限らない、良きリアーキテクチャを行うために
32. ©️ Gaudiy Inc. まとめ 良き選択を如何に 行うか x マルチテナントで且つ画面表示に様々な拘りが発生し やすいプロダクトの性質に合わせたのが、今段階では 良い選択だったと感じてい‡ x アーキテクチャを考えるうえで、利用者・関係者の知 見を注入することで、無駄なくビジネスに貢献できる ものを作れ‡ x 設計の採用目的によって重きを置くところが違うの で、SDUIの思想をベースにしつつ、ユースケースに あった調整・改善を行っていくのが効果的と思う
33. ©️ Gaudiy Inc. Thank you