Изображения — это, как правило, самая «тяжелая» статика в вебе. Многие фронтендеры знают об адаптивных изображениях, которые позволяют использовать определённые изображения для разных разрешений. Но это не единственный их плюс, ведь то, как и когда мы их загружаем, тоже влияет на скорость вашего веб-приложения.
На FrontFest 2017 к нам приезжает Хосе М. Перес (Jose M. Perez) из Spotify, с докладом «Progressive Image Rendering». Он расскажет о техниках прогрессивного рендеринга, основанных на плейсхолдерах, доминирующих цветах, размытых изображениях и ленивой загрузке, которые помогут улучшить производительность.
Накануне конференции мы поговорили с Хосе про веб-стек, релизы и управление процессами в Spotify, отношение к Open Source и погоду в Испании, Швеции и России.
— Привет, расскажи о себе.
— Меня зовут Хосе, я работаю в Spotify, Стокгольм, Швеция. Занимаюсь вебом около 10 лет. Начинал с Java и C# и перешел к вебу. Веб — это круто, потому что продукт быстро доставляется на бой.
— Ты был в России раньше?
— Только Санкт-Петербурге и всего пару часов, когда был в круизе. Но даже нескольких часов хватило, чтобы понять: климат похож на тот, в котором я живу сейчас. К слову, я из Испании и когда я говорю своим испанским друзьям, что живу в Швеции, то они думают, что в Швеции всегда невероятно холодно и вообще невозможно жить. Но это не так. Холода стоят всего несколько месяцев. О России я примерно такого же мнения, в отличие от распространенного мнения, что здесь всегда лежит снег.
— Страшно ехать?
— Хах. Нет! А должно? В Spotify работает много сотрудников из разных стран и представляющих разные культуры, так что я уже сломал немало стереотипов в голове. Телевизору верить нельзя. В реальной жизни всё не так.
— А знаешь спикеров?
— Пробежался по списку спикеров и некоторые имена выглядят знакомо. Возможно, видел на других конференциях, но лично не знаком. Интересно, что не так давно я был в Аликанте, своём родном городе в Испании, на митапе и познакомился там с программистом из Москвы. Это очень странно, потому что митап локальный. Он сказал, что будет на FrontFest.
— Что насчет русских компаний?
— Кажется, что кроме Яндекса я больше не знаю компаний. Вообще, я был сильно удивлён, когда узнал, что есть локальные крупные поисковики, которые жители России предпочитают Google. Больше ничего вспомнить не могу, но мне нравится, что Яндекс придумал БЭМ.
— Расскажи про работу.
— Работаю в Spotify уже пять лет. Сперва в Испании, теперь в Швеции. Побывал в нескольких командах. Сейчас занимаюсь разработкой плеера, который работает на различных платформах.
Главное открытие этих лет — продукты, которые мы делаем на веб-технологиях, уверенно работают не только в вебе.
— Какие технологии используете?
— Раньше на сервере был PHP. Сейчас переписываем почти всё на Java. Пытались что-то делать на Node.js, но поняли, что для нас это неудобно и невыгодно. Поняли, что нам хватает клиентского приложения без серверного рендеринга, без прослойки в виде Node.js и прочего.
— А что на клиенте?
— У каждой команды своё. Знаю команду, которая использует Angular, и хочу сказать, что они очень хорошо масштабируются и у них всё в порядке. В моей команде плеера мы используем React. Веб, десктоп и ТВ — это одно и то же приложение, написанное на React, и мы им очень довольны. Ещё React нравится тем, что его очень легко тестировать. Тем же Jest — это очень удобно. Иногда используем GraphQL. Redux, конечно. Легче сказать, что мы просто используем стек React.
— Не могу не спросить: Angular vs React vs Vue.js. Что выберешь?
— Не очень много работал с Angular. Это была еще первая версия, возможно, я не всё тогда понял, это было несколько лет назад. С Vue.js вообще не работал. Так что сравнение будет не совсем честное. У меня есть экспертиза только в React и его подход мне нравится.
— Окей. Возвращаясь к технологиям, которые используете — чем тестируете?
— Jest вместе с Mocha. Так же используем Snapshot. Помимо этого любим Browserstack. PhantomJS, Google Web Driver. В общем, всё как у всех :)
— Spotify контрибьютит в Open Source?
— Очень любим Open Source и у нас есть несколько проектов на Java и Python. Раньше было несколько на JavaScript, но сейчас мы их не поддерживаем. Кажется, современный Open Source в JS очень развит, есть крутые инструменты, поэтому мы под JS ничего не опенсорсим.
— Самый жесткий релиз в Spotify для тебя?
— Новый плеер — однозначно. Предыдущий работал уже несколько лет, его нужно было переписывать. Мы начали делать новое приложение на клиенте. Как раз стали использовать React. Было сложно победить все браузеры, добиться одного рабочего решения везде — это, к слову, самое трудное в работе фронтендера — ты никак не можешь контролировать окружение, в котором запустят твоё приложение. Другой сложный момент был, когда мы стали смотреть на производительность приложения и поняли, что оно очень медленное. Тогда мы полезли в код React, чтобы лучше его понимать. Смотрели, когда, как и почему перерендеривались компоненты и всё в таком духе. После всего этого могу сказать, что мы узнали действительно много крутых трюков по использованию React.
— Как долго вы делали плеер?
— Примерно год.
— А как вообще с дедлайнами в компании?
— Они есть, как и во всех продуктовых компаниях, но мы оцениваемся сами и спрашиваем другие команды про интеграции. Если мы не успеваем, то все понимают, что какой-то функционал можно выпустить и чуть позже. Но если и в этом случае не успеваем, то просим помочь другие команды.
— Не приходилось работать допоздна, чтобы зарелизить что-то?
— Нет, никогда. Всегда можно доделать завтра, либо попросить помощи. — это инструмент и ему нужен отдых. Если трудишься по 12 часов в день, не нужно ждать от , что и он всё это время будет отлично работать. Более того, если ты задерживаешься, то к тебе подойдут и спросят, что случилось, предложат помощь. Обычно это говорит о плохом планировании и следует работать со своим временем лучше.
— Но в случаях, когда был сложный релиз или сложная неделя/месяц, то что ты делаешь, чтобы перезагрузиться? Может, идешь в бар, чтобы выпить?
— Выпить — точно не мой способ расслабиться. Я просто иду домой. У меня семья, ребенок. А еще я понял, что люблю готовить и это хорошо расслабляет. Кстати, везде, где бываю, пробую местную кухню. А вот русскую еще не пробовал.
— Обязательно покажем тебе местную кухню в Москве! Ты сказал про кулинарию. Если говорить про хобби — что, если не программирование?
— Лично я любил бегать и даже пробежал полумарафон. У нас в Spotify много кто любит играть в компьютерные игры. Если не просто развлекаться, то можно же учиться чему-то новому.
— Кстати про учиться: у тебя есть высшее образование? Нужно ли оно, чтобы попасть в Spotify?
— Я закончил Computer Science, но сейчас понимаю, что это совсем необязательно. Сейчас такое время, что программированию можно научиться самому, не тратя время и деньги на это в университете. Хотя я не отрицаю, что университет научил меня коммуницировать с людьми и вообще многое мне дал. В Spotify никто не требует образования. На собеседованиях нас интересует опыт решения задач, ход мыслей человека. Это скорее что-то вроде «что будет, если кликнуть сюда», «а как сделать, чтобы такой ошибки не было». Ну и какие-то базовые вещи, вроде алгоритмов, паттернов, сортировок. Важно, чтобы человек понимал, что это, как это работает и где может пригодиться. Считаю, что все крупные компании вообще должны отказаться от того, чтобы требовать такую формальность, как высшее образование для программистов. Но не считаю, что так во всех сферах. В некоторых, на мой взгляд, ты должен иметь подтверждение своих навыков. Это нужно адвокатам и врачам, например. Но в программировании — точно нет.
— У нас уже есть Apple Music, Google Play Music, Яндекс.Музыка. Когда Spotify?
— Я знаю, что нас пока нет в России, но я не могу сказать, когда мы появимся на этом рынке. Spotify всегда открыт к новым территориям, но сперва мы проводим масштабные исследования аудитории, музыки, того, как должен измениться UI и UX. А Россия — большая страна. Думаю, здесь просто много работы и легко зайти не получится.
— Последняя технология в вебе, которая удивила?
— Может не удивила, но мне нравится, когда подход React реализуют более компактно. Например, Preact. Это очень здорово, когда такие идеи реализуют в меньшем размере, что для клиента очень важно. Кроме этого, я большой фанат Next.js и вообще всего, что выходит из под крыла ZEIT. Мне кажется, что там работают очень талантливые ребята, я слежу за всем.
— За кем еще следишь? Как думаешь, кто сейчас двигает веб вперед?
— Первое, что приходит в голову — Facebook. Видимо, из-за всей инфраструктуры React. Flux, Redux очень много делают для Open Source. Microsoft очень много экспериментируют с новыми API, вдохновляют людей на эксперименты. Edge поддерживает много всего. Разумеется, TypeScript. Много крутых штук от Google — нравится, как они двигают тему PWA. Возможно, какие-то еще компании, но вообще, считаю, что сейчас у веба большое комьюнити и с развитием всё в порядке.
— Давай финальный вопрос — о твоем докладе. Почему именно «Progressive Image Rendering»? Были в Spotify какие-то проблемы с этим? Как раскапывал тему?
— Да, когда мы разбирались с перфомансом приложения, то начали думать, как сократить размер ассетов, как доставлять приложение быстрее. Но параллельно я занимался сайд-проектом: экспериментировал с WebP, SVG и смотрел на то, как это делают другие компании. Точнее, чтобы это увидеть, мне пришлось заняться реверс-инжинирингом. Реверс-инжиниринг — это ещё одна крутая шутка веба, когда у всех на клиенте открытый код и ты можешь пройти по нему и понять ход событий. Так я и сделал. И понял, что вообще существует много изобретательных способов решить проблемы тяжелых картинок, но нигде об этом не было хорошо написано. Сейчас есть новые форматы картинок, новые способы ленивой подгрузки, Intersection Observer API и многие другие. Помимо этого какие-то техники я нашел в книге Эдди Османи Essential Image Optimization. В общем, надеюсь, что доклад будет познавательным для всех.
P.S. Как вы уже поняли, Jose приедет выступать на конференцию фронтендеров FrontFest. Приходите послушать его лично, будет улётно!
А ещё у нас богатая программа, мы о ней уже писали на Хабре. Например, про секцию MIX, VYORSTKA и JAVASCRIPT.
Автор: rayproud
