Angular features

in Vue

Natalia Tepluhina

@N_Tepluhina

Community Partner

Chief Tech Officer

Google Dev Expert

Senior Frontend Engineer

@N_Tepluhina

@N_Tepluhina

@N_Tepluhina

Every framework has its own great features

Angular 2 Release:

September 14, 2016

Vue 2.0 Release:

September 30, 2016

@N_Tepluhina

       TypeScript

     RxJS

@N_Tepluhina

   TypeScript

JavaScript on steroids

@N_Tepluhina

Types!


const getFullName =
    (name: string, surname: string): string => {
        return name + ' ' + surname;
    }

@N_Tepluhina

Custom types

export interface User {
    name: string;
    surname: string;
    age: number;
}

@N_Tepluhina

Error linting

@N_Tepluhina

    const printUserAge = user => {
        console.log(user.age);
    };
    
    const person = {
        name: 'Natalia',
    };
    
    printUserAge(person);

@N_Tepluhina

    interface User {
        name: string;
        age: number;
    }
    const printUserAge = (user: User):void => {
        console.log(user.age);
    };
    const person = {
        name: 'Natalia',
    };
    
    printUserAge(person);

@N_Tepluhina

@N_Tepluhina

Generics

Tuples

Namespaces

@N_Tepluhina

Vue ❤️ TypeScript

@N_Tepluhina

Improved TypeScript support since Vue 2.5

Vue 3.x will be using TypeScript for internal implementation

@N_Tepluhina

Object syntax

@N_Tepluhina

Class-Style Component

@N_Tepluhina

Simply added with @vue/cli

@N_Tepluhina

Pitfalls

- Plugins and libraries typings

- Vuex needs additional work to be typed properly

@N_Tepluhina

RxJS

Reactive extensions library

for JavaScript

@N_Tepluhina

ReactiveX is an API for asynchronous programming with observable streams

@N_Tepluhina

Think in streams

  • User input events

  • Caching data

  • API calls

  • ...tweets!

@N_Tepluhina

Streams are collection of events

 RxJS is a Lodash for events

@N_Tepluhina

Observables

  Singular   Plural
  Sync   Value   Iterable <Value>
  Async   Promise <Value>   

Observable <Value>

@N_Tepluhina

Promise

Observable

@N_Tepluhina

RxJS Operators

  • transform

  • filter

  • combine

  • alter

@N_Tepluhina

vue-rx

npm install vue-rx rxjs
import Vue from 'vue'
import VueRx from 'vue-rx'

Vue.use(VueRx)

@N_Tepluhina

...or vue-cli-plugin-rx!

 vue add rx

@N_Tepluhina

@N_Tepluhina

Thank you!

Angular features in Vue

By Natalia Tepluhina

Angular features in Vue

  • 504
Loading comments...

More from Natalia Tepluhina