Airbnbが採用するServer-Driven UIについて、私達はどう活かすのか
まずはじめにこれは、デザインエンジニアとして生きてきた私Rikikaのポジショントークです。
エンジニアとデザイナーの垣根が少しでも低くなれば、最高のプロダクトが次々に生まれると信じています。気に入ってくれた方はフォローお願いします！
Server-Driven UI（SDUI）とは何か
Airbnbのテックブログで出てきた、UIをサーバーサイドで定義し、クライアント側に返却するという手法です。
つまりクライアント側で状態管理やレンダリングのロジックを持たせずに、各プラットフォームでのUIの同一性をサーバー側で担保するというもの。
GhostPlatform というイケイケの名前で立ち上がったというプロジェクト、Airbnb社内ではかなり普及しているようです。
※GuestとHostを大切にするためのシステムだからGhostらしい
SDUIは何を解決しているのか
例えば、コンポーネント間の並び順や細かい位置を変更したいとなったときにアプリやウェブフロントのリリースをしないでもサーバー側のレスポンスを変更するだけで細かいUIを調整することができます。
つまり、プロダクトの改善スピードが爆速になるということです。
SDUIをいかに実装するのか
サーバーからはJSONで、以下のようなレスポンスを返し、コンポーネントの各要素の配置、スタイル、アクションなどをクライアント側に描画させます。
GhostPlatformでは、これをGraphLベースのデータレイヤーであるViauctを統合データサービスメッシュとして使用することで、Webやネイティブに対して一貫した応答性と強い型付けのモデルを与えています。
そして具体的に、Ghostは3つの要素を包含しています。1つはUIとしての単一のSection、Sectionの表示される場所と方法を定義するScreen、ユーザインタラクションを処理するActionです。
それぞれが独立して定義されていて、文脈によってレスポンスを変えるだけで、使い分けることが可能です。
👆Ghostが如何にこのライブラリを運用しているかより詳細を知りたい方はこちらから
SDUIがデザイナとエンジニアにもたらす影響
フロントエンドとバックエンドのコミニケーションが変わることはもちろんですが、一番大きな影響はデザイナの中でのマスターコンポーネントとサーバーの中でのViewの定義が乖離していくことなのかなと個人的は思いました。
日本の会社やチームで実際に運用している方がいらっしゃれば、Twitterなどで教えて下さい✋
いつもありがとうございます、面白い話するのでお茶でもしましょう。