About Airbnb’s Server-Driven UI System

1. SDUI
から学ぶサーバー駆動型
Airbnb UI

2. 従来の方法
Kota Oda
Another worksデザイナーインターン

3. 従来の方法
フロント側がサーバーに対して何かしらのデータを要求
サーバーがデーターを渡してレンダリングする

4. 従来の方法
フロント側がサーバーに対して何かしらのデータを要求
サーバーがデーターを渡してレンダリングする
Problem
web,iOS,Androidでそれぞれ固有のロジックをもっている
さらにそれは複雑になっていき、それぞれのクライアントで乖離が生まれてしまう
01
アプリの場合バージョンアップするまで実際のユーザーの感触がわからない
02

5. SDUIとは

6. SDUIとは
Airbnbが開発したサーバー駆動型システム
Airbnbアプリの2つの側面である「ゲスト」と「ホスト」の機能に主眼を置いているため、
Guest+HostからGhost Platformという名称が付いている

7. SDUIの概念

8. SDUIの概念
Screen view
Section view
Action view

9. SDUIの概念
Screen view
GPは任意の数のスクリーンを持つことができる
画面のレイアウトや、どこにセクションを表示するかを
定義する
セクションをどのようにレンダリングするか
（ポップオーバー、モーダル、フルスクリーンなど）
もscreen viewで定義する

10. SDUIの概念
Section view
UIコンポーネントのまとまったグループのデータを記述するもので
表示されるべき正確なデータが含まれている
他のセクションや表示されている画面から完全に独立している
ビジネスロジックと特定の機能との関係を気にすることなく
セクションを再利用、再構築することができる

11. SDUIの概念
Action view
ボタンをタップしたりカードをスワイプしたりといったユーザーが画面上の
UIを操作する際のアクションを定義できる
機能固有のビジネスロジックを好きなだけ含むことができ、
特定のユースケースが発生したときにカスタムアクションやビジネスロジック
を自由に使用することができます

12. SDUIの特徴

13. SDUIの特徴
バックエンドがデータと
そのデータの表示方法を管理
01
Web、iOS、Androidアプリ全体で
単一のバックエンドのレスポンスによって制御
02

14. Ghost Platform

15. 考察
サーバーでリリースすることで、web,Appのリリースをしなくて良くなる。
導入すると開発効率が上がる

16. 考察
Another worksのプロダクト開発に合っているのか。
自社のデザインシステムを変更する必要があるのか。
サーバーでリリースすることで、web,Appのリリースをしなくて良くなる。
導入すると開発効率が上がる
But
01
02