Download to read offline
![42 Vue Motion <Motion :values="positions" spring="wobbly"> <template slot-scope="positions"> <div v-for="cell in cells” :style="{ transform: `translate( ${positions[cell.id].x}px, ${positions[cell.id].y}px) `}” > {{ cell.number }} </div> </template> </Motion>](https://image.slidesharecdn.com/vuejs-180315163830/75/Vue-js-AMS-Vuex-42-2048.jpg)
Vue.js - AMS & Vuex
- 1. 1 VueJS #2 News fromAmsterdam & Vuex Contact: Temitope Faro @topriddy Jason Staerck @jasonstaerck Emanuell Minciu @EmanuellMinciu Adam Spencer @MSMGroupcareers Follow as @vuejsmcr
- 2. 2 Agenda • Recap • Playbackfrom VueJS Amsterdam • State Management with Vuex • Wrap up
- 3.
- 4. 4 Newsletters • Vue.js News •Vue.js Feed • Vue.js Developers
- 5. 5 Playback from VueJSAmsterdam
- 6. 6 What have we beenup to?
- 7. 7 Evan You Edd Yerburgh EduardoSan Martin Morote Alex & Sebastien Chopin Sarah Drasner Gerard Sans Guillaume Chau Plamen Zdravkov Ives Van Hoorne Jen Looper Roman Kuba
- 8.
- 9. 9 Create an engagingmobile app with NativeScript and Vue.js Jen Looper Senior Developer Advocate, Progress Co-Founder: Wellesley Chinese Language School
- 10. 10 ? A framework forbuilding native cross-platform mobile apps No-compromise, smoothly-animating native mobile apps for iOS and Android
- 11. 11 Use JavaScript, CSS,XML to build your app
- 12. 12 Why Vue formobile? • Native mobile rendering with Vue’s adoption of a virtual DOM • Great way for web developers to embrace mobile platforms • Vue is lightweight • NativeScript and Vue have great code-sharing potential!
- 13.
- 14. 14 Basic Differences <web> import Vuefrom 'vue'; {NativeScript} import Vue from 'nativescript-vue'; <web> {NativeScript} <web> {NativeScript}
- 15. 15 Example: Build for android,iOS, web in one repo!
- 16.
- 17.
- 18.
- 19. 19 Unit testing Vuecomponents The what, why, and how Edd Yerburgh Vue.js core team member
- 20. 20 Why should wewrite unit tests? • Check that the components work correctly • Provide documentation • Easier debugging • Less bugs
- 21.
- 22. 22 vue-test-utils $ npm install--save-dev @vue/test-utils Jest $ npm install --save-dev jest vue-jest babel-jest
- 23. 23 Inside Modal.vue <template> <div v-if="visible"> <button@click="onClose" /> </div> </template>
- 24. 24 Mount import { mount} from '@vue/test-utils’ import Modal from '../Modal.vue’ const wrapper = mount(Modal)
- 25. 25 test('does not renderwhen not passed visible prop', () => { const wrapper = mount(Modal) expect(wrapper.isEmpty()).toBe(true) })
- 26. 26 test('renders when passedvisible prop as true', () => { const wrapper = mount(Modal, { propsData: { visible: true } }) expect(wrapper.isEmpty()).toBe(false) })
- 27. 27 test('calls onClose whenbutton is clicked', () => { const onClose = jest.fn() const wrapper = mount(Modal, { propsData: { visible: true, onClose } }) wrapper.find('button').trigger('click') expect(onClose).toHaveBeenCalled() })
- 28.
- 29.
- 30. 30 test('renders correctly', ()=> { const wrapper = mount(Modal, { propsData: { visible: true } }) expect(wrapper.isEmpty()).toBe(false) }) expect(wrapper.html()).toMatchSnapshot() Snapshot test
- 31. 31 Does previous snapshot exist? Create snapshot Does output match snapshot? TestpassesTest fails Yes No YesNo
- 32. 32 After the firsttest run
- 33.
- 34. 34 State animations Eduardo SanMartin Morote Vue core team member Author of VueFire 2, VueMotion, VueTweezing Vue instructor around Europe
- 35.
- 36. 36 When should weuse animations? • The user does something • We need the user’s attention • We want to make things fun
- 37.
- 38. 38 State animations • Booleantoggling • Easings • Physics
- 39.
- 40. 40 Vue Tweezing <Tweezing :to="1” tween="custom” :time="mouseYPer"> <divslot-scope="value"> <pre>{{ value }}</pre> <div class="ball" :style="ballStyle(value)"></div> </div> </Tweezing>
- 41.
- 42. 42 Vue Motion <Motion :values="positions"spring="wobbly"> <template slot-scope="positions"> <div v-for="cell in cells” :style="{ transform: `translate( ${positions[cell.id].x}px, ${positions[cell.id].y}px) `}” > {{ cell.number }} </div> </template> </Motion>
- 43.
- 44.
- 45. 45 Roman Kuba Scaling Vue.jsin an existing stack @codeship @codebryo
- 46. 46 It’s not alwaysa greenfield project
- 47. 47 What, Why &how •Adding new tech is always an INVESTMENT •Competing tech will run in parallel •A full SPA is probably not possible at all •Split the process into phases
- 48. 48 Phase 1 Reduce allthe things
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55. 55 Phase 5 Getting readyto scale
- 56.
- 57. 57 VUE DEVELOPMENT INCODESANDBOX IVES VAN HOORNE @compuives @codesandboxap p
- 58.
- 59.
- 60.
- 61. 61 Introduction to StateManagement State management is a core requirement for building modern day frontend applications There is a need to manage data flow in the application across various components, communication to backend systems, internal updates, etc. A good modern frontend framework is expected to provide a clear way of managing the application state
- 62. 62 Introduction to StateManagement • contacts • messages • profile • call logs • stories? Chat app Weather app Price comparison • cities • days • weather • questions • answers • profile
- 63. 63 Introduction to StateManagement • Locally managing data within components • Managing data using the Event Bus • Using Vuex
- 64. 64 Locally managing datawithin components Counter Example
- 65. 65 Locally managing datawithin components
- 66. 66 Locally managing datawithin components Products Example – Passing data to child components via props
- 67. 67 Locally managing datawithin components Order Summary Example – Passing data to child components via props
- 68. 68 Introduction to StateManagement • Locally managing data within components • Managing data using the Event Bus • Using Vuex • Locally managing data within components
- 69. 69 Managing Data usingEvent Bus • Uses Vue Event system • Does not require direct parent/child relationship • Components typically communicate by emitting and listening on events
- 70.
- 71. 71 Managing Data usingEvent Bus • Uses Vue Event system • Does not require direct parent/child relationship • Components typically communicate by emitting and listening on events
- 72. 72 Managing Data usingEvent Bus Products Example
- 73. 73 Managing Data usingEvent Bus Products Example
- 74.
- 75. 75 Managing Data usingEvent Bus Advantages Disadvantages • Less coupled • Data can shared/communicated beyond parent/child relationship • Initially easy to setup • Difficult to maintain in large applications • Different components may duplicate same data • Difficult to debug
- 76. 76 Introduction to StateManagement • Locally managing data within components • Managing data using the Event Bus • Using Vuex • Managing data using the Event Bus
- 77. 77 Vuex • Is definedin the official documentation as both a state management pattern + library for Vuejs apps. • Basically serves as a centralized store for all the components in an application making sure that state can only be mutated in a predictable fashion. • Vuex is an implementation of the Flux architecture
- 78.
- 79. 79 Vuex – FluxPrinciples • #1: Single source of truth • #2: Data is read only • #3: Mutations are read synchronous Vuex implements above Flux principles, hence, ensuring data is kept in a predictable state while it is being shared across multiple components
- 80. 80 Vuex – WhyFlux? Facebook invented flux application design pattern to deal with the very evasive Zombie notification bug in their application.
- 81. 81 Vuex – Features •centralized store • reactivity on any component reading store data • custom mutations • hot module reloading • time travel debugging
- 82. 82 Vuex – CounterExample (revisited)
- 83. 83 Vuex – Productsexample (revisited)
- 84.
- 85. 85 Vuex – CoreFeatures • state: centralized store • custom getters • custom mutations • custom actions
- 86. 86 Vuex – State •is an object tree that represents the state of the application • mapState helper for mapping multiple states
- 87. 87 Vuex – Getters Usedfor computing derived states
- 88. 88 Vuex – Mutations •Mutations is the only way to change state in the Vuex store. • Each mutation has a string type and a handler • Has to be synchronous
- 89.
- 90. 90 Things not covered •Actions • Modules • Vuex-map-fields library for mapping form fields – 2-way data-binding
- 91. 91 When to useVuex “Flux libraries are like glasses: you’ll know when you need them.” – Dan Abramov (author of Redux)
- 92.
- 93.
- 94.
- 95. 9595 Wrap Up • Slideshosted: • Next Meetup to be scheduled – mid April • Want to get involved? – get in touch with us! • Looking to get some Vue core team members / contributors
- 96.
- 97.
- 98. 98 VueJS #2 News fromAmsterdam & Vuex Contact: Temitope Faro @topriddy Jason Staerck @ jasonstaerck Emanuell Minciu @EmanuellMinciu Adam Spencer @MSMGroupcareers Follow as @vuejsmcr
Editor's Notes
- #2 How many of you are here for the first time?
- #3 Hello & Welcome Fire & Safety Running through the Agenda Introducing speakers
- #4 Tope to make use of Vue Devtools as part of his talk. Any questions / things you would like us to cover leave a comment.
- #5 Vue.JS news has podcasts.
- #6 Anyone here today has been to the conference?
- #95 Future conferences and disconts
- #96 Topics for next meetups: Unit Testing with Jest Server side Validation with VeeValidate CSS with Vue Routing Guest speakers