これまでに公表されたVue.js 3.0に関する情報をざっと眺めてみた
(この記事は2018年12月時点の情報を元に書かれています。）
この記事は、PLAID Advent Calendar 19日目の記事です。
9/20–21に開かれたVue London以降、9/30のEvan氏によるブログポストや弊社プレイドもスポンサー協賛させていただいたVue Fes Japan 2018を含むイベントなどで、Vue.jsの時期バージョン(3.x)に関する様々な情報が発表されてきました。
既に各情報を見られた方にとっては今更な記事にはなりますが、現状把握と今後のためにざっと眺めてまとめてみました。
公表されている主な情報
公開されている主要な情報をリストアップしてみました。
- 9/30: Plans for the Next Iteration of Vue.js
- 11/3: Vue 3.0 Updates — Vue Fes Japan 2018 (Keynoteの動画はこちら)
- 11/16: Evan You Previews Vue.js 3.0 — VueConf Tronto
- Vue.js Roadmap
Vue Londonと9/30のブログでEvan氏がVue.jsのプランを発表しています。その後のVue Fes Japan 2018とVueConf Trontoでは、v3.0の最新のステータスについて、おそらくほぼ同様の内容が話されたものと思われます。（私はVue Fesの当日はスタッフとして動いていたのもあって、事後にサマリーは見たのですが、Vue Fes Japanのkeynoteの動画をじっくり見るのはしばらく後になってしまいました。）
主な変更点
主な変更点は、ざっくりと書くと以下になります。
- コードベースはスクラッチでTypeScriptに置き換えられる
- scoped-slot syntaxには若干の変更がある可能性あり
- クラスベースのコンポーネントのネイティブサポート
- TSXによるTypeScriptサポート強化
- リアクティビティAPIの提供
- Proxy-observerを利用した機能でShared stateを作れるため、場合によってはVuexもいらなくなるかも
Vue.js 3.0の利点
Vue Fesで言及されていた3.0へのアップグレードで我々が受ける恩恵は主に以下の5点のようです。
- 高速になる
- バンドルサイズが小さくなる
- メンテナンスしやすくなる
- ネイティブ向けに作りやすくなる
- コードの保守性が高まる
それぞれ詳しく見ていきます。
1. 高速になる
- VirtualDOMの実装をフルスクラッチでTypeScriptで作り直して、mountとpatch処理が最大100%向上
- 2.xまではES5のgetter, setterを使っていた部分を、proxyの機能を使って再実装。（propertyの追加や削除も検知可能に！）
- コンパイラの改善。templateをコンパイルするときに、コンパイラがtemplateから多くの情報を収集するようにしている。例えば子要素がいくつあるか、なども取得して、0の場合は無駄な処理をskipする、など。また、Static Tree Hoisting(静的ツリー巻き上げ)を行い、静的な箇所の変更検知の処理を削減。
- コンポーネントのインスタンスの初期化が100%高速に
- メモリ使用量が半減
2. バンドルサイズが小さくなる
- バンドルサイズが半減（gzipで10kb以下）
- Tree-shakingによって自動で不要なコードを削除する（WebpackやRollupにもこういった機能がある）。例えばbuilt-in componentやdirective, utilityなどはVueのオプションなので、削除できる。
3. メンテナンスしやすくなる
- 内部アーキテクチャを変更。内部関数には一部breaking changeがある。現在はobserverの中にscheduler(主にcomponentの読み込みの順番の制御などをしているコード)が入っているが、分離して別のpackageにして、monorepoに。
- runtime-coreとruntime-domが別れていて、前者はJSが動けば動く。後者はブラウザを対象としている。分離されていることによりテストがしやすい。
4. ネイティブ向けに作りやすくなる
- カスタムレンダラAPIを提供。このAPIはブラウザではなくPure JavaScriptで動くので、モバイルアプリケーション上でレンダリングができる。
- これらのAPIはNativeScriptやWeeXでbuildするために作られた
5. コードの保守性が高まる
- リアクティビティAPI
- 2.xではdataをコンポーネントの中に持たせる必要があったが、3.xではコンポーネントから分離できる
- あまり大規模な開発でなければVuexなどでstoreパターンを使って管理しなくてもいいかも
- コンポーネントのrenderを監視する、 “renderTriggered” が使える
- TSXによるTypeScriptサポートの強化。warningも強化される。
- 実験的にHooks APIやTime Slicingの導入も。Reactで生まれた良さそうな部分を積極的に輸入してきているのが印象的。
いつリリースされるのか？
気になるのが、v3.0はいつリリースされるのか、ですが…
In all honesty, we don’t know when this will happen yet, but likely in 2019.
ということで、基本的にはまだ初期のフェーズなので未定。2019年には出るんじゃないか…というところ。アップグレードするだけでも大きな恩恵を受けられそうなので、楽しみです。
今後の流れ
以下のステップで進める、としています。現在はstep1。
- runtimeのプロトタイプに対するFeedback期間
- RFCでpublic feedbackを得る
2.6以降、機能提案はRFCでの運用に - 互換性のための機能を2.xに入れる
- Alpha phase (compiler, SSR)
- Beta phase (サポートライブラリのupdate… Vue Router, Vuex, Vue CLI, Vue Dev Tools)
- RC phase API (API & codebaseを安定させる)
- IE11 compatibility Build
- Final release … 2019?
RFCプロセスとリリースに関して
半年ほど前に、RFCプロセスとリリースのサイクルに関して、roadmapのreadmeが更新されました。これについては3.xそのものとは別の話題になりますが、3.0を含む今後のリリースのサイクルを把握する上で重要な点なので確認しておきます。
リリーススケジュールについて
- メジャーバージョンはリリースの6ヶ月前にはアナウンスされる。Breaking changeはRFCプロセスを通す。alpha→beta→RC(Release Candidate)というステージを経てリリースされる。
- マイナーバージョンは新機能があれば3ヶ月ごとにリリースされる。3週間のbeta期間と1週間のRCの期間を経てリリースされる。
- パッチは必要に応じて適宜
- 1週間ごとにunstable versionが自動で切られる
LTS(Long Time Support)について
- メジャーバージョンがリリースされた時に、前のメジャーバージョンの最後のマイナーバージョンがLTS対象となる。
- LTSの期間は18ヶ月で、bugfixやsecurity patchを当てる対象となる。その期間が終了後、さらに18ヶ月間はメンテナンスモードになり、secruity patchのみ当てられる。つまり3.0がリリースされると、2.x系の最後のリリースがLTSとなる模様。
自分たちの開発に対するインパクト
上でも触れた通り、大きなbreaking changesはなさそうなので、基本的には3.0が公開されたらそのままupgradeして入念にテストをすれば良さそうに見えます。また、しばらくは安心して2.xでの開発を続けられそうです。しかし、3.0の導入は、アーキテクチャの変更を考えるきっかけにはなるかもしれません。自分がいるチームでは、(Vuexを使わずに)独自にstoreを用意して状態管理を行なっています。3.xでは”observable”を使ってshared stateの管理機能を使えるため、すごくシンプルな箇所においてはstateの管理にそれを使うことを想定しておくのも良いかな、と思いました。また、TypeScriptを使うことで得られる恩恵もありそうなので、それも考慮の対象なのかな、という気もします。
今後情報が出てきそうな場所
Vueの公式ブログやリポジトリ上でupdateされるはずですが、今後開かれる大きめのイベントでさらに詳細な情報が公開されるかもしれません。楽しみですね。
- The Vue Point — The Official Vue.js Blog: https://medium.com/the-vue-point
- Vue.js roadmap repository: https://github.com/vuejs/roadmap
- Vue.js Amsterdam Feb 14–15, 2019
- VueConf US Mar 26–27, 2019
- Vue Mastery: https://medium.com/vue-mastery
2.xまでの内容について
Vue.js 2.xまでの内容については、公式のドキュメントをご覧ください。実践的な開発に関しては、私も共著で一部担当させていただいた「Vue.js入門 基礎から実践アプリケーション開発まで」を手に取っていただけますと幸いです。
参考
