What language or technology was used to develop the Spotify desktop application? [closed]

Question

Does anybody know which language or technology was used to develop the Spotify desktop application? It's stable, good-looking and lightweight.

Shir

Answer 1

From here: http://www.quora.com/What-is-the-technology-behind-the-Spotify-desktop-app
Dated: 2014-09-09

Andreas Blixt, 5-year Spotify employee:

The core of all our clients is C++, but that core has since Rasmus's post gotten condensed, with functionality split out into modules. As Spotify becomes available on more and more platforms as well as getting a richer feature set, we need to ensure that "core" doesn't become "a little bit of everything". This has meant breaking out certain features, such as playback control, into their own separate modules. These modules are still C++ but are self-contained enough that their logic could theoretically be implemented in other languages. We call the interface layer to these modules "Cosmos", and it works in a way not too dissimilar from HTTP. Cosmos lets any part of the client communicate with a module using arbitrary paths and payloads, allowing for a much more flexible architecture. Some obvious benefits are versioned interfaces (example: GET sp://player/v1/main returns player state) and JSON for passing data around. This is important for another change in our desktop client.

A lot of our desktop UI these days is actually using Chromium Embedded Framework (CEF), which basically means our views are powered by JavaScript, HTML and CSS. For all of our feature teams to be able to work on their features without fear of breaking someone else's view, each view is sandboxed in their own "browser" (I guess you can think of the views as tabs in Chrome, except we show more than one at a time). This brings with it one restriction though: sharing data between views gets more difficult. This is where Cosmos comes in and really simplifies the communication between core (C++) and JavaScript land: the JS clients can make arbitrary requests and if there's a binding, that request gets handled and responded to. One example is the "messages" endpoint which lets any view push JSON data out to any other view that's listening (kind of like window.postMessage in HTML5, except this one can also interface with C++ modules). This is also how all the play buttons in the client know whether a track is playing or not, or whether it's available offline (another Cosmos module), or whether you've saved a song to your music.

Another important change to our technology stack is that we've moved some logic further "back", into view aggregation services. So where we would before do almost all logic in the clients, only using the backend as a data store, we now do much more work in a logic layer between the data stores and the clients, exposing endpoints very similar to Cosmos (in fact, you can call a backend the exact same way you call a Cosmos module, so moving between layers is not a hassle). The reason for this is two-fold: one, it lets us expand to more platforms more quickly because there's less client logic to implement and two, it really helps us keep our client behavior more consistent and up-to-date because the client is more "stupid". To mitigate any slowdown that might come from this we have ensured that there are caching rules for all data, so that the client will still keep data locally, it's just not responsible for as much business logic as it used to be.

Mandi

Answer 2

Here's the list of third-party components they use (on top of C++ of course):

• Boost
• Expat
• FastDelegate
• giflib
• libjpeg
• libogg
• libvorbis
• Mersenne Twister
• zlib
• NSIS (Windows only)
• Windows Template Library (Windows only)
• Growl (Max OS X only)
• MATrackingArea (Mac OS X only)

Liriodendron

Is any of this a GUI library? – Adductor

Nope, it looks like they use their own GUI elements based on native ones on Windows and Mac separately. – Liriodendron

How did you determine this list? Do you have the inside scoop, or can you deduce this from the binary? – Cockatoo

Open Spotify and go to Help > Show Licenses – Liriodendron

I also discovered that Spotify uses CherryPy to develop their back-end, webapps. – Powers

@Rafael "they use their own GUI elements based on native ones"---> Can you explain that statement further? I don't understand what that means. How do you develop your own GUI elements? I've only ever used libraries for GUI programming; I've always wondered how people create the libraries in the first place. – Why

@New2This I.E. windows has built in native API that allows you to build GUI without any 3rd party libraries. It seems they use WTL to simplify work with native GUI. – Disengagement

They use CEF to render GUI written using HTML/CSS/JS. – Britishism

Answer 3

According to a Spotify designer:

http://twitter.com/#!/tobiasahlin/status/96483609799692288

"Some of it is in C++, and some of it is in a HTML-ish markup language called Spider" "It's built solely to be used within Spotify"

Gerhan

"Spider" is internally developed at Spotify. – Janiuszck

Found this at git hub: github.com/krikelin/Spider Some one seems to have reverse engineered the spider layout engine (from reading the spotify binaries ?!?) – Discursive

Answer 4

Spotify now uses the Chromium Embedded Framework (CEF) to display a web interface consisting of HTML/CSS/JavaScript within the desktop application.

Delilahdelimit

that means: ElectronJS – Backhouse

Answer 5

This answer is more updated and coming from their engineering blog: https://engineering.atspotify.com/2021/04/07/building-the-future-of-our-desktop-apps/

The Spotify Desktop client is a Windows and Mac native application that uses CEF (Chromium Embedded Framework) to display a web-based user interface. That’s still true today, but for the previous version of Desktop, every “page” in the client was built as a standalone “app” to run inside its own iframe.

However, they recently had to update their architecture because they wanted to integrate their Web Player built with React and Desktop Client in a way that a single team can develop and ship features for both clients.

The final architecture looks like a layer of Platform APIs that expose the underlying Spotify ecosystem to clients, with a React-based user interface and the Platform APIs exposed via React Hooks. Thus, the new UI can run on the web, and it can run in our Desktop container, and never know, or care, if the data is coming from our C++ stack or our web infrastructure.

Architecture Diagram

Clinical

This answer appears much more current (late in year 2021) and seems to obsolete currently-higher-voted answers. – Starryeyed

Answer 6

From their website:

Spotify is built mostly in Python and C++

Hinda

The desktop application doesn't use Python. It is C++. Python is used on the server side. – Sinotibetan

Answer 7

Given it's running on windows, clearly not .NET (Process explorer is telling me that), didn't follow a AIR install process, I'd say C++ using cross platform libraries.

Everything is compiled down into one executable, which indicates they had access to the source of all dependencies.

W.r.t to Techno...i think they used Hardhouse Electronica

Victoir

compiling down to one exe doesn't mean you've got access to the source of everything, libraries can be pre compiled with a header – Combat

Answer 8

Check the first answer here: https://www.quora.com/What-is-the-technology-stack-behind-the-Spotify-web-client

Andreas Blixt who is a former Technology Lead at Spotify has answered it in details.

We have a PHP layer that deals with logging in (and some other server-side logic) as well as serving apps on different domains (for security reasons). The rest is all JavaScript.

For the JavaScript to communicate with the backend, it does so via what we call an "access point" (AP), a highly optimized C++ service which can handle lots of active connections at once. This service is responsible for routing requests to the correct backend service. This service is capable of running over ports 80 and 443 to overcome firewall restrictions. The communication is done over WebSocket (or Flash for some browsers).

To communicate with specific backend services, we route the requests through the AP using our own transport called "Hermes". This is basically a URL scheme that lets the AP know where to send the request. Payloads are encoded as Protobuf. Hermes has a nice caching system (we call it "Mercury") that stores results to IndexedDB for browsers that support it (we have the same system in the desktop client, but instead implemented in C++), to avoid requesting the same data twice. This is very useful for resources that get re-requested a lot, such as artists, albums and tracks.

For the UI we have written a pretty advanced application framework (called "Stitch") for allowing every view to be developed independently by different teams without having to worry about breaking anything. The views run in a sandboxed , but can still depend on shared libraries for common things such as loading track metadata, etc. As of this writing we have ~35 unique views (or apps) in the web player.

Views get data and perform actions via what we call a "bridge" (basically, an API) using postMessage, so that we don't need to reinitialize all the common code for every app. The really cool thing about this is that a lot of those ~35 views I mentioned before can actually also run inside the desktop client without modification. Of course, instead of postMessage they will be using a hook into Chromium Embedded Framework, and our C++ core.

We try to use HTML 5 technologies as much as possible but in some cases depend on Flash. I think we have a really cool tech stack for our web player in general.

Blinders

Answer 9

• Issue trackers:

  • Sentry

• Security:

  • reCAPTCHA

• Miscellaneous:

  • Spotify Web
  • PWA
  • Amazon S3

• Tag managers:

  • Google Tag Manager

• JavaScript libraries:

  • core-js 3.24.0
  • Reactjs

• PaaS:

  • Amazon Web Services
  • Reverse proxies

• Envoy:

  • Cookie compliance

• Others:

  • OneTrust
  • A/B testing
  • Google Optimize

Skimmer

Answer 10

The frontend is written in FLEX, checkout the sources on your mac or windows machine. You will see a lot of xml file which are in the flex file format.

Off course the connection to the server and platform integration is probably written natively in c++. But the UI part is just FLEX...

Splasher

You can't checkout the sources on your mac or windows machine because it is against the spotify terms and conditions – Malita