Vue.js 0.12 to 2.0.0 gotanda.js #5

Vue.js 0.12 to 2.0.0に、変えようとしてそっとbranchを消した話

about me

@nekobatoフロントエンドエンジニア

最近はデザイン監修とプロトタイプ

Polidium

半透明動画プレイヤー

Davneko

webdavライクなオーディオプレイヤー

Vue.js at 実務の話をします

恐縮です

アジェンダ

1. なぜこんなことに

2. 0.12 to 1.0.26

3. 1.0.26 to 2.0.0

状況

on 昔懐かしポチポチゲーWebviewゲーム

コードはPerlのテンプレートエンジンとVue.jsが入り乱れる乱世

将来の夢は完全SPA

みなさんはVue.js 0.12ですか？

なぜ今0.12なのか

困ってなかったから

なぜ今0.12なのか

全然0.12で困らない

- スピードも問題無い

- スケールも問題無い

- Vue.jsの中でflux flowが作れる- （新しめのアプリ構造に乗り遅れるわけでもない）

Announcing Vue.js 2.0

We are also not forgetting about 1.x!

早く0.12から脱出しないと（焦燥感）

歴史

Vue.js 0.12　← 今ココ！

Vue.js 1.x Vue-Router

Vuex

Vue.js 2.0.0

Vue.js 0.12 to 1.0.26

根気のGrep

v-on=’click:function’

v-el=’name’

v-repeat=’’

<content>

etc…

@click=’function’

:el=’name’

v-for=’’

<slot>

formをformというcomponentで上書きしてたら怒られた

[Vue warn]: Do not use built-in or reserved HTML elements as component id: form

すいませんでした

→ directiveに全書き換え

感想

ほとんどそのまま動く

「これ本当はやっちゃダメだろうな」と思ってた所は動かない

Vue.js 0.12 to 1.0.26〜おわり〜

vue@next

まだalphaだけど試したい気持ち

動機

- サービスと心中するAngular 1.xのようになりたくない- 食らいついていきたい気持ちの表明

- 将来本当に移行できるのか興味ある

- SSRとかちょっと興味ある

- 自分のプロダクトが@nextに移行しつつある知見- デバッグが楽

おまけ：vue-loader@nextが便利

templateのVueに関するエラーをトランスパイルの時点で報告してくれる

Vue.js 1.0.26 to 2.0.0-rc

Vue.js2.0.0を試してみた系の人は言う

「ほとんどそのまま動く」

Vue.js2.0.0を試してみた系の人は言う

「ほとんどそのまま動く」

事前にVuex導入してたらな

Vuexで構築していなかった俺たちは

vm.$eventsと共に死ぬ

資料に従って準備する

2.0 Changeshttps://github.com/vuejs/vue/issues/2873

日本語訳

http://qiita.com/prismrism/items/66a9dfc31139326911d8

Vue 2.0 RC Starter Resourceshttps://github.com/vuejs/vue/wiki/Vue-2.0-RC-Starter-Resources

根気のGrep

v-el:name, v-ref:name

this.$els.name

$vm.ready

v-for構文

etc...

ref=”name”

this.$refs.name

$vm.mounted

DOM構成が厳しくなってる

Component template should contain exactly one root element

１コンポーネント = １ノードツリー

コンポーネントの概念を正しく実装していたら

特にやることはない

Filtersを$watchや$computedに変換する作業

- Filters can now only be used inside text interpolations ({{}} tags)

- Vue 2.0 will not ship with any built-in filters.

directive内で複雑なことするのやめる

@timeupdate='updateTime | debounce(300)'

一番の問題

とりあえずVue 2.0.0にはなるよver.

これを events: { EVENT_NAME_1: function() {}, EVENT_NAME_2: function() {}, EVENT_NAME_3: function() {}, EVENT_NAME_4: function() {}}

this.$dispatch('EVENT_NAME', function() {})

とりあえずVue 2.0.0にはなるよver.

まずこうして vue-event-emitter.js

import Vue from 'vue'export default new Vue()

とりあえずVue 2.0.0にはなるよver.

こうする import ee from ‘../vue-event-emitter’

created() { ee.$on('EVENT_NAME_1', this.function1) ee.$on('EVENT_NAME_2', this.function2) ee.$on('EVENT_NAME_3', this.function3) ee.$on('EVENT_NAME_4', this.function4)}

ee.$emit('EVENT_NAME', function() {})

だいたいGrepだけで動いた

正気に戻る

結論

- シンプルな部分はGrepで置換可能

- カスタム要素は仕様に合わせるために少し頭を使う

- Vuex入れてない人はまずVuex入れよう- Vuexが無くても動く