Javascript and the Netflix User Interface

This article talks talks about how since the very introduction of JavaScript, it has become the de facto language of the internet. Nearly all web applications and pages support JavaScript in some way. Especially after Ajax, which was a set of web development techniques used to create asynchronous web applications, the Web exploded with additional facets of functionality. With more and more applications being pushed to interact more with the client side browser, web development has had to extend past JavaScript’s original uses. The main problem with this is that these ever growing web applications have complex needs when it comes to loading JavaScript files and relative dependencies.

Netflix is a company that does extensive split testing, which is testing where they compare two versions of a web page to see which is more user friendly. Their UI and user experience is a crucial part to their experience as a streaming company. In fact, a Netflix user may be involved in 30-50 split tests at the same time with single-page application loading. For example, one Netflix user may be using a slightly different header and search bar than another Netflix user. Scaling the tests this way, though complex and difficult, gives Netflix a large amount of continuous feedback to keep improving their UI. These tests However JavaScript wasn’t built to handle managing conditional dependencies.

Netflix’s home page, according to the article, delivers 150kb of payload in a single JS file. The file itself is actually various files strung together. Netflix has personalization algorithms for the different aspects of UI based on a subscriber’s location, viewing tastes, country of signup, and even sharing preferences. So, Netflix tries to package different aspects of different UI components together depending on the user, and sends the according components together in a payload. Each functional section of the site is known as a module. They group relevant features together into a single unit. They are also important because they help manage dependency management. The article explains that in many programming languages, dependencies can all be imported synchronously because the runtime environment of the application is on the same machine as the required dependencies. The problem with JS dependencies is that the runtime environment known as the browser is separated from the source, or server, which creates a lag. In fact, this lag between browser and server is one of the most contributing factors to web application performance.

Many attempts have been made throughout the years to try to tame this problem, but the closest so far has been to use libraries that have developers create modules, then generate payloads containing only the modules that the page requires. Still, Netflix can’t use this solution because of how many different split tests they want to implement at one time, as this solution is not very scalable. Netflix needed to figure out a way to resolve all the different conditional dependencies of each component when they are loading different components for different users across the board. They implemented a technique called the Just-In-Time dependency resolution. Using statistical analysis to build a dependency tree, a data structure that organizes structures within code so that there are relationships between structures. By linking certain Netflix users to specific JS files, then the said specific files can be linked to the page payload and then load on the client side.

I thought this article was very interesting. In particular, I didn’t realize that there was a lag between JavaScript applications and the server because JavaScript could only run on the browser. It seems that there are many problems to combat. Still, with Node.js as a technology that can run on the server, I feel that it is only a matter of time before Web Applications can run entirely on the client side with a server environment of their own.

Cite this page