Gotanda.js #5 の資料です @nekobato http://gotandajs.connpass.com/event/33454/

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

2. about me
@nekobato
フロントエンドエンジニア
最近はデザイン監修とプロトタイプ
Polidium
半透明動画プレイヤー
Davneko
webdavライクなオーディオプレイヤー

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

4. 恐縮です

5. アジェンダ
1. なぜこんなことに
2. 0.12 to 1.0.26
3. 1.0.26 to 2.0.0

6. 状況
on 昔懐かしポチポチゲーWebviewゲーム
コードはPerlのテンプレートエンジンとVue.jsが入り乱れる乱世
将来の夢は完全SPA
みなさんはVue.js 0.12ですか？

7. なぜ今0.12なのか
困ってなかったから

8. なぜ今0.12なのか
全然0.12で困らない
- スピードも問題無い
- スケールも問題無い
- Vue.jsの中でflux flowが作れる
- （新しめのアプリ構造に乗り遅れるわけでもない）

9. Announcing Vue.js 2.0
We are also not forgetting about 1.x!
早く0.12から脱出しないと（焦燥感）

10. 歴史
Vue.js 0.12 ← 今ココ！
Vue.js 1.x Vue-Router
Vuex
Vue.js 2.0.0

11. Vue.js 0.12 to 1.0.26

12. 根気のGrep
v-on=’click:function’
v-el=’name’
v-repeat=’’
<content>
etc…
@click=’function’
:el=’name’
v-for=’’
<slot>

13. formをformというcomponentで
上書きしてたら怒られた
[Vue warn]: Do not use built-in or
reserved HTML elements as component
id: form
すいませんでした
→ directiveに全書き換え

14. 感想
ほとんどそのまま動く
「これ本当はやっちゃダメだろうな」と思ってた所は動かない

15. Vue.js 0.12 to 1.0.26
〜おわり〜

16. vue@next

17. まだalphaだけど試したい気持ち
動機
- サービスと心中するAngular 1.xのようになりたくない
- 食らいついていきたい気持ちの表明
- 将来本当に移行できるのか興味ある
- SSRとかちょっと興味ある
- 自分のプロダクトが@nextに移行しつつある知見
- デバッグが楽

18. おまけ：vue-loader@nextが便利
templateのVueに関するエラーをトランスパイルの時点で報告してくれる

19. Vue.js 1.0.26 to 2.0.0-rc

20. Vue.js2.0.0を試してみた系の人は言う
「ほとんどそのまま動く」

21. Vue.js2.0.0を試してみた系の人は言う
「ほとんどそのまま動く」
事前にVuex導入してたらな

22. Vuexで構築していなかった俺たちは
vm.$eventsと共に死ぬ

23. 資料に従って準備する
2.0 Changes
https://github.com/vuejs/vue/issues/2873
日本語訳
http://qiita.com/prismrism/items/66a9dfc31139326911d8
Vue 2.0 RC Starter Resources
https://github.com/vuejs/vue/wiki/Vue-2.0-RC-Starter-Resources

24. 根気のGrep
v-el:name, v-ref:name
this.$els.name
$vm.ready
v-for構文
etc...
ref=”name”
this.$refs.name
$vm.mounted

25. DOM構成が厳しくなってる
Component template should contain
exactly one root element
１コンポーネント = １ノードツリー
コンポーネントの概念を正しく実装していたら
特にやることはない

26. 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)'

27. 一番の問題

28. とりあえず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() {})

29. とりあえずVue 2.0.0にはなるよver.
まずこうして vue-event-emitter.js
import Vue from 'vue'
export default new Vue()

30. とりあえず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() {})

31. だいたいGrepだけで
動いた

32. 正気に戻る

33. 結論
- シンプルな部分はGrepで置換可能
- カスタム要素は仕様に合わせるために少し頭を使う
- Vuex入れてない人はまずVuex入れよう
- Vuexが無くても動く