Closed jjenko closed 3 years ago
A Deep Dive into Airbnb’s Server-Driven UI System
c.f. 要約版: https://www.infoq.com/jp/news/2021/08/airbnb-server-driven-ui/
Traditional | SDUI |
---|---|
ref: https://www.facebook.com/watch/?v=1445539065813160 31分〜
UIに関するロジックやビジネスロジックをサーバー側に集約できること。 あとはモバイルのversioningでもSDUIの利点があると言ってる。
GP は UI を スクリーンとセクションという概念に分けて考えてる。
ref: https://www.facebook.com/watch/?v=1445539065813160 35分ぐらい
📝 面白いと思ったポイント
Design System Webはメルカリ Webで使われているReactだけでなく、様々な技術スタックと共に使用できる、真にスケーラブルなライブラリでなくてはなりません。また、各ライブラリの仕様に引っ張られて細かい箇所で挙動が違ったり、メンテナンスや実装速度の都合上仕様に差分が出てくることは避けたいと考えていました。以上のことから、新しいDesign System Webを構築する技術スタックはWeb Componentsを採用しました。
Web Componentsを構築するためのライブラリはLit (採用の時点ではLitElement)を採用しています。これはシンプルな分カスタムが効きやすいという判断です。
c.f. Lit
Lit の話は https://uit-inside.linecorp.com/episode/84 のエピソードで語られていたのでおすすめ。
React上でWeb Componentを使うにはいくつかの問題があります。これを解決するためにReact Wrapperと呼ばれるライブラリを実装し、それぞれのコンポーネントに対するEvent Listener、JSXの型付け、attributeの型変換などをサポートするReact Componentを各コンポーネントごとに生成しています。
https://custom-elements-everywhere.com/
データの取り扱い
ReactはすべてのデータをHTML属性の形でCustom Elementsに渡します。プリミティブなデータの場合はこれで問題ありませんが、オブジェクトや配列のようなリッチなデータを渡す場合はシステムが破綻します。このような場合、some-attr="[object Object]"のような文字列化された値になってしまい、実際には使用することができません。
イベントの処理
Reactは独自の合成イベントシステムを実装しているため、回避策を使用せずにCustom ElementsからのDOMイベントをリッスンすることはできません。開発者は、refを使用してCustom Elementsを参照し、addEventListenerでイベントリスナーを手動でアタッチする必要があります。これにより、カスタムエレメントの扱いが煩雑になります。
📝 感想
Policy
話したい・聞きたいネタを書いてく ✏️
ハッシュタグ #frontend_night
Prev: https://github.com/wantedly/frontend-night/issues/158
Created from https://github.com/wantedly/frontend-night/issues/65 by issue-creator