Embed Size (px)
Citation preview
Progressive Framework Vue.js 2.0Toshiro 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.js2.0 リリース!!
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
必要になる知識• 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 …) • New JS (ES6, Babel, TypeScript …) • CSS preprocessors (Sass, Less, Stylus, PostCSS …)
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) }) }}
Step1 DEMO
Step2 簡単なSPAの作成
想定するケース
• 新規の小規模プロジェクト
• HTMLベースのWebデザイナーと協業する
• SPAアプリケーションを作った経験なし
• でもSPAをやってみたい
• あまり時間はかけられない
➜ step2 git:(master) ✗ vue init webpack-simple
? Generate project in current directory? Yes This will install Vue 2.x version of template.
For Vue 1.x use: vue init webpack-simple#1.0
? Project name step2 ? Project description A Vue.js project ? Author 清水俊郎 <[email protected]>
vue-cli · Generated "step2".
To get started: cd step2 npm install npm run dev
➜ step2 git:(master) ✗
webpack-simple template
必要になる知識• 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 …) • New JS (ES6, Babel, TypeScript …) • CSS preprocessors (Sass, Less, Stylus, PostCSS …)
画面構成リストログイン 詳細
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} }}
Step2 DEMO
Step3 ちょっと複雑なSPAの作成
想定するケース
• 新規の中・大規模プロジェクト
• 本格的にSPAに挑戦したい
• チーム開発
• テストもしっかりやりたい
• 型チェックしたい
• 構文チェックもしたい
➜ step3 git:(master) ✗ vue init webpack
? Generate project in current directory? Yes This will install Vue 2.x version of template.
For Vue 1.x use: vue init webpack#1.0
? Project name step3 ? Project description A Vue.js project ? Author 清水俊郎 <[email protected]> ? 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
必要になる知識• 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 …) • New JS (ES6, Babel, TypeScript …) • CSS preprocessors (Sass, Less, Stylus, PostCSS …) • Unit test E2E test Lint more…
好きにやっちゃってください
ABEJAで使っている技術セット
•Vue.js (まだ1.xです…) •vue-router vue-i18n vuex vuex-router-sync vue-fire 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 Frameworkhttp://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
おわり
![第一次用 Vue.js 就愛上 [改]](https://img.pdfslide.net/doc/110x75/586fda501a28ab18428b5cc9/-vuejs-.jpg)
