Vue.js en 2021

pascal @ rigaux.org

Plan

• Mes expériences
• Contexte
• Javascript récent
• Typescript
• npm
• Single Page Application
• Vue.js
• comparé à jQuery
• comparé à React & Angular
• Vue3
• outils & librairies

Mes expériences

• 2000-2009 : Perl, OCaml...
• 2010 : arrivée à la DSI de l'université Paris 1 (Panthéon Sorbonne)
  ➡ débuts en dev web (PHP, Java, Perl, Javascript)
• 2013 : un projet migré de JSF vers AngularJS
• 2015 : un projet créé en Node.js & AngularJS
• 2017 : plusieurs projets migrés de AngularJS à Vue.js
• 2021 : petits projets migrés de Vue 2 en Vue 3

Javascript récent

• class Meal { … }

• import { foo } from 'ma_lib.js'

• (e) => e+1

• `Hello ${name}`

• return { x, y }

• const { x, y } = position()

• { x, ...pos }

• pos?.x

• async, await

• return { foo() {} }

Javascript récent

Classes & this

class Meal {
    constructor(food) {
        this.food = food
    }
    
    eat() {
        const food = this.food
        this.food = null
        return food
    }
}

Javascript récent

Classes & arrow functions

class Meal {
    constructor(food) {
        this.food = food
    }

    eat() {
        setTimeout(function () {
            this.food = null // ERROR 
        }, 1000)
        return this.food
    }
}

class Meal {
    constructor(food) {
        this.food = food
    }
    
    eat() {
        setTimeout(() => {
            this.food = null // OK 
        }, 1000)
        return this.food
    }
}
 

Javascript récent

class Meal {
  constructor(food) {
    this.food = food
  }
  
  eat() {
    const food = this.food
    this.food = undefined
    return food
  }
}

const Meal =
 (food) => ({



  eat() {
    const food_ = food
    food = undefined
    return food_
  }
})

const Meal =
 (food) => {   


  const eat = () => {
    const food_ = food
    food = undefined
    return food_
  }
  return { eat }
}

• utilisé par la Composition API de Vue 3
• utilisé pour les React Hooks (exemple)

Javascript récent

Callback hell ?
résolu avec async/await !

Promise<T>

Deferred<T>

async function myAsyncF(…) { … }

suspend fun myAsyncF(…) { … }

await myAsyncF(…)

myAsyncF(…)

myAsyncF(…)

async { myAsyncF(…) }

Javascript récent

Tendances

• utilisation de Webpack/Rollup/esbuild pour bundle/minify/cache-buster (exemple)
• utilisation de Typescript
• utilisation de babel/esbuild/tsc pour écrire du Javascript récent qui tourne sur des vieux navigateurs

Typescript

• won over Dart/Flow (Google abandonne AngularDart, mais au profit de Flutter)
• de plus en plus de librairies sont en Typescript, d'autres fournissent leurs types (fichiers .d.ts) ou sont fournis sur DefinitelyTyped
• qques fonctionnalités en plus de Javascript, notamment les parameter properties, decorators (expérimental), JSX
• biggest gradual typing success (see also "dynamic" in C#/kotlin)
• vérifié à la compilation, mais ignoré à l'exécution
• les navigateurs gèrent des js.map pour les msgs console, pour le débogueur...

Typescript

Adapté à Javascript

• Permissif !

"" + 1
"" + (() => 1)
(1 as any)[0]

any is hell 🤮 but useful 🤫
toujours utiliser strict qui implique noImplicitAny
(mais peut-être désactiver "strictNullChecks" et "useUnknownInCatchVariables")

Typescript

Adapté à Javascript

• Puissant

  type StringOrNumber = string | number;
  type ProcessStates = "open" | "closed";
  type OddNumbersUnderTen = 1 | 3 | 5 | 7 | 9;

  capable de gérer : Union & Intersection types, Duck Typing, anonymous object types...

Typescript

class Meal {
  constructor(private food?: string) {}
  
  eat() {
    const food = this.food
    this.food = undefined
    return food
  }
}

const Meal =
 (food?: string) => ({

  eat() {
    const food_ = food
    food = undefined
    return food_
  }
})

const Meal =
 (food?: string) => {   

  const eat = () => {
    const food_ = food
    food = undefined
    return food_
  }
  return { eat }
}

npm

Le gestionnaire de paquets de node.js

• utilisé pour les outils (create-react-app, vue-cli, vite, webpack...)
  • ces outils sont en Javascript/Typescript, mais on commence à en voir en Go (esbuild) (binaires statiques)
  • gèrent notamment le transpiling, mais attention aux besoins en polyfills pour les vieux navigateurs
• utilisé pour télécharger les librairies client-side
  (react, vue, axios, lodash...) car Bower a perdu la course
• semver et package-lock.json (ou yarn.lock)

Single Page Application ?

Page web classique

Single Page Application ?

Page web classique

Single Page Application ?

Partial updates

Single Page Application ?

Mixte

Single Page Application ?

Single Page Application

Single Page Application

• toutes les actions sont faites en Ajax :
  ➡ on s'abstrait des contraintes des <form> HTML
  ➡ les données client->serveur peuvent être complexes
• templates transformés en javascript exécuté dans le navigateur
• routage avec URLs (grâce à History API)
• données de navigation conservées en mémoire dans le navigateur
• la session serveur ne stocke que le login ! re-log transparent
• debug facile dans le navigateur (instruction debugger)
• "Save as cURL" pour débugger l'API

SPA Javascript vs JSF

inconvénients de Vue/React/Angular

• le code serveur doit être plus fiable, le spoofing des paramètres d'entrée étant facile
• validateurs souvent dupliqués côté client
• rôles vérifiés côté client et côté serveur
• traductions côté client et un peu côté serveur (pour l'envoi de mails par exemple)

avantages

• réactivité de l'interface
• bonne intégration avec le javascript :)
• simple de faire des composants UI réutilisables
• plugins navigateur facilitant l'inspection des composants & état

SPA Javascript

inconvénients

• plus gourmand qu'une page web sans JS, notamment si utilisation de beaucoup de libraires ! (mais possibilité de charger dynamiquement les libs uniquement pour certaines URLs)
• indexation plus compliquée (pour les moteurs de recherche) : peut nécessiter SSR
• prévenir les clics doublés pendant l'attente
• nécessiter un navigateur récent (pas de MSIE avec Vue 3)

sécurité et mises à jour

Présentation de Vue.js

Vue.js

jQuery

Surcouche aplanissant les différences entre les navigateurs : moins utile depuis que les vieux IE sont morts

• sélecteurs à la CSS, manipulation DOM
  à la main ou moteur de template
• requêtes Ajax
  fetch ou librairie « axios »
• utilitaires (each, map, extend...)
  standard pour les Array
  standard avec Spread syntax pour les Objects
  pour le reste librairie lodash

jQuery - Vue.js

<div>
  <button id="button">Afficher</button>
  <div id="content">Long texte...</div>
</div>

<script>  
$('#content').hide();
$('#button').click(function() {
  $('#content').show();
});
</script>

<div id="app">
  <button @click="visible = true">Afficher>/button>
  <div v-if="visible">Long texte...>/div>
</div>
        
<script>  
new Vue({
  el: '#app',
  data: { visible: false }
});
</script>

jQuery - Vue.js

<div>
  <button id="button">Afficher</button>
  <div id="content">Long texte...</div>
</div>

<script>  
$('#content').hide();
$('#button').click(function() {
  $('#content').toggle();
  $('#button').text(
    $('#content').is(":visible") ? 'Cacher' : 'Afficher'
  );
});    
</script>

<div id="app">
    <button @click="visible = !visible">
        {{visible ? 'Cacher' : 'Afficher'}}
    </button>
    <div v-if="visible">Long texte...</div>
</div>
        
<script>  
new Vue({
  el: '#app',
  data: { visible: false }
});
</script>

A la découverte de Vue.js

Éléments de choix

Éléments de choix

Vue.js comparé à React

• automatic change detection (using Proxy) (mais un peu galère dans le debugger)
• two way data-binding using events : v-model
• moteur de template. En React danger d'avoir du HTML disséminé au milieu du code
• scoped CSS fourni avec SFC

Vue.js comparé à Angular

• templating un peu similaire (mais Angular manque v-else)
• props/events similaire à @Input/@Output
• change detection plus performant que Zone.js (lien, lien, lien)
• "computed" sans réel équivalent (lien)
• Virtual DOM vs Incremental DOM

• utilisation des classes + décoration optionnelles
• pas de lib HTTP
  Angular a les Observables... souvent trop complexes !
• pas de dependency injection (mais axios-mock-adapter)

Vue.js 3

• sorti en 2020 mais support migration en 2021
• écrit en Typescript, comme Angular
• meilleur support typescript
• Composition API, alternative à l'Options API
  • inspiré des React Hooks alternative aux Class Components (exemple) sortis en 2019
  • NB : différences importantes
  • <script setup>
• Change detection via Proxy : résout pbs de Vue 2 (avec un petit inconvénient)
• pas compatible Internet Explorer

Vue.js tooling

• vue-cli : comparable à create-react-app (mais plus customisable sans "eject") ou à Angular CLI
• mieux : 😍 Vite
  • super performant en dev :
    • esbuild pour les librairies
    • pas de bundling pour les sources, utilisation directe de l'import des modules
    • out-of-band typescript type checking
  • compatible React
  • envié par Angular

Vue.js tooling

• IDE recommandé pour Vue 3 : VSCode avec Volar
• 😍 Vue Devtools pour Chrome/Firefox
• Vuex, equivalent de Redux / NgRx. Pratique avec plugin navigateur : permet le voyage dans le temps
• Vue Router
• Component Testing avec Vue Test Utils
• Components library : comparatif (Element, Vuetify...)
• SSR pour SEO : possible mais je ne connais pas

The end!