Vue.js: Revolutionary Front-end #1 http://abeja-innovation-meetup.connpass.com/event/38214/

1. Vue.js 2.0 を試してみた
Toshiro Shimizu
Vue.js : Revolutionary Front-end #1 24.08.2016

2. About me
清水 俊郎 gh: @toshilow
元フリーランスで3月からABEJAで フロントエンドエンジニアをやってます
もともとはサーバサイトJavaエンジニア
3年ほど前からフロントエンドで主にAngular 1xを使ってました
Vue.jsを使い始めてから半年
高崎から通ってます

3. RC3も出たし
そろそろ2.0への移行も考えていきたい

4. 今日話すこと
1. Vue.jsのここが好き
2. 今日使うサンプルの説明
3. マイグレーションポイント
4. まとめ

5. Vue.jsのここが好き
リアクティブ Reactive
軽量 Lightweight
シンプル Simple
簡単 Easy

6. サンプルの説明
vue.js 1.0.26
vue-routerでルーティング
vuexに状態を保存
vue-router-syncを使用
webpackでビルド
vueファイルではなくhtmlテンプレート
https://github.com/toshilow/vue-v1-sample

7. モジュールのアップデート
# npm install vue@next vue-router@next vuex@next vue-router-
sync@next --save
@nextを指定してvue vue-router vuex vue-router-syncをアップデート

8. Webpack.configでaliasを追加
module.exports = {
entry: "./src/main.js",
output: {
path: path.join(__dirname, 'build'),
filename: 'main.js'},
resolve: {
alias: {
vue: 'vue/dist/vue.js'
}
},
module: {
loaders: [{test: /.scss$|.sass$/,
Standalone
(compiler + runtime)

9. 1.0
Vue.use(VueRouter)
var router = new VueRouter()
router.map({
'/': {
component: Top
},
'/posts': {
component: Posts
},
})
2.0
Vue.use(VueRouter)
var router = new VueRouter({
routes: [
{ path: '/',
component: Top
},
{ path: '/posts',
component: Posts
},
]
})
ルーティングの書き換え

10. 1.0
<div class="container">
<div class="nav-left">
<a v-link="{path: '/'}"
class="nav-item is-tab">Top
</a>
<a v-link="{path: '/posts'}"
class="nav-item is-tab">Posts
</a>
</div>
</div>
2.0
<div class="container">
<div class="nav-left">
<router-link to="/"
class="nav-item is-tab">Top
</router-link>
<router-link to="/posts"
class="nav-item is-tab">Posts
</router-link>
</div>
</div>
リンクの書き換え

11. actions.js
export const addPost =
({ commit }, post) => {
commit('ADD_POST', post)
}
export const deletePost =
({ commit }, index) => {
commit('DELETE_POST', index)
}
store.js
export const posts =
state => state.posts
VuexStoreの変更
import * as actions from './actions'
import * as getters from './getters'
export default new Vuex.Store(
{ state,
actions,
getters,
mutations })
getters.js

12. 1.0
import { addPost, deletePost }
from "../../vuex/action"
export default Vue.extend({
vuex: {
getters: {
posts: state => state.posts
},
actions: {
addPost,deletePost
}
},
2.0
export default Vue.extend({
computed: {
...mapGetters(['posts'])
},
methods: {
...mapActions(
['addPost','deletePost']),
},
// this.$store.getters.posts
// this.$store.dispach(‘addPost’)
// とも書ける
コンポーネントとVuexのバインディング

13. 1.0
import Vue from 'vue'
import { sync } from 'vuex-router-
sync'
import store from './vuex/store'
import router from './router/router'
sync(store, router)
router.start(
Vue.extend({store}), '#app')
2.0
import Vue from 'vue'
import { sync } from 'vuex-router-
sync'
import store from './vuex/store'
import router from './router/router'
sync(store, router)
new Vue({store, router})
.$mount('#app')
エントリーポイントの書き換え

14. 1.0
<article class="media"
v-for="post in posts">
<div class="media-content">
<strong>{{post.title}}</strong>
<br>{{post.body}}
</div>
<div class="media-right">
<button class="delete"
@click="deletePost($index)">
</button>
</div>
</article>
2.0
<article class="media"
v-for="(post, index) in posts">
<div class="media-content">
<strong>{{post.title}}</strong>
<br>{{post.body}}
</div>
<div class="media-right">
<button class="delete"
@click="deletePost(index)">
</button>
</div>
</article>
$indexの書き換え

15. 動作確認

16. まとめ
1.0との互換性は良い (ほとんどそのまま動いた)
APIのシンプルさは保たれたままでよかった
イベント通知のdispachとbroadcastが無くなるemit１択
Vue.js devtoolが便利
今後パフォーマンス測定、SSRも試してみたい

17. 参考
Vue.js 2.0 Changes #2873
https://github.com/vuejs/vue/issues/2873
Vuex 2.0 design #236
https://github.com/vuejs/vuex/issues/236
Vue 2.0 RC Starter Resources
https://github.com/vuejs/vue/wiki/Vue-2.0-RC-Starter-Resources
Vue Router next doc
https://github.com/vuejs/vue-router/tree/next-doc
petervmeijgaard/vue-2.0-boilerplate
https://github.com/petervmeijgaard/vue-2.0-boilerplate

18. Join us!! 急募

19. おわり