How is Javascript used within the Spotify desktop application?

http://www.quora.com/How-is-Javascript-used-within-the-Spotify-desktop-application/answer/Mattias-Petter-Johansson?share=1

by gflandre • 11 years ago

174 96 11 years ago

quora.com

jonnynezbo• 11 years ago

First off, great Quora answer. I wonder: if the 'notifications' squad comes up with an idea like 'users should be able to disable notifications', do they have to collaborate with the 'settings' squad?

janpieterz• 11 years ago

There are two [1] [2] super interesting videos about how Spotify works. Well worth the watch!

[1] https://vimeo.com/85490944

[2] https://vimeo.com/94950270

josteink• 11 years ago

I'm not going to applaud Spotify for the direction their desktop-client has taken UX-wise, but I did find this an interesting read about how they organize both their code and teams.

I always assumed parts of the Spotify-client had to be HTML/JS based, but I had no idea it was done to such an extensive degree.

LMAlVvQjSGj• 11 years ago

The Spotify desktop client has seen a massive regression since 2008 or 2009. It's incredible how they managed to make it so unresponsive. Scrolling in a playlist is like playing a game at 10 fps. It's uncomfortable and not worth it. Ads are worse as well. I've seen countless malware ads in the bottom banner.

ploxiln• 11 years ago

... but (smart?) developer time is so expensive! and computers are so fast!

drdaeman2• 11 years ago

I get it's sarcasm, but the problem is that computers are not so fast yet.

Developer vs computer time trade-off works only when software already works reasonably well. Which is not the case.

devicenull• 11 years ago

You also can't ctrl-f within a page, which makes finding things really annoying.

cwyers• 11 years ago

You USED to be able to. It's very annoying that that feature is gone.

AustinScript• 11 years ago

Hmm - I haven't really noticed any unresponsive-ness but I also am a paid subscriber, I wonder if the ads are responsible for the slowness?

The spotify mobile app has some odd behavior from time to time. The UI will continue to respond to my actions but nothing actually happens for 20 seconds, during that time i'll click on several different songs attempting to get them to play.

Finally, for whatever reason, the app springs back to life an begins to execute the actions out of some sort of queue leading to several songs playing. It seemed very odd to queue song plays in such manner. I would've assumed it would be last one wins rather than "Song 1" - play for 2 seconds "Song 2" - Play for 2 seconds "Song 3" - play for 2 seconds

I may have clicked "Play song 2" 15 seconds ago before the song is actually played.

Overall, I love spotify though. I use it everywhere.

tobr• 11 years ago

I've frequently been unable to pause or change the volume of the music for tens of seconds because the user interface stalled. Completely inexcusable for an app that is ostensibly for playing music.

On the good side, since all the webviews are right there in the app as renamed zip files, I suppose they could easily be edited to cut out some of the bottlenecks?

stevenjohns• 11 years ago

Uses >400mb of RAM for me and constantly uses about 5-10% disk usage.

It may very well be the ads responsible for at least a memory leak in my case.

seanp2k23• 11 years ago

Spotify and SoundCloud are testaments to how users will endure whatever awful UX you give them as long as they're getting enough value from your thing.

Nr7• 11 years ago

I'm also a paid subscriber and for me the newest version is clearly slower than the previous one, both on Windows & Mac.

Luckily there is a way to downgrade to the earlier version: http://www.reddit.com/r/spotify/comments/2y239w/a_guide_to_d... (The second method works for me)

SmellyGeekBoy• 11 years ago

Speaking of the mobile app, the lockscreen UI on Android is absolutely infuriating while driving... The "Skip Song" and "Close" buttons are right next to each other and far too small. Between that and the features they've been gutting from the desktop app I've gone back to Google Play Music now.

noxToken• 11 years ago

Add to that the massive start-up time for the Windows client. A fresh instance Spotify from a rebooted machine takes ages to gain full functionality. If you quit in the middle of a good playlist, most of the time you'll be able to continue playing from where that playlist left off. If you opened Spotify to find a song or move to another playlist, you'll be waiting a while.

I just started Spotify with a stopwatch:

2:26 for the main Browse to completely render

2:42 for the live search window to give suggestions

2:52 (+10 seconds) for the search to return a result

I once thought it was because of the massive local library that had to be loaded and sorted into Spotify, but I've done away with local files to try to speed up the start up. The results on my laptop are not any better. Maybe it's because I've been updating the same client since 2012?

1_player• 11 years ago

Wow.. I agree that Spotify isn't the most lightweight application, but it doesn't feel much heavier than, say, Chrome on my Linux installation.

Are you on a mechanical hard drive perhaps?

The network performance though is quite bad, searching for some song often fails or just is very slow to load and render.

goldfire• 11 years ago

Something is wrong there. I just tried the same tasks on my system; from clicking the shortcut to the Browse view rendering was 5 seconds, the live search displays suggestions almost as fast as I can type more characters, and the full results appear within a second. I am running it off an SSD, but that's not enough to account for all that time. I don't have a guess what it is, but something else is going on.

madsushi• 11 years ago

The recent removal of the system tray icon is anti-user. It provided users with easy access to Play/Pause from the system tray, but that meant users spent less time in the app, so the system tray icon was removed completely.

conradfr• 11 years ago

Infuriating. It's 2015 and my Winamp is still more usable than a "new" music player.

Why do they care if I spend more or less time in the app if I'm a premium user, surely that can't be the reason for this regression.

baliex• 11 years ago

This update also removed the Alt+F, X keyboard shortcut I was using to quit from the keyboard. Don't think it's possible to do that any more.

daheza• 11 years ago

As someone who switches often between the mac and windows version this kills me. The mac version will continue after closing but the pc version just cuts the music completely.

beachstartup• 11 years ago

the mobile app has several modes in which it'll stop playback, and you need to pull it out of your pocket, and hit buttons or re-select your damn playlist before it starts your music again. also really simple shit like 'random or 'repeat' are impossible to find.

which is pretty much a giant fucking failure for a mobile app that's used by people in the car, bluetooth, people on the go, etc.

i wish i could say mobile itunes stayed useable, but it didn't either. we're basically choosing from the worst of the best, these days.

lobster_johnson• 11 years ago

They did a refresh recently (just a few weeks ago) that installed a new renderer both for the playlist content view and for the playlist list view.

That resulted in a big performance boost, at least on my Core i7 MacBook Pro. With older machines I can guess that the performance might still not be that good.

However, this refresh also removed the ability to filter the playlist content view (cmd+F). The worst part of losing that feature is trying to find stuff in "Local Files". Very awkward.

task_queue• 11 years ago

When the industry props you up as the only avenue for access to a large collection of streaming music, you don't have to compete on terms of stability, usability or features anymore.

Nemcue• 11 years ago

Paying for Spotify has been like being in a relationship with a partner that is slowly letting themselves go.

"Oh, you've.. you've redesigned? Yeah no — it's.. it's kind of dark don't you think? ... no-no, I like it honey."

"Playlist-search isn't there anymore? Oh, ok.. :|"

"Hey, some of my songs aren't playing anymore, do you know anything about that? No.. ?"

"My offline-playlist is showing me a spinner instead of playing.. sigh, no it's fine, I'll just dig up my old mp3's in the garage."

At this point I'm seriously considering a divorce.

odiroot• 11 years ago

I have a feeling that's not the case for the Linux version. It looks completely different than other platforms and is also build against Qt libraries.

strangecasts• 11 years ago

Yeah, the 32-bit Linux version (the 64-bit version has the new UI IIRC) is the way the Spotify client used to look before they switched over to WebKit. I wish it was possible to go back to that on Windows - it was much snappier and didn't have lots of pointless padding between song titles.

Dewie33• 11 years ago

Huh, I thought the Linux client was some kind of web-stuff too. It certainly feels that way.

thrownaway1223• 11 years ago

From the two computers I've used with spotify clients on the Linux version is far snappier and more responsive (as in responds to commands sometime within the current minute) than the OSx version.

According to their blogs etc the main purpose of the Linux version is internal use by spotify developers working on Linux workstations - it is only released to the public because, "why not?". I wonder if this is why the Linux version is 'behind' the windows/OSx versions but actually works better. I.e. they dogfood it more but don't feel the need for constant UI 'improvements'.

ly2• 11 years ago

I got a HDPI display for my windows machine a few days ago. What I am wondering now is why Spotify doesn't support this? If it runs on chromium, which does support hdpi displays, why doesn't spotify? I have I have to choose for a really small spotify client or a real blurry one. Reading this, it would not seem to hard to make it work. It works fine on OSX.

bbrks• 11 years ago

I can't speak for Windows, but HiDPI Spotify works great on OS X.

http://i.imgur.com/8mGbvnV.png

ly2• 11 years ago

I know, I use it on OSX too, so thats why I was wondering why it doesn't work on windows? It seems to be built on the same system.

matthewmacleod• 11 years ago

It's been like this for some time – I remember I was able to inspect elements within the page some time ago.

One of the problems though – the user experience of the app is rather unpleasant. It's extremely laggy and noticeably non-native – using incorrect keyboard shortcuts, and so on.

I'm sure it's possible to do it better, but the UX of the app used to be great and is slowly declining, which is a real shame.

GeorgeHahn2• 11 years ago

While I'm appalled by some of the recent changes Spotify has made, I'm really impressed by how easy it is to work on their desktop client. I can't even imagine how nice things must be when you have the real source, automatic live-reload, and don't have to muck around with concatenated or minified JS/css/handlebars files. This setup can't be good for memory usage, but it rocks for development!

For anyone who's curious, it's easy to take a look under the hood from the Spotify installation folder. (Windows users can find it at %APPDATA%/Spotify/)

The Apps directory is full of *.spa files. These are zip files; if you extract them to folders with the same names and delete the zips, the application will still work, but you'll be able to edit the code.

The zlink directory is the most useful. This holds the main UI and much of the logic that powers it. Search through main.js in this directory for the Session.prototype.isDeveloper declaration. If you force it to return true, the Spotify UI will refresh when you press F5 inside it. Now you don't have to close and reopen every time you make a change! This will also add some miscellaneous UI embellishments (they aren't terribly useful and can be disabled by hardwiring logic elsewhere in main.js).

Initially, I thought the about directory would be a handy sandbox to mess around in, but then I realized that you can easily add new apps! Integrating them into the UI takes a bit of effort, but you can easily get to them by putting the app URI into the search bar (spotify:app:___). (Each app's URI is defined within the its js file. Make sure you give it a unique name in its manifest, too.)

Additionally, you can open cef.pak and devtools_resources.pak with a text editor and mess around (though they're not terribly useful).

NB: If you're really motivated, it shouldn't be too hard to set up a complete development environment for this. I was able to quickly dump most of the concatenated files to zips - all I needed to do to finish was to cut off some of the module wrapper code and reformat directory paths. I quit when I accomplished my goals of shuffling the UI around, but if you're interested, I have a simple concatenated files dumper at https://gist.github.com/GeorgeHahn/0deef2fb0d392ef507dd.

It takes a bit of mucking around, but it's not too hard to achieve a legacy-UI feel (volume on the left, no lyrics button, de-uglified media control buttons, compact playlist/track lists, etc). Of course, this will get ruined the next time Spotify updates, so you should block updates and make backups if you want to keep your changes.

touristtam2• 11 years ago

Maybe that could offer the basis for an alternative client. Thanks for sharing your knowledge. :)

mwcampbell2• 11 years ago

An alternative desktop client using libspotify and a non-web GUI toolkit would be much more interesting.

hello_moto• 11 years ago

SAP Lumira (http://saplumira.com/) also uses JavaScript/HTML5 with similar approach to Spotify for the desktop application.

DigitalSea2• 11 years ago

I really like the approach that Spotify take to working on new features, the squads idea is quite good. I think it is important that people occasionally break out of their cliques and work with new people, I have found based on personal experience that working with the same people day-in-day-out will eventually give you tunnel vision. You stop learning from those around you, eventually the hive-mind becomes one and there is little free-thinking. Breaking out and working with another squad I think could be beneficial to Spotify.

This is where the praise ends. As a Spotify Premium user, I love the service, but the interface as many others have pointed out has really gone downhill. I don't know who is leading the UX squad over at Spotify, but the app needs considerable work. High startup times, incredible amounts of frame rate lag and removal of the system tray icon. What is going on over there? I have also noticed that the app can play a song quickly, but browsing and searching is incredibly slow (even on a fast connection).

mahouse2• 11 years ago

If you feel like the Spotify desktop application is slow, you can try and use play.spotify.com instead—it's almost the same, and you can even use AdBlock on it.

est• 11 years ago

Is Ludvig Strigeus @ludde (of µTorrent/OpenTTD/ScummVM fame) still developing Spotify desktop client?

I hope this chromium crap isn't his decision.

johanbrook• 11 years ago

He's still there, and is doing low level stuff and hacks in Gothenburg. I heard he wrote much of the initial, highly optimized code for Spotify Connect.

I don't think the move from the C/C++ client was something he liked, tbh :)

amd_• 11 years ago

Interesting that I can't listen to Spotify while running certain debuggers - not that its hard to by pass this "feature".

finicky• 11 years ago

i'm so confused as to why Spotify removed the ability to search within a playlist recently. such a useful feature is now gone, really leaves a sour taste in my mouth.

not_kurt_godel• 11 years ago

I would bet that the Spotify desktop client is among the top 25 most intricate uses of JavaScript in the world.

If this is really true, "intricate" probably means "needlessly complex" because the interface, while by no means bad, is nowhere near as sophisticated as many JS apps I have seen and worked on. Off the top of my head, I would be willing to bet GMail, Google Spreadsheets, and Facebook are all vastly more "intricate" than the Spotify client based purely on number of features.

miken1232• 11 years ago

Nice technical read, but to be honest, the moment I find another app that does what I need I will gladly leave Spotify behind. Apart from the general slugginess of the app, the number of features that have been removed over the last couple of months is staggering. Just some examples, in case someone from Spotify in a position to fix this is reading this:

* Searching in playlists was removed

* Searching in local files was removed (and the local file support has always been crap anyway, please work together with Last.fm to properly match files)

* Creating a new playlist in a folder was removed (you now have to create and move the playlist)

* Sorting playlist folders was removed.

* The option to turn off your 'volume normalisation' was removed. Because your algorithm is really broken and severely compresses the music, removing any dynamic range, this is the biggest showstopper for me. Check your forums, tens if not hundreds of people already left because of this.

* Apps were removed (tbh, I can live with this)

Oh, another one, please give us an option to turn off 'Spotify Connect'. It prevents my Android phone from entering deep sleep, and thus it is a battery drain. You don't need to fix the battery drainage, just give me an option to turn the feature off.

danielsamuels• 11 years ago

Starring songs was also removed and individual songs you "Save to Your Music" get bundled in with every song from every album and artist you've saved or followed and the songs from some playlists it seems. It's a complete mess.

praseodym2• 11 years ago

To be fair, I still have my 'Starred' playlist and I can still add items to it. But granted, it's a bit more cumbersome to add new songs to it.

For me "Your Music" only contains songs I explicitly add to it, so not songs from playlists or artist that I follow.

kaka12• 11 years ago

I believe that the main reason for not being able to disable 'Spotify Connect' is that the functionality is being used to prevent people from sharing Spotify accounts. This became particularly clear in the last version of Spotify when they made it impossible to set the Spotify client in 'Offline' mode if the phone was already connected using 'Spotify Connect' (the 'Offline' setting is being grey out). Now you have to set the phone in 'Flight mode' and then start up the Spotify client and set the Spotify client to 'Offline' mode (and then disable 'Flight mode' if you want to use Internet while listening in 'Offline' mode). So my guess is that they will never make it possible to disable 'Spotify connect'.

MrBuddyCasino• 11 years ago

Yes its a shit-show. They even had a (hidden) working equalizer in the OSX version, but decided that this too was a feature that should be removed.

I still have no idea how to find a specific album in an artist's page, but of course that is a minor concern, compared to their ability to "to work with whatever frameworks they need, without the need to coordinate tooling and dependencies with other squads".

The one thing Apple got right is to always optimize for user experience, never for engineering convenience. Native code, no garbage collection - still pays off today.

What would be a good cross-platform tech stack that satisfies those needs, and isn't C++? Anything with a QT binding I suppose?

sorenjan• 11 years ago

Python with Qt on top of C++ would probably be my choice, if pure C++ isn't an option.

jasey• 11 years ago

* Searching in playlists was removed

This is driving me crazy. I managed to stumble across this feature via cmd+f one day and as quickly as I find it, they remove it. Seriously?

The only way this feature could be used was via a keyboard shortcut, it wasn't a something cluttering the UI or adding additional cognitive load in a menu for a user - and it was damn handy.

The day where the update removed this feature I wanted to find the product manager at Spotify and yell WTF at their face.

mirsadm• 11 years ago

Spotify connect is the most frustrating problem for me. I use it at work on my laptop and it drains the battery on my phone, tablet and my partners phone (as we share an account).

Joona• 11 years ago

And they don't even support FLAC!

antihero• 11 years ago

Doesn't disabling "Set the same volume for all tracks" in advanced prefs disable normalization?

miken1232• 11 years ago

Yes it did, but they removed that option, at least in the Mac OS X version of Spotify.

[edit] Apparently it has been added again in 1.0.5.x, but I'm not getting that update yet...

thecopy• 11 years ago

I am using Spotify 0.9.17 on Linux, and it is blazing fast. Starts up and is ready in under 0.5 seconds. Compared to the new "improved" JS version on my OS X it is an order of magnitude better.

I can still search in playlists! And i get the Top Lists for all the contries instead of just a few (Spotify decimated the avaiable contries in top lists in the JS version).

Stay on the native app as long as you can.

clemsen2• 11 years ago

Anybody who spent some time on https://community.spotify.com will agree that Spotify does not give a damn about the opinions of their most passionate users (the ones that actually want to improve the experience by participating in the forum!). Especially since Spotify significantly increased font size and line spacing for no obvious reason [1] and no option to change it back even when this was a (from my perspective) widley demanded feature, I have lost confidence in the community process.

[1] https://community.spotify.com/t5/ideas/v2/ideapage/blog-id/i...

staticelf• 11 years ago

Can we please stop linking to Quora articles? Just post it on pastebin or something similar. It's silly to post to a place where you need to signup in order to read the material.

How is Javascript used within the Spotify desktop application?

Related Stories