ITSumma corporate blog
Website development
API
Browsers
IT career
10 October

Интервью с веб-разработчиком Pornhub

Original author: David Walsh
Translation


Вне зависимости от вашего отношения к порнографии было бы глупо отрицать огромное влияние индустрии сайтов для взрослых на развитие интернета. От расширения возможностей браузеров в плане воспроизведения видео и до показа рекламы через WebSocket в обход блокировщиков — для того, чтобы работать на острие интернет-инноваций, нужно быть крайне умным.

Недавно мне посчастливилось взять интервью у веб-разработчика крупнейшего в мире сайта для взрослых — Pornhub.

Цель: узнать о технологиях и новинках в области работы с веб-API и, конечно же, как все это реализовано в рамках Pornhub. Наслаждайтесь!

Примечание: порноиндустрия — крайне конкурентная среда, поэтому на несколько вопросов я не смог получить ответ. Я уважаю необходимость разработчиков оберегать свои профессиональные секреты.

— Порносайты ожидаемо отображают огромное количество графического контента. В процессе разработки вы используете плейсхолдеры вместо изображений и видео? Насколько содержимое конечного сайта похоже на то, с чем вам приходится иметь дело при разработке?

— Мы почти не пользуемся плейсхолдерами! Для нас важен код и функциональность. Интерфейс — это то, к чему мы все уже привыкли. Конечно, у всех в начале есть какой-то период адаптации, но все привыкают довольно быстро.

— Когда дело касается стримов или рекламы, размещаемой внешними заказчиками, как вы используете такие важные для вас динамические ресурсы?

— На стороне разработки плеер разбит на две части. На стороне основной части реализованы главные функции и события, то есть разработка ведется по методологии cleanroom. Делается это для того, чтобы в случаях интеграции с сайтом, когда мы хотим запускать сторонние скрипты и рекламу, мы могли выявить возникшие проблемы как можно быстрее. В особых случаях мы можем работать с рекламодателями в ручном режиме, то есть запускать самостоятельно события, которые в других случаях воспроизводятся случайно.

— В среднем, как я думаю, любая страница содержит хотя бы одно видео, рекламу в формате GIF, несколько предпросмотров с веб-камер и анонсы других видеозаписей. Как вы измеряете эффективность страницы и как делаете ее максимально эффективной? Расскажите о любом трюке, которым можете поделиться.

— Ну, мы используем сразу несколько способов измерения.

  • Наш плеер сообщает нам метрики производительности воспроизведения видео и общей частоты использования.
  • Сторонняя RUM-система трекает общую производительность сайта.
  • Используем приватные инстансы WebpageTest для тестирования сценариев в дата-центрах AWS. Делается это, главным образом, чтобы увидеть, что может произойти в конкретный момент. Это также позволяет нам оценить «поток» данных, который «падает» на нас из различных точек и от поставщиков.

— Полагаю, наиболее важной и сложной функцией интерфейса на сайте является видеоплеер. От рекламы до самого видео, маркировки основных моментов записи, изменения скорости воспроизведения и других функций — как вы поддерживаете производительность, функциональность и стабильность всей этой конструкции?

— Конкретно с видеоплеером у нас работает специально выделенная команда, в задачи которой входит постоянный мониторинг производительности и эффективности. Для этой работы мы используем почти все что можно: инструменты работы с браузерами, тесты веб-страниц, различные метрики и так далее. Стабильность и качество гарантируются благодаря постоянному контролю за любыми обновлениями и изменениями, которые мы вносим в плеер.

— И сколько людей в этой специальной видео-команде? Сколько у вас фронтендщиков?

— Я бы сказал — конечно, с учетом размера нашего продукта, — что команда невелика.

— За время работы на Pornhub, какие изменения вы привнесли в интерфейс? Какие веб-API сделали вашу жизнь проще?

— За время моей работы я определенно застал множество улучшений каждого аспекта интерфейса сайта.

  • Мы ушли от просто CSS к, наконец, LESS и Mixins, перешли на гибкую грид-систему с медиа-запросами и тегами изображений, что позволяет легче приспосабливаться к различным разрешениям экрана.
  • jQuery и jQueryUI постепенно выходят из употребления, поэтому мы возвращаемся к более эффективному объектно-ориентированному программированию в vanilla JS. Иногда нам очень помогают некоторые фреймворки.
  • Нам нравится работать с новым API IntersectionObserver, очень полезный и эффективный инструмент для загрузки изображений.
  • Также начали понемногу баловаться с API-интерфейсом Picture-in-Picture. Используем его для размещения плавающих видео на некоторых страницах. Но делаем это сейчас, в основном, чтобы собрать фидбек от аудитории касательно этой затеи.

— Если заглянуть в будущее, есть какие-то веб-API, которые вы бы хотели изменить, улучшить или даже создать с нуля?

— Некоторые API мы бы хотели изменить. Это Beacon, WebRTC, Service Workers и Fetch. Далее по пунктам.

  • Beacon: имеются некоторые проблемы при работе с iOS, когда он не совсем правильно обрабатывает события pageHide.
  • Fetch: не отображается прогресс загрузки и ты не можешь прервать запрос.
  • WebRTC: слои Simulcast имеют ограничения при расшаривании экрана, если разрешение не дотягивает до определенного размера.
  • Service Workers: выполнение вызовов navigator.serviceWorker.register не перехватывается обработчиками событий Fetch.

— В последние несколько лет WebVR стремительно развивается. Насколько он полезен в его нынешнем состоянии и сколько усилий порносайты вкладывают в поддержку VR-контента? Есть ли в вашем WebVR-разделе поддержка Haptic-контента? (По всей видимости, под «haptic» имеется в виду порно-контент, в котором используются не только VR-очки, но и специальные устройства, которые синхронизируются с видеорядом и усиливают эффект присутствия, — прим. пер.)

— Мы исследуем тему WebXR и выясняем, как наилучшим образом адаптироваться к возникающим сценариям пространственных вычислений. Кроме того, как крупнейшей платформе по распространению контента нам необходимо обеспечить поддержку контент-мейкеров и потребителей. Мы все еще находимся в процессе поиска ответа, каким должен быть этот контент в рамках платформы.

Мы были первой площадкой, которая стала поддерживать виртуальную реальность, компьютерное зрение и виртуальных исполнителей, и будем продолжать продвигать эти новые технологии в сеть.

— Как вы думаете, что самое важное в разработке как для ПК, так и мобильных устройств, когда приходится иметь дело с таким количеством мультимедийных элементов и контента на каждой странице?

— Как таковая функциональность ограничена, в основном, операционной системой и типом браузера. Ситуация с iOS против Android крайне показательна в плане того, как могут отличаться наборы функций и доступов.

Например, некоторые мобильные устройства на iOS не позволяют нам использовать в полноэкранном режиме собственный видеоплеер и принудительно запускают QuickTime. Такие моменты необходимо учитывать при реализации новых фич и идей. С другой стороны, Android дает нам полный контроль и позволяет использовать все наши фишки в полноэкранном режиме.

Адаптивная потоковая передача в HLS — это еще один пример. IE и Edge крайне требовательны к качеству потоковой передачи HLS. Поэтому нам приходится исключать для них самые высокие настройки качества изображения, иначе видео будет постоянно заикаться и рассыпаться артефактами.

— Каков минимальный срок поддержки браузеров сайтами для взрослых, на которых вы работаете? (По всей видимости, речь идет не только о самом Pornhub, но и о других сайтах, которые имеют иные адреса, но принадлежат ресурсу, — прим. пер.) Вы уже прекратили поддержку Internet Explorer?

— Мы очень долго поддерживали IE, но недавно прекратили саппорт всего, что старше IE11, а конкретно с ним мы перестали поддерживать Flash для видеоплеера. В основном, мы сфокусированы на поддержке Chrome, Firefox и Safari.

— Вы можете подробнее рассказать о стеке типичного порносайта? Например, для бэка и/или фронта. Какие библиотеки используете?

— Большинство наших сайтов используют следующие технологии:

  • Nginx;
  • PHP;
  • MySQL;
  • Memcached и/или Redis.

При необходимости используется что-то другое, например Varnish, ElasticSearch, NodeJS, Go, Vertica.

Для работы с интерфейсами мы, в основном, используем vanilla Javascript, постепенно избавляемся от jQuery и только-только пробуем фреймворки, например сейчас в работе Vue.js.

— С точки зрения постороннего, все сайты для взрослых очень похожи: множество миниатюр видео, агрегированного видеоконтента, вебкам-моделей и рекламы. А чем порносайты отличаются между собой для тех, кто их разрабатывает? Какие уникальные особенности вы можете назвать как разработчик?

— Мы прилагаем максимум усилий, чтобы придать каждому нашему бренду собственные уникальные черты на разных уровнях; библиотека контента, UX и наборы функций, различия в алгоритмах.

— Перед тем, как подать заявку на собеседование у вашего текущего работодателя, что вы думали о возможности работы в индустрии порносайтов? Были ли у вас сомнения? Если да, то как вы с ними справлялись?

— Меня никогда не беспокоили эти вопросы, в конце концов, задачи были очень привлекательными. Мысли о том, что я буду работать над проектами с многомиллионной аудиторией, что все эти люди будут пользоваться созданными мною функциями, действительно меня мотивировали. И все мои ожидания оправдались. Впервые я работал над чем-то, чем был по-настоящему горд! Да я всем друзьям рассказал, где сейчас работаю! Еще важно и то, что порно никогда не умрет, что дает мне чувство стабильности, а это очень хорошо.

— Что касается вашего конечного продукта, то рассказ о том, что вы работаете на порносайтах, может отличаться от рассказа о работе в местной веб-студии. Есть ли какая-то стигматизация в процессе рассказа друзьям, родственникам и знакомым, где вы работаете? Есть ли у вас сомнения, стоит ли говорить людям, чем вы занимаетесь?

— Я очень горжусь тем, что работаю над этими продуктами, и те, кто окружают меня в жизни, знают мою позицию и восхищаются ею. Моя работа — это всегда источник удивительных тем для увлекательных разговоров и шуток.

Есть ли разница между работой внутри и за пределами индустрии порносайтов? Атмосфера здесь очень расслабленная и дружелюбная. Я не замечаю каких-либо серьезных различий в плане культуры труда между моим текущим местом работы и другими компаниями. За исключением того, что здесь (в Pornhub) культура значительно выше, чем в местах, где я работал ранее.

— Будучи фронтенд-разработчиком, с какими командами вы взаимодействуете наиболее тесно? Какие у вас основные каналы ежедневного взаимодействия внутри команды?

— Мы в равной степени контактируем как с командой бэкенда, так и с тестировщиками или менеджерами по продуктам. Большую часть времени мы просто подходим к друг другу и разговариваем. Для электронного общения в основном используем чат MS Teams. Ну и, конечно, электронную почту.

— Ну и наконец, есть что-то, чем бы вы хотели поделиться в качестве фронтендера, который работает над сайтами для взрослых?

— Быть частью команды, которая создает такой популярный среди пользователей продукт, действительно захватывающе. Как правило, мы находимся в острие технологической моды и первыми сталкиваемся с какими-то принципиально новыми технологиями. Это делает мою работу одновременно сложной и крайне интересной.

Конец интервью



От автора:
я считаю это интервью действительно поучительным. Я был немного удивлен тем, что команда не использует плейсхолдеры во время разработки фич и дизайна. Приятно видеть, что Pornhub продолжает занимать передовые позиции в интернете в плане работы с WebXR, WebRTC и Intersection Observer. Также меня порадовало то, что они считают существующий сейчас набор веб-API достаточным для того, чтобы начать полный отказ от jQuery.

Мне очень хотелось получить более конкретные ответы по техническим вопросам и какие-либо советы. Например, в плане повышения производительности и каких-нибудь фишек. Я уверен, что в сорцах Pornhub скрывается огромное количество полезной информации! А какие бы вопросы задали вы?

+83
70.3k 164
Comments 128
Top of the day