progressive framework vue.js 2.0
TRANSCRIPT
![Page 1: Progressive Framework Vue.js 2.0](https://reader030.vdocuments.net/reader030/viewer/2022013117/586fda7c1a28ab18428b5d75/html5/thumbnails/1.jpg)
Progressive Framework Vue.js 2.0Toshiro Shimizu Vue.js Tokyo v-meetup="#2" 祝 2.0 リリース記念 28.10.2016
![Page 2: Progressive Framework Vue.js 2.0](https://reader030.vdocuments.net/reader030/viewer/2022013117/586fda7c1a28ab18428b5d75/html5/thumbnails/2.jpg)
About me
清水 俊郎 gh: @toshilow
• 元フリーランスで3月からABEJAで フロントエンドエンジニアをやってます
• もともとはサーバサイトJavaエンジニア
• 3年ほど前からフロントエンドで主にAngular 1xを使ってました
• Vue.jsを使い始めてから8ヶ月
• 群馬県の高崎から通ってます
![Page 3: Progressive Framework Vue.js 2.0](https://reader030.vdocuments.net/reader030/viewer/2022013117/586fda7c1a28ab18428b5d75/html5/thumbnails/3.jpg)
祝 Vue.js2.0 リリース!!
![Page 4: Progressive Framework Vue.js 2.0](https://reader030.vdocuments.net/reader030/viewer/2022013117/586fda7c1a28ab18428b5d75/html5/thumbnails/4.jpg)
Vue.jsのここが好き
Reactive リアクティブ Lightweight 軽量 Simple シンプル Easy 簡単
Progressive プログレッシブ
![Page 5: Progressive Framework Vue.js 2.0](https://reader030.vdocuments.net/reader030/viewer/2022013117/586fda7c1a28ab18428b5d75/html5/thumbnails/5.jpg)
Progressive Framework
https://docs.google.com/presentation/d/1zQ3Frm3DxSw_qY-KEuykkIUREO-ueFbOyMd1Kd8nqKE/edit#slide=id.p
![Page 6: Progressive Framework Vue.js 2.0](https://reader030.vdocuments.net/reader030/viewer/2022013117/586fda7c1a28ab18428b5d75/html5/thumbnails/6.jpg)
必要になる知識• 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 …)
![Page 7: Progressive Framework Vue.js 2.0](https://reader030.vdocuments.net/reader030/viewer/2022013117/586fda7c1a28ab18428b5d75/html5/thumbnails/7.jpg)
一度に学習するのは大変
![Page 8: Progressive Framework Vue.js 2.0](https://reader030.vdocuments.net/reader030/viewer/2022013117/586fda7c1a28ab18428b5d75/html5/thumbnails/8.jpg)
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.
![Page 9: Progressive Framework Vue.js 2.0](https://reader030.vdocuments.net/reader030/viewer/2022013117/586fda7c1a28ab18428b5d75/html5/thumbnails/9.jpg)
Step1 既存のページにウィジェットを追加
![Page 10: Progressive Framework Vue.js 2.0](https://reader030.vdocuments.net/reader030/viewer/2022013117/586fda7c1a28ab18428b5d75/html5/thumbnails/10.jpg)
想定するケース
• 既存のページに動的な機能を追加したい
• 非SPAアプリケーション
• だからと言ってSPAに作りかえるとコストの方が高くつく
• 学習コストはあまりかけられない
• jQueryをやめたい
![Page 11: Progressive Framework Vue.js 2.0](https://reader030.vdocuments.net/reader030/viewer/2022013117/586fda7c1a28ab18428b5d75/html5/thumbnails/11.jpg)
➜ 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
![Page 12: Progressive Framework Vue.js 2.0](https://reader030.vdocuments.net/reader030/viewer/2022013117/586fda7c1a28ab18428b5d75/html5/thumbnails/12.jpg)
必要になる知識• 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 …)
![Page 13: Progressive Framework Vue.js 2.0](https://reader030.vdocuments.net/reader030/viewer/2022013117/586fda7c1a28ab18428b5d75/html5/thumbnails/13.jpg)
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>
![Page 14: Progressive Framework Vue.js 2.0](https://reader030.vdocuments.net/reader030/viewer/2022013117/586fda7c1a28ab18428b5d75/html5/thumbnails/14.jpg)
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: [], }, })
![Page 15: Progressive Framework Vue.js 2.0](https://reader030.vdocuments.net/reader030/viewer/2022013117/586fda7c1a28ab18428b5d75/html5/thumbnails/15.jpg)
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) }) }}
![Page 16: Progressive Framework Vue.js 2.0](https://reader030.vdocuments.net/reader030/viewer/2022013117/586fda7c1a28ab18428b5d75/html5/thumbnails/16.jpg)
Step1 DEMO
![Page 17: Progressive Framework Vue.js 2.0](https://reader030.vdocuments.net/reader030/viewer/2022013117/586fda7c1a28ab18428b5d75/html5/thumbnails/17.jpg)
Step2 簡単なSPAの作成
![Page 18: Progressive Framework Vue.js 2.0](https://reader030.vdocuments.net/reader030/viewer/2022013117/586fda7c1a28ab18428b5d75/html5/thumbnails/18.jpg)
想定するケース
• 新規の小規模プロジェクト
• HTMLベースのWebデザイナーと協業する
• SPAアプリケーションを作った経験なし
• でもSPAをやってみたい
• あまり時間はかけられない
![Page 19: Progressive Framework Vue.js 2.0](https://reader030.vdocuments.net/reader030/viewer/2022013117/586fda7c1a28ab18428b5d75/html5/thumbnails/19.jpg)
➜ 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
![Page 20: Progressive Framework Vue.js 2.0](https://reader030.vdocuments.net/reader030/viewer/2022013117/586fda7c1a28ab18428b5d75/html5/thumbnails/20.jpg)
必要になる知識• 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 …)
![Page 21: Progressive Framework Vue.js 2.0](https://reader030.vdocuments.net/reader030/viewer/2022013117/586fda7c1a28ab18428b5d75/html5/thumbnails/21.jpg)
画面構成リストログイン 詳細
![Page 22: Progressive Framework Vue.js 2.0](https://reader030.vdocuments.net/reader030/viewer/2022013117/586fda7c1a28ab18428b5d75/html5/thumbnails/22.jpg)
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');
![Page 23: Progressive Framework Vue.js 2.0](https://reader030.vdocuments.net/reader030/viewer/2022013117/586fda7c1a28ab18428b5d75/html5/thumbnails/23.jpg)
外部のコンポーネントを導入➜ 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} }}
![Page 24: Progressive Framework Vue.js 2.0](https://reader030.vdocuments.net/reader030/viewer/2022013117/586fda7c1a28ab18428b5d75/html5/thumbnails/24.jpg)
Step2 DEMO
![Page 25: Progressive Framework Vue.js 2.0](https://reader030.vdocuments.net/reader030/viewer/2022013117/586fda7c1a28ab18428b5d75/html5/thumbnails/25.jpg)
Step3 ちょっと複雑なSPAの作成
![Page 26: Progressive Framework Vue.js 2.0](https://reader030.vdocuments.net/reader030/viewer/2022013117/586fda7c1a28ab18428b5d75/html5/thumbnails/26.jpg)
想定するケース
• 新規の中・大規模プロジェクト
• 本格的にSPAに挑戦したい
• チーム開発
• テストもしっかりやりたい
• 型チェックしたい
• 構文チェックもしたい
![Page 27: Progressive Framework Vue.js 2.0](https://reader030.vdocuments.net/reader030/viewer/2022013117/586fda7c1a28ab18428b5d75/html5/thumbnails/27.jpg)
➜ 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
![Page 28: Progressive Framework Vue.js 2.0](https://reader030.vdocuments.net/reader030/viewer/2022013117/586fda7c1a28ab18428b5d75/html5/thumbnails/28.jpg)
必要になる知識• 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…
![Page 29: Progressive Framework Vue.js 2.0](https://reader030.vdocuments.net/reader030/viewer/2022013117/586fda7c1a28ab18428b5d75/html5/thumbnails/29.jpg)
好きにやっちゃってください
![Page 30: Progressive Framework Vue.js 2.0](https://reader030.vdocuments.net/reader030/viewer/2022013117/586fda7c1a28ab18428b5d75/html5/thumbnails/30.jpg)
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
![Page 31: Progressive Framework Vue.js 2.0](https://reader030.vdocuments.net/reader030/viewer/2022013117/586fda7c1a28ab18428b5d75/html5/thumbnails/31.jpg)
まとめ
最初から全て覚えなくても始められる
ステップアップして大規模にも対応出来る
規模によって道具を使い分ける必要がないのはメリット
自分は選択肢が広く多様性はいいことだと思う
まずはStep1みたいなものからやってみてはどうでしょう
Sample Code https://github.com/toshilow/progressive-vue
![Page 32: Progressive Framework Vue.js 2.0](https://reader030.vdocuments.net/reader030/viewer/2022013117/586fda7c1a28ab18428b5d75/html5/thumbnails/32.jpg)
Join us!! フロントエンドエンジニア募集
![Page 33: Progressive Framework Vue.js 2.0](https://reader030.vdocuments.net/reader030/viewer/2022013117/586fda7c1a28ab18428b5d75/html5/thumbnails/33.jpg)
参考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
![Page 34: Progressive Framework Vue.js 2.0](https://reader030.vdocuments.net/reader030/viewer/2022013117/586fda7c1a28ab18428b5d75/html5/thumbnails/34.jpg)
おわり