Vue,
Simple yet scalable
Berlin 23 Nov 2018
Eduardo
San Martin Morote
Vue core team
Vue.js Meetup Paris
Remote Freelance Developer
📚 Directly on the guide
Approachable
- Vue
- HTML
- JS
convenient format 😍
Vue
Declarative
& Reactive
<NavBar>
<Logo/>
<NavBarUser v-if="isLoggedIn">
{{ username }}</NavBarUser>
<NavBarGroup v-else>
<NavBarButton>Create an account</NavBarButton>
<NavBarButton>Login</NavBarButton>
</NavBarGroup>
</NavBar>
(<NavBar>
<Logo />
{this.isLoggedIn ? (
<NavBarUser>{this.username}</NavBarUser>
) : (
<NavBarGroup>
<NavBarButton>Create an account</NavBarButton>
<NavBarButton>Login</NavBarButton>
</NavBarGroup>
)}
</NavBar>)
function render() {
with (this) {
return _c(
'NavBar',
[
_c('Logo'),
isLoggedIn
? _c('NavBarUser', [_v(_s(username))])
: _c(
'NavBarGroup',
[_c('NavBarButton', [_v('Create an account')]), _c('NavBarButton', [_v('Login')])],
1
),
],
1
);
}
}
Magically Reactive ✨
Modify the state as usual and watch the HTML automatically update
const vm = new Vue({
// some options
})
vm.username = 'Jocelyn'
vm.messages.push({
text: 'Yo!',
author: 'Romeo'
})
The Progressive Framework
Declarative rendering
Component System
Client-side
Routing
State Management
Build system
aka
webpack + babel
⚡️ Delightful web development
by @egoist
Routing
🚦
Do I need routing?
Big chunks of HTML toggled with v-if? 🤔
<div id="app">
<div class="part1" v-if="condition">...</div>
<div class="part2" v-else-if="condition2">...</div>
<div class="part3" v-else-if="condition3">...</div>
<div class="part4" v-else-if="condition4">...</div>
...
<div class="part10" v-else>...</div>
</div>
Simple routing
Using dynamic components
<div id="app">
<a v-on:click="currentView = 'Home'"
>Home</a>
<a v-on:click="currentView = 'About'"
>About</a>
<component v-bind:is="currentView"/>
</div>
Vue.component('Home', Home)
Vue.component('About', About)
new Vue({
el: '#app',
data: {
currentView: 'Home'
}
})
import Home from './views/Home'
import About from './views/About'
const routes = {
'/': Home,
'/about': About
}
new Vue({
el: '#app',
data: {
currentRoute: window.location.pathname
},
computed: {
ViewComponent() {
return routes[this.currentRoute] || NotFound
}
},
methods: {
goTo(path) {
this.currentRoute = path
window.history.pushState({}, '', path)
}
},
})
new Vue({
// other options
mounted() {
window.addEventListener('popstate', () => {
this.currentRoute = window.location.pathname
})
}
})
Lazy Loading
const routes = {
'/': () => import('./views/Home'),
'/about': () => import('./views/About')
}
<div id="app">
<a href="/" v-on:click.prevent="goTo('/')">/</a>
<a href="/about" v-on:click.prevent="goTo('/about')">/about</a>
<component v-bind:is="ViewComponent" />
</div>
Routing from scratch with custom properties
Vue.prototype.$goTo = function (path) {
window.history.pushState({}, '', path)
}
Migrating to vue-router
- Moving components into vue files
- Creating a router instance
- pass in an array of routes
- Inject the router into the root instance
Why migrating?
- Cleaner architecture
- Navigation guards
- Advanced patterns
- Browser support
- and more!
When?
As soon as possible!
State management
🗃
Components
Different vuexless state management
$root
$root
const vm = new Vue({
// other options
data: {
user: null,
locale: 'en'
}
})
// inside of a component
this.$root === vm
this.$root.user = { name: 'Jonathan' }
Object.defineProperty(Vue.prototype, '$state', {
get () { return this.$root.$data }
})
// inside of a component
this.$state.user = {
name: 'Jonathan'
}
$root ->$state ✌️
one time checks, initialization
Vue.prototype.login = async function (user, password) {
this.$state.user =
await authService.login(user, password)
localStorage.setItem('user', this.$state.user)
})
new Vue({
// other options
created () {
this.$state.user = localStorage.getItem('user')
}
})
const sourceOfTruth = { name: 'Joseph' }
const vmA = new Vue({
data: sourceOfTruth
})
const vmB = new Vue({
data: sourceOfTruth
})
const vmC = new Vue({
data: {
// other data
sourceOfTruth
}
})
vmA.name = 'Josuke'
vmB.sourceOfTruth.name =
'Giorno'
When is it a good time to move to vuex?
- More than 5 pieces of state shared
- You keep adding more
Follow your gut 💛
- Time travelling
- Replay user bugs
- Better traceability
- Maintanability
Why? 🤔
When? ⏳
Vuex is simple
Actions
View
State
Migrating to vuex
- Create a Store instance
- Move your root instance data into the state
- Create mutations to handle modifications
- Create actions for one-time things
- Create actions for async operations
- Inject the store into the root instance
- Use the $store instead of $state
- Call mutations
- Call actions
Getting started
with Vue
+450 contributors
Getting started 👌
Thanks! 🖖
Vue, simple yet scalable
By Eduardo San Martin Morote
Vue, simple yet scalable
Vue is known for being approachable and also for having good docs. However, it has also been said that it’s not well suited for big applications. While this is not true, some believed it wasn’t and as a consequence, discarded it as a possible choice for their next application even though they were enjoying very much developing applications with Vue. During this talk I will elaborate on what makes Vue simple to approach by exploring its mindset and its associated features. Then we will understand why it is called a progressive framework by learning how to progressively adopt official solutions like vue-router and vuex.
- 5,261