3. At the moment of preparing
this talk the latest version
of vue is 2.3
4. What are we going to talk about?
Why?
Reasons to use a JS
frontend framework
× UI Complexity
× Rapid Prototyping
× JS Spaguetti
What?
What Vue.js is
× Declarative
× MVVM
× Reactivity
× Virtual DOM
× Components
How?
How to build a Vue.js
project
× Components
identification
× model tree design
× Development
× Setup Vue
× Components
× Dev tools
5. What are we NOT going to talk about?
ES2015
Webpack
JS internals
Testing
Deploy
Authorization
Plugins
Routing
Middleware
Reactivity internals
Persistence
Server Side
Rendering
Vuex
XSS or CORS
Connecting to third
party services
Components
lifecycle
Transitions
Animations
7. UI Complexity
Web based apps UI have increased their
complexity, and they do not longer behave as
traditional web sites but as (browser) native
apps.
8.
9.
10. Rapid prototyping
HTML, CSS & JS are the new photoshop. You
want to prototype not only visual aspects of
your apps, but your app’s UX. You need to do
this as fast as possible… and you do not want to
be the bottleneck.
11. JS / JQUERY Spaguetti
Recipe:
1. Forget about separation of concerns
2. Mix structure, presentation and data logic
together.
3. Throw this mixture in the DOM
4. Enjoy your food
PS: Do not consume if you like sleeping
18. Components
Components are one of the most powerful
features of Vue. WIth them you can build
reusable features to be used easily -thanks to
its declarative nature- by other developers.
87. // This content has been reduced. You can find the original content in
https://github.com/akifo/vue-memo/blob/dev/src/js/main.js
import Vue from 'vue'
import App from './App'
import { sync } from 'vuex-router-sync'
import store from './vuex'
import router from './router'
sync(store, router)
const app = new Vue({
router,
store,
el: '#app',
render: h => h(App)
})
global._App = app
88. // This content has been reduced. You can find the original content in
https://github.com/akifo/vue-memo/blob/dev/src/js/main.js
import Vue from 'vue'
import App from './App'
import { sync } from 'vuex-router-sync'
import store from './vuex'
import router from './router'
sync(store, router)
const app = new Vue({
router,
store,
el: '#app',
render: h => h(App)
})
global._App = app
Imports
89. // This content has been reduced. You can find the original content in
https://github.com/akifo/vue-memo/blob/dev/src/js/main.js
import Vue from 'vue'
import App from './App'
import { sync } from 'vuex-router-sync'
import store from './vuex'
import router from './router'
sync(store, router)
const app = new Vue({
router,
store,
el: '#app',
render: h => h(App)
})
global._App = app
Imports
Includes current route in state
90. // This content has been reduced. You can find the original content in
https://github.com/akifo/vue-memo/blob/dev/src/js/main.js
import Vue from 'vue'
import App from './App'
import { sync } from 'vuex-router-sync'
import store from './vuex'
import router from './router'
sync(store, router)
const app = new Vue({
router,
store,
el: '#app',
render: h => h(App)
})
global._App = app
Imports
Includes current route in state
Create Vue instance
92. // This content has been reduced. You can find the original content in
https://github.com/akifo/vue-memo/blob/dev/src/js/vuex/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
user: {
loggedIn: false,
uid: '',
name: '',
profilePicUrl: ''
},
memos: {}
// route: {} // vue-router has created state.route
}
const mutations = {// here come the mutations}
const actions = {// here come the actions}
const getters = {// here come the actions}
export default new Vuex.Store({ state, getters, actions, mutations, strict: debug })
93. // This content has been reduced. You can find the original content in
https://github.com/akifo/vue-memo/blob/dev/src/js/vuex/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
user: {
loggedIn: false,
uid: '',
name: '',
profilePicUrl: ''
},
memos: {}
// route: {} // vue-router has created state.route
}
const mutations = {// here come the mutations}
const actions = {// here come the actions}
const getters = {// here come the actions}
export default new Vuex.Store({ state, getters, actions, mutations, strict: debug })
Imports
94. // This content has been reduced. You can find the original content in
https://github.com/akifo/vue-memo/blob/dev/src/js/vuex/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
user: {
loggedIn: false,
uid: '',
name: '',
profilePicUrl: ''
},
memos: {}
// route: {} // vue-router has created state.route
}
const mutations = {// here come the mutations}
const actions = {// here come the actions}
const getters = {// here come the actions}
export default new Vuex.Store({ state, getters, actions, mutations, strict: debug })
Imports
Use it!!!
95. // This content has been reduced. You can find the original content in
https://github.com/akifo/vue-memo/blob/dev/src/js/vuex/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
user: {
loggedIn: false,
uid: '',
name: '',
profilePicUrl: ''
},
memos: {}
// route: {} // vue-router has created state.route
}
const mutations = {// here come the mutations}
const actions = {// here come the actions}
const getters = {// here come the actions}
export default new Vuex.Store({ state, getters, actions, mutations, strict: debug })
Imports
Use it!!!
Initial state
121. // https://github.com/akifo/vue-memo/blob/dev/src/js/components/AppHeader.vue
<script>
import { mapGetters, mapActions } from 'vuex'
import _ from 'lodash'
export default {
name: 'AppHeader',
computed: mapGetters(['user', 'currentUserName']), // import easily getters from your store
data () { // data now stores internal component state, no application state e.g: active filters, active/inactive status, etc.
return {
name: ''
}
},
methods: {
...mapActions(['signIn', 'signOut']), // import easily actions from your store
update: _.debounce(function (e) {
this.submit(e)
}, 2000),
submit: _.throttle(function (e) {
// Here comes the implementation of this method
}, 800),
validate (text) {
// Here comes the implementation of this method
}
}
}
</script>
<style lang="stylus">
// Here comes some styling stuff
</style>
122. // https://github.com/akifo/vue-memo/blob/dev/src/js/components/AppHeader.vue
<script>
import { mapGetters, mapActions } from 'vuex'
import _ from 'lodash'
export default {
name: 'AppHeader',
computed: mapGetters(['user', 'currentUserName']), // import easily getters from your store
data () { // data now stores internal component state, no application state e.g: active filters, active/inactive status, etc.
return {
name: ''
}
},
methods: {
...mapActions(['signIn', 'signOut']), // import easily actions from your store
update: _.debounce(function (e) {
this.submit(e)
}, 2000),
submit: _.throttle(function (e) {
// Here comes the implementation of this method
}, 800),
validate (text) {
// Here comes the implementation of this method
}
}
}
</script>
<style lang="stylus">
// Here comes some styling stuff
</style>
123. // https://github.com/akifo/vue-memo/blob/dev/src/js/components/AppHeader.vue
<script>
import { mapGetters, mapActions } from 'vuex'
import _ from 'lodash'
export default {
name: 'AppHeader',
computed: mapGetters(['user', 'currentUserName']), // import easily getters from your store
data () { // data now stores internal component state, no application state e.g: active filters, active/inactive status, etc.
return {
name: ''
}
},
methods: {
...mapActions(['signIn', 'signOut']), // import easily actions from your store
update: _.debounce(function (e) {
this.submit(e)
}, 2000),
submit: _.throttle(function (e) {
// Here comes the implementation of this method
}, 800),
validate (text) {
// Here comes the implementation of this method
}
}
}
</script>
<style lang="stylus">
// Here comes some styling stuff
</style>
138. Rails
Implicit dependencies
layer > concern hierarchy
You think about how to
store data
Mindset differences
Vue
Explicit dependencies
concern > layer hierarchy
You think about how to
present data
139. Authentication & authorization
Backend persistence
Async actions management (sagas)
Connecting to third party services
Styling
SSR?
Build process
Before going live you should know
140. after going live you should dive deeper in
Vuex
VueRouter
ES2015
Transitions & animations
GraphQL :-)
Functional programming
141. Progressive web apps
Vue native with Weex
Vue for desktop with Electron
SSR with Nuxt.js
(some of my) next learning paths
Web components & HTTP 2
Functional programming
TypeScript
Docker + GraphQL + Vue!!!
148. Credits
Special thanks to all the people who made and
released these awesome resources for free:
× Vue example app by afiko
× Presentation template by SlidesCarnival
× Photographs by Startupstockphotos
149. Presentation design
This presentation uses the following typographies:
× Titles: Bangers
× Body copy: Sniglet
You can download the fonts on this page:
https://www.google.com/fonts#UsePlace:use/Collection:Sniglet|Bangers
Click on the “arrow button” that appears on the top right
You don’t need to keep this slide in your presentation. It’s only here to serve you as a design guide if
you need to create new slides or download the fonts to edit the presentation in PowerPoint®