Vue.js における次のイテレーションの計画

Oct 1, 2018

このブログはこちらの翻訳ブログです。

先週の Vue.js London で、私は Vue の次のメジャーバージョンについて簡単なプレビューを行いました。このポストでは、計画の詳細な概要を提供します。

なぜ新しいメジャーバージョンを?

Vue 2.0 はちょうど2年前にリリースされました(時が経つのは早いものです!)。この期間中、core は下位互換性を維持しながら5つのマイナーリリースを行いました。他にも改善をもたらすアイデアはありましたが、それらは破壊的な変更を伴うために、延期されてきました。同時に、JavaScript エコシステムと言語そのものが急速に進化しています。ワークフローを強化するツールが大きく改善されたこと、また多くの新しい言語機能によって、Vue が対処しようとしている問題を、より簡単・完全・効率的に解決できるようになりました。エキサイティングなのは、ES2015 が主要なブラウザでサポートされるようになることです。Vue 3.0 は、これらの新しい言語機能を活用して、Vue コアの小型化、高速化、および強力化を目指しています。

Vue 3.0 は現在プロトタイプ段階にあり、私たちは既に 2.x で機能的に近いランタイムを実装しています。下記の項目の多くはすでに実装されているか、実行可能なことが確認されています。未だ実施されていないか、検討段階にあるものには*印がついています。

詳細

高レベル API の変更

TL;DR: render function API と scoped-slots syntax を除き、その全てが互換性を維持されているか、2.x 互換にすることができます。

これは新しいメジャーバージョンのため、いくつかの破壊的な変更が起こるでしょう。しかし、私たちは下位互換性を真剣に受け止めているので、なるべく早くこれらの変更についてお知らせしたいと思います。現在計画されている public API の変更点は次のとおりです。

ソースコードアーキテクチャ

TL;DR: より良く分離された内部モジュール、TypeScript、よりコントリビューションしやすくなるコードベース。

よりクリーンでメンテナブルなアーキテクチャのために、私たちは 3.0 を最初から書き直しています。特に、よりコントリビューションしやすくなることを心がけています。また複雑さのスコープを分割するため、いくつかの内部機能を個々のパッケージへと切り出しています。たとえば、observer モジュールは独自のパブリック API とテストを持つ独自のパッケージになります。しかしこれらは、framework-level-API には影響しません。Vue を使用するために個々のパッケージをいちいちインポートする必要もなく、最終的な Vue のパッケージがそれらの内部パッケージを使って組み立てられるようになります。

コードベースも TypeScript で書かれています。これは新しいコードベースにコントリビューションするために TypeScript の熟練が必要になることを意味しますが、型情報と IDE のサポートにより、新しいコントリビュータがより簡単に有意義なコントリビューションができるようになると確信しています。

observer と scheduler を個別のパッケージに分離することで、これらの部分の代替の実装を簡単に試すことができるようになります。たとえば IE11 互換の observer 実装を同じ API で実装できるし、requestIdleCallback を使って時間のかかる処理を行う代替スケジューラを実装することもできます。

新しいソースコード構造をチラ見せ (変わるかも)

監視メカニズム

TL;DR: より完全・正確・効率的・デバッグ可能なリアクティブトラッキングおよび observables を作成するための API

3.0 には Proxy ベースの observer 実装が付属しています。これは完全な言語カバレッジを持つリアクティブトラッキングを提供します。これにより、Object.defineProperty に基づいた Vue 2 の現在の実装における多くの制限が解消されます:

新しい observer には以下の機能もあります:

なぜコンポーネントが再レンダリングされるのかを簡単に理解する

その他のランタイムの改善

TL;DR: より小さく、速く、tree-shakable な機能、Fragment と Portal、カスタムレンダラ API。

コンパイラの改良*

TL;DR: tree-shaking と相性の良い出力、さらなる AOT 最適化、より良いエラー情報とソースマップをサポートしたパーサ。

IE11 サポート*

TL;DR: サポートされる予定ですが、Vue 2.x と同じリアクティブ制限を持つ別のビルドになります。

新しいコードベースは現在主要ブラウザのみを対象としており、ネイティブ ES2015 サポートを基本的な前提としています。しかし、悲しいことに、われわれは多くのユーザがもうしばらく IE11 をサポートする必要があることを知っています。ES2015 のほとんどの機能は、Proxy を除いて、IE11 用にトランスパイル/ポリフィルすることができるため、同一の API で、古い ES5 の Object.defineProperty API を使用して代替 observer を実装する予定です。この observer 実装を使用して、Vue 3.x の別のビルドが配布されますが、このビルドは、変更検出に関して Vue 2.x と同じ注意事項を残しているので、3.x の “modern” ビルドと完全には互換性がありません。これは2つの異なるビルドの互換性を認識する必要性に繋がり、これらがライブラリ作者にいくらかの不便を与えることを私たちは認識していますが、このステージに差し掛かった際には、明確なガイドラインを提供することを約束します。

どのように到達するか

まず第一に、今日このような発表を行いましたが、明確なタイムラインは未だ存在しません。現時点で私たちが知っていることは、そこに到達するために取るべきステップです。

1. ランタイム・プロトタイプの内部フィードバック

これが現在のフェーズです。すでに、新しい observer、 Virtual DOM およびコンポーネント実装を含む、動作中のランタイム・プロトタイプが用意されています。私たちは、影響力のあるコミュニティプロジェクトの作者のグループを招いて、内部的な変更をフィードバックしてもらい、それらが快適だということをあらかじめ確認したいと思っています。私たちは、3.0 と重要なライブラリが同時にリリースされ、それらのプロジェクトに頼っているユーザが簡単にアップグレードできることを保証したいと思います。

2. RFC を通じた公開フィードバック

新しいデザインに一定のレベルの確信を得たら、破壊的な変更ごとに下記を含む専用の RFC issue を開くでしょう:

これらのアイデアをまとめるために、より広範なコミュニティからのフィードバックを期待しています。

3. 2.x2.x-next に互換機能を導入する

2.x のことも忘れません! と言うよりも、私たちは 2.x を使用してユーザに新しい変更を徐々に習得させる予定です。API の変更は opt-in アダプタを通じて 2.x に徐々に導入していき、またユーザは 2.x-next で新しい Proxy ベースの observer を試すことができるようになります。

2.x の最後のマイナーリリースは LTS になり、3.0 がリリースされても 18 ヶ月間にわたりバグとセキュリティ修正を受け続けます。

4. アルファ版

3.0 のコンパイラとサーバーサイド・レンダリングを完成させたら、アルファ版の作成を開始します。これらは主に、小さなグリーンフィールドの (訳注: まっさらな状態から作り始める) アプリ上での安定性テストの目的に使用されます。

5. ベータ版

ベータ段階では、Vue Router、Vuex、Vue CLI、Vue DevTools などのサポートライブラリとツールを更新して、新しいコアで円滑に動作するようにします。私たちは主要なライブラリの 3.0 対応を助けるべく、コミュニティ製ライブラリの作者とも協力していきます。

6. RC 版

API とコードベースが安定しているとみなしたら、API のフリーズを経て RC フェーズに入ります。このフェーズでは、2.x API の互換レイヤを含む 3.0 のビルド “compat build” に取り組みます。このビルドでは、フラグによって、アプリで 2.x API が使われている場合に deprecation warning を表示させることもできます。 compat build は、アプリを 3.0 にアップグレードするためのガイドとして使用できます。

7. IE11 ビルド

最終リリース前の最後のタスクは、上記の IE11 互換ビルドとなります。

8. 最終リリース

正直に申し上げて、これがいつになるかはまだ分からないですが、おそらく2019年内ではあります。また、決まった日にリリースをするよりも、堅実で安定したものを届けることを重要視しています。やるべきことは山積みですが、私たちは今後を楽しみにしています!