Дэвид Уолш взял интервью у веб-разработчика, работающего в Pornhub. Представляем вам перевод этой занимательной беседы.
Независимо от вашего отношения к порнографии, нельзя отрицать огромное влияние индустрии сайтов для взрослых на продвижение веб-технологий. Занимаясь такими вещами как преодоление ограничений для видео в браузерах или использование WebSocket для показа рекламы (чтобы ее не смогли засечь блокировщики), поневоле приходится работать с самыми инновационными технологиями.
Недавно мне посчастливилось взять интервью у веб-разработчика, работающего на самый крупный сайт для взрослых — Pornhub. Я постарался расспросить его о технологиях и о том, каково вообще работать с сайтом для взрослых. Приятного чтения!
Примечание: Индустрия продуктов для взрослых очень конкурентная, так что было несколько вопросов, на которые мой собеседник не смог ответить. Я с уважением отношусь к желанию сайта избежать ненужных рисков.
Очевидно, что на сайтах для взрослых размещается большое количество графического контента. Вы в разработке используете настоящие изображения и видео с вашего сайта? Насколько далека разработка от конечного продукта?
В процессе разработки мы используем реальные фото и видео, ничем их не заменяем. В конце концов, значение имеет код и функционал, а интерфейс нам уже примелькался. Новым людям в команде, конечно, нужно немного времени, чтобы привыкнуть.
Давай поговорим о стримах с веб-камер и отображении сторонних рекламных скриптов. Как вы делаете mock-и динамических ресурсов в ходе разработки сайта и его функционала?
Что касается разработки, плеер разбивается на два компонента. Базовый плеер реализует основной функционал и осуществляет вызов событий. Что касается сторонних скриптов и рекламы — мы стараемся заниматься их интеграцией заблаговременно, чтобы как можно раньше обнаружить вероятные проблемы.
Среднестатистическая страница содержит как минимум одно видео, GIF-рекламу, несколько превью стримов с веб-камер и миниатюры видео. Как вы замеряете производительность страницы и как добиваетесь максимальной производительности? Можете поделиться какими-то приемами?
Для отслеживания производительности мы используем несколько систем.
- Наш плеер собирает и передает нам некоторые метрики производительности воспроизведения видео.
- Общая производительность сайта проверяется при помощи сторонней RUM-системы.
- Чтобы отследить нагрузку на сайт в разное время используется WebpageTest. Также таким образом мы можем отслеживать нагрузку из разных стран и провайдеров.
Я так понимаю, что самый важный и сложный функционал фронтенда это видеоплеер. Как вам удается поддерживать производительность, функциональность и стабильность этой части сайта? Там же и встроенная реклама перед видеороликами, и пометки на основные моменты видео, и возможность изменения скорости воспроизведения, и прочие фичи…
У нас есть отдельная команда, занимающаяся только видеоплеером. Их главный приоритет — постоянное отслеживание производительности и эффективности. С этой целью используются все доступные средства — инструменты браузера, измерение производительности веб-страниц, на которых находится плеер, и т. п. Плюс ко всему, наша QA-команда тщательно тестирует функционал перед каждым релизом.
Сколько людей в этой отдельной команде, которая занимается видеоплеером? Сколько в ней фронтенд-разработчиков?
Я бы сказал, что с учетом размера продукта размер команды довольно небольшой.
Какие изменения в мире фронтенд-разработки тебе довелось наблюдать за время работы над сайтами для взрослых? Какие новые API облегчили вам жизнь?
Да, положительных изменений очень много, причем во всех направлениях современного фронтенда, например:
- Переход от простого CSS к использованию LESS и Mixins, гибкой Grid-системы с media queries для разработки адаптивного дизайна.
- jQuery и jQueryUI потихоньку отмирают и мы возвращаемся к более эффективному объектно-ориентированному программированию на ванильном JS. Фреймворки в некоторых случаях тоже весьма интересны.
- Нам нравится новый IntersectionObserver API — очень полезно для более эффективной загрузки изображений.
- Также мы начинаем использовать Picture-in-Picture API — с его помощью мы добавляем всплывающие видео на некоторых страницах (пока собираем фидбеки пользователей).
Что касается планов на будущее, есть ли какие-то Web API, которые вы хотели бы изменить, улучшить или создать?
Кое-что из того, что нам хотелось бы улучшить:
- Beacon — есть проблемы с IOS, где не работают события pageHide.
- Fetch — нет прогресса загрузки и не предоставляется способ прерывания запросов.
- Service Workers — осуществление вызовов navigator.serviceWorker.register не перехватывается обработчиками событий Fetch никакого service worker-а.
WebVR за последние годы шагнул вперед. Насколько он полезен сейчас, в своем теперешнем состоянии, и много ли внимания уделяют сайты для взрослых поддержке VR-контента?
Мы исследуем webXR и обдумываем, как лучше адаптироваться к развивающимся технологиям. Наш сайт один из крупнейших, и мы должны поддерживать создателей контента и пользователей независимо от того, каким образом они хотели бы использовать наш контент. Но мы все еще прикидываем, что это должен быть за контент и какие платформы нужны для него.
Мы были первой платформой (если говорить о самых крупных игроках), поддержавшей VR и компьютерное зрение, и собираемся продолжить продвижение новых технологий и открытого интернета.
На каждой вашей странице много различных типов медиа и прочего контента. Имея это в виду, что вы в первую очередь учитываете, когда занимаетесь десктопной и мобильной версией?
Функциональность ограничивается главным образом операционной системой и браузерами. iOS и Android это прекрасный пример того, насколько разными могут быть наборы функций.
Например, некоторые мобильные устройства iOS не позволяют нам использовать видеоплеер в режиме Fullscreen, там может использоваться только нативный плеер QuickTime. Это приходится учитывать при разработке новых функций. Android, в свою очередь, предоставляет нам полный контроль, и мы можем использовать наш функционал в режиме Fullscreen.
Еще один пример — адаптивный стримиг в 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).
Для постороннего сайты для взрослых выглядят так: много видео, стриминг через веб-камеры и реклама. А для человека, непосредственно работающего с этими сайтами, какие их стороны кажутся самыми отличительными?
Мы очень стараемся сделать каждый бренд уникальным на разных уровнях. На разных сайтах у нас разные библиотеки контента, наборы функций и UX, и для всего этого применяется множество различных алгоритмов.
Как ты воспринимал возможность работы над сайтами для взрослых до того, как начал сотрудничать с твоим нынешним работодателем? Что думал по этому поводу? Были у тебя какие-то сомнения? Если да, то как тебе удалось их развеять?
Да меня эти вопросы как-то никогда не волновали. Задача была очень уж привлекательной. Для меня очень мотивирующей была сама идея того, что с тем, над чем я буду работать, потенциально могут взаимодействовать миллионы людей. Когда впервые было запущено то, над чем я работал, я чрезвычайно гордился собой и, конечно, приглашал всех друзей зайти посмотреть! Ну, и тот факт, что порно точно никуда не исчезнет, добавляет уверенности в завтрашнем дне!
Да, кстати! Сообщать всем, что работаешь над сайтами для взрослых это не то же самое, что сообщать о работе в веб-студии. Стесняешься обсуждать свою работу с друзьями, родственниками и знакомыми? Случается ли задумываться, а стоит ли рассказывать, что работаешь над сайтами для взрослых?
Я очень горжусь своей работой над этими продуктами. Мои близкие знают об этом и всячески поддерживают. Это интересная тема, так что нам всегда есть о чем поговорить и над чем пошутить.
Если сравнивать с работой в компаниях вне индустрии для взрослых, есть разница в рабочей атмосфере?
Атмосфера у нас очень дружественная и не напрягающая. Я не замечал никаких особых отличий в культуре компаний, помимо того, что в такой большой компании мне раньше работать не доводилось.
Ты — фронтенд-разработчик. С какими командами вы ближе всего сотрудничаете? Каковы самые распространенные методы коммуникации?
Мы работаем и с бэкенд-разработчиками, и с тестировщиками, и с менеджерами продуктов. Пожалуй, со всеми одинаково. Что касается коммуникации, чаще всего мы просто подходим к столу человека и общаемся лично. В остальных случаях общаемся в чатах (MS Teams). Электронная почта это третий по частоте использования канал коммуникации.
Наконец, хотел бы чем-то поделиться с фронтенд-разработчиками, тоже работающими над сайтами для взрослых?
Принимать участие в создании продукта, который так широко используется, — это потрясающе. Мы всегда в авангарде всех изменений в технологиях, и это делает нашу работу сложной и интересной.
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]