Vue,

Simple yet scalable

Berlin 23 Nov 2018

GitHub icon
Twitter icon

Eduardo

San Martin Morote

Vue core team

Vue.js Meetup Paris

Remote Freelance Developer

GitHub icon

📚 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

Poi

⚡️ 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)
}

👩‍💻 Codesanbox example

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! 🖖

GitHub icon

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,244