Spotifyは先頃、Webとデスクトップクライアントのコードベースの統合への道のりの詳細な説明を公表した。2018年の終わりに、Spotifyのチームは、先頃構築されたWebプレーヤと独立したリッチなフル機能のデスクトップクライアントも所有していた。多くの機能は2回実装する必要があるため、Spotifyのエンジニアは希望したペースで新機能を出荷していなかった。現在、Spotifyは両方に対して1つの保守可能なコードベースを作成し、開発のリズムの改善に至った。
Spotifyには、プロジェクトの成功を評価するための4つの主要な目標があった。1つ目は再利用性だ。Spotifyは複数のクライアントで同じコードを再利用した。これにより、クライアントは1度記述したコードによってさまざまな場所でメリットを享受できた。二つ目は統一だ。このプロジェクトにより、Spotifyは、プラットフォーム間でユーザエクスペリエンスとビジュアルデザインを統合し、Spotifyエコシステムの他の部分と一貫性を持たせることができた。
3つ目の目標はスピードだ。新しいアーキテクチャにより、UIコーディングが開発者としてよりシンプルで理解しやすくなった。その結果、開発スピードが向上した。最後の目標はユーザ満足度だ。Spotifyは、デスクトップおよびWebプレーヤのユーザのニーズを満たすために、ユーザテストを継続的に実施している。
Spotifyのチームは、コード収束プロジェクトにアプローチするための戦略について説明している:
私たちは長期的なプロジェクトを始めたことを知っていたので、私たちの最優先事項は、デリバリーのリスクを軽減し、ビッグバンの書き直しに陥らないようにすることでした。私たちは大胆な解決策に落ち着きました: デスクトップグレードの機能セットに到達するまで、既存のWebプレーヤのコードベースを反復することにフォーカスしました。Webプレーヤは継続的にデプロイされているため、最終目標に向けて行われたすべての変更を実際のユーザに出荷してテストすることができました。
エンジニアは、自律性を促進するために以前のデスクトップクライアントを設計し、複数のチームが機能の開発と保守を持てるようにした。これは、Chromium Embedded Framework (CEF) を使用してWebベースのユーザインターフェイスを表示するネイティブのWindowsおよびMacアプリケーションだ。クライアントのすべての「ページ」は、iframe内で実行するスタンドアロンの「アプリ」として構築された。
これまでのデスクトップクライアントのアーキテクチャ
出典: https://engineering.atspotify.com/2021/04/07/building-the-future-of-our-desktop-apps/
チームは、統合クライアントをWebプレーヤのコードベースに基づいて作成し、CEFでデスクトップをホストすることに決めた。彼らはこの動きの理由を説明している:
Webプレーヤのコードベースは、構築するためのはるかに強固な基盤と見なされていました。これにより、新しい機能を迅速に開発することができました。Webを念頭に置いて開発されたことで、つまり、サイズが小さく、パフォーマンスが高く、さまざまなブラウザで動作することを意味しました。クライアントは継続的にデリバリーされ、変更をほぼ即座にユーザに提供できました。
ただし、この決定はコストを招いた。WebプレーヤはSpotifyのWebサーバと緊密に結合されており、再生システムの動作は異なり、認証でさえネイティブAPIを使用した異なる実装を必要とした。Spotifyのエンジニアが解決策について説明している:
UIプラットフォームに依存しないようにするために、さまざまなデータソースとさまざまな再生スタックを抽象化し、使用可能な機能について有用な情報をユーザインターフェイスに提供するTypeScriptプラットフォームAPIを構築しました。また、エクスペリエンスを少しずつ再構築する途中でクライアント全体をTypeScriptで書き直しました。
新しいWebプレーヤ (左) とデスクトップ (右) クライアントのアーキテクチャ
出典: https://engineering.atspotify.com/2021/04/07/building-the-future-of-our-desktop-apps/
リスクを軽減するために、Spotifyは小さな「バーチャルチーム」を結成して最初のエンジニアリング実験を開始し、Webプレーヤをデスクトップコンテナに配置できるかどうかを判断した。チームの作業は3か月後に正常に終了し、プロジェクトはその後すぐに開始された。Spotifyのエンジニアが両方の以前のコードベースを同じモノレポの同じ場所に配置したという事実がこのタスクを容易にするための鍵だった。