BT

Netflix.com、Universal JavaScriptを採用してレンダリングパイプラインからJavaをなくす

| 作者: David Iffland フォローする 4 人のフォロワー , 翻訳者 笹井 崇司 フォローする 0 人のフォロワー 投稿日 2015年8月24日. 推定読書時間: 3 分 |

原文(投稿日:2015/08/11)へのリンク

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といった会社が、このアーキテクチャを使ってプロダクトを構築済み、あるいは構築中だ。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

あなたの意見をお聞かせください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする
コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

ディスカッション

InfoQにログインし新機能を利用する


パスワードを忘れた方はこちらへ

Follow

お気に入りのトピックや著者をフォローする

業界やサイト内で一番重要な見出しを閲覧する

Like

より多いシグナル、より少ないノイズ

お気に入りのトピックと著者を選択して自分のフィードを作る

Notifications

最新情報をすぐ手に入れるようにしよう

通知設定をして、お気に入りコンテンツを見逃さないようにしよう!

BT