Présentation - Valentin Brosseau

VueJS 2.0 ou VueJS 3.0 ?

Ici nous allons nous intéresser à la force de VueJS dans son ensemble.

Progressive

Qui se passe ou se développe progressivement ou par étapes.

PWA

Progressive Web Apps

Le monde de demain sera Web

Exemple de PWA

https://github.com/hemanth/awesome-pwa
https://mobile.twitter.com
https://m.facebook.com (volontairement bridé)

Bluffant n’est-ce pas ? (psst c’est du ReactJS)

Concrètement une PWA c’est quoi

Question

Pour tous, quelques soit le navigateur
Responsive
Indépendant du réseau (via des services Workers, fonctionne hors-ligne ou en ligne)
App-like
Toujours à jour
Sûre (HTTPS)
Découvrable et identifié comme application grâce au fichier manifest
Notifications, envoyer de l’information
Installable
Partageable (oui, c’est « juste » un lien)

Les points clefs

Le manifest (Lien)
Les services Workers (Lien)

Les acteurs

Google
Firefox
Microsoft
…

Repose sur le HTML5

Attention au support des navigateurs

VueJS, pour quoi faire…

Faire des PWA simplement (il y en a d'autres bien évidemment, en connaissez-vous ?)

Le créateur

Evan You
Ancien de chez Google
Depuis 2016 à temps plein pour Vue.JS

Historique

Création : 2013
Première version « stable » février 2014
V1.0 Octobre 2015
La version 2 toujours distribuée sur les CDN.
La version 3 arrive. Elle est en stable, mais l'écosystème est jeune.

Pourquoi VueJS

Et pas ReactJS ou Angular…

VueJS est « plus simple »
Le site de VueJS est plus clair ?
VueJS est plus léger.
VueJS peut être utilisé pour faire évoluer une application existante.

VueJS en quelques mots

Flexible
Performant
Apprentissage très simple
Orienté composants

Qui utilise VueJS

GitLab
Weex (Alibaba)
Baidu
Laravel
Moi à Playmoweb
…

Comment VueJS fonctionne

Virtual DOM (ne « re-dessine » que les zones modifiées)
Fonctionnement en composant
Des « .Vue » / Monofichier
Un cycle de vie complet pour chaque composant
Approche MVVM (Model View ViewModel)

Flow

Fonctionnement

Deux modes de fonctionnement

VueJS comme librairie
VueJS avec un bundler (Webpack, Rollup, Vite)

Comme librairie

L’objet VueJS

const app = Vue.createApp({
  // Options
});

// Montage de l'application
app.mount('#app');

Constructeur de l’objet
Propriétés et méthodes (mounted, et VOS méthodes)
Cycle de vie

const app = Vue.createApp({
  data() {
    return { compteur: 1 };
  },
  mounted() {
    console.log("Le compteur est : " + this.compteur);
  },
  methods: {
    increment() {
      this.compteur++;
    },
  },
});

// Là où l'application sera affichée
app.mount("#demo");

Un « vrai » exemple

Démo

Les directives (dans le template)

Les directives sont des attributs HTML propres à VueJS

v-on (ou plus simplement @)
v-bind
v-model
v-html
v-show (masque un élément avec la propriété display: css)
v-if
v-else
v-else-if
v-for

Les méthodes

Code utilisable dans votre objet. « Votre code », accessible via le this :

const app = Vue.createApp({
  data() {
    return { compteur: 1 };
  },
  methods: {
    message() {
      alert(`La valeur du compteur est ${this.compteur}`);
    },
  },
});

app.mount("#demo");

Mais comment l’appeler ?

<button @click="message">Cliquez ici</button>

Gestion des évènements suite

Exemple d'objet :

Vue.createApp({
  data() {
    return { compteur: 0 };
  },
  methods: {
    message(message) {
      alert(message);
    },
  },
}).mount("#demo");

<div id="demo">
  <button @click="message('yolo')">Yolo</button>
  <button v-on:click="compteur += 1"></button>
  <p>Vous avez cliqué : {{compteur}}</p>
</div>

Les conditions d’affichage

<div id="demo">
  <p v-if="compteur > 10">Vous avez cliqué plus de 10 fois</p>
  <p v-else>Vous avez cliqué moins de 10 fois</p>
</div>

Les listes / Boucles

<ul>
  <li v-for="(item, index) in items">{{item.message}}</li>
</ul>

À votre avis, comment doit-être la structure de la donnée ?

data: {
  items: [
    { message: "Message 1" },
    { message: "Message 2" },
    { message: "Message 3" },
  ];
}

Les évènements HTML / les touches de modifications

<!-- Arrêt de la propagation de l’évènement -->
<a @click.stop="clickEvent"></a>

<!--
  Le « submit » est intercepté, et le navigateur ne rechargera plus la page
-->
<form @submit.prevent="onSubmit"></form>

<!-- Il est possible de les chainer -->
<a @click.stop.prevent="clickMessage"></a>

<!-- Également disponible tab, delete, esc, space, ... -->
<input @keyup.enter="submit" />

Les « Watchers »

Observation des « Data », pour réagir en code aux modifications de l'état de votre objet.

Vue.createApp({
  data() {
    return { compteur: 1 };
  },
  watch: {
    compteur(newVal) {
      console.log(`La valeur est maintenant de ${newVal}`);
    },
  },
}).mount("#demo");

Etc.

VueJS c'est simple et très complet. La suite en pratique et sur le site de VueJS

VueJS « Deux modes » de fonctionnement

J’ajoute VueJS dans un développement (classique) existant (sans Webpack/Vite/Rollup)
Je crée une « application » JavaScript (avec Webpack/Vite/Rollup)

Premier usage, dans une « page web »

Librairie externe à ajouter au projet (« vuejs.js »).
S'utilise un peu comme jquery.
Le but rendre « réactif » un développement basique (Une partie de la page).
C'est puissant, et très simple. Un exemple.

Cas pratique

Créer une page Web comme… une application

Pour vous, qu'est-ce que cela veut dire ?

On est vraiment loin d’une page Web dans la conception

Gestion avec des imports
Gestion des dépendances
Similaire à une gestion classique (comme Java, .net…)

Les dépendances

Le package.json

Des dépendances pour la phase de développement.
Des dépendances utiles pendant le fonctionnement de l’application.
Gestion fine des versions (très important, pourquoi ?)
Les dépendances ont également des dépendances, etc.

Un composant

La force des VueJS

Mais c’est quoi

Un élément réutilisable
Code générique

Composant

Puissant car …

Un composant ce n'est pas que du JavaScript.

<script setup>
  import { ref } from 'vue'

  // Déclaration d'une variable observée
  const count = ref(0); 
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

C'est possible grâce à la puissance de Vite, Webpack ou Rollup.

Webpack…

C'est deux éléments importants

Webpack-dev-server

Utilisé pendant la phase de développement.
Serveur intégré
Surveille les changements (et recharge automatiquement)
Hot reload

Le « Module Bundler »

Assemble les « modules JavaScript ».
Concaténation « intelligente »
Découpe les JS pour la distribution
Assemble aussi des modules « css » (jusqu’aux images incluses)

Rollup

Assemble les « modules JavaScript ».
Concaténation « intelligente »
Découpe les JS pour la distribution
Assemble aussi des modules « css » (jusqu’aux images incluses)

Rollup est plus « simple » que Webpack, mais moins « complet ».
C'est le coeur de ViteJS.

Et pour VueJS

Confused

Le Bundleur est l'outil qui va assembler les modules JavaScript. Qui nous permet de créer des composants en n'indiquant que le fichier « .vue ».

Le composant c’est

Un fichier

Composition

Le template
Une CSS « scopée » / qui ne s’applique que pour le module
Gestion des préprocesseurs (Babel, Stylus, Sass, …)

Rollup et Webpack

Rechargement automatique
Sans perdre le contexte grâce au « Hot Reload »

Composant

Quelques différences avec les précédents exemples…

Version « librairie »

Vue.createApp({
  data() {
    return { demo: 1 };
  },
}).mount("#demo");

Version « composant »

<template>…</template>
<script setup>
  import { ref } from 'vue'

  // Déclaration d'une variable observée
  const count = ref(0); 
</script>

Sauf que …

Webpack et Rollup c’est « compliqué » à mettre en place

Zoom sur ViteJS

Chez VueJS ils ont créé ViteJS

Un outil de développement rapide.
Un outil de développement « simple ».
Gère les composants VueJS.
Gère le hot reload (HMR).

Sorcellerie

Comment fait-on ?

npm create vite@latest

Et on répond aux questions

Le projet est « initialisé »

Et c'est tout

Démo

C’est toujours mieux en vrai…

Lancement du code en Dev

$ npm run dev
… Lancement du serveur intégré …

Démo 1

Démo 2

Vue c'est les plugins

Le routeur (npm install vue-router@4)
Le store (npm install pinia)

Le router

Gestion des « routes »
Gestion des paramètres
Assemblage

Documentation

Les devs tools

Intégration dans le processus de développement
Permets de voir les « vue »
L’état de vue
Le « store »

Démo Dev Tools

Dev tools

Démo

Communication entre les .Vue

Événements natifs (comme les événements HTML)
Store (Pinia)
Des composants Fils (via les props)

Le « store »

Confused

Le store : Pinia

Gestionnaire d'état
Bibliothèque (optionel) à VueJS
Zone de stockage de données centralisée pour tous les composants dans une application
S'assurer que l'état reste « cohérent »
Visualisation de l’état grâce au dev-tools

Fonctionnement

VueX

Quand utiliser un « store »

Application multivue
Besoin de synchronisation entre les vues
Évènement global entre les vues

Démo store

Exemple simple

L’affichage

Mais je ne suis pas un graphiste

Triste

La solution Vuetify

Ensemble de composants pour l’interface
Respect Material Design
Responsive
Générique

VueTify

Mais c’est génial

WOW MAIS C'EST GENIAL

La documentation

Démo

Zoom sur VueJS 3

Un aperçu du futur

Pourquoi utiliser un bundler (Webpack) ?
Et pourquoi ne plus utiliser de bundler ?
La solution PikaPKG / Snowpack
Une autre solution par le créateur de vue : « Vite »

VueJS 3.X

Réécriture.
Fonctionnement très similaire.
TypeScript intégré.
Simplifier l'écriture de « gros composants ».

Gros changement l'observation des données

La méthode data() (à l'ancienne)
La méthode setup() (nouveau) (ou via <script setup>)

L'API de composition

Définition des données à observer.
Partager du code « d'initialisation » / « d'observation ».
Partager des méthodes « à ajouter à votre objet Vue ».

Deux exemples

setup: () => {
  // Déclaration d'une variable « observé » de type Int
  const count = ref(0);

  // Déclaration d'une seconde variable « observé » de type String
  const title = ref("Ceci est un titre");

  // Ne pas oublier de retourner les observations afin que VueJS réagisse au changement des variables en question.
  return { count, title };
};

En utilisant vueuse

import { useMouse, usePreferredDark, useLocalStorage } from '@vueuse/core'

export default {
  setup() {
    // tracks mouse position
    const { x, y } = useMouse()

    // is user prefers dark theme
    const isDark = usePreferredDark()

    // persist state in localStorage
    const store = useLocalStorage(
      'my-storage',
      {
        name: 'Apple',
        color: 'red',
      },
    )

    return { x, y, isDark, store }
  }
})

Une démo

npm create vite@latest

TypeScript ?

Permets de typer nos variables.
Complètement optionnel (mais je vous le conseille).

ViteJS

Permets la création de projets
Rapide
Simple
Ne fonctionnera que sur les navigateurs « récents »

VueJS 2 ou 3 ?

VueJS 2 est plus mature.
VueJS 3 est plus rapide.
VueJS 2 supporte IE11.
VueJS 2 intègre certaines fonctionnalités de VueJS 3.

C'est à vous de choisir, moi j'utilise de préférence VueJS 3. Et VueJS 2 pour les projets « plus anciens ».

Mettre en pratique

VueJS 3.0 + Vite

Des questions

(Il doit y en avoir énormément)

VueJS

Progressive JavaScript framework