Progressive Framework Vue.js 2.0

Progressive Framework
Vue.js 2.0
Toshiro Shimizu
Vue.js Tokyo v-meetup="#2" 祝 2.0 リリース記念 28.10.2016

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

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

Progressive Framework
https://docs.google.com/presentation/d/1zQ3Frm3DxSw_qY-KEuykkIUREO-ueFbOyMd1Kd8nqKE/edit#slide=id.p

必要になる知識
• Basic web　(html, css, js)
• Declarative Rendering 　(vueの基本)
• Component System　(vueコンポーネント)
• Client-Side Routing　(vue-router)
• Large Scale State Management　(vuex, fluxの考え方)
• Build System　(npm, webpack, browserify, xx-loader…)
• New JS　(ES6, Babel, TypeScript …)
• CSS preprocessors　(Sass, Less, Stylus, PostCSS …)

一度に学習するのは大変

Vue.jsは段階的な使い方ができる
Step1　既存のページにウィジェットを追加
Step2　簡単なSPAの作成
Step3　ちょっと複雑なSPAの作成
★ browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
★ browserify-simple - A simple Browserify + vueify setup for quick prototyping.
★ simple - The simplest possible Vue setup in a single HTML file
★ webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
★ webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

Step1
既存のページにウィジェットを追加

想定するケース
• 既存のページに動的な機能を追加したい
• 非SPAアプリケーション
• だからと言ってSPAに作りかえるとコストの方が高くつく
• 学習コストはあまりかけられない
• jQueryをやめたい

➜ step1 git:(master) ✗ vue init simple
? Generate project in current directory? Yes
This will install Vue 2.x version of template.
For Vue 1.x use: vue init simple#1.0
? name (step1)
simple template

• Build System　(npm, webpack, browserify …)

Vueの適用方法
1.vue.jsをscriptタグで読み込む（CDN, bowerなど好きな方法で）
2.適用したいページにvueアプリケーションを組み込む
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<body> 
<div id=“app">
・
・
・
<script>
new Vue({ 
el: '#app' 
})
</script>

HTMLへのマッピング
3.DOMとvueのデータをリンクする
<input type="radio"
id=“s"
name=“plan"
value=“100"
v-model="plan"/>
<input type="range"
name="size"
min="0" max="10" step="1"
v-model=“size"/> 
new Vue({ 
el: ‘#app’,
data: { 
plan: 100, 
size: 0, 
options: [], 
}, 
})

HTMLへのマッピング
4.ロジックを追加
<li class=“title">
Total price
</li> 
<li class="subtitle is-3”>
¥{{total}} / 月
</li>
computed: { 
sizeTotal: function () { 
return (this.size * 500) 
}, 
total: function () { 
return 
this.plan +  
this.sizeTotal, 
].concat(this.options)
.reduce(function(a, b) {
return Number(a) + Number(b)
}) 
} 
}

• 新規の小規模プロジェクト
• HTMLベースのWebデザイナーと協業する
• SPAアプリケーションを作った経験なし
• でもSPAをやってみたい
• あまり時間はかけられない

➜ step2 git:(master) ✗ vue init webpack-simple
For Vue 1.x use: vue init webpack-simple#1.0
? Project name step2
? Project description A Vue.js project
? Author 清水俊郎 <toshilow@gramp.biz>
vue-cli · Generated "step2".
To get started:
cd step2
npm install
npm run dev
➜ step2 git:(master) ✗
webpack-simple template

画面構成
リストログイン詳細

vue-routerを導入
➜ step2 git:(master) ✗ yarn add vue-router
routes: [ 
{ path: '/login', component: Login }, 
{ path: '/app', component: App , 
children: [ 
{ path: '/', component: List }, 
{ path: ':id', component: Detail }, 
] 
}, 
{ path: '*', redirect: '/login' } 
]
<div id="app"> 
<router-view></router-view> 
</div>
import Vue from 'vue'; 
import router from './router' 
 
new Vue({ 
router 
}).$mount('#app');

外部のコンポーネントを導入
➜ step2 git:(master) ✗ yarn add vue-charts
import Vue from 'vue' 
import Charts from 'vue-charts' 
 
Vue.use(Charts)
<vue-chart 
:columns="columns" 
:rows="rows" 
:options="options"></vue-chart>
data: function () { 
return { 
columns: [{'type': 'string','label': ‘Year'}
, {'type': 'number','label':'Power'}], 
rows: [ 
['2004', 1000], 
['2005', 1170], 
['2006', 660], 
['2007', 1030] 
], 
options: { 
title: 'Performance', 
hAxis: { title: 'Year'}, 
vAxis: { title: '' }, 
width: '100%',height: 300} 
} 
}

Step3
ちょっと複雑なSPAの作成

• 新規の中・大規模プロジェクト
• 本格的にSPAに挑戦したい
• チーム開発
• テストもしっかりやりたい
• 型チェックしたい
• 構文チェックもしたい

➜ step3 git:(master) ✗ vue init webpack
For Vue 1.x use: vue init webpack#1.0
? Project name step3
? Project description A Vue.js project
? Author 清水俊郎 <toshilow@gramp.biz>
? Vue build runtime
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "step3".
To get started:
cd step3
npm install
npm run dev
Documentation can be found at https://vuejs-templates.github.io/
webpack
webpack template

• Build System　(npm webpack, browserify …)
• Unit test E2E test Lint more…

好きにやっちゃってください

ABEJAで使っている技術セット
•Vue.js (まだ1.xです…)
•vue-router vue-i18n vuex vuex-router-sync vue-ﬁre vue-google-map
•yarn
•webpack
•babel es2015
•esLint
•karma + mocha + power-assert
•FlowType
•bootstrap-sass
•Firebase

まとめ
最初から全て覚えなくても始められる
ステップアップして大規模にも対応出来る
規模によって道具を使い分ける必要がないのはメリット
自分は選択肢が広く多様性はいいことだと思う
まずはStep1みたいなものからやってみてはどうでしょう
Sample Code https://github.com/toshilow/progressive-vue

Join us!!
フロントエンドエンジニア募集

参考
Modern Frontend Development with Vue.js
https://docs.google.com/presentation/d/1zQ3Frm3DxSw_qY-KEuykkIUREO-ueFbOyMd1Kd8nqKE/
edit#slide=id.p
Vue.js Progressive Framework
http://qiita.com/mikakane/items/3bd6af69259f5af6fecb
第1回プログレッシブフレームワーク Vue.js
https://github.com/vuejs/vue-router/tree/next-doc
vuejs/vue-cli
https://github.com/vuejs/vue-cli

Progressive Framework Vue.js 2.0

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Progressive Framework Vue.js 2.0

Similar to Progressive Framework Vue.js 2.0 (20)

Progressive Framework Vue.js 2.0