From Angular to Vue

Agenda

1. Goals
2. Getting to know me
3. Getting to know you (as a group)
4. Overview of similarities and differences
5. Refactoring Angular to Vue components
6. Play time and resources
7. 5 hours of office hours

Goals

• Get a small taste of Vue and the learning curve ahead
• Gain resources to help you learn more
• Gather feedback for future trainings

Hi! I'm Chris

Getting to know you

• Node Package Manager (NPM)?
• Babel or another transpiler to write ES2015 (ES6) code?
• TypeScript?
• Webpack?
  • If NOT Webpack, another module system?
• Angular 1.5's components?

How many teams have used...

The OverVue

Philosophy

Both are easy to get started

<div id="app">
  <input v-model="greeting">
  <p>{{ greeting }}</p>
</div>

<script src="https://unpkg.com/vue"></script>
<script>
new Vue({
  el: '#app',
  data: {
    greeting: 'Hello world!'
  }
})
<script>

Both offer officially supported companion libraries

Most notably...

• Routing (vue-router)
• State management (vuex)
• Project setup (vue-cli)

But Vue has a smaller focus

Built-in...

• Ajax? 🚫
• Utility functions? 🚫
• Form validation? 🚫

And Vue has clearer communication channels

Features

Both have templates

<h1>Hi, {{ name }}</h1>

Both add behavior with custom elements and attributes

But Vue doesn't use classes or comments...

<!-- Is this for CSS? -->
<div class="my-angular-directive"></div>

<!-- This comment affects the rendered code?! -->
<!-- directive: my-angular-directive -->

Both have filters

Both have watchers

Vue is 99% components

They combine all the concerns of:

• Modules

• Controllers

• Directives

Vue's v-bind is different

ng-bind is unrelated

• ng-bind === v-text
• ng-bind-html === v-html

<input v-bind:placeholder="placeholderInstructions">

v-bind is for attribute binding

<p v-bind:class="{ 'has-error': error }">
  ...
</p>

Vue's v-on simplifies events

<input
  v-on:input="doSomething"
  v-on:change="doSomething"
  v-on:click="doSomething"
>

<input
  v-on:auxclick="doSomething"
  v-on:contextmenu="doSomething"
  v-on:syntaxerror="doSomething"
>

One event directive to rule them all

Vue's custom directives have a narrower use case

Just for abstracting low-level DOM manipulation

Vue.directive('focus', {
  // When the bound element is 
  // inserted into the DOM...
  inserted: function (el) {
    // Focus the element
    el.focus()
  }
})

<input v-focus>

Vue doesn't use dependency injection

Vue has no built-in form validations

I recommend either:

• vuelidate
• vee-validate

Translating concepts

Let's get out of these slides and into an editor!

Resources for further learning

• The Docs
• Sandbox
• Vue Devtools
• Vue CLI's Webpack Template