Advantages of Vue JS - Presented at the Rangle.io VueJS Meetup in January

ADVANTAGES OF VUE
EVAN SCHULTZ

ADVANTAGES OF VUE
WHY VUE?
▸ Focused
▸ Approachable
▸ Dynamic Data Driven UI
▸ Lazy Loading
▸ Flexible and Scaleable

WHY VUE?
FOCUSED
▸ Focused on the View
▸ Component Centric
▸ Declarative Templates
▸ Data Binding and Reactivity

FOCUSED
COMPONENT CENTRIC
export default {
props: [], // what are my inputs?
data() { }, // what is my state?
methods: { }, // what can I do?
computed: { } // what is my reactive data?
};

FOCUSED
DECLARATIVE SYNTAX
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
msg: 'Hello Toronto!'
};
}
};
</script>

FOCUSED
DATA BINDING
<input class="input" type="text" v-model="filter" />
<button v-on:click="filter=''">Clear</button>
<ul>
<li v-for="directive in directives">{{directive}}</li>
<li v-if="directives.length === 0”>
No Matches Found for: {{filter}}
</li>
</ul>

FOCUSED
REACTIVITY
<input class="input" type="text" v-model="filter"/>
<input class="input" type="text" v-model="unrelated"/>
<button v-on:click="filter=''">Clear</button>
<p>
Found: {{totalMatches}}
</p>
<ul>
<li v-for="directive in directives">{{directive}}</li>
<li v-if="!hasMatches">No Matches Found for: {{filter}}</li>
</ul>

FOCUSED
REACTIVITY
▸ Vue Tracks Dependant Properties
▸ Caches Values
▸ Executes When Needed
▸ Don’t Need to Understand Observables
▸ Performant Without the Need for Redux-like Solutions For
Many Cases

FOCUSED
REACTIVITY
computed: {
directives() {
return this.allDirectives
.filter(n => n.indexOf(this.filter) >= 0);
},
hasMatches() {
return this.directives.length > 0;
},
totalMatches() {
return this.directives.length;
}
}

WHY VUE?
APPROACHABLE
▸ Intuitive API
▸ Excellent Developer Experience
▸ Lightly Opinionated
▸ Incremental Complexity
▸ Thoughtful Directives

I GOT A GORILLA
HOLDING A BANANA
ALL I WANTED WAS
HELLO WORLD

APPROACHABLE
INCREMENTAL COMPLEXITY
▸ Simple at First
▸ Learn New Concepts as Needed
▸ Builds off of Previous Knowledge

INCREMENTAL COMPLEXITY
5 COMMON QUESTIONS FOR PROPS
▸ What Are My Props?
▸ Can I Type My Props?
▸ Can I Make Them Required?
▸ Can I Provide Defaults?
▸ Can I Validate Them?

WHAT ARE MY PROPS?
<script>
export default {
name: 'WhatAreMyProps',
props: ['age', ‘name’, ‘isActive’]
};
</script>

CAN I TYPE MY PROPS?
<script>
export default {
name: 'TypedProps',
props: {
age: Number,
name: String,
isActive: Boolean
}
};
</script>

CAN I MAKE THEM REQUIRED?
<script>
export default {
name: 'RequiredProps',
props: {
age: Number,
name: {
type: String,
required: true
},
isActive: Boolean
}
};
</script>

CAN I PROVIDE DEFAULTS?
<script>
export default {
name: 'DefaultValues',
props: {
age: Number,
name: String,
isActive: {
type: Boolean,
default: false
}
}
};
</script>

CAN I VALIDATE THEM?
<script>
export default {
name: 'ValidateProps',
props: {
age: {
type: Number,
validator: function(value) {
return value > 0;
}
},
name: String,
isActive: Boolean
}
};
</script>

EVEN THE ERRORS ARE NICE

VUE MAKES
THEM SUCK LESS
FORMS SUCK
DOM EVENTS SUCK

APPROACHABLE
HELPFUL DIRECTIVES
▸ Reusable DOM Functionality
▸ Keeps Components Clean
▸ Handle UI Events
▸ Simple Forms

DIRECTIVES
SIMPLE FORMS WITH V-MODEL
<input v-model="message" placeholder="edit me"/>
<input v-model.number="age" type="number"/>
<input v-model.trim="name"/>

DIRECTIVES
GET CONTROL BACK
<input
:value="myAge"
@input=“myAge = $event.target.value"/>

DIRECTIVES
EVENT MODIFIERS - TIRED OF THIS?
function (event) {
// Abort if the element emitting the event is not
// the element the event is bound to
if (event.target !== event.currentTarget) return;
// Abort if the key that went up is not the enter
// key (13) and the shift key was not held down
// at the same time
if (!event.shiftKey || event.keyCode !== 13) return;
// Stop event propagation
event.stopPropagation();
// Prevent the default keyup handler for this element
event.preventDefault();
// ...
}

DIRECTIVES
EVENT MODIFIERS - BIT OF HELP
<input @keyup.enter="submit">
<input @keyup.prevent.enter=“submit”>
<input @keyup.stop.prevent.enter="submit">

DATA DRIVEN DYNAMIC UI
DYNAMIC COMPONENTS
▸ Dynamically Render Components Based on Data
▸ Data Driven Forms
▸ Roles and Permissions
▸ A/B Testing
▸ Feature Flags

DYNAMIC COMPONENTS
THE BASICS - COMPONENT :IS CAN BE
<component :is="currentMode"
:label="'Dynamic!'"
:placeholder="'Example Place Holder'"
v-model="demo"></component>
▸ Data Property
▸ Input Property
▸ Computed Property

DYNAMIC COMPONENTS
THE BASICS - COMPONENT
<component :is="currentMode"
:label="'Dynamic!'"
:placeholder="'Example Place Holder'"
v-model="demo"></component>
▸ Props Pass Down As Expected
▸ Events Emit up As Expected
▸ Directives Like v-model Work

DYNAMIC COMPONENTS
THE BASICS - COMPONENT :IS
export default {
name: 'SimpleDynamic',
components: { FancyInput, SimpleInput },
data() {
return {
demo: undefined,
isFancy: true
};
},
computed: {
currentMode() {
return this.isFancy ? 'FancyInput' : 'SimpleInput';
}
}
};

Advantages of Vue JS - Presented at the Rangle.io VueJS Meetup in January

DYNAMIC COMPONENTS
DATA DRIVEN FORMS
<section>
<component
v-for="(field) in schema"
:is="field.type"
v-bind="field"
v-bind:value="value[field.name]"
v-on:input=“update(field.name,$event)">
</component>
</section>

DYNAMIC COMPONENTS
DATA DRIVEN FORMS
export default {
name: 'FormGenerator',
components: {
FancyInput: () => import('@/components/forms/FancyInput'),
SimpleInput: () => import('@/components/forms/SimpleInput'),
CurrencyInput: () => import('@/components/forms/CurrencyInput')
},
props: ['schema', 'value'],
methods: {
update(fieldName, value) {
const updatedForm = { ...this.value, [fieldName]: value };
this.$emit('input', updatedForm);
}
}
};

DYNAMIC COMPONENTS
DATA DRIVEN FORMS - USING THE GENERATOR
<template>
<form-generator :schema="schema" v-model="model"></form-generator>
</template>
<script>
import FormGenerator from '@/components/forms/FormGenerator';
export default {
components: { FormGenerator },
data() {
return {
model: { firstName: ‘Evan',total: '$10.00'},
schema: [
{ type: 'FancyInput', label: 'First Name', name:'firstName' },
{ type: 'CurrencyInput', label: 'Total', name: 'total',
currencies: ['$', '£', ‘€']},
// ….
</script>

LAZY LOADING
WHY IS LAZY GOOD?
▸ Reduced Load Times
▸ Load What You Need, When You Need It
▸ Control of What Loads When

LAZY LOADING
WHY IS VUE GOOD AT BEING LAZY?
▸ So Easy, it’s Boring.
▸ Lazy Load Routes
▸ Lazy Load Components
▸ “Just Works”

LAZY LOADING
LAZY ROUTES
Vue.use(Router);
export default new Router({
routes: [{
path: '/lazy',
name: 'LazyRoute',
component: () => import('@/components/LazyRoute')
}]
});

LAZY LOADING
PER-COMPONENT LAZY LOADING
<template>
<div class="hello">
<button @click="toggleLazy()">Show Lazy</button>
<lazy v-if="showLazy"></lazy>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
components: {
lazy: () => import('./LazyComponent.vue')
},
</script>

FLEXIBLE AND SCALEABLE
FLEXIBLE
▸ Can Provide Your Own Render
▸ JSX If You Want
▸ Scales with Complexity as Needed
▸ Routing - Vue Router
▸ State Management - Vuex

THANKS! Evan Schultz
@e_p82
e-schultz/vue-meetup-example
evan@rangle.io

Advantages of Vue JS - Presented at the Rangle.io VueJS Meetup in January

More Related Content

What's hot (20)

Similar to Advantages of Vue JS - Presented at the Rangle.io VueJS Meetup in January (20)

Recently uploaded (20)

Advantages of Vue JS - Presented at the Rangle.io VueJS Meetup in January