Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
すいませんでし...
感想
ほとんどそのまま動く
「これ本当はやっちゃダメだろうな」と思ってた所は動かない
Vue.js 0.12 to 1.0.26
〜おわり〜
vue@next
まだalphaだけど試したい気持ち
動機
- サービスと心中するAngular 1.xのようになりたくない
- 食らいついていきたい気持ちの表明
- 将来本当に移行できるのか興味ある
- SSRとかちょっと興味ある
- 自分のプロダクトが@ne...
おまけ: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 Changes
https://github.com/vuejs/vue/issues/2873
日本語訳
http://qiita.com/prismrism/items/66a9dfc31139326911d8...
根気の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
1コンポーネント = 1ノードツリー
コンポーネントの概念を正しく実装していたら
特にやることはない
Filtersを$watchや$computedに
変換する作業
- Filters can now only be used inside text interpolations ({{}} tags)
- Vue 2.0 will not ...
一番の問題
とりあえずVue 2.0.0にはなるよver.
これを events: {
EVENT_NAME_1: function() {},
EVENT_NAME_2: function() {},
EVENT_NAME_3: 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.$...
だいたいGrepだけで
動いた
正気に戻る
結論
- シンプルな部分はGrepで置換可能
- カスタム要素は仕様に合わせるために少し頭を使う
- Vuex入れてない人はまずVuex入れよう
- Vuexが無くても動く
Upcoming SlideShare
Loading in …5
×

Vue.js 0.12 to 2.0.0 gotanda.js #5

590 views

Published on

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

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Vue.js 0.12 to 2.0.0 gotanda.js #5

  1. 1. Vue.js 0.12 to 2.0.0 に、変えようとしてそっとbranchを消した話
  2. 2. about me @nekobato フロントエンドエンジニア 最近はデザイン監修とプロトタイプ Polidium 半透明動画プレイヤー Davneko webdavライクなオーディオプレイヤー
  3. 3. Vue.js at 実務の話をします
  4. 4. 恐縮です
  5. 5. アジェンダ 1. なぜこんなことに 2. 0.12 to 1.0.26 3. 1.0.26 to 2.0.0
  6. 6. 状況 on 昔懐かしポチポチゲーWebviewゲーム コードはPerlのテンプレートエンジンとVue.jsが入り乱れる乱世 将来の夢は完全SPA みなさんはVue.js 0.12ですか?
  7. 7. なぜ今0.12なのか 困ってなかったから
  8. 8. なぜ今0.12なのか 全然0.12で困らない - スピードも問題無い - スケールも問題無い - Vue.jsの中でflux flowが作れる - (新しめのアプリ構造に乗り遅れるわけでもない)
  9. 9. Announcing Vue.js 2.0 We are also not forgetting about 1.x! 早く0.12から脱出しないと(焦燥感)
  10. 10. 歴史 Vue.js 0.12 ← 今ココ! Vue.js 1.x Vue-Router Vuex Vue.js 2.0.0
  11. 11. Vue.js 0.12 to 1.0.26
  12. 12. 根気のGrep v-on=’click:function’ v-el=’name’ v-repeat=’’ <content> etc… @click=’function’ :el=’name’ v-for=’’ <slot>
  13. 13. formをformというcomponentで 上書きしてたら怒られた [Vue warn]: Do not use built-in or reserved HTML elements as component id: form すいませんでした → directiveに全書き換え
  14. 14. 感想 ほとんどそのまま動く 「これ本当はやっちゃダメだろうな」と思ってた所は動かない
  15. 15. Vue.js 0.12 to 1.0.26 〜おわり〜
  16. 16. vue@next
  17. 17. まだalphaだけど試したい気持ち 動機 - サービスと心中するAngular 1.xのようになりたくない - 食らいついていきたい気持ちの表明 - 将来本当に移行できるのか興味ある - SSRとかちょっと興味ある - 自分のプロダクトが@nextに移行しつつある知見 - デバッグが楽
  18. 18. おまけ:vue-loader@nextが便利 templateのVueに関するエラーをトランスパイルの時点で報告してくれる
  19. 19. Vue.js 1.0.26 to 2.0.0-rc
  20. 20. Vue.js2.0.0を試してみた系の人は言う 「ほとんどそのまま動く」
  21. 21. Vue.js2.0.0を試してみた系の人は言う 「ほとんどそのまま動く」 事前にVuex導入してたらな
  22. 22. Vuexで構築していなかった俺たちは vm.$eventsと共に死ぬ
  23. 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. 24. 根気のGrep v-el:name, v-ref:name this.$els.name $vm.ready v-for構文 etc... ref=”name” this.$refs.name $vm.mounted
  25. 25. DOM構成が厳しくなってる Component template should contain exactly one root element 1コンポーネント = 1ノードツリー コンポーネントの概念を正しく実装していたら 特にやることはない
  26. 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. 27. 一番の問題
  28. 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. 29. とりあえずVue 2.0.0にはなるよver. まずこうして vue-event-emitter.js import Vue from 'vue' export default new Vue()
  30. 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. 31. だいたいGrepだけで 動いた
  32. 32. 正気に戻る
  33. 33. 結論 - シンプルな部分はGrepで置換可能 - カスタム要素は仕様に合わせるために少し頭を使う - Vuex入れてない人はまずVuex入れよう - Vuexが無くても動く

×