Tweet
Tweet

Slide 1

Slide 1 text

Enjoy the Vue

Slide 2

Slide 2 text

Why is it progressive?

Slide 3

Slide 3 text

Mastery Necessary 0 25 50 75 100 Progress First Results Use Components Use Webpack Vue Ecosystem Mastery

Slide 4

Slide 4 text

Mastery Necessary 0 25 50 75 100 Progress First Results Use Components Use Webpack Vue Ecosystem Mastery

Slide 5

Slide 5 text

Roman Kuba @codebryo @codeship

Slide 6

Slide 6 text

Why am I talking about Vue?

Slide 7

Slide 7 text

Using Vue in production +3y started with 0.11

Slide 8

Slide 8 text

Why did you choose Vue?

Slide 9

Slide 9 text

100K+ DOM Nodes Angular 1 Crashes

Slide 10

Slide 10 text

Time constraints, limited knowledge and resources!

Slide 11

Slide 11 text

Narrative Coherence

Slide 12

Slide 12 text

Framework State Routing

Slide 13

Slide 13 text

Framework State Routing axios Modelist Services Plugins Components Rxjs

Slide 14

Slide 14 text

Where’s the code?

Slide 15

Slide 15 text

{{ message }}!

!
! new Vue({ el: '#app', data() { return { message: 'Hello World' } } }) ! !

Slide 16

Slide 16 text

Remember what made jQuery great? ♥

Slide 17

Slide 17 text

Say Hello! const actions = { greet() { console.log('Hello Belgrade') } } $('[data-action]').on('click', (e) !=> { e.preventDefault() const method = $(this).data('action') !// greet actions[method]() }) !

Slide 18

Slide 18 text

Say Hello! new Vue({ methods: { greet() { console.log('Hello Belgrade') } } }) !

Slide 19

Slide 19 text

Say Hello! new Vue({ methods: { greet() { console.log('Hello Belgrade') } } }) !

Slide 20

Slide 20 text

Say Hello! new Vue({ methods: { greet() { console.log('Hello Belgrade') } } }) !

Slide 21

Slide 21 text

List Rendering

Slide 22

Slide 22 text

  • {{ user }}!
    • !
const users = ['Jane', 'Simone', 'Sarah'] new Vue({ data() { return users } }) !

Slide 23

Slide 23 text

    {{ user }}! !
const users = ['Jane', 'Simone', 'Sarah'] Vue.component('user', { template: '<li><slot !/>!</li>' }) new Vue({ data() { return users }, }) !

Slide 24

Slide 24 text

    {{ user }}! !
const users = ['Jane', 'Simone', 'Sarah'] Vue.component('user', { template: '<li><slot !/>!</li>' }) new Vue({ data() { return users }, }) ! Slots?

Slide 25

Slide 25 text

Properties

Slide 26

Slide 26 text

Way to pass values down to components.

Slide 27

Slide 27 text

Vue.component('Passenger', { props: ['name', 'id'], mounted() { console.log(this.name, this.id) } }) !

Slide 28

Slide 28 text

Vue.component('Passenger', { props: { name: String, id: String }, mounted() { console.log(this.name, this.id) } }) !

Slide 29

Slide 29 text

Vue.component('Passenger', { props: { name: String, id: String }, mounted() { console.log(this.name, this.id) } }) !

Slide 30

Slide 30 text

Vue.component('Passenger', { props: { name: String, id: String }, mounted() { console.log(this.name, this.id) } }) ! new Vue({ data() { return { randomID: uuid() } } }) !

Slide 31

Slide 31 text

Vue.component('Passenger', { props: { name: String, id: String }, mounted() { console.log(this.name, this.id) } }) !

Slide 32

Slide 32 text

Vue.component('Passenger', { props: { name: String, id: String }, mounted() { console.log(this.name, this.id) } }) !

Slide 33

Slide 33 text

Vue.component('Modal', { props: { id: { type: [String, Number], default: () !=> uuid() }, action: Function } }) !

Slide 34

Slide 34 text

Reactivity for free

Slide 35

Slide 35 text

const state = { count: 1 } const vm = new Vue({ data() { return state } })

Slide 36

Slide 36 text

const state = { count: 1 } const vm = new Vue({ data() { return state } }) vm.count !// 1

Slide 37

Slide 37 text

const state = { count: 1 } const vm = new Vue({ data() { return state } }) vm.count !// 1 state.count!++

Slide 38

Slide 38 text

const state = { count: 1 } const vm = new Vue({ data() { return state } }) vm.count !// 1 state.count!++ vm.count !// 2

Slide 39

Slide 39 text

Object.defineProperty

Slide 40

Slide 40 text

const state = Vue.observable({ count: 0 }) Vue 2.6

Slide 41

Slide 41 text

Computed Properties FTW

Slide 42

Slide 42 text

Function returning data that only reevaluates if a dependency changes.

Slide 43

Slide 43 text

new Vue({ data() { return { numbers: [1, 2, 3, 4] }; }, computed: { evens() { return this.numbers.filter(n !=> n % 2 !== 0); }, } });

Slide 44

Slide 44 text

new Vue({ data() { return { numbers: [1, 2, 3, 4] }; }, computed: { evens() { return this.numbers.filter(n !=> n % 2 !== 0); }, now() { return Date.now(); } } });

Slide 45

Slide 45 text

new Vue({ data() { return { counter: 0 } }, created() { setInterval(() !=> { this.counter!++ }, 1000) } })

Slide 46

Slide 46 text

new Vue({ data() { return { counter: 0 } }, created() { setInterval(() !=> { this.counter!++ }, 1000) } }) Lifecycle Method

Slide 47

Slide 47 text

new Vue({ data() { return { counter: 0 } }, computed: { secondsPassed() { const msg = `${this.counter} seconds have passed` console.log(msg) return msg } }, created() { setInterval(() !=> { this.counter!++ }, 1000) } })

Slide 48

Slide 48 text

Mixins

Slide 49

Slide 49 text

const userMixin = { data() { return { !// return User from an API user: Service.getCurrentUser() }; }, components: { UserStatus }, updated() { this.user.storeLatestUpdate(Date.now()); } }; new Vue({ mixins: [userMixin] });

Slide 50

Slide 50 text

const userMixin = { data() { return { !// return User from an API user: Service.getCurrentUser() }; }, components: { UserStatus }, updated() { this.user.storeLatestUpdate(Date.now()); } }; Vue.mixin(userMixin);

Slide 51

Slide 51 text

Plugins

Slide 52

Slide 52 text

import userMixin from '@/mixins' const User = { install(Vue, options) { !// Global functions Vue.logout = function() {!!...} Vue.mixin(userMixin) Vue.$prototype.$logout = Vue.logout } }

Slide 53

Slide 53 text

import userMixin from '@/mixins' const User = { install(Vue, options) { !// Global functions Vue.logout = function() {!!...} Vue.mixin(userMixin) Vue.$prototype.$logout = Vue.logout } } !// Install a Plugin Vue.use(User)

Slide 54

Slide 54 text

Vue.use(Vuex)

Slide 55

Slide 55 text

Let’s take a breath…

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

Vue SFC

Slide 58

Slide 58 text

{{ message }}!

!
!

Slide 59

Slide 59 text

{{ message }}!

!
! export default { data() { return { message: "Hello Belgrade” }; } }; !

Slide 60

Slide 60 text

{{ message }}!

!
! export default { data() { return { message: "Hello Belgrade” }; } }; ! h1 { color: #bada55; } !

Slide 61

Slide 61 text

!
! import List from "@/components"; export default { components: { List }, computed: { collection() { return Service.getImportantData(); } } }; !

Slide 62

Slide 62 text

THAT EASY?

Slide 63

Slide 63 text

{{ message }}!

!
! new Vue({ el: '#app', data() { return { message: 'Hello World' } } }) ! !

Slide 64

Slide 64 text

!!! !
!!! !!! ! !
! !

Slide 65

Slide 65 text

!!! !
!!! !!! ! !
! !

Slide 66

Slide 66 text

!!! !
!!! !!! ! !
! !

Slide 67

Slide 67 text

APP JS PACK N V PACK PACK O ther Talk

Slide 68

Slide 68 text

RENDER FUNCTIONS

Slide 69

Slide 69 text

render(createElement) { return createElement('span', 'some text') }

Slide 70

Slide 70 text

render(h) { return h('span', 'h for Hyperscript') } TIL

Slide 71

Slide 71 text

I'm a template!!

!

{{ message }}!

No message.!

!

Slide 72

Slide 72 text

I'm a template!!

!

{{ message }}!

No message.!

!
render(h) { const message = this.message return h('div', [ h('header', [ h('h1', "I'm a template!") ]), message ? h('p', message) : h('p', 'No message.') ]) }

Slide 73

Slide 73 text

I'm a template!!

!

{{ message }}!

No message.!

!
function anonymous() { with (this) { return _c('div', [_m(0), (message) ? _c('p', [_v(_s(message))]) : _c('p', [_v("No message.")])]) } } _m(0): function anonymous() { with (this) { return _c('header', [_c('h1', [_v("I'm a template!")])]) } }

Slide 74

Slide 74 text

My h1 Title! My h2 Title!

Slide 75

Slide 75 text

My h1 Title! My h2 Title! Vue.component('heading', { props: { level: { type: Number, default: 1 } }, render(h) { const tag = `h${this.level}` return h(tag, this.$slots.default) } })

Slide 76

Slide 76 text

My h1 Title! My h2 Title! Vue.component('heading', { props: { level: { type: Number, default: 1 } }, render(h) { const tag = `h${this.level}` return h(tag, this.$slots.default) } })

Slide 77

Slide 77 text

Slots

Slide 78

Slide 78 text

Slots are placeholders with super powers

Slide 79

Slide 79 text

! ! ! ! ! !
!

Signup Form!

!

This is the modal content!!

Sign me up! ! !

Slide 80

Slide 80 text

this.$scopedSlots { default: function (slotProps) {}, header: function (slotProps) {}}

Slide 81

Slide 81 text

Renderless Components

Slide 82

Slide 82 text

export default { name: "Randomizer", data() { return { number: Date.now() }; }, render() { return this.$scopedSlots.default({ number: this.number }); } }; !

Slide 83

Slide 83 text

export default { name: "Randomizer", data() { return { number: Date.now() }; }, render() { return this.$scopedSlots.default({ number: this.number }); } }; ! {{ number }}! !

Slide 84

Slide 84 text

export default { name: "Randomizer", data() { return { number: Date.now() }; }, render() { return this.$scopedSlots.default({ number: this.number }); } }; ! {{ number }}! !

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

import axios from 'axios' const CODESHIP_STATUSPAGE_URL = ‘…’ export default { data () { return { status: 'loading', description: '' } }, render () { return this.$scopedSlots.default({ description: this.description, statusClass: this.statusClass }) }, computed: { statusClass () { return `header-item-status-${this.status}` } }, methods: { success (response) { this.status = response.data.status.indicator this.description = response.data.status.description } }, created () { axios.get(CODESHIP_STATUSPAGE_URL).then(this.success) } }

Slide 87

Slide 87 text

Page-Status li.header-item.header-item-primary[slot-scope="{ description, statusClass }" :class="statusClass"] a.header-link.header-link-support[href="#" data-dropdown-trigger] span Support span.header-arrow-btn.hidden[class="md:block"] !== icon :arrow_down, prefix: :header ul.header-item-dropdown-list / Navigation links !!... !== header_dropdown_item status_url, target: '_blank', class: 'header-item-dropdown-link-status' span.header-item-dropdown-link-title Codeship Status span.header-item-dropdown-link-description {{ description }}

Slide 88

Slide 88 text

Wrapping a Library

Slide 89

Slide 89 text

Vue replaced soooo many libraries for me

Slide 90

Slide 90 text

const pubsub = new Vue() pubsub.$on('alert:show', function (msg) { Alerts.push(msg) }) pubsub.$emit('alert:show', 'You are good to go!')

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

=

Slide 93

Slide 93 text

Don’t want to load manually

Slide 94

Slide 94 text

new SimpleBar(document.getElementById('myElement'), { autoHide: false });

Slide 95

Slide 95 text

!
!

Slide 96

Slide 96 text

const csslink = "https:!//cdnjs.cloudflare.com/ajax/libs/simplebar/3.1.5/simplebar.min.css"; const jslink = "https:!//cdnjs.cloudflare.com/ajax/libs/simplebar/3.1.5/simplebar.min.js"; export default { mounted() { let link = document.createElement("link"); link.href = csslink; link.type = "text/css"; link.rel = "stylesheet"; document.head.appendChild(link); let simplebarScript = document.createElement("script"); simplebarScript.async = true; simplebarScript.setAttribute("src", jslink); document.head.appendChild(simplebarScript); const waitForSimplebar = () !=> { if (window["SimpleBar"]) { this.setup(); } else { setTimeout(() !=> waitForSimplebar(), 100); } }; waitForSimplebar(); } }; !

Slide 97

Slide 97 text

const csslink = "https:!//cdnjs.cloudflare.com/ajax/libs/simplebar/3.1.5/simplebar.min.css"; const jslink = "https:!//cdnjs.cloudflare.com/ajax/libs/simplebar/3.1.5/simplebar.min.js"; export default { mounted() { let link = document.createElement("link"); link.href = csslink; link.type = "text/css"; link.rel = "stylesheet"; document.head.appendChild(link); let simplebarScript = document.createElement("script"); simplebarScript.async = true; simplebarScript.setAttribute("src", jslink); document.head.appendChild(simplebarScript); const waitForSimplebar = () !=> { if (window["SimpleBar"]) { this.setup(); } else { setTimeout(() !=> waitForSimplebar(), 100); } }; waitForSimplebar(); } }; !

Slide 98

Slide 98 text

const csslink = "https:!//cdnjs.cloudflare.com/ajax/libs/simplebar/3.1.5/simplebar.min.css"; const jslink = "https:!//cdnjs.cloudflare.com/ajax/libs/simplebar/3.1.5/simplebar.min.js"; export default { mounted() { let link = document.createElement("link"); link.href = csslink; link.type = "text/css"; link.rel = "stylesheet"; document.head.appendChild(link); let simplebarScript = document.createElement("script"); simplebarScript.async = true; simplebarScript.setAttribute("src", jslink); document.head.appendChild(simplebarScript); const waitForSimplebar = () !=> { if (window["SimpleBar"]) { this.setup(); } else { setTimeout(() !=> waitForSimplebar(), 100); } }; waitForSimplebar(); } }; !

Slide 99

Slide 99 text

const csslink = "https:!//cdnjs.cloudflare.com/ajax/libs/simplebar/3.1.5/simplebar.min.css"; const jslink = "https:!//cdnjs.cloudflare.com/ajax/libs/simplebar/3.1.5/simplebar.min.js"; export default { mounted() { let link = document.createElement("link"); link.href = csslink; link.type = "text/css"; link.rel = "stylesheet"; document.head.appendChild(link); let simplebarScript = document.createElement("script"); simplebarScript.async = true; simplebarScript.setAttribute("src", jslink); document.head.appendChild(simplebarScript); const waitForSimplebar = () !=> { if (window["SimpleBar"]) { this.setup(); } else { setTimeout(() !=> waitForSimplebar(), 100); } }; waitForSimplebar(); } }; !

Slide 100

Slide 100 text

const csslink = "https:!//cdnjs.cloudflare.com/ajax/libs/simplebar/3.1.5/simplebar.min.css"; const jslink = "https:!//cdnjs.cloudflare.com/ajax/libs/simplebar/3.1.5/simplebar.min.js"; export default { data() { return { instance: undefined, config: { autohide: false } }; }, mounted() { … } }; !

Slide 101

Slide 101 text

const csslink = "https:!//cdnjs.cloudflare.com/ajax/libs/simplebar/3.1.5/simplebar.min.css"; const jslink = "https:!//cdnjs.cloudflare.com/ajax/libs/simplebar/3.1.5/simplebar.min.js"; export default { data() { return { instance: undefined, config: { autohide: false } }; }, methods: { setup() { this.instance = new window.SimpleBar(this.$refs.wrapper, this.config); } }, mounted() { … } }; !

Slide 102

Slide 102 text

Clean State mgmt

Slide 103

Slide 103 text

It’s just as easy…

Slide 104

Slide 104 text

import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); export default Vuex.Store({ state: { count: 1 }, mutations: { add(state) { state.count!++; } }, actions: { add({ commit }) { commit("add"); } }, getters: { counter: s !=> s.count } });

Slide 105

Slide 105 text

import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); export default Vuex.Store({ state: { count: 1 }, mutations: { add(state) { state.count!++; } }, actions: { add({ commit }) { commit("add"); } }, getters: { counter: s !=> s.count } }); import store from "./store"; import { mapGetters, mapActions } from "vuex"; new Vue({ store, computed: { !!...mapGetters(["counter"]) }, methods: { !!...mapActions(["add"]) } });

Slide 106

Slide 106 text

No content

Slide 107

Slide 107 text

What about testing?

Slide 108

Slide 108 text

You need to know how to test your code!

Slide 109

Slide 109 text

No content

Slide 110

Slide 110 text

Vue Eco System

Slide 111

Slide 111 text

So much to praise!

Slide 112

Slide 112 text

Vue is incredibly mature!

Slide 113

Slide 113 text

No content

Slide 114

Slide 114 text

Vue 3

Slide 115

Slide 115 text

faster & lighter %

Slide 116

Slide 116 text

Reactivity Changes

Slide 117

Slide 117 text

Typescript

Slide 118

Slide 118 text

https://medium.com/vue-mastery/evan-you-previews-vue-js-3-0-ab063dec3547

Slide 119

Slide 119 text

Painless Upgrades

Slide 120

Slide 120 text

Would you choose Vue again today?

Slide 121

Slide 121 text

!!!

Hello!!

{unreadMessages.length > 0 !&&

You have {unreadMessages.length} unread messages. !

} !
!!!

Hello!!

You have {{ unreadMessages.length }} unread messages. !

!

Slide 122

Slide 122 text

No content

Slide 123

Slide 123 text

No content

Slide 124

Slide 124 text

https://vueschool.io/codebryo

Slide 125

Slide 125 text

Thank You! @codebryo