2 min read

A former Spotify engineer, Mattias Peter Johansson, has outlined how the music streaming platform uses JavaScript on it’s desktop application. It’s complicated and, according to Reddit, “kind of insane”. Responding to a question on Quora, Johansson says it could be “among the top 25 most intricate uses of JavaScript in the world.”

What’s particularly interesting is how this intricate JavaScript has influenced the Spotify architecture and the way the development teams are organized.

How JavaScript is used on the Spotify desktop app

JavaScript is used across the Spotify desktop client. Wherever UI is concerned, it uses JavaScript. C++ is used for functionality beneath the UI, with JavaScript sitting on top of it. The languages are connected by an interface aptly called a ‘bridge.’

Spotify’s squads and spotlets

The Spotify team is made up of small squads of anywhere from 3 to 12 people. Johansson explains that  “a feature is generally owned by a single squad, and during normal conditions the squad has all it needs to develop and maintain its feature.” Each team has as many backend, front end, and mobile developers as necessary for the particular feature it owns. These features are known as ‘spotlets.’

Each of these spotlets are essentially web apps that come together to power the desktop app’s UI. Johansson explains how they work, saying:

They all run inside Chromium Embedded Framework, each app living within their own little iframe, which gives squads the ability to work with whatever frameworks they need, without the need to coordinate tooling and dependencies with other squads.

The advantage of this is that it makes technical decision making much easier. As Johansson explains, “introducing a library is a discussion between a few people instead of decision that involves ~100 people and their various needs.”

Shared functionalities across the Spotify development team

Although spotlets and squads create a somewhat fragmented picture of a development team, things are unified. “The latest versions of all Spotlets are zipped and bundled with the desktop client binary on every release, assets and all,” says Johansson. Individual spotlets are also sometimes released where an emergency fix might be needed.

Although tooling decisions are left up to individual squads, there are a couple of tools that are used across the team. This includes GLUE, a CSS framework that allows some coordination and alignment in terms of design. The team also rely heavily on npm, as you might expect. “We have our own internal npm repository where we publish internal modules, and we package the code together using a Browserify-like tool.”


Subscribe to the weekly Packt Hub newsletter. We'll send you this year's Skill Up Developer Skills Report.

* indicates required

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here