Airbnbが採用するServer-Driven UIについて、私達はどう活かすのか
見出し画像

Airbnbが採用するServer-Driven UIについて、私達はどう活かすのか

rikika

まずはじめにこれは、デザインエンジニアとして生きてきた私Rikiのポジショントークです。

エンジニアとデザイナーの垣根が少しでも低くなれば、最高のプロダクトが次々に生まれると信じています。

Server-Driven UI(SDUI)とは何か

Airbnbのテックブログで出てきた、UIをサーバーサイドで定義し、クライアント側に返却するという手法です。

つまりクライアント側で状態管理やレンダリングのロジックを持たせずに、各プラットフォームでのUIの同一性をサーバー側で担保するというもの。

GhostPlatform というイケイケの名前で立ち上がったというプロジェクト、Airbnb社内ではかなり普及しているようです。
※GuestとHostを大切にするためのシステムだからGhostらしい

SDUIは何を解決しているのか

例えば、コンポーネント間の並び順や細かい位置を変更したいとなったときにアプリやウェブフロントのリリースをしないでもサーバー側のレスポンスを変更するだけで細かいUIを調整することができます。

つまり、プロダクトの改善スピードが爆速になるということです。

SDUIをいかに実装するのか

サーバーからはJSONで、以下のようなレスポンスを返し、コンポーネントの各要素の配置、スタイル、アクションなどをクライアント側に描画させます。

画像1

GhostPlatformでは、これをGraphLベースのデータレイヤーであるViauctを統合データサービスメッシュとして使用することで、Webやネイティブに対して一貫した応答性と強い型付けのモデルを与えています。

そして具体的に、Ghostは3つの要素を包含しています。1つはUIとしての単一のSection、Sectionの表示される場所と方法を定義するScreen、ユーザインタラクションを処理するActionです。

それぞれが独立して定義されていて、文脈によってレスポンスを変えるだけで、使い分けることが可能です。

画像2

👆Ghostが如何にこのライブラリを運用しているかより詳細を知りたい方はこちらから

SDUIがデザイナとエンジニアにもたらす影響

フロントエンドとバックエンドのコミニケーションが変わることはもちろんですが、一番大きな影響はデザイナの中でのマスターコンポーネントとサーバーの中でのViewの定義が乖離していくことなのかなと個人的は思いました。

日本の会社やチームで実際に運用している方がいらっしゃれば、Twitterなどで教えて下さい✋



この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
rikika

いつもありがとうございます、面白い話するのでお茶でもしましょう。

お前の好きは、おれの好き。(ジャイアン?!!?)
rikika
デザインテクノロジストとかいう職種を生かして、これからのプロダクトの作り方について書いていきます。 最近まとめドキュメント書くのにハマってます。