Who am I?

Introducing Vue into your app and team

Vue, you say...?

Step #1: Convince

How to win friends and influence developers

1. Don't shame - empathize

2. Show something shiny

Attracting users writing single-page applications

Vue can too!

  • Components
  • JSX
  • Fast
  • Flexible architecture
  • Testable components

React

Angular

  • Components
  • First-class TypeScript support
  • Full offering - officially supported router and state management, among others

Emphasize fun & easy

(Probably) don't encourage rewrites!

How to try out Vue in existing SPAs

export default class VuePage extends React.Component {
  constructor (props) {
    super(props)
    this.vm = new Vue({ /* ... */ })
  }

  componentDidMount () {
    this.vm.$mount('#vue-app')
  }

  componentWillUnmount () {
    this.vm.$destroy()
  }

  render () {
    return <div id='vue-app'></div>
  }
}

Concerns

Size

Performance

State

Pros

Simple

Attracting mostly backend/jQuery users

Acknowledge fatigue

The simplest backend integration

<user-list :users="<%- users.toJSON() %>"></user-list>
<user-list :users="<%- users.toJSON() %>"></user-list>
  <!-- Vue -->
  <% if (Application.env === 'development') { %>
    <script src="https://unpkg.com/vue"></script>
  <% } else { %>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  <% } %>
</head>
<body>
  <!-- Mount point -->
  <div id="app">
    <%- yield %>
  </div>

  <!-- App -->
  <script>
    new Vue({
      el: '#app',
      // Universal server-data
      data: {
        csrfToken: '<%- Application.csrfToken %>'
      }
    })
  </script>

Setup in layout

Components

<user-list :users="<%- users.toJSON() %>"></user-list>

Views

Vue.component('user-list', { 
  // ...
})

Vue.component('flash-message', { 
  // ...
})

Pros

Simple

Incremental

SEO

Standardization

Cons

Multiline strings

template: '\
  <li>\
    {{ todo.text }}\
  </li>\
'
template: `
  <li>
    {{ todo.text }}
  </li>
`

The next upgrade: single-file components

Implementations

Pros

Advanced JS features

Integration of concerns

Module system

Cons

Requires more knowledge

Single-page application

(SPA)

 

Separate frontend

 

Implementation options

vue-cli

nuxt/starter

webpack

pwa

+ simple

+ opinionated

+ SSR

+ control

+ tests

+ control

+ tests

+ progressive

Pros

Lighter (runtime-only build)

Advanced workflow

Readied for mobile app

Trade-offs

- Initial page speed

+ Next page speed

- Server resources

+ Client resources

Cons

Complex

Complex

Start with Nuxt

When do I need... ?

Vue Router

Vuex

Server-side rendering (SSR)

GraphQL

Real-time connections

...

Resources

1. Docs (vuejs.org/guide)

and soon...

2. Style Guide

3. ESLint Plugin

Questions?

@chrisvfritz

Made with Slides.com