Reddit、モバイルアプリ全体の新しいフィードアーキテクチャにサーバー駆動型UIを採用

Redditは、iOSモバイルアプリのフィード機能を改良し、Androidアプリにも導入した。どちらのケースでも、モバイルアプリをリリースすることなくローカライズされたコンテンツレイアウトの変更を可能にするServer-Driven UI(SDUI)をコミュニケーションアプローチとして採用した。

2022年、同社はRedditをより使いやすくすることにコミットし、それ以来、より良い投稿体験、検索可能なコメント、モデレーター・ツールの更新など、いくつかの改善が行われてきた。今年の主な焦点は、より良いユーザーエクスペリエンスを備えたフィードの新設と改善だ。チームは、ゼロから新しいフィードプラットフォームの構築に取り組んだ。この動きは、主に以前のフィード・アーキテクチャで作業することの困難さから、この動きが決定した。

Redditの熟練ソフトウェア・エンジニアであるKirill Dobryakov氏は、以前のフィード実装における課題を次のように語る。

昨年、我々のフィードはかなり遅かった。(中略)フィードのコードは、メンテナンスの悪夢のようなものに成長していた。現在のコードベースは、会社が今よりかなり小さかった2017年頃に開始された。多くのエンジニアと機能が、6年前のコードベースを最小限のアーキテクチャー監視でやり抜いてきた。この領域で新しい製品機能を試す際に、迅速に反復することが、より一層の課題となっている。

フィードはRedditの機能の核となる部分だ。チームは、新プラットフォームがより優れた機能速度を実現し、より優れたパフォーマンスを提供し、異なるデバイスやサーフェス間で一貫性を提供することを確実にしたいと考えていた。

バックエンド側では、チームはGraphQLを維持しつつ、APIレスポンスのオブジェクト構造を作り直した。多くの投稿タイプで利用可能なすべての属性を含む大きな投稿オブジェクトを提供する代わりに、チームはServer-Driven UI(SDUI)を採用し、クライアントアプリがレンダリングする正確なUI要素を送信した。新しいレスポンス構造は、UIコンポーネントを一般的なセルのグループにまとめる。そうすることで、バックエンドはレイアウトの大部分を制御し、新しいコンテンツ要素を素早く導入できる。モバイルアプリは、さまざまな投稿タイプやその他のコンテンツを表示する方法が分からなくても、APIレスポンスに記述された要素をレンダリングする処理を集中して行う。

SDUI採用前後のAPIレスポンス(出典:Reddit Engineering Blog)

プロジェクトの一環として、チームはiOSアプリのもっとも古い部分の1つを、Swiftで書かれた新しい実装に置き換えた。その部分は、主にObjective-Cで書かれており、積極的なメンテナンスがされていなかった。

チームは新しいコードベースをモジュール化し、ビルド時間を短縮し、テスト容易性とテストカバレッジを向上させた。また、新しいコンポーネント・ライブラリを活用し、標準化されたデザイン・システムを実装することで、すべてのフィードで視覚的な一貫性を実現した。技術スタックの更新により、コードベースはより安全かつ迅速に開発できるようになり、APIレスポンスから不要なデータを削除することで待ち時間が短縮され、ホームフィードの読み込みが12%速くなった。

/filters:no_upscale()/news/2023/09/reddit-feed-server-driven-ui/en/resources/1fnf9p0kztxdb1 Large-1694876277864.jpeg)

iOSアーキテクチャ(出典:Reddit Engineering Blog)

フィードのアーキテクチャは、チェーン可能なデータソースサービス、データモデルをビューモデルに並列変換するコンバータ、および、以前のビューモデルと新しいビューモデルのスナップショット間の変更を適用する方法を見つけることができる差分エンジン(SliceKitの一部)で構成されている。

関連記事:

• デベロップメント
• 設計/アーキテクチャ
• Android
• OS
• Event Driven Architecture
• Architecture
• モバイル
• User Interface

We protect your privacy.