Enjoy The Vue

Enjoy the Vue

Why is it progressive?

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

Roman Kuba @codebryo @codeship

Why am I talking about Vue?

Using Vue in production +3y started with 0.11

Why did you choose Vue?

100K+ DOM Nodes Angular 1 Crashes

Time constraints, limited knowledge and resources!

Narrative Coherence

Framework State Routing

Framework State Routing axios Modelist Services Plugins Components Rxjs

Where’s the code?

<body> <div id="app"> <h1>{{ message }}!</h1> !</div> <script src="https:!//unpkg.com/vue">!</script> <script>
new Vue({ el: '#app', data() { return { message: 'Hello World' } } }) !</script> !</body>

Remember what made jQuery great? ♥

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

<button v-on:click="greet">Say Hello!</button> <script> new Vue({ methods: { greet() {
console.log('Hello Belgrade') } } }) !</script>

<button @click="greet">Say Hello!</button> <script> new Vue({ methods: { greet() {
console.log('Hello Belgrade') } } }) !</script>

<a href="/some" @click.prevent="greet">Say Hello!</a> <script> new Vue({ methods: { greet()
{ console.log('Hello Belgrade') } } }) !</script>

List Rendering

<ul> <li v-for="user in users">{{ user }}!</li> !</ul> <script> const
users = ['Jane', 'Simone', 'Sarah'] new Vue({ data() { return users } }) !</script>

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

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

Properties

Way to pass values down to components.

<Passenger name="Bruce Wayne" v-bind:id="randomID" !/> <script> Vue.component('Passenger', { props: {
name: String, id: String }, mounted() { console.log(this.name, this.id) } }) !</script>

name: String, id: String }, mounted() { console.log(this.name, this.id) } }) !</script> <script> new Vue({ data() { return { randomID: uuid() } } }) !</script>

<Passenger name="Bruce Wayne" :id="randomID" !/> <script> Vue.component('Passenger', { props: {

Reactivity for free

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

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

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

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

Object.deﬁneProperty

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

Computed Properties FTW

Function returning data that only reevaluates if a dependency changes.

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

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

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

created() { setInterval(() !=> { this.counter!++ }, 1000) } }) Lifecycle Method

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

Mixins

Plugins

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

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)

Vue.use(Vuex)

Let’s take a breath…

Vue SFC

<template> <div> <h1>{{ message }}!</h1> !</div> !</template>

<template> <div> <h1>{{ message }}!</h1> !</div> !</template> <script> export default
{ data() { return { message: "Hello Belgrade” }; } }; !</script>

<template> <div> <h1>{{ message }}!</h1> !</div> !</template> <script> export default
{ data() { return { message: "Hello Belgrade” }; } }; !</script> <style scoped> h1 { color: #bada55; } !</style>

<template> <div> <List :data="collection" !/> !</div> !</template> <script> import List
from "@/components"; export default { components: { List }, computed: { collection() { return Service.getImportantData(); } } }; !</script>

THAT EASY?

<body> <div id="app"> <h1>{{ message }}!</h1> !</div> <script src="https:!//unpkg.com/vue">!</script> <script>
new Vue({ el: '#app', data() { return { message: 'Hello World' } } }) !</script> !</body>

APP JS PACK N V PACK PACK O ther Talk

RENDER FUNCTIONS

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

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

<div> <header> <h1>I'm a template!!</h1> !</header> <p v-if="message">{{ message }}!</p>
<p v-else>No message.!</p> !</div>

<p v-else>No message.!</p> !</div> 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.') ]) }

<p v-else>No message.!</p> !</div> 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!")])]) } }

<heading>My h1 Title!</heading> <heading level="2">My h2 Title!</heading>

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

Slots are placeholders with super powers

<template> <div class="modal"> <header> <slot name="header">!</slot> !</header> <slot>!</slot> <footer> <slot
name="footer">!</slot> !</footer> !</div> !</template> <Modal> <template v-slot:header> <h1>Signup Form!</h1> !</template> <p>This is the modal content!!</p> <template v-slot:footer> <button>Sign me up!</button> !</template> !</Modal>

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

Renderless Components

number: Date.now() }; }, render() { return this.$scopedSlots.default({ number: this.number }); } }; !</script> <Randomizer v-slot:default="{ number }"> <span>{{ number }}!</span> !</Randomizer>

number: Date.now() }; }, render() { return this.$scopedSlots.default({ number: this.number }); } }; !</script> <Randomizer #default=“{ number }"> <span>{{ number }}!</span> !</Randomizer>

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 }}

Wrapping a Library

Vue replaced soooo many libraries for me

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

Don’t want to load manually

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

default { data() { return { instance: undefined, config: { autohide: false } }; }, mounted() { … } }; !</script>

default { data() { return { instance: undefined, config: { autohide: false } }; }, methods: { setup() { this.instance = new window.SimpleBar(this.$refs.wrapper, this.config); } }, mounted() { … } }; !</script>

Clean State mgmt

It’s just as easy…

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 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"]) } });

What about testing?

You need to know how to test your code!

Vue Eco System

So much to praise!

Vue is incredibly mature!

faster & lighter %

Reactivity Changes

Typescript

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

Painless Upgrades

Would you choose Vue again today?

!!! <div> <h1>Hello!!</h1> {unreadMessages.length > 0 !&& <h2>
You have {unreadMessages.length} unread messages. !</h2> } !</div> !!! <div> <h1>Hello!!</h1> <h2 v-if="unreadMessages.length > 0"> You have {{ unreadMessages.length }} unread messages. !</h2> !</div>

https://vueschool.io/codebryo

Thank You! @codebryo

Enjoy The Vue

Enjoy The Vue

More Decks by Roman Kuba

Other Decks in Technology

Featured

Transcript