＊この記事は2021年9月24日(金)に社内で行ったライトニングトークのスライドを元に作成しています。

こんにちは、Another works デザイナーの小田です！
最近、Airbnbのサーバー駆動型UIについての記事を読んだので、その内容についてお話したいと思います。

初めに

SDUIについてお話しする前に、従来のレンダリング方法について少しお話しします。

図にある通り、フロントエンドからサーバーサイドにデータを要求し、サーバーサイドがデータを渡してレンダリングするという方法が一般的です。
しかし、この従来のレンダリング方法には2つの課題があると考えています。

課題1
それぞれのプラットフォームでロジックが異なり、それらは複雑に絡み合う。
そしてそれぞれのプラットフォームで乖離が生まれてしまう。

課題2
アプリの場合、実際に使ってもらうためにはユーザーにアップデートをしてもらう必要がある

AirbnbのSDUIは、これら2つの課題を解決することができるサーバー駆動型システムです。

ではSDUIとはどのようなものなのか、詳しく見ていきましょう！

SDUIとは

改めて、SDUIとはAirbnbが開発したサーバー駆動型UIシステム（Server-Driven UI System）です。
AirbnbがGuestとHostの2つの側面のサービスを提供していることから、
Guest+Host=Ghost Platform という名称が付けられています。

SDUIの概念

SDUIには
Screen view
Section view
Action view
の3つの概念が存在します。

まずはScreen viewについてお話しします。

Screen viewについて

Ghost Platformでは任意の数のスクリーンを持つことができるのですが、
Screen viewでは画面のレイアウトやセクションの表示について定義しています。
また、細かなレンダリング方法についてもScreen viewで定義することができます。

Section viewについて

Section viewは、UIコンポーネントのまとまったグループのデータを記述するもので
実際にレンダリングされるべき正確なデータが定義されています。
他のセクション画面から完全に独立しているため、特定の機能や関係を気にすることなく再利用や再構築ができます。

Action viewについて

Action viewではユーザーが画面上のUIを操作する際のアクションを定義しています。
Action viewは特定のユースケースや機能固有のビジネスロジックを自由に含むことができます。

SDUIの特徴

SDUIには2つの特徴があります。

特徴1
バックエンドがデータとそのデータの表示方法を管理している

特徴2
プラットフォーム全体で単一のバックエンドレスポンスによって制御している

考察

実際にAnother worksに導入した場合のメリット・デメリットを考えました。

メリットとして挙げられたのは、開発の生産性の向上です。
理由としては、リリースがサーバーサイドだけで完結するからです。

懸念点として挙げられたのが、
自社のプロダクト開発に合っているのか・既存のデザインシステムが使えるのかです。
まだまだ前例が少ない分、自社に合っているのか見極めるのはとても難しいです。

最後に

デザイナーとして普段は関わることの少ないエンジニアリングについて深く学ぶことができ、
とても良い機会でした。
デザイン✖︎エンジニアリングの観点で、今後も様々な技術・プロダクトに触れていきます。

今回のお話の元となったスライドはこちらです。

複業クラウドに登録して一歩を踏み出してみませんか？

複業クラウドへの登録はこちら

Another worksでは一緒に働ける仲間を探しています

株式会社Another worksでは一緒に働く仲間を募集しています

フロントエンジニア
SaaS事業セールス
SaaSカスタマーサクセス
開発フロントエンジニア
サーバーサイドエンジニア
アプリエンジニア
フロントエンドエンジニア
インフラエンジニア
Webエンジニア
フルスタックエンジニア
エンジニア
AI・機械学習エンジニア
ビジネスSaaS事業セールス
SaaSプロダクト新規営業
ライター／ToCマーケター
ライター

その他
SaaSカスタマーサクセス