VUE.JS DEVELOPMENT IN 2019

Vuex, Vue Router and Typescript

Bruce Cantarim

Digital Media Frontend Developer - Arctouch Brasil

What is

VUE.JS?

So...

What is Vue.js |

  • Well... it's a javascript framework. A progressive one.

The Basics

  • It was first released in 2014.
  • It's open source and MIT.
  • And it's used by huge companies.

What is Vue.js |

Who uses it?

What is Vue.js |

Fast growth

  • As of yesterday, 139k vs React's 130k stars on Github.
  • Powering ~400k websites, ~4k new sites per month.
  • It's getting smaller and faster soon.
  • The codebase is being rewritten in Typescript.

What is Vue.js |

What does it looks like?

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

HTML

JS

Where do I

START?

So...

Where do I start? |

  • Vue Mastery's Intro to Vue.js Free Course:

Links, links, links

  • Vue's Official Getting Started Guide:
  • Vue's Official News Podcast:

Where do I start? |

  • A full system for rapid Vue.js development.

The Vue CLI

$ npm install -g @vue/cli
$ yarn global add @vue/cli

Where do I start? |

  • To create a new project, run:

Creating a Project

$ vue create project-name
$ cd project-name && vue ui
# or
$ cd project-name && yarn serve

then...

The Vue UI

Where do I start? |

Let's talk about

TYPESCRIPT

Let's talk about Typescript |

  • Well... it's a superset of Javascript.

What is it?

  • And it transpiles to Javascript.
  • It's all about OOP, static typing, mostly.
  • And VS Code integration is amazing with it.

Let's talk about Typescript |

  • It will prevent about 20% of the bugs in development.

Why it matters?

  • It lets you learn it progressively.
  • It improves the readability of the code.
  • 3rd most loved language of Stackoverflow's 2019 survey.
var Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }

    Greeter.prototype.greet = function () {
        return “Hello, “ + this.greeting;
    };

    return Greeter; 
})();

JS

Let's talk about Typescript |

A quick comparison

class Greeter {
    private greeting: string;

    constructor (private message: string) {
        this.greeting = message;
    }

    greet() {
        return `Hello, ${this.greeting}`;
    }
}

TS

It's just Javascript with some

ADDITIONAL FEATURES

Don't be afraid...

Working with

COMPONENTS

Working with Components |

  • Vue Property Decorator:

The First Secret

$ npm install -S vue-property-decorator
$ yarn add vue-property-decorator
export default {
  props: {
    propA: {
      type: Number
    },
    propB: {
      default: 'default value'
    },
    propC: {
      type: [String, Boolean]
    },
  }
}

JS

import { Vue, Component, Prop } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
  @Prop(Number) readonly propA!: number
  @Prop({ default: 'default value' }) readonly propB!: string
  @Prop([String, Boolean]) readonly propC!: string | boolean
}

TS

Vue Property Decorator

Working with Components |

There are 7 decorators and 1 function (Mixin):

  • @Emit
  • @Inject
  • @Model

Vue Property Decorator

Working with Components |

  • @Prop
  • @Provide
  • @Watch
  • @Component (vue-class-component)
  • Mixins (vue-class-component)

SPAs and the

VUE ROUTER

SPAs and the Vue Router |

  • The Vue Router is a part of the official ecosystem.

There's no secret here

  • It is amazing for your SPAs.
  • It's loaded with features, including transitions.
$ npm install -S vue-router
$ yarn add vue-router
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
  ],
});
<template>
  <div id="app">
    <router-view />
  </div>
</template>

...

router.ts

app.vue

SPAs and the Vue Router |

What does it looks like?

State management and

VUEX

State Management and Vuex |

  • Vuex is also a part of the official ecosystem.

Your Single Source of Truth

  • It's data store that can get, mutate and realize actions.
  • Makes it a breeze to pass values in your application.
$ npm install -S vuex
$ yarn add vuex
import Vue from 'vue';
import Vuex, { StoreOptions } from 'vuex';
import { RootState } from './types';
import { profile } from './profile/index';

Vue.use(Vuex);

const store: StoreOptions<RootState> = {
    state: {
        version: '1.0.0'
    },
    modules: {
        profile
    }
};

export default new Vuex.Store<RootState>(store);

store.ts

State Management and Vuex |

There's room for improvement

export interface RootState {
    version: string;
}

types.ts

import { Module } from 'vuex';
import { getters } from './getters';
import { actions } from './actions';
import { mutations } from './mutations';
import { ProfileState } from './types';
import { RootState } from '../types';

export const state: ProfileState = {
    user: undefined,
    error: false
};

const namespaced: boolean = true;

export const profile: Module<ProfileState, RootState> = {
    namespaced,
    state,
    getters,
    actions,
    mutations
};

profile/index.ts

Reference:

We'll get

THERE

State Management and Vuex |

The second secret

  • Vuex Class:
$ npm install -S vuex-class
$ yarn add vuex-class
import { Vue, Component } from 'vue-property-decorator';
import { State, Getter, Action, Mutation } from 'vuex-class';

@Component
export class MyComp extends Vue {
  @State('foo') stateFoo
  @Getter('foo') getterFoo
  @Action('foo') actionFoo
  @Mutation('foo') mutationFoo

  created () {
    this.stateFoo // -> store.state.foo
    this.getterFoo // -> store.getters.foo
    this.actionFoo({ value: true }) // -> store.dispatch('foo', { value: true })
    this.mutationFoo({ value: true }) // -> store.commit('foo', { value: true })
  }
}

TS

State Management and Vuex |

Vuex Class

Now, let's go back to

THE STORE

State Management and Vuex |

The Third Secret

  • Vuex Module Decorators:
$ npm install -D vuex-module-decorators
$ yarn add -D vuex-module-decorators
import { VuexModule, Module, Mutation, Action } from 'vuex-module-decorators';

export interface CounterState {
    counter: number;
}

@Module
export default class Counter extends VuexModule implements CounterState {
    public counter = 0;

    @Action({ commit: 'increment' })
    public add1(): number {
        return 1;
    }
    
    @Mutation
    private increment(delta: number): void {
        this.counter += delta;
    }

    get getCounter(): number {
        return this.counter;
    }
}

counter.ts

State Management and Vuex |

Vuex Module Decorators

import Vue from 'vue';
import Vuex, { StoreOptions } from 'vuex';
import Counter from './counter';

Vue.use(Vuex);

export interface RootState {
    counter: Counter;
}

const store: StoreOptions<RootState> = {
  modules: {
    counter,
  },
};

export default new Vuex.Store<RootState>(store);

store.ts

Sass variables in

VUE

Sass variables in Vue |

  • You could use PostCss instead. But should you?

A few details first

  • This is applicable to vue-cli created projects.
  • The many style flavors of Vue.js
  • Why would you want global variables?
module.exports = {

  publicPath: './',

  css: {
    loaderOptions: {
      sass: {
        data: `@import '@/styles/variables.scss';`,
      },
    },
  },
};

vue.config.js

Sass variables in Vue |

Here's how to do it

Packing with

ELECTRON

Packing with Electron |

  • Electron is a way to package your project as an app.

What? Why?

  • It's gives you control over the version of Chromium.
  • You can use it to standartize your deliverables.
  • It supports a huge array of plataforms.

Packing with Electron |

  • Vue-CLI Plugin Electron Builder

The last secret

$ npm install -S vue-cli-plugin-electron-builder
$ yarn add vue-cli-plugin-electron-builder

Packing with Electron |

Build Settings

THANK YOU.

We are hiring !

bruce@cantarim.com

linkedin.com/in/brucecantarim

TDC 2019 - Vue.js development in 2019

By Bruce Cantarim

TDC 2019 - Vue.js development in 2019

  • 621
Loading comments...