Moving from Angular to Vue 

Gerard Sans (@gerardsans)

Google Developer Expert

Google Developer Expert

International Speaker

Spoken at 66 events in 23 countries

Blogger

Blogger

Trainer

Trainer

Timeline

AngularJS

2-way databinding

2009

React

Component based view library

2013

React Native

Native Mobile Apps using React

2014

Vue

Progressive framework

2015

Polymer

Web Components library

Vue (v1)

Ready for large Apps

Better Tooling (single-file-component)

New syntax shortcuts

 

Angular (v2)

2016

Vue (v2-2.1)

Performance improvements

Virtual DOM

Scoped slots

Streaming SSR

Angular (v4-5)

Vue (v2.2-2.5)

2017

TypeScript support

SSR improvements

Functional Components

Angular

Web, Mobile and Desktop

Ecosystem

ngrx

RxJS

TypeScript

Visual Code

Ionic

NativeScript

Apollo

GraphQL

Speed & Performance Created with Sketch.

Performance

Community

Vue

Web, Mobile and Desktop

Ecosystem

Vuex

vue-loader

TypeScript

Nuxt

Ionic v4

NativeScript

Apollo

GraphQL

📦

Performance

Community

Tooling

Vue CLI

Vue Devtools

Visual Code + TypeScript (v2.5+)

CodeSandbox

Todo App

Bootstrap

// main.ts
if (environment.production) { enableProdMode(); }
platformBrowserDynamic().bootstrapModule(AppModule);
// app.module.ts
@NgModule({
  declarations: [AppComponent],
  imports: [ BrowserModule,BrowserAnimationsModule],
  bootstrap: [AppComponent]
})
export class AppModule { }
// app.component.ts
@Component({
  selector: 'app-root',
  template: `<h1>Hello World!</h1>`,
  styles: [`h1 { color: #c0ffee; }`]
})
export class AppComponent {}

Bootstrap

// index.js
Vue.config.productionTip = false
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})
// App.vue
<template><h1>Hello World!</h1></template>
<script>
export default { name: "app" };
</script>
<style scoped>h1 { color: #c0ffee; }</style>

Template Syntax

Feature Angular Vue
Interpolation {{todo.text}} {{todo.text}}
conditional *ngIf="exp" v-if="exp"
visibility [hidden]="!exp" v-show="exp"
listings *ngFor="let todo of todos" v-for=”todo of todos”
2-way [(ngModel)] ="exp" v-model="exp"
events (click)="exp" @click="exp"

Component Inputs

// <todo [id]="todo.id" [text]="todo.text" [done]="todo.done"></todo>

@Component({
  selector: 'todo',
  template: `
    <mat-list-item (click)="onTodoClick()">
      <mat-checkbox class="checkbox" [checked]="done"></mat-checkbox>
      <div class="todo-text">{{text}}</div>
    </mat-list-item>`
})
export class TodoComponent {
  @Input() id: number;
  @Input() text: string;
  @Input() done: boolean = false;
};

Component Inputs

<!-- <todo :text="todo.text" :done="todo.done"/> -->
<template>
  <v-content>
    <v-list-tile-action>
      <v-checkbox :input-value="done"></v-checkbox>
    </v-list-tile-action>
    <v-list-tile-content>
      <v-list-tile-title>{{text}}</v-list-tile-title>
    </v-list-tile-content>
  </v-content>
</template>
<script>
export default {
  name: "todo",
  props: ["text", "done"],
};
</script>

Component Events

// <add-todo (newTodo)="AddTodo($event)"></add-todo>

@Component({
  selector: 'add-todo',
  template: `
    <mat-form-field (keydown.enter)="addTodo(todo)">
      <input #todo placeholder="Add a new todo">
    </mat-form-field>`
})
export class AddTodoComponent {
 @Output() newTodo = new EventEmitter();
 addTodo(todo){
   this.newTodo.emit(todo);
 }
};

Component Events

// <add-todo v-on:new="newTodo"/>
<template>
  <v-text-field v-model="newtodo" @keydown.enter.native="add"/>
</template>

<script>
export default {
  name: 'add-todo',
  data() { return { newtodo: ''} },
  methods: {
    add() {
      this.$emit("new", this.newtodo);
    }
  }
}
</script>

Registering Components

// app.module.ts

@NgModule({
  declarations: [
    AppComponent, AddTodo, TodoList, Todo
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Registering Components

// App.vue
<script>
import AddTodo from "./components/AddTodo";
import TodoList from "./components/TodoList";
import Filters from "./components/Filters";
 
export default {
  name: "app",
  components: {
    AddTodo,
    TodoList,
    Filters
  },
};
</script>

Evaluation

  • Angular (v5.2.5)
  • Framework
  • TS/DOM
  • SSR
  • Opinionated
  • 33K stars
  • 140KB
  • Vue (v2.5.13)
  • Framework
  • TS/Flow/vDOM
  • SSR
  • Progressive
  • 83K stars
  • 30KB

Benchmarks

Conclusions

Overview

  • Easy to implement all features
  • Old good Web feeling
  • Similar to AngularJS and React
  • Good Tooling and Docs

More

@youyuxi

@CompuIves

@sarah_edo

Ives van Hoorne

Evan You

Sarah Drasner

@Atinux

Sébastien Chopin

Thanks

Thanks

Moving from Angular to Vue

By Gerard Sans

Moving from Angular to Vue

In this talk we are going to explore how Angular and Vue compare to each other and how you can bridge between the two while looking at how to migrate an Angular Application to Vue in no time.

  • 2,145

More from Gerard Sans