Real-Time Vue: Never Say "Try Refreshing?" Again

Tired of hitting refresh to make sure you’re seeing most up-to-date state? Stagnant data layer got you down? I’ll show you how to build real-time user interfaces with Vue and event-driven architecture methods like web sockets.

Transcript

1. #ConnectTech @GloomyLumi Real Time Vue Never say ‘try refreshing?’ again
2. #ConnectTech @GloomyLumi Who are you…?
3. #ConnectTech @GloomyLumi What are you talking about? ➡ What are real time technologies? ➡ Why would you use real time? ➡ How do you integrate real time with Vue to provide an enhanced user experience?
4. #ConnectTech @GloomyLumi What is ‘real time’?
5. #ConnectTech @GloomyLumi What is ‘real time’? A real time web application receives updates without requesting an update or refreshing the page. This is accomplished through the use of a real time technology, which sends data over an open connection to the page.
6. #ConnectTech @GloomyLumi What problems does real time solve?
7. #ConnectTech @GloomyLumi What problems does real time solve? Provides value increase in applications in which the value of information is correlated to the expedience of its delivery.
8. ‣ Chat apps ‣ Stock tickers ‣ IoT device monitoring ‣ Twitter dashboard ‣ Flight status info ‣ Massively Multiplayer Online (MMO) games #ConnectTech @GloomyLumi
9. #ConnectTech @GloomyLumi Building Super Computers
10. #ConnectTech @GloomyLumi
11. #ConnectTech @GloomyLumi How? Long Polling Web Sockets Server Sent Events (SSE)
12. #ConnectTech @GloomyLumi Long Polling CLIENT SERVER Time
13. #ConnectTech @GloomyLumi Server Sent Events CLIENT SERVER Time
14. #ConnectTech @GloomyLumi SSE ➡ One-way communication (server to client) ➡ HTTP transport ➡ Supports multiplexing via use of event types ➡ Text based messages only ➡ Messages must be in a specific format
15. SSE - Message Format #ConnectTech @GloomyLumi data: <event data - plain text, JSON, ... - required> id: <messageId - optional>\n event: <eventType - optional>\n \n \n
16. #ConnectTech @GloomyLumi const simpleEventSource = new EventSource('/api/sse') // define event listeners / lifecycle callbacks simpleEventSource.onopen = function (evt) { console.log('simpleEventSource connection opened') } simpleEventSource.onmessage = function (evt) { doSomeStuff(evt.data) } simpleEventSource.onclose = function (evt) { console.log('simpleEventSource closed'); Server Sent Events EventSource interface
17. #ConnectTech @GloomyLumi const simpleEventSource = new EventSource('/api/sse') // define event listeners / lifecycle callbacks simpleEventSource.onopen = function (evt) { console.log('simpleEventSource connection opened') } simpleEventSource.onmessage = function (evt) { doSomeStuff(evt.data) } simpleEventSource.onclose = function (evt) { console.log('simpleEventSource closed'); Server Sent Events EventSource interface
18. #ConnectTech @GloomyLumi const simpleEventSource = new EventSource('/api/sse') // define event listeners / lifecycle callbacks simpleEventSource.onopen = function (evt) { console.log('simpleEventSource connection opened') } simpleEventSource.onmessage = function (evt) { doSomeStuff(evt.data) } simpleEventSource.onclose = function (evt) { console.log('simpleEventSource closed'); Server Sent Events EventSource interface
19. #ConnectTech @GloomyLumi const simpleEventSource = new EventSource('/api/sse') // define event listeners / lifecycle callbacks simpleEventSource.onopen = function (evt) { console.log('simpleEventSource connection opened') } simpleEventSource.onmessage = function (evt) { doSomeStuff(evt.data) } simpleEventSource.onclose = function (evt) { console.log('simpleEventSource closed'); Server Sent Events EventSource interface
20. #ConnectTech @GloomyLumi Web Sockets CLIENT SERVER Time
21. #ConnectTech @GloomyLumi Web Sockets ➡ Bi-directional communication ➡ UTF-8 or binary data ➡ TCP transport ➡ No headers means low resource consumption ➡ Limited features ➡ No auto-reconnect ➡ No multiplexing support
22. #ConnectTech @GloomyLumi const vanillaWebSocket = new WebSocket('wss://www.someurl.meh') // define event listeners / lifecycle callbacks vanillaWebSocket.onopen = function (evt) { console.log('vanillaWebSocket connection opened') } vanillaWebSocket.onmessage = function (evt) { doSomeStuff(evt.data) } vanillaWebSocket.onclose = function (evt) { console.log('vanillaWebSocket closed'); } Web Sockets
23. #ConnectTech @GloomyLumi const vanillaWebSocket = new WebSocket('wss://www.someurl.meh') // define event listeners / lifecycle callbacks vanillaWebSocket.onopen = function (evt) { console.log('vanillaWebSocket connection opened') } vanillaWebSocket.onmessage = function (evt) { doSomeStuff(evt.data) } vanillaWebSocket.onclose = function (evt) { console.log('vanillaWebSocket closed'); } Web Sockets
24. #ConnectTech @GloomyLumi const vanillaWebSocket = new WebSocket('wss://www.someurl.meh') // define event listeners / lifecycle callbacks vanillaWebSocket.onopen = function (evt) { console.log('vanillaWebSocket connection opened') } vanillaWebSocket.onmessage = function (evt) { doSomeStuff(evt.data) } vanillaWebSocket.onclose = function (evt) { console.log('vanillaWebSocket closed'); } Web Sockets
25. #ConnectTech @GloomyLumi const vanillaWebSocket = new WebSocket('wss://www.someurl.meh') // define event listeners / lifecycle callbacks vanillaWebSocket.onopen = function (evt) { console.log('vanillaWebSocket connection opened') } vanillaWebSocket.onmessage = function (evt) { doSomeStuff(evt.data) } vanillaWebSocket.onclose = function (evt) { console.log('vanillaWebSocket closed'); } Web Sockets
26. #ConnectTech @GloomyLumi Protocols: abstraction libraries SockJS socket.io µsocket SignalR STOMP etc…
27. #ConnectTech @GloomyLumi Choosing an abstraction ➡ Libraries compatible with your backend ➡ Number of data structures that will be pushed to the front end ➡ Modularity: should the client be able to pick and choose what information it cares about
28. #ConnectTech @GloomyLumi Socket.io ➡ Node.js server is only official implementation, limited third- party implementations available ➡ Full featured ➡ Supports multiplexing ➡ API is documented… not necessarily well ➡ Uses listener mental model, rather than channel subs
29. #ConnectTech @GloomyLumi SockJS ➡ Server implementations available for wide variety of backends ➡ WebSocket emulator with support other transports/protocols ➡ Fallbacks that support back to IE6 (wow.) ➡ Requires additional library for multiplexing ➡ API isn’t fully documented, full feature set unclear ➡ Does not appear to support auto-reconnect
30. #ConnectTech @GloomyLumi STOMP ➡ Server implementations available for wide variety of backends ➡ Supports multiplexing via subscriptions ➡ Auto-reconnect supported ➡ Uses native Web Sockets by default ➡ Can fallback to using SockJS to support older browsers
31. #ConnectTech @GloomyLumi Integrating with Vue
32. Vuex: initial state and mutations #ConnectTech @GloomyLumi export const state = { devicesList: [], } export const mutations = { SET_DEVICES_LIST(state, data) { state.devicesList = data }, }
33. Vuex: actions #ConnectTech @GloomyLumi export const actions = { setDevicesList({commit}, data) { commit('SET_DEVICES_LIST', data) }, getDevicesList({dispatch, commit}) { return axios.get('/device_list') .then(res =>" { dispatch('setDevicesList', res.data) return res }) .catch(err =>" { dispatch('logError', err, { root: true }) return err }) } }
34. #ConnectTech @GloomyLumi Vuex Getters
35. Vuex Getters: Method-style Access #ConnectTech @GloomyLumi export const getters = { getMachineDevices: (state) =>" (machineId) =>" { return state.devicesList.filter(device =>" { return device.machineId ===$$ machineId }) } }
36. // in a component... computed: { ...mapGetters('devicesList', ['getMachineDevices']), machineDevices: function () { return this.getMachineDevices(this.machineId) } } Vuex Getters: Method-style Access #ConnectTech @GloomyLumi
37. Vuex Getters: Who needs GraphQL? #ConnectTech @GloomyLumi export const getters = { coallatedData: (state) =>" { return complexCoallationFunctionYouWrote( state.parentDataArray, state.childDataArray, state.grandChildDataArray, ) } } Reusable Computed Properties
38. Integrating with Vue #ConnectTech @GloomyLumi Option 1: In a component data() { return { socket: function() { return {} }, } }, computed: { ...mapGetters('baseApiUrl', { url: 'webSocketUrl', }), }, mounted: function() { this.socket = new Socket(this.url) // set up other options like reconnectDelay etc this.socket.on('eventOne', this.handleEventOne(data)) this.socket.on('eventTwo', this.handleEventTwo(data)) }, beforeDestroy: function() { this.socket.close() }
39. Integrating with Vue #ConnectTech @GloomyLumi Option 1: In a component data() { return { socket: function() { return {} }, } }, computed: { ...mapGetters('baseApiUrl', { url: 'webSocketUrl', }), }, mounted: function() { this.socket = new Socket(this.url) // set up other options like reconnectDelay etc this.socket.on('eventOne', this.handleEventOne(data)) this.socket.on('eventTwo', this.handleEventTwo(data)) }, beforeDestroy: function() { this.socket.close() }
40. #ConnectTech @GloomyLumi Component Approach ➡ Exposes component lifecycle hooks ➡ Useful when a source is only relevant to a small part of your app ➡ Familiar environment
41. Integrating with Vue #ConnectTech @GloomyLumi Option 2: Vuex Plugin export default function createWebSocketPlugin(socket) { return (store) =>" { socket.onmessage = (data) =>" { store.commit('receiveData', data) } store.subscribe((mutation) =>" { if (mutation.type ===$$ 'UPDATE_DATA') { socket.emit('update', mutation.payload) } }) } }
42. Integrating with Vue #ConnectTech @GloomyLumi Option 2: Vuex Plugin export default function createWebSocketPlugin(socket) { return (store) =>" { socket.onmessage = (data) =>" { store.commit('receiveData', data) } store.subscribe((mutation) =>" { if (mutation.type ===$$ 'UPDATE_DATA') { socket.emit('update', mutation.payload) } }) } }
43. Vuex Plugin Approach #ConnectTech @GloomyLumi ➡ Can react to any number of arbitrary events by keying off mutations or actions ➡ Manage subscriptions and connections based on arbitrary events ➡ Logic is centralized
44. #ConnectTech @GloomyLumi Using data in components
45. v-bind directive #ConnectTech @GloomyLumi <template> <div> <DevicePool v-bind:device-list="groupDevices" /> <DevicePool :device-list="machineDevices" /> </div> </template> ➡ Bind reactive properties to HTML elements or components ➡ Dynamic HTML attributes ➡ Pass data (props) to child components
46. v-for directive #ConnectTech @GloomyLumi <Device v-for="device in deviceList" :device=“device" :key=“device.id” ></Device> Render an element for each item in a list
47. #ConnectTech @GloomyLumi
48. #ConnectTech @GloomyLumi
49. transition-group #ConnectTech @GloomyLumi <transition-group name="slideAdd" tag="ul"> <Device v-for="device in deviceList" :device=“device" :key=“device.id” ></Device> </transition-group> // ... .slideAdd-enter, .slideAdd-leave-to { opacity: 0; transform: translateX(50%); } .slideAdd-leave-active { position: absolute; }
50. transition-group #ConnectTech @GloomyLumi <transition-group name="slideAdd" tag="ul"> <Device v-for="device in deviceList" :device=“device" :key=“device.id” ></Device> </transition-group> // ... .slideAdd-enter, .slideAdd-leave-to { opacity: 0; transform: translateX(50%); } .slideAdd-leave-active { position: absolute; }
51. #ConnectTech @GloomyLumi Opacity: 0 Opacity: 0 Opacity: 1 Opacity: 1 v-enter v-enter-to v-enter-active v-leave v-leave-to v-leave-active Enter Leave Shamelessly copied from the official Vue.js docs’ guide
52. Dynamic class binding #ConnectTech @GloomyLumi
53. Dynamic class binding #ConnectTech @GloomyLumi <div :class="[ $style.powerButtonWrapper, powerState ===$$ 'on' ? $style.on : $style.off, {[$style.pulsePowerYellow]: powerStateChanging}, ]" @click="clickPowerButton" > <!-- power button markup or something -->" </div>
54. Dynamic class binding #ConnectTech @GloomyLumi <div :class="[ powerState ===$$ 'on' ? $style.on : $style.off, {[$style.pulsePowerYellow]: powerStateChanging}, ]" @click="clickPowerButton" > <!-- power button markup or something -->" </div>
55. Dynamic class binding #ConnectTech @GloomyLumi <div :class="[ powerState ===$$ 'on' ? $style.on : $style.off, {[$style.pulsePowerYellow]: powerStateChanging}, ]" @click="clickPowerButton" > <!-- power button markup or something -->" </div>
56. #ConnectTech @GloomyLumi When should the UI state update?
57. #ConnectTech @GloomyLumi Optimistic UI ➡ Assume successful request and immediately reflect changes in the UI ➡ If call fails, just revert changes
58. #ConnectTech @GloomyLumi Really Real Time…
59. #ConnectTech @GloomyLumi Ideal Real Time
60. Optimistic Updates in Vuex #ConnectTech @GloomyLumi export const mutations = { REMOVE_ITEM_AT_INDEX(state, index) { state.data.itemList.splice(index, 1) }, ADD_ITEM_AT_INDEX(state, { index, item }) { state.data.itemList.splice(index, 0, item) }, } Preserve order of items in lists when adding and removing
61. Optimistic Updates in Vuex #ConnectTech @GloomyLumi export const actions = { deleteItem({ dispatch, commit, state, getters }, itemId) { const deletedItem = getters.getItemById(itemId) const itemIndex = state.data.itemList.findIndex((item) =>" { return item.id ===$$ itemId }) commit('REMOVE_ITEM_AT_INDEX', itemIndex) return axios.delete(`/item/${itemId}`) .catch((err) =>" { commit('ADD_ITEM_AT_INDEX', { item: deletedItem, index: itemIndex, }) dispatch('logError', err, { root: true }) return err }) }, }
62. Optimistic Updates in Vuex #ConnectTech @GloomyLumi export const actions = { deleteItem({ dispatch, commit, state, getters }, itemId) { const deletedItem = getters.getItemById(itemId) const itemIndex = state.data.itemList.findIndex((item) =>" { return item.id ===$$ itemId }) commit('REMOVE_ITEM_AT_INDEX', itemIndex) return axios.delete(`/item/${itemId}`) .catch((err) =>" { commit('ADD_ITEM_AT_INDEX', { item: deletedItem, index: itemIndex, }) dispatch('logError', err, { root: true }) return err }) }, } create references to item and item index
63. Optimistic Updates in Vuex #ConnectTech @GloomyLumi export const actions = { deleteItem({ dispatch, commit, state, getters }, itemId) { const deletedItem = getters.getItemById(itemId) const itemIndex = state.data.itemList.findIndex((item) =>" { return item.id ===$$ itemId }) commit('REMOVE_ITEM_AT_INDEX', itemIndex) return axios.delete(`/item/${itemId}`) .catch((err) =>" { commit('ADD_ITEM_AT_INDEX', { item: deletedItem, index: itemIndex, }) dispatch('logError', err, { root: true }) return err }) }, } Delete the item from state
64. Optimistic Updates in Vuex #ConnectTech @GloomyLumi export const actions = { deleteItem({ dispatch, commit, state, getters }, itemId) { const deletedItem = getters.getItemById(itemId) const itemIndex = state.data.itemList.findIndex((item) =>" { return item.id ===$$ itemId }) commit('REMOVE_ITEM_AT_INDEX', itemIndex) return axios.delete(`/item/${itemId}`) .catch((err) =>" { commit('ADD_ITEM_AT_INDEX', { item: deletedItem, index: itemIndex, }) dispatch('logError', err, { root: true }) return err }) }, } Send API request
65. Optimistic Updates in Vuex #ConnectTech @GloomyLumi export const actions = { deleteItem({ dispatch, commit, state, getters }, itemId) { const deletedItem = getters.getItemById(itemId) const itemIndex = state.data.itemList.findIndex((item) =>" { return item.id ===$$ itemId }) commit('REMOVE_ITEM_AT_INDEX', itemIndex) return axios.delete(`/item/${itemId}`) .catch((err) =>" { commit('ADD_ITEM_AT_INDEX', { item: deletedItem, index: itemIndex, }) dispatch('logError', err, { root: true }) return err }) }, } Request failed =(
66. Optimistic Updates in Vuex #ConnectTech @GloomyLumi export const actions = { deleteItem({ dispatch, commit, state, getters }, itemId) { const deletedItem = getters.getItemById(itemId) const itemIndex = state.data.itemList.findIndex((item) =>" { return item.id ===$$ itemId }) commit('REMOVE_ITEM_AT_INDEX', itemIndex) return axios.delete(`/item/${itemId}`) .catch((err) =>" { commit('ADD_ITEM_AT_INDEX', { item: deletedItem, index: itemIndex, }) dispatch('logError', err, { root: true }) return err }) }, } Put the item back and pretend it never happened…
67. #ConnectTech @GloomyLumi However…
68. Keepin’ it real (time) #ConnectTech @GloomyLumi ➡ Toast notifications ➡ Long(ish) transitions ➡ Loading/“thinking” spinners ➡ managing loading states with vue-wait Confirm the user action and pending completion with…
69. #ConnectTech @GloomyLumi Summary Timing is everything.
70. #ConnectTech @GloomyLumi The End Ari Clark Senior UI/UX Engineer @ Liqid ‘Views On Vue’ Podcast Panelist twitter: @GloomyLumi