Vue.js 2.0 の発表
Apr 27, 2016
本日、多くのエキサイティングな改善と新しい機能を盛り込んだ、 Vue.js 2.0 の最初のパブリックプレビュー (public preview) を発表してゾクゾクしています。何が起こっているのかのぞいてみましょう！
さらにスリム、さらに高速
Vue.js は軽くて速いままでいることに常に焦点を当てて来ましたが、2.0 はさらにそれを推し進めます。レンダリングレイヤは、現在軽量な仮想 DOM 実装 (Snabbdom) に基づいており、初期レンダリング速度とメモリ消費量は大抵のシナリオにおいて 2 〜 4 倍まで改善します(これらのベンチマークを調べてみてください)。テンプレートから仮想 DOM にするコンパイラとランタイムは分離することができ、そのため、テンプレートをプリコンパイルしたり、ランタイムだけによるあなたのアプリケーションを提供できます。min+gzip されたランタイムは 12 キロバイト未満です (参考として、React 15 は min+gzip で 44 キロバイトです)。また、コンパイラはブラウザ上で動作します。これは、以前と同様に、script タグを差し込むだけでハッキングを開始できることを意味します。ビルドにコンパイラを含めた場合でも、ファイルサイズは 17 キロバイト (min+gzip) にとどまり、現在の 1.x ビルドよりもまだ軽量です。
普通の Virtual-DOM ではありません
現在、非常に多くの実装があるので仮想 DOM は退屈に聞こえますが、これは違います。Vue のリアクティブシステムと組み合わせることで、あなたは何もすることもなく、形にとらわれない最適化された再レンダリングを提供します。各コンポーネントはレンダリング中にそのリアクティブな依存関係を追跡するため、再レンダリングするときシステムは正確に知っており、shouldComponentUpdate または不変(immutable)なデータは必要ありません。それだけで動作します。
また、Vue 2.0 はテンプレートから仮想 DOM にコンパイルするフェーズにいくつかの高度な最適化を適用します:
静的なクラス名と属性を検出し、その結果それらは最初のレンダリング後、差分(diff) を取ることはありません:
最大限の静的なサブツリー(動的バインディングなしのサブツリー)と render 関数からそれらを巻き上げます。このため、それぞれにおける再レンダリングは、直接まったく同じ仮想 Node を再利用し、差分検出をスキップします。
これらの高度な最適化は、JSX を使用するとき、通常 Babel プラグインを介して達成することができますが、Vue 2.0 でブラウザ内のコンパイラを使用してそれらを得ることができます。
新しいレンダリングシステムはまた、あなたのデータを凍結したり手動で強制的に更新することによって、リアクティブの転換を無効にすることができ、本質的に再レンダリング処理をあなたに完全に制御を与えます。
これらの技術を組み合わせると、Vue 2.0 は複雑なアプリケーションに対して非常に高速なアップデートを保証し、開発者から最小限の労力を必要とします。
テンプレート、JSX 、または Hyperscript？
開発者はテンプレート 対 JSX に強い感情を持つ傾向があります。一方では、テンプレートは HTML に近いです。それらは、あなたのアプリケーションのセマンティックな構造により良いマッピングをし、設計とレイアウトとスタイリングについて視覚的に考えることが遥かに容易になります。一方で、JSX / hyperscript は計算完備(turing-complete)の完全な表現力を提供しつつ、テンプレートは DSL に制限されています。
デザイナー/開発者のハイブリッドであること、私はテンプレートで自分のインターフェイスのほとんどを書くことを好みますが、特定の場合においては、JSX / hyperscript の柔軟性を見逃しません。例としては、プログラム的に子を処理するコンポーネントを書き込む、テンプレートベースの slot 機構を備えた実現可能なものです。
さて、なぜ、両方持っていないのでしょうか？ Vue 2.0 では、使い慣れたテンプレートの構文を使い続けることができ、また、いつでもテンプレートの DSL によって制約を感じるたびに、仮想 DOM に飛び降りることができます。template オプションの代わりに、render 関数でそれを置き換えます。あなたのテンプレートで特別な <render> タグを使用してレンダリング関数を埋め込むことができます！同じフレームワークにおいて、両方の長所があります。
サーバサイドレンダリングのストリーミング
仮想 DOM への移行では、Vue 2.0 は自然にクライアントサイド hydration によるサーバサイドレンダリングをサポートします。現在主流のサーバサイドレンダリング実装の辛いところは、React のような、アプリケーションが複雑な場合、サーバのイベントループをブロックすることができるため、レンダリングは同期であることです。同期的なサーバサイドレンダリングは、クライアント上のコンテンツに悪影響を与える可能性があります。Vue 2.0 は形にとらわれないサーバサイドレンダリングのストリーミングを提供するため、あなたのコンポーネントをレンダリングすることができ、読み込み可能なストリームを取得し、直接 それを HTTP レスポンスにパイプすることができます。これは、あなたのサーバが機敏に応答でき、あなたのユーザーにより速くレンダリングされたコンテンツを提供するのを保証します。
より多くの可能性をロックしません
新しいアーキテクチャでは、模索するための多くの可能性があります。例えば、モバイル上でネイティブインターフェイスにレンダリングできます。現在我々は、中国最大の技術企業「アリババグループ」でのエンジニアによって維持されているプロジェクト weex をネイティブレンダリングのバックエンドとして使用する、Vue.js 2.0 の移植について模索しています。ReactNative 内部で実行するために Vue 2.0 の仮想 DOM を適合させることは技術的に可能です。我々は、どうなっていくのか興奮しています！
互換性そして何を次に期待するのか
Vue.js 2.0 はまだ pre-alpha ですが、ここでソースコードを調べることができます。完全な書き直しにも関わらず、1.0 API は、いくつかの意図的な非推奨の例外をのぞいて、1.0 と互換性があります。2.0 で書かれた同じ公式の exampleを調べてみてください。あまり変わっていないことを確認できるでしょう！
機能を非推奨とすることは、最大限の開発者の生産性に対して可能な限り単純なAPIを提供するための継続的な努力の一環です。1.0 と 2.0 の機能比較をここで調べることができます。これは、あなたがこれらの廃止機能のいくつかヘビーに使用している場合、恐らくアプリケーションを移行するためにいくつか労力を要することを意味しますが、将来においてより詳細な移行ガイドを提供するつもりです。
まだ、完了するために残っている仕事はかなりあります。我々は十分なテストカバレッジに達した時、最初の alpha をリリースする予定であり、5月末または6月頭までに beta を目指しています。多くのテストに加えて、我々は、ライブラリ (vue-router、Vuex、vue-loader、vuerify など) のサポートのアップデートも必要です。現在のところ、Vue.js 2.0 ですぐに使えるのは Vuex のみですが、我々が 2.0 を提供するときには、全てが一緒にスムーズに動作するでしょう。
我々は、1.x についても忘れていません！ 1.1 は、9ヶ月のセキュリティアップデートと6ヶ月の致命的なバグ修正の LTS (Long-term Support) 期間によって、2.0 beta と並んでリリースされます。また、2.0 にアップグレードするためにあなたが準備できるよう、任意の非推奨の警告も提供する予定です。乞うご期待下さい！