Airbnb’s Server-Driven UI System(Ghost Platform) とは何か
Airbnbが社内で取り組んでいる最新UI開発システム Ghost Platformとそのコンセプトの名前
元Airbnb AndroidエンジニアRyan Brooksによるポストを参照
A Deep Dive into Airbnb’s Server-Driven UI System | by Ryan Brooks | The Airbnb Tech Blog | Medium
どういうものか
なぜ画面構造を配信するのか
- アプリケーション上で動的な画面構成を実現するため
- データから画面構造を計算するロジックをサーバーサイドに寄せる
- インターフェイスにGraphQLを使う
GraphQLが必要な理由
- プラットフォーム間で共有するためにGraphQLスキーマの表現力を使いたい
- AirbnbではGraphQL Fragment からクライアントサイドのコンポーネントで利用するTypeScriptやKotlinの型定義を自動生成してくれるらしい*1
今までの方法
- APIからデータのみを受け取る
- データからクライアントサイドで画面構造を計算して描画する
- もしくは画面構造が静的なので計算しない
Ghost Platformの方法
変わらない部分
- ビューの描画や画面遷移をするためのコードをクライアントサイドで書く
- イベント処理のコードをクライアントサイドで書く
- ローディングのビューやスケルトンをクライアントサイドで書く
- 各画面上での操作で通信が発生したり画面を更新したり
コンテキスト
- Airbnbでは昔からUIシステムの開発が盛んだった。React, Epoxy, Lottie, Lona
- AirbnbはReact Nativeでのクロスプラットフォームの取り組みを終え次のフェーズにいる
- Airbnbは Viaduct と呼ばれる独自のGraphQL基盤を構築している
疑問点
- クソデカJSONを毎回取ってくるの? CDNに乗せられないデータはあるのか
- プラットフォームごとの分岐の必要は? iOSネイティブではメニューが上だけどAndroidは下とか
- Ghost Platformクライアントフレームワーク部分が公開されないと解明できなさそう
まとめ
Ghost Platformでは動的なレイアウトシステムを実現するために
- GraphQL スキーマでプラットフォーム間のコンポーネントのインターフェイスを作成
- 各プラットフォームでコンポーネントや画面遷移、アクションを実装
- クライアントフレームワークが画面定義に従って上記をどう使うかを制御している
FAQ
これを実現するための技術的なブレークスルーがあったの?
- ないと思うけどAirbnbでのGraphQL活用とUIシステム研究が悪魔合体して発表できるぐらいの粒度になったのかもしれない
- 画面構造をサーバーから取ってきて動的に組替える。程度のことは各プロジェクトやっていた
宣言的UIにしなきゃだめなの？
審査なしでApp Storeのアプリをアップデートできますか？
- 画面構造の更新だけで提供できるアップデートなら可能
- Airbnbの例ではアプリの全ユーザーの機能を最新にできていいよね。みたいなことを言っている
- versioning 機能を使わないと古いバイナリに新しいコンポーネントが同梱されてなくてエラーとかは起きそう
- 新機能の画面を非表示でリリースしてあとで入れ替えるということも原理的には可能だけどAppleはそれは認めていない
私達のプロジェクトで使えますか？
- 動的なレイアウトを実現するネイティブアプリのUIを作っていてGraphQLを活用しているのだったらコンセプトは真似してみる余地はありそう
- ただ別にAirbnbがフレームワークを公開しているわけでもないからエンジン部分から自作しないといけない
- Airbnbのアーキテクチャをコピーしなくても最小限の画面構造と入れ替え可能なコンポーネントでServer-Driven UI Systemをはじめることはできると思う
- UIシステムに関心がなくただ開発工数を減らしたいのならWebView使えばいいと思う
- Davidっていうレーサーが「テクノロジーの多くは、それが生まれた環境を反映しています」って言ってました *3
References
Re—Engineering Travel with GX 3番目のRyan Brooksのセッション
