!"
Breaking FrontEnd Paradigms with
Vue.js
@ianaya89
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 1
Slide 2
Slide 2 text
!
Ignacio Anaya
@ianaya89
β’ Full Stack Developer, Tech Trainer & Speaker
β’ Ambassador @Auth0
β’ Organizer @Vuenos_Aires
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 2
Slide 3
Slide 3 text
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 3
Slide 4
Slide 4 text
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 4
Slide 5
Slide 5 text
β¬
~800K / month
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 5
Slide 6
Slide 6 text
β¨
~ 80K
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 6
Slide 7
Slide 7 text
!"
~ 340K
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 7
Slide 8
Slide 8 text
!
74 Repositories
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 8
Slide 9
Slide 9 text
!
Companies
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 9
Slide 10
Slide 10 text
!
Community
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 10
Slide 11
Slide 11 text
!
Why Vue.js?
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 11
Slide 12
Slide 12 text
!
Complexity
Inherent vs. Instrumental
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 12
Slide 13
Slide 13 text
!
Inherent
The Project
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 13
Slide 14
Slide 14 text
!
Instrumental
The Price
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 14
Slide 15
Slide 15 text
!
!
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 15
Slide 16
Slide 16 text
β
!
!
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 16
Slide 17
Slide 17 text
β
!
!
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 17
Slide 18
Slide 18 text
!
The Progressive Framework
β’ View focused
β’ Core based
β’ VDOM
β’ Reactive
β’ Components Oriented
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 18
Slide 19
Slide 19 text
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 19
Slide 20
Slide 20 text
!
Declarative Rendering
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 20
Slide 21
Slide 21 text
!"
{{ hello }}
new Vue({
el: '#app',
data: function () {
return {
hello: 'Hello Sandusky
!
!'
}
}
});
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 21
Slide 22
Slide 22 text
!"
{{ hello }}
new Vue({
el: '#app',
data: function () {
return {
hello: 'Hello Sandusky
!
!'
}
}
});
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 22
Slide 23
Slide 23 text
!
render()
new Vue({
el: '#app',
data: function () {
return {
hello: 'Hello Sandusky
!
!'
}
}
render: function () {
return (
{this.hello}
)
}
})
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 23
Slide 24
Slide 24 text
!
Demo
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 24
Slide 25
Slide 25 text
!
Component System
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 25
Slide 26
Slide 26 text
!
Semantic
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 26
Slide 27
Slide 27 text
!
.vue
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 27
Slide 28
Slide 28 text
β»
Life Cycle Hooks
new Vue({
created: function () {
console.log('I am alive
!
')
}
});
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 28
Slide 29
Slide 29 text
β
Communication
β’
β¬
Properties Down
β’
β¬
Events Up
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 29
Slide 30
Slide 30 text
!
DX
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 30
Slide 31
Slide 31 text
!
vue-cli
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 31
Slide 32
Slide 32 text
β
Dev Tools
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 32
Slide 33
Slide 33 text
!
Demo II
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 33
Slide 34
Slide 34 text
!
vue-router
Single Page Applications
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 34
Slide 35
Slide 35 text
!
vuex
State Management (Flux)
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 35
Slide 36
Slide 36 text
!
vue-authenticate & vue-auth
Authentication & JTW
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 36
Slide 37
Slide 37 text
!
Native & Nuxt.js
Server Side Rendering
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 37
Slide 38
Slide 38 text
!
Native Script & Weex
Mobile Native Rendering
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 38
Slide 39
Slide 39 text
!
Take Away
β’
!
Progressive (Simple & Complex)
β’
"
Declarative Rendering
β’
#
Component System
β’
$
Great Ecosystem
β’
%
Awesome Community
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 39
Slide 40
Slide 40 text
!"
Break Paradigms
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 40
Slide 41
Slide 41 text
Thanks!
@ianaya89
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 41
Slide 42
Slide 42 text
β
Questions?
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 42
Slide 43
Slide 43 text
!
Links
bit.ly/cm-vue
bit.ly/cm-demo
bit.ly/cm-demo2
Breaking FrontEnd Paradigms with with Vue.js
! "
- @ianaya89 43