Spotify frontend life

Images are usually the most “heavy” static on the web. Many front-end vendors are aware of responsive images, which allow the use of certain images for different resolutions. But this is not their only plus, because how and when we download them also affects the speed of your web application.

At FrontFest 2017, Jose M. Perez of Spotify comes to us with a presentation on Progressive Image Rendering . He will talk about progressive rendering techniques based on placeholders, dominant colors, blurry images, and lazy loading to help improve performance.

On the eve of the conference, we talked with Jose about the web stack, releases and process management in Spotify, the attitude to Open Source and the weather in Spain, Sweden and Russia.

- Hi, tell me about yourself.
- My name is Jose, I work at Spotify, Stockholm, Sweden. I’ve been doing the web for about 10 years. Started with Java and C # and went to the web. The web is cool because the product is quickly delivered to battle.

- Have you been to Russia before?
- Only St. Petersburg and only a couple of hours when I was on a cruise. But even a few hours was enough to understand: the climate is similar to the one in which I live now. By the way, I am from Spain and when I tell my Spanish friends that I live in Sweden, they think that in Sweden it is always incredibly cold and generally impossible to live. But this is not so. Colds cost only a few months. About Russia, I have roughly the same opinion, in contrast to the widespread opinion that snow always lies here.

- Scared to go?
- Hah. Not! Should it? Spotify has a lot of employees from different countries and representing different cultures, so I already broke a lot of stereotypes in my head. You can’t believe the TV. In real life, this is not so.

“ Do you know the speakers?”
- I ran through the list of speakers and some names look familiar. Perhaps seen at other conferences, but personally not familiar. Interestingly, not so long ago I was in Alicante, my hometown in Spain, at a meeting and met there a programmer from Moscow. This is very strange because the mitap is local. He said he would be at FrontFest.

- What about Russian companies?
- It seems that besides Yandex, I no longer know the companies. In general, I was very surprised when I found out that there are local large search engines that Russian people prefer Google. I can’t remember anything else, but I like that Yandex came up with BEM.





- Tell me about the work.
- I have been working at Spotify for five years. First in Spain, now in Sweden. Been to several teams. Now I'm developing a player that works on various platforms.

The main discovery of these years is that the products we make on web technologies work confidently not only on the web.

- What technologies do you use?
- Previously, the server was PHP. Now we are rewriting almost everything in Java. They tried to do something on Node.js, but realized that for us it was inconvenient and unprofitable. We realized that the client application is enough for us without server rendering, without a layer in the form of Node.js and other things.

- And what about the client?
- Each team has its own. I know the team that uses Angular, and I want to say that they scale very well and they have everything in order. In my player team we use React. The web, desktop and TV are one and the same application written in React, and we are very pleased with it. React also enjoys the fact that it is very easy to test. The same Jest is very convenient. Sometimes we use GraphQL. Redux, of course. It’s easier to say that we just use the React stack.

- I can not help but ask: Angular vs React vs Vue.js. What do you choose?
- Not a lot of work with Angular. This was the first version, maybe I didn’t understand everything then, it was several years ago. Vue.js did not work at all. So the comparison will not be entirely honest. I only have expertise in React and I like its approach.

- Okay. Returning to the technologies you use - how are you testing?
- Jest along with Mocha. We also use Snapshot. In addition, we love Browserstack. PhantomJS, Google Web Driver. In general, everything is like everyone else :)

- Spotify contributes to Open Source?
- We love Open Source and we have several projects in Java and Python. There used to be a few in JavaScript, but now we do not support them. It seems that the modern Open Source in JS is very developed, there are cool tools, so we are not open source under JS.





- The toughest Spotify release for you?
- The new player - definitely. The previous one worked for several years, it had to be rewritten. We started making a new application on the client. They just started using React. It was difficult to defeat all browsers, to achieve one working solution everywhere - this, by the way, is the most difficult thing in the front-end work - you can’t control the environment in which your application will be launched. Another difficult moment was when we began to look at the performance of the application and realized that it was very slow. Then we climbed into React code to better understand it. We watched when, how and why components were re-rendered and stuff like that. After all this, I can say that we learned really many cool tricks for using React.

- How long have you been making the player?
- About a year.

-But what about the deadlines in the company?
- They are, as in all product companies, but we are assessed ourselves and ask other teams about integration. If we do not have time, then everyone understands that some functionality can be released a little later. But if in this case we do not have time, then we ask other teams to help.

- Didn’t have to work until late to release something?
- No never. You can always finish it tomorrow, or ask for help. The brain is an instrument and it needs rest. If you work 12 hours a day, you do not need to expect from the brain that it will work perfectly all this time. Moreover, if you are late, then they will approach you and ask what happened, offer help. This usually indicates poor planning and should work better with your time.

-But in cases where there was a difficult release or a difficult week / month, what do you do to reboot? Maybe you go to the bar for a drink?
“Drinking is definitely not my way to relax.” I'm just going home. I have a family, a child. And I realized that I like to cook and it relaxes well. By the way, wherever I go, I try the local cuisine. But I have not tried Russian yet.

- Be sure to show you the local cuisine in Moscow! You said cooking. If we talk about hobbies - what if not programming?
- Personally, I loved to run and even ran a half marathon. At Spotify, we have a lot of people who like to play computer games. If you do not just have fun, then you can learn something new.



-Speaking of learning: do you have a university degree? Is it necessary to get into Spotify?
- I graduated from Computer Science, but now I understand that this is not necessary. Now is the time that you can learn programming yourself, without wasting time and money at the university. Although I do not deny that the university taught me how to communicate with people and, in general, gave me a lot. At Spotify, no one needs education. At the interviews, we are interested in the experience of solving problems, the train of thought of a person. It is rather something like "what will happen if you click here," "but how to make sure that there is no such error." Well, some basic things, like algorithms, patterns, sorts. It is important that a person understands that this is how it works and where it can come in handy. I believe that all large companies in general should refuse to require such a formality as higher education for programmers. But I do not think so in all areas. In some, in my opinion, you should have confirmation of your skills. This is necessary for lawyers and doctors, for example. But in programming - definitely not.

- We already have Apple Music, Google Play Music, Yandex.Music. When is Spotify?
- I know that we are not in Russia yet, but I can’t say when we will appear on this market. Spotify is always open to new territories, but first we conduct large-scale studies of the audience, music, how the UI and UX should change. And Russia is a big country. I think it’s just a lot of work and it’s not easy to enter.



- The latest technology on the web that surprised you?
- It may not surprise, but I like it when the React approach is implemented more compactly. For example, Preact. It is very cool when such ideas are implemented in a smaller size, which is very important for the client. In addition, I am a big fan of Next.js and generally everything that comes out from under the wing of ZEIT. It seems to me that very talented guys work there, I follow everything.

“ Who else are you following?” Who do you think is moving the web forward?
- The first thing that comes to mind is Facebook. Apparently due to the entire React infrastructure. Flux, Redux do a lot for Open Source. Microsoft is experimenting a lot with the new APIs, inspiring people to experiment. Edge supports a lot of things. Of course, TypeScript. A lot of cool stuff from Google - I like the way they move the PWA theme. Perhaps some other companies, but in general, I think that now the web has a large community and everything is in order with development.



- Come on, the final question is about your report. Why "Progressive Image Rendering"? Were there any problems with Spotify with this? How did you dig a topic?

- Yes, when we dealt with the performance of the application, we began to think how to reduce the size of assets, how to deliver the application faster. But in parallel, I was engaged in a side project: I experimented with WebP, SVG and looked at how other companies do it. More precisely, to see this, I had to do reverse engineering. Reverse engineering is another cool piece of the web when everyone has open source code on your client and you can follow it and understand the course of events. So I did. And I realized that in general there are many inventive ways to solve the problems of heavy pictures, but nowhere was this written well. Now there are new image formats, new ways of lazy loading, Intersection Observer API and many others. In addition, I found some techniques in the book by Eddie Osmani Essential Image Optimization. In general, I hope that the report will be informative for everyone.

---

PS As you already understood, Jose will come to speak at the FrontFest front-end conference. Come listen to him in person, it will be awesome!

And we also have a rich program, we already wrote about it on Habré. For example, about the MIX , VYORSTKA, and JAVASCRIPT sections .