Starting and building

Vue

apps

in         

2017

My questions for you

Present

  • Using Vue?
  • Want to use Vue?
  • Starting or building?

Future

  • Web apps?
  • Mobile apps?
  • Desktop apps?

Past

  • Using jQuery?
  • Using React?
  • Using Angular 1?
  • Using Angular 2?
  • Something else?

The plan

No Vue experience?

Starting a web app

Server-side rendered applications

Vue builds the HTML you serve to clients

Static websites

No server application

Single-page applications

Frontend separate from backend

Server applications

Vue enhances server templates

Static websites

  1. Nuxt

    • Rapid development

    • Don't be afraid to open an issue
  2. Netlify's prerendering
  3. Prerender at build with Webpack

Single-page applications

  1. Vue's webpack template

    • Feature-packed: top-class dev workflow!

    • Fully customizable

    • Read the template docs!

  2. Nuxt
    • You'll build apps The Nuxt Way
    • Great for simple, well-scoped applications

Server applications

  1. Built-in support

  2. Custom integration

Server-side rendered applications

  1. Nuxt
    • SSR out-of-the-box
    • Many edge cases handled for you
    • Again, very opinionated
  2. SSR docs
    • Can be difficult to learn
    • Demo app available

Starting a mobile app

Onsen UI

NativeScript

  • Battle-tested
  • Great documentation
  • Vue integration still young

Probably not as easy...

Weex

  • Proven to scale
  • Built for a single company
  • English docs lacking

Quasar

  • Clear documentation
  • Very generalist (doesn't specialize in mobile)

Starting a desktop app

Quasar

  • Again, doesn't specialize in desktop

Template: electron-vue

  • Easy to get started
  • Helps you learn Electron
  • Read the docs!

Build tools

Webpack

Offers the best dev experience possible

 

Vastly improved docs over v1

 

Really understand Webpack with webpack.academy

 

Helps you do anything - really

vue-loader

CSS Modules

Dev tools

Vetur (for VS Code)

Syntax highlighting for .vue components

 

Snippets to speed up development

Auto completion for components

eslint-plugin-vue (beta)

Catch runtime errors before they happen

 

Ensure consistent code across your app

 

Automatically fix many style violations

 

vue/recommended will enforce the official style guide

Companion libaries

Core offerings

Vue Router for... uh, routing

 

Vuex for complex state management

Vue Test Utils (beta)

Simplifies testing Vue apps

 

Docs still in progress

import { shallow } from 'vue-test-utils'
import AppButton from '@components/app-button'

describe('Component: AppButton', () => {
  it('renders a button element with a title', () => {
    const c = shallow(AppButton, {
      propsData: {
        title: 'Hello!'
      }
    })

    const el = c.find('button')
    expect(el.textContent.trim()).to.equal('Hello!')
  })
})

Vue CLI     

3.0

Build as a dependency

 

Configure without ejecting

Resources

Docs, of course!

vuejs.org

Release notes

Style guide (UNRELEASED)

JS Fiddle (soon)

Meta

I'm @chrisvfritz everywhere

This is slides.com/chrisvfritz/vue-2017-09

Starting and building Vue apps in 2017

By Chris Fritz

Made with Slides.com

Starting and building Vue apps in 2017

  • 1,968

More from Chris Fritz