Slide 1
Slide 1 text
AVUESOME
Why Vue.js is so great
@loregirardi @liqueflies
Slide 2
Slide 2 text
Lorenzo Girardi
front-end developer @develondigital
open source @styled-components
@loregirardi @liqueflies
Slide 3
Slide 3 text
WHY
Slide 4
Slide 4 text
Framework
- Save time
- Write less code
- Code readability
- Scalability
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
What my ideal framework should cover?
- Easy and approachable
- Lean API
- Usage of front-end base knowledge (HTML, CSS, JS)
- Well written docs
- High performance, also on mobile devices!
Slide 7
Slide 7 text
Why Vue?
… does it really cover all these things?
Slide 8
Slide 8 text
Vue.js
@vuejs @vuejs
The Progressive
JavaScript Framework
https://vuejs.org/v2/guide/
Slide 9
Slide 9 text
Progressive Framework
“Progressive Framework is composed of incrementally adoptable libraries”
Slide 10
Slide 10 text
Evan You
full-time open source!
@yyx990803 @yyx990803
Slide 11
Slide 11 text
History
- [late 2013] created
- [Feb. 2014] first release
- [Nov. 2015] v1.00 release
- [Sept 2016] v2.00 release
- Now, it has > 50k stars on github (+20k after v2.0.0)
Slide 12
Slide 12 text
Version 2.0.0
- 2 - 4x faster
- 12 - 17 kb min + gzip
- Virtual DOM (based on snabbdom)
- Server Side Rendering
- JSX/Hyperscript rendering and/or HTML templates
- Mobile native apps with weex (by alibaba)
https://medium.com/the-vue-point/announcing-vue-js-2-0-8af1bde7ab9#.t2d55ypix
https://medium.com/the-vue-point/vue-in-2016-8df71d98bfb3#.onussvll7
Slide 13
Slide 13 text
Declarative Rendering
Single source
of truth
Map of
the state
Slide 14
Slide 14 text
Vue state is called data
data
data: {
...
}
Models are just plain JavaScript objects.
Slide 15
Slide 15 text
Vue data object properties are converted to
getters and setters, collected in watchers
https://vuejs.org/v2/guide/reactivity.html#ad
Slide 16
Slide 16 text
reactivity vs setState
// react setState
this.setState({ counter: this.counter + 1})
this.setState({ counter: this.counter + 1})
// console.log(this.counter) -> ?
// vue reactivity
this.counter = this.counter + 1
this.counter = this.counter + 1
// console.log(this.counter) -> known
Slide 17
Slide 17 text
...easy and approachable!
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
{{ message }}
Slide 19
Slide 19 text
Conditional rendering / Loop
// todos: ["eat", "sleep", "repeat"]
- {{ todo }}
Yay! all todos were done!
Slide 20
Slide 20 text
Lean API - Vue Instance
{
// ... el, data
computed: {
visibleTodos: function() { return this.todos.length }
},
methods: {
logInserted: function() { log(this.todos.slice(-1).pop()) }
},
watch: {
todos: function() { this.logInserted() }
}
// ... lifecycle
}
https://vuejs.org/v2/guide/instance.html#ad
Slide 21
Slide 21 text
Transition effects
- Conditional rendering (v-if)
- Conditional display (v-show)
- Dynamic components
- Root component (appear transition)
is a wrapper component, that allows you to add
entering/leaving transitions for:
https://vuejs.org/v2/guide/transitions.html
Slide 22
Slide 22 text
Transition effects
Slide 23
Slide 23 text
Transition effects
hello
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to {
opacity: 0
}
Slide 24
Slide 24 text
Component system
https://vuejs.org/v2/guide/components.html
Abstract your UI into tree of
components, that are small,
self-contained and
reusable
Slide 25
Slide 25 text
Single File Component
- Split logic into template, script, styles
- Preprocessor agnostic (sass, pug...)
- Scoped CSS
- Hot reload
- Write ES6 Javascript
https://vuejs.org/v2/guide/single-file-components.html
Slide 26
Slide 26 text
Effortless SSR
https://ssr.vuejs.org
Slide 27
Slide 27 text
Effortless SSR
- Optimized bundle clientManifest
- Stream rendering supported with renderToStream
- Easy component caching with serverCacheKey
- Client-side hydration to avoid useless re-render of markup
Vue 2.3.0 focus on SSR providing a new guide and awesome effortless practice
that makes easy to achieve!
https://ssr.vuejs.org
Slide 28
Slide 28 text
Vanilla
JavaScript
Vue
2
React
(no -fiber)
Angular
2
1x
1.29x
1.74x
1.97x
So Vue is really fast?
https://cdn.rawgit.com/krausest/js-framework-benchmark/956b068f03ef96a9c08d209ffadb0947cd56edc6/webdriver-java/table.html
Slide 29
Slide 29 text
Vue ecosystem
- Vuex: Large state management
- Vue router: router
- Vue cli: no-build configuration tool
- Vue resources: http resources
- Vue devtool: chrome official extension debugger tool
Check awesome-vue for a curated list of community packages!
https://github.com/vuejs/awesome-vue
Slide 30
Slide 30 text
how about docs?
- Vue: https://vuejs.org/
- Vuex: http://vuex.vuejs.org/
- Vue router: http://router.vuejs.org/
- Server side rendering: http://ssr.vuejs.org/
- Vue cli: http://vuejs-templates.github.io/webpack/
Slide 31
Slide 31 text
Vue in practice
a cool idea to test most-of framework API
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
Project idea - CAGEFLIX
- Stupid netflix clone only for Nicolas Cage
- Browse, filter and search movies easily
- Usage of entire Vue ecosystem
- Connection to REST API (TMDB)
- Simple server-side-rendering
https://github.com/liqueflies/cageflix
Slide 35
Slide 35 text
Final recap
- We write what we already know (HTML, CSS, JS)
- Easy to startup, fast learning curve, awesome docs
- Use both for small issues or big spa, including parts progressively
- Very cool support for transitions
- Very fast, also on mobile devices
- Effortless SSR
Slide 36
Slide 36 text
Thank you!
questions?
@loregirardi @liqueflies