O slideshow foi denunciado.

Progressive Framework Vue.js 2.0

6

Compartilhar

Próximos SlideShares
Vue.js 2.0を試してみた
Vue.js 2.0を試してみた
Carregando em…3
×
1 de 34
1 de 34

Mais Conteúdo rRelacionado

Audiolivros relacionados

Gratuito durante 30 dias do Scribd

Ver tudo

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. おわり

×