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

Pornhub — один из наиболее популярных сайтов со своими frontend и backend. Один из веб-разработчиков Порнхаба рассказал о работе над сайтом для взрослых, и это вылилось в познавательное интервью.

1. Как устроен Pornhub?
2. Команда разработчиков и API Порнхаба
3. Поддержка браузеров и стек технологий
4. Особенности работы над Pornhub

Рассказывает Дэвид Уолш

Неважно, как вы относитесь к порнографии, нельзя отрицать влияние сайтов для взрослых на развитие web-индустрии: от возможностей видео-плееров в браузере до продвижения рекламы через WebSocket так, чтобы блокировщики рекламы не могли её обнаружить. Нужно быть изобретательным, чтобы внедрять инновации на передовой Интернета.

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

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

Как устроен Pornhub?

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

Мы фактически не используем плейсхолдеры при разработке. В конечном счёте важен код и функциональность, интерфейс же уже нам привычен.

Прим. ред. Используются уже готовые и отработанные компоненты и классы для вёрстки.

Сначала мы, конечно, столкнулись с кривой обучения, но мы все привыкли к этому довольно быстро.

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

В разработке плеер разбит на две части. Основная часть — плеер реализует функции и запускает события (разработка ведётся методом clean room design). При интеграции на сайтах мы хотим запускать сторонние скрипты и рекламу так, чтобы мы могли находить проблемы как можно раньше. В особых случаях мы работаем с рекламодателями напрямую, чтобы вручную запускать события, которые обычно могут запускаться случайно.

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

Мы используем несколько измерительных систем:

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

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

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

Команда разработчиков и API Порнхаба

Сколько человек в этой специальной команде? Сколько вообще разработчиков фронтенда в команде?

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

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

Я определённо видел много нововведений и улучшений в мире фронтенда.

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

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

Есть некоторые, которые мы хотели бы изменить: Beacon, WebRTC, Service Workers и Fetch.

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

Последние несколько лет WebVR совершенствуется — насколько он полезен в его нынешнем состоянии и сколько сил сайты для взрослых вкладывают в поддержку VR-контента? Имеет ли тактильный отклик свою роль в WebVR на ваших сайтах?

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

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

С таким большим количеством разных типов медиа и контента на каждой странице какие есть нюансы при использовании сайта на компьютере или смартфоне?

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

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

Ещё один пример — адаптивный стриминг в HLS: IE и Edge требовательны к качеству потока HLS и нам нужно препятствовать передаче видео с наиболее высоким качеством, в противном случае видео будет постоянно заикаться и артефачить.

Поддержка браузеров и стек технологий

Какова минимальная поддержка браузеров у порносайтов, на которых вы работаете? Поддержка Internet Explorer прекращена?

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

Можете ли вы немного рассказать о стеке типичного сайта для взрослых? Сервер и/или фронтенд? Какие библиотеки вы используете?

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

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

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

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

Особенности работы над Pornhub

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

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

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

Меня это никогда не беспокоило, в конце концов задача была очень привлекательной. Сама мысль о миллионах людей, взаимодействующих с функциями, над которыми я работал, была очень мотивирующей. И реализовать это удалось быстро: в первый же раз, когда то, над чем я работал, было использовано на сайте, я был очень горд собой и сказал всем моим друзьям зайти и посмотреть. Тот факт, что порно никогда не умрёт, гарантирует стабильность работы.

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

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

Отличается ли рабочая атмосфера на PornHub от других проектов?

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

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

В равной степени мы работаем с бэкенд-разработчиками, тестировщиками и продакт-менеджерами. Большую часть времени мы просто подходим друг к другу и разговариваем. Также очень распространено общение в чате (MS Teams). Дальше в ход идёт e-mail.

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

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