Spotify front-end life

Images are, as a rule, the “heaviest” static on the web. Many front-vendors are aware of responsive images that allow certain images to be used for different resolutions. But this is not their only plus, because how and when we load them also affects the speed of your web application.

At the FrontFest 2017, Jose M. Perez from Spotify comes to us with the report “ Progressive Image Rendering ”. He will talk about progressive rendering techniques based on placeholders, dominant colors, blurry images and lazy loading that will help improve performance.
')
On the eve of the conference, we talked with Jose about the web stack, releases and process management in Spotify, attitudes towards Open Source and the weather in Spain, Sweden and Russia.

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

- Have you been to Russia before?
- Only St. Petersburg and just 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 it is always incredibly cold in Sweden and it’s impossible to live at all. But it is not. Colds are only a few months. About Russia, I have about the same opinion, in contrast to the widespread opinion that there is always snow here.

- Scary to go?
- Hah. Not! Should it? Spotify has a lot of employees from different countries and from different cultures, so I’ve already broken a lot of stereotypes in my head. TV can not be trusted. In real life, it's not like that.

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

- What about Russian companies?
- It seems that apart from Yandex, I no longer know the companies. In general, I was very surprised when I learned that there are local large search engines that Russians prefer to Google. I can't remember anything more, 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. Visited several teams. Now I am 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 rewrite almost everything in Java. We tried to do something on Node.js, but realized that for us it is inconvenient and unprofitable. Understood that we have enough client application without server rendering, without an interlayer in the form of Node.js and so on.

- And what about the client?
- Each team has its own. I know a team that uses Angular, and I want to say that they scale very well and everything is in order. In my player team, we use React. Web, desktop and TV are the same application written in React, and we are very pleased with it. I also like React because 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 ask: Angular vs React vs Vue.js. What will you choose?
- Not very much worked with Angular. It was the first version, perhaps, I did not understand everything then, it was a few years ago. With Vue.js did not work at all. So the comparison is not entirely fair. I have expertise only in React and I like his approach.

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

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





- The toughest release in Spotify for you?
- New player - definitely. Previous worked for several years, it had to be rewritten. We started making a new application on the client. Just began to use 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 work of the fronterer - you can’t control the environment in which your application will run. Another difficult moment was when we began to look at the performance of the application and realized that it was very slow. Then we got into the React code to better understand it. We watched when, how and why the components were rendered and so on. After all this, I can say that we have learned really a lot of cool tricks on using React.

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

- What about the deadline in the company?
- They are, as in all grocery companies, but we evaluate 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 for help from other teams.

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

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

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



- By the way about learning: do you have a higher education? Do I need it to get into Spotify?
- I finished Computer Science, but now I understand that it is not necessary at all. Now is the time that you can learn programming yourself without spending time and money on it at the university. Although I do not deny that the university taught me to communicate with people and in general gave me a lot. In Spotify, no one requires education. At the interviews we are interested in the experience of solving problems, the course of thoughts of a person. It is rather something like “what will happen if you click here”, “and how to make sure that there is no such error”. Well, some basic things, like algorithms, patterns, sorting. It is important that a person understands that this is how it works and where it can be useful. 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 proof 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 yet in Russia, but I cannot say when we will appear in this market. Spotify is always open to new territories, but first we conduct large-scale studies of the audience, music, and how UI and UX should change. And Russia is a big country. I think there is just a lot of work here and it will not be easy to enter.



- The latest technology on the web that surprised?
- Maybe not surprised, but I like it when the React approach is implemented more compactly. For example, Preact. It is very great 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 in general 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 now?
- The first thing that comes to mind is Facebook. Apparently, because of the entire React infrastructure. Flux, Redux do a lot for Open Source. Microsoft is experimenting a lot with new APIs, inspiring people to experiment. Edge supports a lot of things. Of course, TypeScript. A lot of cool stuff from Google - I like how they move the PWA theme. Maybe some other companies, but in general, I think that now the web has a large community and everything is in order with development.



- Give the final question - about your report. Why “Progressive Image Rendering”? Were there any problems with Spotify with this? How did you dig up the topic?

- Yes, when we dealt with the performance of the application, we began to think about how to reduce the size of assets, how to deliver the application faster. But at the same time, I was involved in a side project: I experimented with WebP, SVG, and looked at how other companies are doing it. More precisely, in order to see this, I had to do reverse engineering. Reverse engineering is another cool web thing when everyone has open source code on a client and you can go through 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 images, but nowhere was this well written. Now there are new image formats, new ways of lazy loading, the Intersection Observer API and many others. In addition, some techniques I found in the book 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 personally, it will be cool!

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