Вне зависимости от вашего отношения к порнографии было бы глупо отрицать огромное влияние индустрии сайтов для взрослых на развитие интернета. От расширения возможностей браузеров в плане воспроизведения видео и до показа рекламы через 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 скрывается огромное количество полезной информации! А какие бы вопросы задали вы?
Автор: ITSumma
