TechPrufer
Get started
Spotify
Spotify logoSpotify · Feature trail

Unified Header/Footer Component

2 posts · Mar 2021 – Jan 2024

What this trail covers

Spotify is evolving its approach to managing shared UI components across different product segments. This post details the creation of the S4X-Masthead, a facade pattern implementation to unify MastheadHeader and MastheadFooter components for the Spotify for Artists segment. This aims to reduce duplication, prevent implementation drift, and simplify maintenance by centralizing dynamic content loading and exposing a consistent interface for user session and localization contexts. Future work involves unifying the desktop and web player clients by migrating the desktop client to a React-based UI, abstracting platform APIs to support different infrastructures, and achieving a single codebase for both clients. This has led to improved reusability, unified user experience and visual design, and increased speed of delivery.

All Spotify trails
  1. Applying the Facade Pattern on Spotify for ArtistsThis post introduces the S4X-Masthead, a new internal component library for Spotify for Artists that implements the facade pattern. It exports React components (MastheadHeader, MastheadFooter, MastheadProvider) to provide a simplified interface to the underlying masthead functionality. The S4X-Masthead dynamically loads content from a CMS, reducing maintenance costs and the risk of mistakes for client applications. It also manages dependencies on services like translation and authentication, layering subsystems and simplifying integration.
  2. Building the Future of Our Desktop AppsThis post details the technical strategy and execution for unifying Spotify's desktop and web player clients into a single codebase. It describes the migration of the desktop client to a React-based UI, the creation of TypeScript Platform APIs to abstract underlying data sources and playback stacks, and the decoupling of the Web Player UI from browser-specific dependencies. The new architecture allows the UI to run on both web and desktop containers without knowing the underlying infrastructure. This resulted in improved developer velocity, the addition of features like downloading and offline playback, and a unified user experience and visual design.