The Vue philosophy

Vue

Front-end JavaScript framework

The Vue philosophy

  • Onboarding should be easy
  • Complexity should be opt-in
  • Separation of concerns, not languages

Onboarding should be easy

🙂

<script src="https://unpkg.com/vue@2.5.9/dist/vue.js"></script>
  
<div id="app">
  <p>{{text}}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: () => ({
      text: 'Hello, world!'
    })
  })
</script>

Simple on-boarding

Plain HTML file

Comprehensive documentation

 

the documentation is the only tutorial you'll ever need

International core team

China, USA, Japan, UK, Vietnam, France, Russia, Poland, Germany, India

Support for different module formats

Complexity should be opt-in

(not opt-out)

declarative

rendering

component

system

client-side

routing 

state

management

build

system

source: http://bit.ly/2nMKlcy

Benefits

  • Grows with your project
  • Less decisions to make
  • Deep integration between libraries

Separation of concerns, not languages

(collocation)

JS

HTML

CSS

<template>
  <div>
    Counter: {{counter}}
    <button onClick="counter++">+</button>
  </div>
</template>

<script>
  export default {
    data: () => ({
      counter: 0
    })
  }
</script>

<style scoped>
  div {
    color: steelblue;
  }
</style>

Single file component

<template>
  <div>
    Hello, World!
  </div>
</template>

<test>
  import Counter from './MyComponent.js'
  import { mount } from 'vue-test-utils'

  test('renders div', {
    const wrapper = mount(Counter)
    expect(wrapper.is('div')).toBe(true)
  })
</test>

<docs>
  ## My Component

  Renders Hello, World!
</docs>

Custom blocks

Thanks for listening

The Vue philosophy

By Edd Yerburgh

The Vue philosophy

  • 1,515