QCon London 2024でChristopher Luu氏は、Netflixがリッチな通知のためにサーバ駆動型UIを使用する方法を説明した。これは、プラットフォーム間での再利用とより良いテストによって開発者の時間を節約するが、下位互換性を維持するために労力を要する。開発者は、いわゆるCLCS（Customer Lifecycle Component System）コンポーネントをJavaScriptに埋め込み、React UIsがJavaScriptにHTMLを埋め込むのと同じように、通知を作成する。
Netflixアプリの通知は、支払いの失敗やキャンペーンなどの重要なイベントをユーザーに伝える。サーバー駆動型の通知により、Netflixはアプリを更新することなくサーバー上でUIを更新し、Netflixがサポートする多くのプラットフォームでロジックを共有し、A/Bテストを効果的に実行できる。また、開発者はプラットフォームやプログラミング言語の知識に関係なく、どのプラットフォームでも通知を作成できる。
デメリットは、通知フレームワークを作成するための初期費用が高くなることと、古いNetflixアプリとの下位互換性を保つ必要があることだ。また、オフラインアプリのサポートや通知のデバッグも難しくなる。最後に、非ネイティブ開発を好まない開発者もいる。
Netflixは通知をUMA（Universal Messaging Alert）と呼んでいる。UMAはTV、ウェブ、iOS、Androidで動作する。ウェブ以外のプラットフォームでは、NetflixはアプリのアップデートをTVベンダー、Apple、Googleから承認してもらう必要がある。そこで、CLSCのコンポーネント、つまりサーバー駆動型のUMAが時間とコストを節約する。アプリの更新や承認なしで、すべてのプラットフォームで同じコードが実行される。それでも、NetflixがUMAを提供するのは、これらのサーバー駆動型UIだけだ。アプリは、他のすべての機能にネイティブのクライアントサイドUIフレームワークを使用している。
UMAは、Netflixの番組「Stranger Things」に登場する町にちなんで名付けられたビジュアルデザインシステム、Hawkinsを使用している。UMAは既存のステートマシンを使用し、支払い情報の更新など、前方／後方ナビゲーションを備えたマルチステップ・インタースティシャルをサポートしている。ワイヤプロトコルはJSONである。
Netflixは、UMAのためにHTMLを再発明したくなかったので、HawkinsのラッパーとしてCLCSを構築した。CLCSは、ネイティブのUIコントロールでUIをレンダリングし、ユーザーの入力を収集するアプリからバックエンドのロジックを抽象化する。スタック、ボタン、入力フィールド、画像などのUIコンポーネントや、却下や送信などのエフェクトを提供する。
以下はCLCSの例だ。
export function showBox(): Screen return ( <Modal> <VerticalStack> <Text typography='title' content='Come back next week' /> <Text typography='body' content='content='Please tune in next week to hear Statler & Waldorf say: What do you call an offline phone? - Notflix!'/> </VerticalStack> </Modal> );}Netflixのアプリは、通知のレイアウト（横向きか縦向きか、位置、サイズなど）を担当する。アプリは、UMAがこれを利用できるように、アプリのバージョンやデバイス情報などの情報をリクエストヘッダでサーバーに送信する。開発者は、他のコンポーネントをテンプレートと組み合わせることで、新しいCLCSコンポーネントを作成できる。
UMAはまだCLCSなしの古いバージョンをサポートしなければならない。なぜか？Netflixは、アップデートされることのない古いアプリのバージョンをサポートするという課題を抱えているからだ。主に、NetflixがもうサポートしていないOSバージョンの携帯電話やタブレット、そして古いアプリバージョンが動作するテレビなどだ。そこでGraphQLの出番だ。アプリはGraphQLを使ってサーバーにUMAをリクエストする。これにより、古いクライアントは古いコンポーネントを要求するため無視するが、新機能の導入が可能になる。さらに、新しいコンポーネントはフォールバックメソッドを指定し、CLCSベースラインコンポーネントで代替バージョンをビルドする。ベースラインコンポーネントは、そこに存在することが保証されている。
オフラインデバイスはUMAをサーバーに問い合わせられないないため、オフラインデバイスは現在大きな問題ではない。それでも、Netflixは将来のアプリのバージョンで一部のUMAをJSONとしてバンドルし、一部の通知がオフラインでも表示可能にするかもしれない。
UMAは、まず自動テストにデモベースのテストを使用する。ここでは、デモサーバーがハードコードされたUMAを配信している。Netflixアプリがこれらをどのようにレンダリングすべきかは明らかなので、テスターはクライアントアプリのスクリーンショットを撮ったり、より具体的な統合テストを実行したりできる。Netflixはまた、バックエンドのテンプレート・スナップショット・テストや従来のエンドツーエンド・テストも実施している。
振り返って、Luu氏はもっと早く終えておきたかったことをいくつか挙げた。ベースラインコンポーネント、形式化されたテスト戦略、デザインシステムパートナーとのより良い連携、テンプレートに関するプラットフォームとの連携などだ。