The team behind Netflix.com has switched from a Java-based HTML renderer to a JavaScript one that they can run on both the server and the client.
To decrease the time users spent waiting, Netflix has removed the Java server-based renderer and reduced the amount of HTML sent down the wire. In a post describing the change, Kristofer Baxter, said that by not rendering pieces of the app that the user will never see (among other changes), they've been able to speed up the time til interaction by 70%.
Every time a visitor came to any page on netflix.com our Java tier would generate the majority of the response needed for the entire page's lifetime and deliver it as HTML markup. Often, users would be waiting for the generation of markup for large parts of the page they would never visit.
Dubbed "Universal JavaScript", Netflix architected their new UI renderer so that they can run it in the browser or in a node.js server. Baxter says that this technique "allows for the application to render the exact same output independent of the location of the rendering. The hard separation is no longer present and it's far less likely for the server and client to be different than one another."
As applied to JavaScript, Charlie Robbins presented the idea in 2011. He called it "Isomorphic JavaScript" which has resulted in years of debate over the poor name. In recent months, the term Universal JavaScript has gained acceptance.
Switching to a Universal JavaScript model is not easy and requires a solid foundation. Baxter told InfoQ that code quality is of the utmost importance. "Ensuring the two JavaScript environments have a shared context is paramount. Without a solid architectural solution to this problem, code can easily fracture into server versus client branching," said Baxter.
While Netflix has chosen React.js to provide them with this ability, it isn't the only option. Ember.js has an upcoming technology called FastBoot that promises to do something similar. There are also many other libraries available to try out.
Netflix opted for the Universal JavaScript system after a head-to-head duel inside the company. Baxter says another prototype built using SPA techniques was also considered:
When we started the prototyping phase of this project, we built two complete prototypes of competing designs using different architectures. The first was a client-side only JavaScript architecture based heavily on Backbone and jQuery. The second, a competing early design using Universal JavaScript and React.js. After a three week period, the two architectures were presented to the larger team and Universal JavaScript with React.js was the clear winner. However, we'll continue to try new and differing approaches to building web applications going forward.
The list of companies building with Universal JavaScript is growing. Hotel Tonight, AutoDesk, Tesco, and AirBnb have built or are building products with the architecture.
