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.
Vue 2.0
+
Vue Router & Vuex
Indie Inc. Co-founder & CTO
Takuya Tejima
Who
• Takuya Tejima @tejitak
• Co-founder & CTO at Indie Inc.
• Server & Web Front-end, iOS Engineer
• DevMorning communit...
Vue.js MeetUp Tokyo!
• 2016/5/31
• Vue.js Tokyo v-meetup="#1"
• http://vuejs-
meetup.connpass.com/event/31139/
• Evan crea...
What is Vue.js
Vue Component Example
<template>
<div id="app">
<img src="./assets/logo.png">
<h1>{{ msg }}</h1>
</div>
</template>
<scrip...
Vue.js 2.0
Our JavaScript framework is
faster than React
rendering speed and memory consumption by up to 2-4x in m
ww.infoworld.com/a...
Vue 2.0 Features
• Fast!
• Rendering layer is based on Snabbdom (a lightweight virtual-DOM implementation)
https://github....
Vue 2.0 API Changes
• Lots of APIs are deprecated https://github.com/vuejs/vue/issues/2873
• Filter! (e.g. <span v-text="m...
Rendering Implementations
• https://speakerdeck.com/kazupon/next-vue-dot-js-2-dot-0
Vue Router
Popular Frameworks for SPA Implementation
• How to implement a SPA (Single-page Application)
• Backbone, Ember, Riot, Angu...
What’s Vue-Router
• Creating a SPA with Vue.js + vue-router is dead simple
• Not only client-side routing (hash / history ...
Nested Routes and Sub Components & Hooks
Example URL change: /a/b/c -> /a/d/e
2. Validation phase
Check if all current com...
Code Example
main.vue
router.map({
'/about': {
component: require('./components/about.vue')
},
'/user/:userId': {
componen...
Authentication
router.beforeEach((transition) => {
if (transition.to.path === '/mypage') {
router.app.authenticating = tru...
Is Vue-Router Enough?
• If your SPA with Vue-Router has complex component state
structures, Vuex could be a solution
• Bas...
Vuex
Vuex
• Official redux inspired flux framework for Vue.js
• Vuex is more fit for Vue.js with efficient reactive system such...
Vuex
• Features
• Store
• basically a container that holds your application reactive states
• only way to change a store's...
Vuex Flow Summary with Counter Example
Mutation Example
• Mutation (a name and a handler) mutates states with synchronous functions
• Vuex store's state is made ...
What’s a Getter
• A getter provides accessing way to store data from components
• Components are not allowed to directly m...
Vuex Form Handling
v-model directly rewrites store data. This is not the Vuex way (throws an error in strict
mode)
The Vue...
Dev Tools
https://github.com/vuejs/vue-devtools
Vue-Router + Vuex
Vue-router-sync
• Vue Router x Vuex
• Inject (sync) router states to Vuex states
• Components can access router data (path...
SPA with Awesome Vue Family
• If your application is not SPA just use Vue.js
• If your SPA …
• Needs mapping URL for compo...
Join Vue.js Community
• Vuejs-jp Skack
• https://vuejs-jp-slackin.herokuapp.com/
• Translations
• Vex docs are working in ...
Thanks
Upcoming SlideShare
Loading in …5
×

Vue 2.0 + Vuex Router & Vuex at Vue.js

20,761 views

Published on

- Vue.js Tokyo v-meetup="#1"
http://vuejs-meetup.connpass.com/event/31139/

- JS Night at Bizreach
http://connpass.com/event/34014/

Published in: Engineering
  • Login to see the comments

Vue 2.0 + Vuex Router & Vuex at Vue.js

  1. 1. Vue 2.0 + Vue Router & Vuex Indie Inc. Co-founder & CTO Takuya Tejima
  2. 2. Who • Takuya Tejima @tejitak • Co-founder & CTO at Indie Inc. • Server & Web Front-end, iOS Engineer • DevMorning community founder • http://devmorning.connpass.com/ • Vue.js core team member
  3. 3. Vue.js MeetUp Tokyo! • 2016/5/31 • Vue.js Tokyo v-meetup="#1" • http://vuejs- meetup.connpass.com/event/31139/ • Evan creator of Vue.js joined via Skype! • He said “Vue.js is for everyone, not for a company”
  4. 4. What is Vue.js
  5. 5. Vue Component Example <template> <div id="app"> <img src="./assets/logo.png"> <h1>{{ msg }}</h1> </div> </template> <script> export default { data () { return { msg: 'Hello Vue 2.0!' } } } </script> <style> body { font-family: Helvetica, sans-serif; } </style> Example of App.vue with webpack https://github.com/vuejs-templates/webpack-simple-2.0
  6. 6. Vue.js 2.0
  7. 7. Our JavaScript framework is faster than React rendering speed and memory consumption by up to 2-4x in m ww.infoworld.com/article/3063615/javascript/vuejs-lead-our-javascript-framework-is-faster-than-re
  8. 8. Vue 2.0 Features • Fast! • Rendering layer is based on Snabbdom (a lightweight virtual-DOM implementation) https://github.com/paldepind/snabbdom • Compiler & Runtime are now separated • Reactive! • No need for shouldComponentUpdate / immutable • Template ? JSX? • You can use both with original template & new render function • Sever Side Rendering! (Streaming SSR) • NativeRendering • Compatibility with v1.0
  9. 9. Vue 2.0 API Changes • Lots of APIs are deprecated https://github.com/vuejs/vue/issues/2873 • Filter! (e.g. <span v-text="message | reverse"></span>) • only available in text interpolations {{}} • no build-in filters • vm.$dispatch -> Vuex event bus • vm.$appendTo -> Just use native DOM API • v-for $index & $key -> (value, index) in arr, (value, key) in obj • etc.
  10. 10. Rendering Implementations • https://speakerdeck.com/kazupon/next-vue-dot-js-2-dot-0
  11. 11. Vue Router
  12. 12. Popular Frameworks for SPA Implementation • How to implement a SPA (Single-page Application) • Backbone, Ember, Riot, Angular + ui-router, Angular2, React + React-Router (+ Redux), Vue.js + Vue-Router (+ Vuex) • Important things to introduce • Does your app really need to be a SPA? • For example, do you need partial rendering? • Choose framework depending on your app characteristics
  13. 13. What’s Vue-Router • Creating a SPA with Vue.js + vue-router is dead simple • Not only client-side routing (hash / history API), but also module based URL mapping • Nested routes and sub components • Async load • etc. • The following hooks are available • data, activate, deactivate, canActivate, canDeactivate, canReuse • NOTE The hooks will be changed to onEnter, onLeave, onChange in Vue-Router v0.8.0 • https://github.com/vuejs/vue-router/issues/321
  14. 14. Nested Routes and Sub Components & Hooks Example URL change: /a/b/c -> /a/d/e 2. Validation phase Check if all current components can be activated / deactivated 3. Activation phase Deactivate current components and activate new components with data hook 1. Reusability phase Check reusability
  15. 15. Code Example main.vue router.map({ '/about': { component: require('./components/about.vue') }, '/user/:userId': { component: require('./components/user/index.vue'), subRoutes: { 'profile/:something': { component: require('./components/user/profile.vue') } }, '*': { component: require('./components/not-found.vue') }, }) app.vue <template> <div> <p v-show="authenticating" style="color:red">Authenticating...</p> <h1>App Header</h1> <a v-link="{ path: '/about' }">about</a> <a v-link="{ path: '/user/1234/profile/what' }">user</a> <a v-link="{ path: '/mypage' }">mypage</a> <router-view class="view" transition="test" transition-mode="out-in" keep- alive></router-view> </div> </template> components/user/index.vue <template> <div> <h2>User yo</h2> <router-view></router-view> </div> </template> components/user/profile.vue
  16. 16. Authentication router.beforeEach((transition) => { if (transition.to.path === '/mypage') { router.app.authenticating = true // check if the user is authenticated api.checkAuth().then(() => { router.app.authenticating = false // authentication success transition.next() }).catch(() => { router.app.authenticating = false // authentication failed transition.abort() }) } else { transition.next() } }) Example auth page implementation with global before hook
  17. 17. Is Vue-Router Enough? • If your SPA with Vue-Router has complex component state structures, Vuex could be a solution • Basically, more communications (e.g. dispatch & broadcast) between components leads to unreadable code
  18. 18. Vuex
  19. 19. Vuex • Official redux inspired flux framework for Vue.js • Vuex is more fit for Vue.js with efficient reactive system such as data reactive rendering & components systems
  20. 20. Vuex • Features • Store • basically a container that holds your application reactive states • only way to change a store's state is by explicitly dispatching mutations • Mutation • sync (can not be async) • split into modules with corresponding slice of the state • Action • dispatch mutations • can be async • Advantages • simple unidirectional flow (less side effects) • easy undo/redo - time travel • hot reloading • easy test
  21. 21. Vuex Flow Summary with Counter Example
  22. 22. Mutation Example • Mutation (a name and a handler) mutates states with synchronous functions • Vuex store's state is made reactive by Vue • When we mutate the state, Vue components observing the state will update automatically import Vuex from 'vuex' const store = new Vuex.Store({ state: { count: 1 }, mutations: { INCREMENT (state) { // mutate state state.count++ } } }) store.dispatch('INCREMENT') • Must be called by dispatch in Action
  23. 23. What’s a Getter • A getter provides accessing way to store data from components • Components are not allowed to directly mutate a state • It allows us to reuse computed methods (e.g. totals, averages) through a getter - Getter Example // getters.js export function filteredMessages (state) { return state.messages.filter(message => message.threadID === state.currentThreadID) } - Component <script> export default { vuex: { getters: { filteredMessages } } } </script> <template> <div> <ul> <li v-for="msg in filteredMessages">{{mgs.title}}</li> </ul> </div> </template> NOTE the design may changed at Vuex 2.0 https://github.com/vuejs/vuex/issues/236
  24. 24. Vuex Form Handling v-model directly rewrites store data. This is not the Vuex way (throws an error in strict mode) The Vuex way with v-model - Set a getter value to form value - Dispatch action by UI event (e.g. onclick) Template: <input :value="message" @input=“updateMessage”> JS: actions: { updateMessage: ({ dispatch }, e) => { dispatch('UPDATE_MESSAGE', e.target.value) } }
  25. 25. Dev Tools https://github.com/vuejs/vue-devtools
  26. 26. Vue-Router + Vuex
  27. 27. Vue-router-sync • Vue Router x Vuex • Inject (sync) router states to Vuex states • Components can access router data (path, params, query) through vuex getter in components router • https://github.com/vuejs/vuex-router-sync
  28. 28. SPA with Awesome Vue Family • If your application is not SPA just use Vue.js • If your SPA … • Needs mapping URL for components / partial rendering -> Vue Router • Needs complex component state structure -> Vuex • Needs both above -> Vuex + Vue Router + Vue Router Sync
  29. 29. Join Vue.js Community • Vuejs-jp Skack • https://vuejs-jp-slackin.herokuapp.com/ • Translations • Vex docs are working in progress • https://github.com/vuejs/vuex/pull/240
  30. 30. Thanks

×