Slide 1
Slide 1 text
Level-up
apps & websites
with vue.js
twitter:
@loregirardi
github:
@liqueflies
Slide 2
Slide 2 text
hey folks
i am
lorenzo girardi
twitter:
@loregirardi
github:
@liqueflies
Slide 3
Slide 3 text
i am a
front-end dev
and a passionate
musician
twitter:
@loregirardi
github:
@liqueflies
Slide 4
Slide 4 text
digital company with strong focus on
strategy and technology
website:
https://www.develondigital.com/
Slide 5
Slide 5 text
international group
+15 years
+55 people
+5 departments
website:
https://www.develondigital.com/
thanks for having us!
Slide 6
Slide 6 text
is it easy
to build websites?
twitter:
@loregirardi
github:
@liqueflies
Slide 7
Slide 7 text
Our team was searching for a tool
with data driven development in mind...
...and a lean learning curve because
we had to be production-ready ASAP.
twitter:
@loregirardi
github:
@liqueflies
Slide 8
Slide 8 text
+ =
website:
https://vuejs.org/
Slide 9
Slide 9 text
/vjuː/
website:
https://vuejs.org/
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
website:
https://vuejs.org/
progressive
framework
evan you
vue vue-router vuex vue-cli
Slide 12
Slide 12 text
website:
https://vuejs.org/
numbers
> 82k stars (87k react, 32k angular)
~ 4000 packages depends on it
> 1.000.000 download last month
$ 11.567 per month by 204 patreons
2 vueconf in 2018 (amsterdam, new orleans)
Slide 13
Slide 13 text
basic
concepts
website:
https://vuejs.org/
Slide 14
Slide 14 text
website:
https://vuejs.org/
Slide 15
Slide 15 text
website:
https://vuejs.org/
Slide 16
Slide 16 text
{{ message }}
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
I’m not rendered
I’m hidden [i.e. display: none]
Slide 21
Slide 21 text
- {{ todo }}
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
{{ message }}
ResetSlide 24
Slide 24 text
you typed: {{ message }}
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
syntax
Focusing
- semantic code
- easy to read
- easy to maintain
- easy to share code
in teams.
Slide 27
Slide 27 text
setting data
Focusing
set data in vue.js is not async.
is the same as you do in javascript.
this.setState({ counter: this.state.counter++ })
this.setState({ counter: this.state.counter++ })
have you ever tried?
Slide 28
Slide 28 text
computed
and methods
website:
https://vuejs.org/
Slide 29
Slide 29 text
The higher number is: {{ higherNumber }}
Slide 30
Slide 30 text
I am visible.
toggle visibilitySlide 31
Slide 31 text
computed
Focusing
- runs when its
own dependencies
updates
- called and used
as data properties
- is cached
Slide 32
Slide 32 text
methods
Focusing
- runs when
you need to use it
- called as a
function in event
bindings
- is not cached
Slide 33
Slide 33 text
summary
Focusing
- no this hell (context is auto-binded)
- no async data beginner failures
- no shouldUpdate worries
- no build steps needed
Slide 34
Slide 34 text
content
management with
components
website:
https://vuejs.org/v2/components.html
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
https://vuejs.org/v2/components.html
components
tree structure
Slide 37
Slide 37 text
component
Focusing
- encapsulation of elements
that can be accessed
through one single element.
- encapsulation of logic,
but in different instances
- encapsulation of style (module, scoped)
Slide 38
Slide 38 text
// ...in root component
Vue.component('card-item', {
template: '...',
data: function () {
return {
...
}
}
})
https://vuejs.org/v2/components.html
Slide 39
Slide 39 text
<article>
<h2> {{ title }} </h2>
<img :src="img" :alt="title" />
</article>
Vue.component('card-item', {
template: '#card-template',
data: function () {
return {
title: 'A card title'
img: 'https://picsum.photos/200/300'
}
}
})
https://vuejs.org/v2/components.html
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
{
...
data () {
return {
title: 'A card title'
img: 'https://picsum.photos/200/300'
}
}
...
}
https://vuejs.org/v2/components.html
data is a function
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
now we can encapsulate logic
and style in a component.
by for now, we are using it
statically.
twitter:
@loregirardi
github:
@liqueflies
Slide 44
Slide 44 text
Vue.component('card-item', {
template: '#card-template',
props: ['title', 'img']
})
// ...in root component
https://vuejs.org/v2/components.html
… better use props
Slide 45
Slide 45 text
Slide 46
Slide 46 text
Vue.component('card-item', {
inheritAttrs: false, // important to avoid unwanted markup
template: '#card-template',
props: ['title', 'img']
})
new Vue({
el: '#app',
data: {
card: { title: 'Card title', img: 'https://picsum.photos/200/300' }
}
})
https://vuejs.org/v2/components.html
v-bind to the rescue
Slide 47
Slide 47 text
lifecycle
Focusing
each vue instance goes through
a series of initialization steps
when it’s created running functions
called lifecycle hooks,
giving users the opportunity to
add their own code at specific stages.
Slide 48
Slide 48 text
Vue.component('card-item', {
template: '...',
data: function () {
return {
image: '...'
}
},
mounted: function () {
var image = this.image
this.image = '...my-spinner-image.png'
new imagesLoaded(this.$el, { this.image = image })
}
})
https://vuejs.org/v2/components.html
Slide 49
Slide 49 text
Slide 50
Slide 50 text
// ...
// export default {}
// ...
https://vuejs.org/v2/components.html
single file
components
Slide 51
Slide 51 text
update
data with events
website:
https://vuejs.org/v2/style-guide/
Slide 52
Slide 52 text
by passing props we can mutate
child data from parent.
how can we mutate
parent data from its children?
twitter:
@loregirardi
github:
@liqueflies
Slide 53
Slide 53 text
<div>
<button @click="$emit('next-slide')"> Next slide </button>
<button @click="$emit('prev-slide')"> Prev slide </button>
</div>
Vue.component('slider-pag', {
template: '#slider-pag-template'
})
https://vuejs.org/v2/guide/components.html#Using-v-on-with-Custom-Events
Slide 54
Slide 54 text
and what if we want
to change data...
...wherever in the
component tree?
twitter:
@loregirardi
github:
@liqueflies
Slide 55
Slide 55 text
// broadcast event
var bus = new Vue()
// send event
bus.$emit('event-name', ...arguments)
// receive event
bus.$on('event-name', ...arguments)
// unbind event
bus.$off('event-name')
event bus
https://vuejs.org/v2/components.html#Content-Distribution-with-Slots
Slide 56
Slide 56 text
// send event
new Vue({
...
methods: {
myMethod: function () {
bus.$emit('event-name', ...arguments)
}
}
})
event bus
https://vuejs.org/v2/components.html#Content-Distribution-with-Slots
Slide 57
Slide 57 text
// receive event
new Vue({
...
created: function () {
bus.$on('event-name', myMethod)
},
methods: {
myMethod: function () { ... }
}
})
event bus
https://vuejs.org/v2/components.html#Content-Distribution-with-Slots
Slide 58
Slide 58 text
native
transitions
website:
https://vuejs.org/v2/guide/transitions.html
Slide 59
Slide 59 text
transitions
Focusing
transition component allows
to add enter/leave effects to:
- conditions (v-if / v-show)
- dynamic components
- component root node
- switching :key attribute
website:
https://vuejs.org/v2/guide/transitions.html
Slide 60
Slide 60 text
website:
https://vuejs.org/v2/guide/transitions.html
Slide 61
Slide 61 text
I am visible.
toggleSlide 62
Slide 62 text
I am visible.
toggleSlide 63
Slide 63 text
Slide 64
Slide 64 text
https://jsfiddle.net/loregirardi/52mn0sqL/
a fiddle
Slide 65
Slide 65 text
Slide 66
Slide 66 text
async call
best practices
website:
https://vuejs.org/
Slide 67
Slide 67 text
in real use cases
we have to display
data from server.
what’s the better way
to achieve that?
twitter:
@loregirardi
github:
@liqueflies
Slide 68
Slide 68 text
- {{ person.name }}
Slide 69
Slide 69 text
in fast connections
we will immediately see
results.
how can we add a loader
for slow connections?
twitter:
@loregirardi
github:
@liqueflies
Slide 70
Slide 70 text
https://jsfiddle.net/loregirardi/5x6392wr/
a fiddle
Slide 71
Slide 71 text
five
reasons why
website:
https://vuejs.org/
Slide 72
Slide 72 text
no build steps
required
Easy to start up, also in old legacy
projects.
website:
https://vuejs.org/
Slide 73
Slide 73 text
effortless
api
update and modify data is easy.
context is auto-binded and rendering
updates are out of the box.
website:
https://vuejs.org/
Slide 74
Slide 74 text
add modularly
what you need
if your app / website needs to scale
just add modules from vue.js ecosystem
to fit your needs.
website:
https://vuejs.org/
Slide 75
Slide 75 text
no es6 knowledge
needed
i am not telling you to not learn es6.
but if you want you can still use
old es2015 syntax so
beginner / not-frontend dev
can easily get into it.
website:
https://vuejs.org/
Slide 76
Slide 76 text
super fast on
mobile devices
is easy achieve fast rendering on desktop,
vue.js get the best experience on mobile
devices.
website:
https://vuejs.org/
Slide 77
Slide 77 text
useful resources
- curated list: https://github.com/vuejs/awesome-vue
- official forum: https://forum.vuejs.org/
- vuex: https://github.com/vuejs/vuex
- vue-router: https://router.vuejs.org/en/
- vue-cli: https://github.com/vuejs/vue-cli
- server-side rendering: https://vuejs.org/v2/guide/ssr.html
website:
https://vuejs.org/
Slide 78
Slide 78 text
vue people
- evan you: https://twitter.com/youyuxi
- kazupon: https://twitter.com/kazu_pon
- linusborg: https://twitter.com/Linus_Borg
- akryum: https://twitter.com/Akryum
- katashin: https://twitter.com/ktsn
- sarah drasner: https://twitter.com/sarah_edo
website:
https://vuejs.org/team.html
Slide 79
Slide 79 text
vue community is
growing quickly but is recent.
let’s share knowledge,
code and passion.
twitter:
@loregirardi
github:
@liqueflies
Slide 80
Slide 80 text
thank you