Interview with a Pornhub Web Developer

Home<br>Main Content

Search

Popular: JavaScript Promises<br>fetch API<br>React.js<br>Cache API<br>ES6 Features<br>Node.js<br>JavaScript<br>jQuery

Interview with a Pornhub Web Developer

Building Resilient Systems on AWS : Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.<br>Interview with a Pornhub Web Developer

By<br>David Walsh on<br>October 7, 2019

28

Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have to be clever to innovate at the bleeding edge of the web.

I was recently lucky enough to interview a Web Developer at the web's largest adult website: Pornhub. I wanted to learn about the tech, how web APIs can improve, and what it's like working on adult websites. Enjoy!

Note: The adult industry is very competitive so there were a few questions they could not answer. I respect their need to keep their tricks close to the vest.

Adult sites obviously display lots of graphic content. During the development process, are you using lots of placeholder images and videos? How far is the development content and experience from the end product?

We actually don’t use placeholders when we are developing the sites! In the end, what matters is the code and functionality, the interface is something we are very used to at this point. There’s definitely a little bit of a learning curve at first, but we all got used to it pretty quickly.

When it comes to cam streams and third party ad scripts, how do you mock such important, dynamic resources during site and feature development?

For development, the player is broken into two components. The basic player implements the core functionality and fires events. Development is done in a clean room. For integration on the sites, we want those third-party scripts and ads running so we can find problems as early in the process as possible. For special circumstances we’ll work with advertisers to allow us to manually trigger events that might normally be random.

An average page probably has at least one video, GIF advertisements, a few cam performer previews, and thumbnails of other videos. How do you measure page performance and how do you keep the page as performant as possible? Any tricks you can share?

We use a few measurement systems.

Our player reports metrics back to us about video playback performance and general usage<br>A third-party RUM system for general site performance.<br>WebpageTest private instances to script tests in the available AWS data centers. We use this mostly for seeing what might have been going on at a given time. It also allows us to view the “waterfall” from different locations and providers.

I have to assume the most important and complex feature on the front-end is the video player. From incorporating ads before videos, marking highlight moments of the video, changing video speed, and other features, how do you maintain the performance, functionality, and stability of this asset?

We have a dedicated team working strictly on the video player, their first priority is to constantly monitor for performance and efficiency. To do so we use pretty much everything that is available to us; browsers performance tools, web page tests, metrics etc. The stability and quality is assured by a solid QA round for any updates we do.

How many people are on the dedicated video team? How many front-end developers are on the team?

I’d say given the size of the product the team size is lean to average.

During your time working on adult websites, how have you seen the front-end landscape change? What new Web APIs have made your life easier?

I’ve definitely seen a lot of improvements on every single aspect of the frontend world;

From plain CSS to finally using LESS and Mixins, to a flexible Grid system with media queries and picture tags to accommodate different resolutions and screen sizes<br>jQuery and jQueryUI are slowly moving away, so we are going back to more efficient object oriented programming in vanilla JS. The frameworks are also very interesting in some cases<br>We love the new IntersectionObserver API, very useful for a more efficient way to load images<br>We started playing with the Picture-in-Picture API as well, to have that floating video on some of our pages, mainly to get user feedback about the idea.

Looking forward, are there any Web APIs that you’d love changed, improved, or even created?

Some of them that we would like changed or improved; Beacon, WebRTC, Service Workers and Fetch:

Beacon: some IOS issues where it doesn’t quite work with pageHide events<br>Fetch: No download progress and doesn’t provide a way to intercept requests<br>WebRTC: Simulcast layers are limited even for screenshare, if the resolution is not big enough<br>Service Workers: Making calls to...