Netflix.comのチームが、JavaベースのHTMLレンダラから、サーバとクライアント両方で動かせるJavaScriptベースのものに切り替えた。
ユーザの待ち時間を減らすため、NetflixはJavaサーバベースのレンダラをなくして、通信されるHTMLの量を削減した。変更について説明したブログ記事によると、Kristofer Baxter氏は(変更のうち)ユーザが目にすることのないアプリの部分をレンダリングしないことで、インタラクション時間を70%削減できたという。
ユーザがnetflix.comのページにやってくるたび、Java層がそのページ全体のライフタイムに必要なレスポンスの大部分を生成し、それをHTMLマークアップとして提供していました。多くの場合、ユーザは一度も訪れることのない大半のマークアップが生成されるのを待つことになります。
Netflixは「Universal JavaScript」と呼ばれる、ブラウザ上でもnode.jsサーバでも動かせる新しいUIレンダラを構築した。Baxter氏はこう語る。このテクニックを使うことで「アプリケーションはレンダリングする場所によらず、まったく同じ出力をレンダリングできます。もはや強い分離は存在せず、サーバとクライアントで異なることはまずありません。」
JavaScriptへの適用について、Charlie Robbins氏が2011年にそのアイデアを発表した。彼はそれを「Isomorphic JavaScript」と呼んだが、ひどい名前で何年も議論されることになった。この数ヶ月で「Universal JavaScript」という名前の支持が増えている。
Universal JavaScriptモデルへの切り替えは容易ではなく、強固な基盤が必要になる。Baxter氏はInfoQに対し、コード品質が最重要であると語った。「何にも増して、2つのJavaScript環境が共通のコンテキストを持つことが重要です。この問題に対する強固なアーキテクチャソリューションがないと、コードはすぐにサーバとクライアントとで枝分かれするおそれがあります」Baxter氏は語る。
Netflixはその実現にReact.jsを選んだが、それが唯一の選択肢というわけではない。Ember.jsには同じようなことをしてくれるFastBootと呼ばれるテクノロジがやってくる。試してみることのできるライブラリがたくさんある。
社内における大接戦の末、NetflixはUniversal JavaScriptシステムを選んだという。Baxter氏によると、SPAテクニックを使って構築した別のプロトタイプも検討されたという。
このプロジェクトのプロトタイプフェーズを始めたとき、私たちは競合するアーキテクチャを使ったプロトタイプを2つ構築しました。1つは、主にBackboneとjQueryをベースとしたクライアントサイドオンリーのJavaScriptアーキテクチャでした。もう1つが、Universal JavaScriptとReact.jsを使った初期設計でした。3週間後、2つのアーキテクチャがより大きなチームに提示され、React.jsを使ったUniversal JavaScriptが圧倒的勝者となりました。しかし、私たちは今後も、Webアプリケーションを構築するための新しい異なるアプローチを試していきます。
Universal JavaScriptを使う会社が増えている。Hotel Tonight、AutoDesk、Tesco、AirBnbといった会社が、このアーキテクチャを使ってプロダクトを構築済み、あるいは構築中だ。