VueConf Torontoにおいて,Vue.jsの作者でプロジェクトリーダのEvan You氏は,Vue.jsフレームワークの次期メジャーイテレーションとなるVue 3をプレビューした。
Vueは,シングルページアプリケーションなどのユーザーインターフェース構築を目的とした,先進的フレームワークである。現行のVue 2では,サーバサイドレンダリングに加えて,ライブラリの縮小,Snabbdomからフォークすることで,より高速で軽量となったVirtual DOM実装によるパフォーマンス向上が実現されている。
計画中のVue 3リリースでは,この方向をさらに進めるとともに、さらに小さく、さらにパフォーマンスの高いVueと、より優れた開発者エクスペリエンスの提供を目指している。
サイズの改善は、コードのモジュラリティ向上とコアランタイムの縮小、Tree Shakingに適したしたコンパイラによって達成する方針である。これらによって,新しいコアは、圧縮時のサイズが20KBから10KBに削減される見込みだ。You氏の説明によれば、
コンパイラはTree Shakingに適したコードを生成するようになります。ある関数を必要とする機能をテンプレートで使用すると、コンパイラが自動的に、それをインポートするコードを生成します。しかし、その機能を使用しない場合には、インポートしないコードを生成します。つまりその機能は振り落とされる(Tree Shakingされる)のです。
コード縮小によるパフォーマンス改善に加えてVue 3では,実行速度の向上もうたっている。You氏は、仮想DOMノードの実際のDOMツリーへのマウントとパッチ処理の100パーセント向上を目標として、仮想DOMの実装を全面的に書き直す計画である。仮想ノードのマウントは、仮想ノードを画面上の特定の場所に表示するオペレーションである。パッチ処理は、ターゲットDOMツリーを表す仮想DOMノードと、実際のDOMツリーとの比較に関わっている。この操作の目的は、更新されたDOMツリーがターゲットの仮想ツリーと完全に一致するように、実際のDOMノードを変更するための変更リストを算出することにある。高速な仮想DOM操作を実現するテクニックとしては、ビューテンプレートをソースコードにコンパイルすることで、JavaScriptコンパイラによる最適化を適用するという方法などがある。
Vue 3の重要なテクニックとしてYou氏は,高速なコンポーネントパス,モノモフィック(monomorphic)コール,スロット生成の最適化,コンポーネントツリーの静的部分に対する巻き上げ(hoisting)とインライン化などに言及している。実行時のパフォーマンスは,現行の監視メカニズム(Object.defineProperty
を使用したgetterおよびsetterに基づくもの)からプロキシベースのメカニズムに切り替えることで,さらに向上している。新しいメカニズムでは,最新のブラウザにネイティブに実装されているES2015プロキシを活用して,オブジェクトの更新操作をトラップする。ベンチマークでは,この改善によってメモリ使用量は半分に,実行速度は2倍に向上する可能性が示されている。プロキシをネイティブに実装していないIE11では,現在の監視メカニズムへのフォールバックが引き続きサポートされる。
ES2015はブラウザを問わず,広く利用できるようになっています。そのメリットを利用して,ES2015プロキシを使用した監視メカニズムを再実装する機会を探ることで,素晴らしい結果を得ることができました。すべての範囲において,現行のvueの変更検出システムによる問題点の多くが解決され (...) パフォーマンスも向上しました。
Vueは,バージョン3をTSXサポートを備えたTypeScriptで書き直すことで,開発者エクスペリエンスのさらなる向上を目指している。TSXはJSXのTypeScript拡張版で,TypeScriptを使用するReact開発者や,Dojoなどのプロジェクトが使用している。TypeScriptにスイッチすることで,型チェックや,IDE内に表示されるエラーメッセージの有用性が向上した。さらにVueコアがプラットフォーム非依存となり,モバイルオペレーティングシステム(iOSやAndroid)をターゲットにすることがより簡単になった。コンポーネントの再レンダリング要因の特定が容易になることから,デバッグサイクルの短縮も期待できる。
Reactに着想を得たHooks APIやTime Slicing Supportなどの実験的機能も,開発者やエンドユーザのエクスペリエンス向上に寄与するものと思われる。
Vue.jsはMITオープンソースライセンスで利用することができる。コントリビューションはVue.jsコントリビューションガイドラインに基づいて,Vue.jsのGitHubパッケージ経由で受け付けている。