Airbnbのサーバ駆動UI(SDUI)は、WebやAndroid、iOSなど、さまざまなプラットフォームにクライアントUIを実装する一般的なアプローチとは一線を画する。それぞれのクライアントプラットフォームにUIを駆動させるのではなく、SDUIがデータとUIプレゼンテーションの両方をクライアントに転送するのだ。
Airbnb独自のSDUI実装では、バックエンドに対してデータだけでなく、そのデータがすべてのクライアントに対して表示される方法も同時にコントロールすることができます。画面のレイアウトから始まり、レイアウト内の各セクションのアレンジ方法、それぞれのセクションに表示されるデータ、さらにはユーザのインタラクションに対するアクションまで、Web、iOS、Androidすべてのアプリを単一のバックエンド応答でコントロールするのです。
AirbnbのSDUIの中核をなすGhost Platform(GP)は、すべてのプラットフォーム用のネイティブフレームワークを含むと同時に、共通のセクション、レイアウト、アクションを提供する。GPは、GraphQLベースのデータレイヤであるViaductを統合データサービスメッシュとして使用して、すべてのプラットフォームに対して応答と強い型付けのモデルを提供している。
このスキーマは極めて強力で、再利用可能なセクション、ダイナミックなレイアウト、サブページ、アクションを構成するとともに、クライアントアプリケーションに対応するGPフレームワークがこの共通スキーマを活用することで、UIレンダリングの標準化も同時に実現します。
Ghost Platformはクライアントに対して3つのエレメントを提供する — 関連性を持つUIコンポーネントの独立的なグループであるSection、Sectionの表示される場所と方法を定義するScreen、ユーザインタラクションを処理するActionである。
Sectionの定義例を次に示す。各SectionをSectionContainerがラップすると同時に、SectionComponentTypeも含んでいる点に注意して頂きたい。これにより、コンテキストに応じて、同じSectionに異なるレンダリングを選択することが可能になる。
# Example sections
type HeroSection {
# Image urls
images: [String]!
}
type TitleSection {
title: String!,
titleStyle: TextStyle!
# Action to be taken when tapping the optional subtitle
onTitleClickAction: IAction
}
enum SectionComponentType {
HERO,
TITLE,
PLUS_TITLE,
# ...
}
union Section = HeroSection
| TitleSection
| # ...
# The wrapper that wraps each section
type SectionContainer {
id: String!
# The key that determines how to render the section data model
sectionComponentType: SectionComponentType
# The data for this specific section
section: Section
# ... Metadata, logging data & more
}
Screen宣言はスコープがもっと制限されている。これはScreenがおもに2つの仕様、すなわち画面をポップアップやシートなどで表示すべきかどうかといったことや、サポートされるフォームファクタで使用されるレイアウトを提供するためだ。
type ScreenContainer {
id: String
screenProperties: ScreenProperties
layout: LayoutsPerFormFactor
}
...
type SingleColumnLayout implements ILayout {
nav: SingleSectionPlacement
main: MultipleSectionsPlacement
floatingFooter: SingleSectionPlacement
}
type MultiColumnLayout implements ILayout {
...
}
サーバから受信した応答をパースすることによって、すべてのUIセクションをレンダリングした上で、それらをレイアウト上に配置することが可能になる。
Airbnb Ghost Platformは比較的若いプロジェクトであるが、Airbnb社内では広く採用されている、と同社エンジニアのRyan Brooks氏は言う。プロジェクトが成功したのは、堅牢かつ柔軟性に富んだスキーマに加えて、そこからUIコンポーネントをレンダリングするクライアントサイドフレームワークにある。
詳細を知りたいのであれば、Brooks氏の記事やAirbnbのRe-engineering Travelでの講演は必見だ。