vue-onsenuiを教材に Vue2 migrationを試してみる // migrate vue-onsenui to vue2

by tadyjp

Slide 1

Slide 1 text

vue-onsenuiΛڭࡐʹ Vue2 migrationΛ ࢼͯ͠ΈΔ 2016-10-28 Vue.js Tokyo v-meetup="#2" ॕ 2.0 ϦϦʔεه೦ @tady_jp <ଟా·͞ͱ>

Slide 2

Slide 2 text

ϑΥʔϜɾΤϯυϙΠϯτ

Slide 3

Slide 3 text

ϑΥʔϜɾΤϯυϙΠϯτ +

Slide 4

Slide 4 text

ϑΥʔϜɾΤϯυϙΠϯτ + εςʔλεɾΧϯόϯ

Slide 5

Slide 5 text

ϑΥʔϜɾΤϯυϙΠϯτ + εςʔλεɾΧϯόϯ

Slide 6

Slide 6 text

ϑΥʔϜɾΤϯυϙΠϯτ + εςʔλεɾΧϯόϯ

Slide 7

Slide 7 text

ϑΥʔϜɾΤϯυϙΠϯτ + εςʔλεɾΧϯόϯ

Slide 8

Slide 8 text

VueΛ࢖ͬͯ࡞ͬͯ·͢ ※ۙ೔ϦϦʔε

Slide 9

Slide 9 text

VueΛ࢖ͬͯ࡞ͬͯ·͢ ※ۙ೔ϦϦʔε

Slide 10

Slide 10 text

ͳ͔Έ ﬁle.vue + Vuex ↓ Webpack + Babel + vue-loader ↓ Rails (sprockets) + foreman

Slide 11

Slide 11 text

ͳ͔Έ ﬁle.vue + Vuex ↓ Webpack + Babel + vue-loader ↓ Rails (sprockets) + foreman

Slide 12

Slide 12 text

ͳ͔Έ ﬁle.vue + Vuex ↓ Webpack + Babel + vue-loader ↓ Rails (sprockets) + foreman

Slide 13

Slide 13 text

ͳ͔Έ ﬁle.vue + Vuex ↓ Webpack + Babel + vue-loader ↓ Rails (sprockets) + foreman

Slide 14

Slide 14 text

Vue 2ʹؒʹ߹͍·ͤΜͰͨ͠…orz

Slide 15

Slide 15 text

Vue.js meets Onsen UI 2 • Onsen UI 2ʹͳͬͯFWΛม͑ΒΕΔΑ͏ʹ ͳͬͨ

Slide 16

Slide 16 text

$ npm i vue-onsenui • Onsen UIެࣜͰVue binding͕༻ҙ͞Ε͍ͯ Δ͕ɾɾɾ

Slide 17

Slide 17 text

$ npm i vue-onsenui • ·ͩVue 1ʹ͔͠ରԠ͍ͯ͠ͳ͍

Slide 18

Slide 18 text

Version Up Vue 2ʹ͸ vue-loader 9.x ͕ඞཁ

Slide 19

Slide 19 text

͜ͷঢ়ଶͰಈ͔ͯ͠ΈΔ $ npm run dev

Slide 20

Slide 20 text

vue-migration-helper ࣮ߦ͢Δͱ ඇਪ঑ՕॴΛ “͍͍ͩͨ” ݟ͚ͭͯ͘ΕΔ

Slide 21

Slide 21 text

$ vue-migration-helper src examples

Slide 22

Slide 22 text

[1] ready lifecycle hook has been deprecated [Error] Replace ready with mounted, then use Vue.nextTick if you need an in-document guarantee. [༁] ready Λ mountedʹஔ͖׵͑ ͯɻཁૉ͕ଘࡏ͢ΔͷΛ଴ͭඞ ཁ͕͋Ε͹ Vue.nextTick Λ ࢖ͬͯɻ

Slide 23

Slide 23 text

[2] Built-in filters have been deprecated. [Error] Replace the built-in capitalize filter with a custom filter, method, or computed property using npmjs.com/package/ lodash.capitalize. [༁] ϏϧτΠϯͷϑΟϧλʔ͕ͳ ͘ͳ͔ͬͨΒಠࣗͰ࡞Δ͔ɺ computed propertyͱଞͷϥ ΠϒϥϦΛ࢖ͬͯɻ

Slide 24

Slide 24 text

[3] Rename $index to index and explicity declare it. [Error] $index has been deprecated to avoid implicitly deﬁned (i.e. "magic") variables [༁] ҉໧తͳม਺ͷఆٛΛආ͚ ΔͨΊʹ $index ͸ඇਪ঑ʹ ͳͬͨΑɻ v-for="(item, index) in items” Λ࢖ͬͯͶɻ

Slide 25

Slide 25 text

[4] Update v-el:navigator to ref=“navigator". [Error] v-el and v-ref merged into ref attribute. Update this.$els to this. $refs. [༁] v-el ͱ v-ref ͸ refʹ౷߹͞ ΕͨΑɻ  this.$els ͸ this.$refs ʹม ߋͯ͠Ͷɻ

Slide 26

Slide 26 text

[5] Update name="tab-bar-{{ key }}" to v- bind:name="'tab-bar-' + key”. [Error] Interpolation within attributes has been deprecated. [༁] ଐੑͷதͷม਺ల։ ͸ඇਪ঑ʹͳͬͨΑɻ

Slide 27

Slide 27 text

[6] Replace this.$dispatch('push', options) to use a global event bus or vuex. [Error] $dispatch and $broadcast have been deprecated because the pattern doesn't scale well. [༁] $dispatch ͱ $broadcast ͸εέʔϧ͠ͳ͍͔Βඇਪ ঑ʹͳͬͨΑɻ  άϩʔόϧͳΠϕϯτΛ࢖ ͏͔VuexΛ࢖ͬͯͶɻ ▼ src/components/OnsNavigator.vue ▼ src/index.js

Slide 28

Slide 28 text

[7] Switch argument order in v-for="(key, value) in collection" to (value, key). [Error] Argument order for v- for has been updated to match JavaScript conventions. [༁] v-forͷҾ਺ͷॱ൪Λ JavaScriptʹϚον͢Δ Α͏ʹ௚ͨ͠Αɻ

Slide 29

Slide 29 text

[8] Entry point Runtime-onlyϏ ϧυͰ͸template Λ࢖͑ͳ͍Αɻ ΍ ΛϚ΢ϯτ͢Δͷ ͸ඇਪ঑ͩΑɻ ▼ index.html ▼ examples/main.js

Slide 30

Slide 30 text

demo

Slide 31

Slide 31 text

ٙ໰ ˍ ͓ΘΓ • Component͔ΒMutationݺΜͰ΋ྑ͍ʁ • Vuex࢖͍ͭͭ  ͍ͨ͠ • ࢠComponent͕શͯreadyʹͳͬͨλΠϛϯάΛ஌Γ͍ͨ • ͜ͷεϥΠυͷdiff  → https://github.com/tadyjp/OnsenUI/pull/1