1
/
5

SDUI -Airbnbから学ぶサーバー駆動型UI-

*この記事は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では一緒に働ける仲間を探しています

エンジニア
CTO室立ち上げ!技術で経営課題を解決できるエンジニア募集!
『挑戦する全ての人の機会を最大化する』VISIONの実現に向けて 複業したい方と企業を繋ぐプラットフォーム「複業クラウド」を運営しています。 ■複業クラウドの特徴 ◎創業以来変わらない想いとプロダクト 2019年の創業以来一貫して『複業クラウド』を提供しています。 『挑戦する全ての人の機会を最大化する』VISION実現に向けて、 事業ピポットすることなくより良いプロダクトを開発し続けております。 ◎手数料や中間マージンが無料 人材業界の常識を覆す。企業と個人が直接契約ができるサービスをSaaSで提供。 Another worksが契約の間に入らないからこそ実現できています。 専属のCSが採用成功に向けて伴走し、導入2ヶ月以内の採用成功率は70%以上です。 ◎新規事業開発 2020年11月よりリリースをした自治体様との事業『複業クラウド for Public』 1年間で19都道府県20自治体様にご利用いただき、 地方自治体が抱える課題と都内の優秀な複業人材のマッチングを通して 場所にとらわれない挑戦機会の最大化を実現しています。 これからも『複業』というドメインにおいて事業開発をし続けます。 ■中途在籍メンバー出身 ◎ビズリーチ、EPARK、パソナ、パーソル、JAL、レバレジーズ、フォトシンス
株式会社Another works


AI・機械学習エンジニア
AI・機械学習を使って複業を世の中に広めるプロダクトを作りましょう!
『挑戦する全ての人の機会を最大化する』VISIONの実現に向けて 複業したい方と企業を繋ぐプラットフォーム「複業クラウド」を運営しています。 ■複業クラウドの特徴 ◎創業以来変わらない想いとプロダクト 2019年の創業以来一貫して『複業クラウド』を提供しています。 『挑戦する全ての人の機会を最大化する』VISION実現に向けて、 事業ピポットすることなくより良いプロダクトを開発し続けております。 ◎手数料や中間マージンが無料 人材業界の常識を覆す。企業と個人が直接契約ができるサービスをSaaSで提供。 Another worksが契約の間に入らないからこそ実現できています。 専属のCSが採用成功に向けて伴走し、導入2ヶ月以内の採用成功率は70%以上です。 ◎新規事業開発 2020年11月よりリリースをした自治体様との事業『複業クラウド for Public』 1年間で19都道府県20自治体様にご利用いただき、 地方自治体が抱える課題と都内の優秀な複業人材のマッチングを通して 場所にとらわれない挑戦機会の最大化を実現しています。 これからも『複業』というドメインにおいて事業開発をし続けます。 ■中途在籍メンバー出身 ◎ビズリーチ、EPARK、パソナ、パーソル、JAL、レバレジーズ、フォトシンス
株式会社Another works


アプリエンジニア
React Native/創業メンバーのエンジニアとして働きませんか?
成約手数料無料で複業したい人と企業をつなぐプラットフォーム「Another works」を運営しています!企業は必要なタイミングで、必要なプロジェクトに、必要な人材を自由に仲間にすることができます! Another worksは成約手数料も初期費用も無料で、直接つながることができるので、高額な手数料や複雑な契約形態に悩むこともありません!また、約15,000名の登録者もAnother worksに入れば複業案件を自由に探すことができ、エントリーや企業にメッセージを送ることができます! 今話題の【複業】×【SaaS】領域です! トレンドの最先端の領域で、新しい働き方の概念を発信していきます! 副業市場はどんどん拡大しており、Another worksも急成長をしております!創業期メンバーとして一緒にAnother worksを盛り上げてくれるエンジニアを募集しています!
株式会社Another works


フロントエンジニア
Rubyエンジニア/ベンチャーで最新技術を使って自社プロダクト開発し放題!
『挑戦する全ての人の機会を最大化する』VISIONの実現に向けて 複業したい方と企業を繋ぐプラットフォーム「複業クラウド」を運営しています。 ■複業クラウドの特徴 ◎創業以来変わらない想いとプロダクト 2019年の創業以来一貫して『複業クラウド』を提供しています。 『挑戦する全ての人の機会を最大化する』VISION実現に向けて、 事業ピポットすることなくより良いプロダクトを開発し続けております。 ◎手数料や中間マージンが無料 人材業界の常識を覆す。企業と個人が直接契約ができるサービスをSaaSで提供。 Another worksが契約の間に入らないからこそ実現できています。 専属のCSが採用成功に向けて伴走し、導入2ヶ月以内の採用成功率は70%以上です。 ◎新規事業開発 2020年11月よりリリースをした自治体様との事業『複業クラウド for Public』 1年間で19都道府県20自治体様にご利用いただき、 地方自治体が抱える課題と都内の優秀な複業人材のマッチングを通して 場所にとらわれない挑戦機会の最大化を実現しています。 これからも『複業』というドメインにおいて事業開発をし続けます。 ■中途在籍メンバー出身 ◎ビズリーチ、EPARK、パソナ、パーソル、JAL、レバレジーズ、フォトシンス
株式会社Another works


フロントエンジニア
複業クラウドをReactで開発するフロントエンジニア募集
『挑戦する全ての人の機会を最大化する』VISIONの実現に向けて 複業したい方と企業を繋ぐプラットフォーム「複業クラウド」を運営しています。 ■複業クラウドの特徴 ◎創業以来変わらない想いとプロダクト 2019年の創業以来一貫して『複業クラウド』を提供しています。 『挑戦する全ての人の機会を最大化する』VISION実現に向けて、 事業ピポットすることなくより良いプロダクトを開発し続けております。 ◎手数料や中間マージンが無料 人材業界の常識を覆す。企業と個人が直接契約ができるサービスをSaaSで提供。 Another worksが契約の間に入らないからこそ実現できています。 専属のCSが採用成功に向けて伴走し、導入2ヶ月以内の採用成功率は70%以上です。 ◎新規事業開発 2020年11月よりリリースをした自治体様との事業『複業クラウド for Public』 1年間で19都道府県20自治体様にご利用いただき、 地方自治体が抱える課題と都内の優秀な複業人材のマッチングを通して 場所にとらわれない挑戦機会の最大化を実現しています。 これからも『複業』というドメインにおいて事業開発をし続けます。 ■中途在籍メンバー出身 ◎ビズリーチ、EPARK、パソナ、パーソル、JAL、レバレジーズ、フォトシンス
株式会社Another works

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

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

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

株式会社Another works's job postings
2 Likes
2 Likes

Weekly ranking

Show other rankings
If this story triggered your interest, go ahead and visit them to learn more