Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Progressive Framework Vue.js 2.0

1,995 views

Published on

Vue.js Tokyo v-meetup="#2" 祝 2.0 リリース記念

Published in: Engineering

Progressive Framework Vue.js 2.0

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

×