Recommended
More Related Content
Similar to Vue.js - AMS & Vuex
Similar to Vue.js - AMS & Vuex (20)
Recently uploaded
Recently uploaded (20)
Vue.js - AMS & Vuex
- 1. 1 VueJS #2 News from Amsterdam & Vuex Contact: Temitope Faro @topriddy Jason Staerck @jasonstaerck Emanuell Minciu @EmanuellMinciu Adam Spencer @MSMGroupcareers Follow as @vuejsmcr
- 2. 2 Agenda • Recap • Playback from VueJS Amsterdam • State Management with Vuex • Wrap up
- 3. 3 Recap
- 4. 4 Newsletters • Vue.js News • Vue.js Feed • Vue.js Developers
- 5. 5 Playback from VueJS Amsterdam
- 6. 6 What have we been up to?
- 7. 7 Evan You Edd Yerburgh Eduardo San Martin Morote Alex & Sebastien Chopin Sarah Drasner Gerard Sans Guillaume Chau Plamen Zdravkov Ives Van Hoorne Jen Looper Roman Kuba
- 9. 9 Create an engaging mobile app with NativeScript and Vue.js Jen Looper Senior Developer Advocate, Progress Co-Founder: Wellesley Chinese Language School
- 10. 10 ? A framework for building 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 for mobile? • 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!
- 14. 14 Basic Differences <web> import Vue from 'vue'; {NativeScript} import Vue from 'nativescript-vue'; <web> {NativeScript} <web> {NativeScript}
- 15. 15 Example: Build for android, iOS, web in one repo!
- 19. 19 Unit testing Vue components The what, why, and how Edd Yerburgh Vue.js core team member
- 20. 20 Why should we write unit tests? • Check that the components work correctly • Provide documentation • Easier debugging • Less bugs
- 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 render when not passed visible prop', () => { const wrapper = mount(Modal) expect(wrapper.isEmpty()).toBe(true) })
- 26. 26 test('renders when passed visible prop as true', () => { const wrapper = mount(Modal, { propsData: { visible: true } }) expect(wrapper.isEmpty()).toBe(false) })
- 27. 27 test('calls onClose when button is clicked', () => { const onClose = jest.fn() const wrapper = mount(Modal, { propsData: { visible: true, onClose } }) wrapper.find('button').trigger('click') expect(onClose).toHaveBeenCalled() })
- 28. 28 Success!
- 29. 29 Fail
- 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? Test passesTest fails Yes No YesNo
- 32. 32 After the first test run
- 34. 34 State animations Eduardo San Martin Morote Vue core team member Author of VueFire 2, VueMotion, VueTweezing Vue instructor around Europe
- 36. 36 When should we use animations? • The user does something • We need the user’s attention • We want to make things fun
- 37. 37
- 38. 38 State animations • Boolean toggling • Easings • Physics
- 39. 39 Vue Tweezing
- 40. 40 Vue Tweezing <Tweezing :to="1” tween="custom” :time="mouseYPer"> <div slot-scope="value"> <pre>{{ value }}</pre> <div class="ball" :style="ballStyle(value)"></div> </div> </Tweezing>
- 41. 41 Vue Motion
- 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>
- 44. 44 Thank you
- 45. 45 Roman Kuba Scaling Vue.js in an existing stack @codeship @codebryo
- 46. 46 It’s not always a 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 all the things
- 52. 52 ARE YOU READY
- 53. 53 Phase 4 Build a SPA
- 54. 54 Phase 4 Build a SPA
- 55. 55 Phase 5 Getting ready to scale
- 57. 57 VUE DEVELOPMENT IN CODESANDBOX IVES VAN HOORNE @compuives @codesandboxap p
- 58. 58 Not this
- 60. 60 State Management with Vuex
- 61. 61 Introduction to State Management 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 State Management • contacts • messages • profile • call logs • stories? Chat app Weather app Price comparison • cities • days • weather • questions • answers • profile
- 63. 63 Introduction to State Management • Locally managing data within components • Managing data using the Event Bus • Using Vuex
- 64. 64 Locally managing data within components Counter Example
- 65. 65 Locally managing data within components
- 66. 66 Locally managing data within components Products Example – Passing data to child components via props
- 67. 67 Locally managing data within components Order Summary Example – Passing data to child components via props
- 68. 68 Introduction to State Management • Locally managing data within components • Managing data using the Event Bus • Using Vuex • Locally managing data within components
- 69. 69 Managing Data using Event Bus • Uses Vue Event system • Does not require direct parent/child relationship • Components typically communicate by emitting and listening on events
- 70. 70 Vuex – Event Bus
- 71. 71 Managing Data using Event 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 using Event Bus Products Example
- 73. 73 Managing Data using Event Bus Products Example
- 74. 74 Live Demo
- 75. 75 Managing Data using Event 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 State Management • Locally managing data within components • Managing data using the Event Bus • Using Vuex • Managing data using the Event Bus
- 77. 77 Vuex • Is defined in 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. 78 Vuex – centralized store
- 79. 79 Vuex – Flux Principles • #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 – Why Flux? 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 – Counter Example (revisited)
- 83. 83 Vuex – Products example (revisited)
- 84. 84 Live Demo
- 85. 85 Vuex – Core Features • 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 Used for 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. 89 Vuex – Mutations mapMutations helper
- 90. 90 Things not covered • Actions • Modules • Vuex-map-fields library for mapping form fields – 2-way data-binding
- 91. 91 When to use Vuex “Flux libraries are like glasses: you’ll know when you need them.” – Dan Abramov (author of Redux)
- 92. 92 Questions?
- 93. 93 Thank you
- 95. 9595 Wrap Up • Slides hosted: • 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
- 98. 98 VueJS #2 News from Amsterdam & Vuex Contact: Temitope Faro @topriddy Jason Staerck @ jasonstaerck Emanuell Minciu @EmanuellMinciu Adam Spencer @MSMGroupcareers Follow as @vuejsmcr
Editor's Notes
- How many of you are here for the first time?
- Hello & Welcome Fire & Safety Running through the Agenda Introducing speakers
- Tope to make use of Vue Devtools as part of his talk. Any questions / things you would like us to cover leave a comment.
- Vue.JS news has podcasts.
- Anyone here today has been to the conference?
- Future conferences and disconts
- Topics for next meetups: Unit Testing with Jest Server side Validation with VeeValidate CSS with Vue Routing Guest speakers