Vue JS

Présentation

Développeur web freelance depuis 5 ans
http://www.boxydev.com
Expérience en agence web, E-Commerce (annonceur)
Formation Informatique et Autodidacte
Formateur et fan des OSS, contributeur à mes heures perdues
Solutions phares : Wordpress, Symfony, Magento, Prestashop, Angular, Vue JS, React JS
Langages : PHP, MySQL, HTML, CSS, JS
Outils : Git, Docker, Vagrant, Trello
Stack: ArchLinux, Gentoo, Mac OS (Unix addict)

Qu'est-ce que Vue JS ?

Framework JavaScript permettant de créer facilement des SPA (Single Page Application) ou des applications web réactives !

Vue JS est comparable à React mais n'est qu'une partie d'Angular. Vue JS ressemble un peu à Angular JS.

Caractéristiques de Vue JS

Fonctionnement très simple
Peut s'intégrer dans un site web existant
Performant
Peut devenir aussi puissant qu'Angular si on intègre bien l'écosystème
Crée par Evan You en 2014
Intégré nativement dans Laravel

Utilisation

La manipulation du DOM devient naturelle

<div id="app">
  <button @click="increment(-1)">-</button>
  <span>{{ count }}</span>
  <button @click="increment(1)">+</button>
</div>

import { createApp, ref } from 'vue/dist/vue.esm-bundler';

createApp({
  setup() {
    const count = ref(0);
    const increment = (value) => count.value += value;

    return {
      count,
      increment,
    };
  },
}).mount('#app');

Composants

Vue JS nous permet de créer des composants
Chaque composant est autonome
Code encore plus modulaire grâce aux plugins ou composables
Très forte réutilisabilité

<div id="app">
  <Counter></Counter>
  <Counter></Counter>
  <Counter></Counter>
</div>

import { createApp, ref } from 'vue';

const app = createApp({});

app.component('Counter', {
  setup() {
    const count = ref(0);
    const increment =
        (value) => count.value += value;

    return {
      count,
      increment,
    };
  },
  template: `
    <button @click="increment(-1)">-</button>
      <span>{{ count }}</span>
    <button @click="increment(1)">+</button>
  `,
});

app.mount('#app');

Tooling

NativeScript: Permet de construire une application mobile native avec Vue JS
Vetur: Extension VS Code
Vue Js devtools sur Chrome
Nuxt: Framework Vue JS
Inertia: Avec Laravel ou RoR

Comment démarrer ?

Quelques jours de formation
NodeJS et NPM
ES6/ES2015

NodeJS et NPM

NodeJS est une plateforme basée sur le moteur V8 JavaScript.
Permet d'écrire du JavaScript côté serveur au même titre que PHP, Ruby, etc...
Concept de séparation du code en module
Conséquence : NPM -> Gestionnaire de paquet/modules pour Node

Nouveautés ES6

let au lieu de var (éviter le "hoisting")
const pour les constantes
objet avec clé et valeur identique
Affectation déstructurées ({name, age} = {name: "Matthieu", age: 25})
Rest Operator ... (Arguments infinis)
for...of : Valeur et non index
Les classes
Promise
Arrow functions