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

Apprendre à apprendre

VueJS

By Matthieu Mota

Made with Slides.com

VueJS

  • 467

More from Matthieu Mota