#4 - Construire un DOM Virtuel, les différentes méthodes de rendu et bien écrire ses tests : retour de la Vue.js Amsterdam 2023

Pour la première fois, Wanadev s’est rendu à la plus grosse conférence annuelle autour de Vue.js : la Vue.js Amsterdam 2023. J’ai eu l’honneur d’assister à la 5ème édition, couronnée par le retour d’Evan You, le créateur de Vue.js et Vite, en personne.

Dans cette série de quatre articles, je vais vous faire revivre ces deux jours de conférences. En les lisant, vous aurez l’impression d’y avoir assisté !

Cet article est le troisième des quatre, vous pourrez retrouver chaque partie de cette série ici :

• Partie 1
• Partie 2
• Partie 3
• Partie 4

Dans cet article nous allons voir comment construire un Virtual DOM, on parlera des différentes façons de faire du rendu dans le web, de comment écrire des bons tests et plein d’autres choses.

Beaucoup de sujets à traiter, alors, c’est parti !

Construire un Virtual DOM - Marc Backes (Replay)

Marc nous présente ce qu'est un Virtual DOM et comment en construire un !

Qu'est-ce qu'un DOM ?

DOM signifie "Document Object Model", c'est :

• une interface de programmation pour les documents HTML et XML.
• une représentation du document sous la forme d'un arbre de nœuds (nodes).
• manipulable et accessible avec JavaScript.

Qu'est-ce qu'un Virtual DOM ?

• c'est une représentation virtuelle du DOM réel.
• dans la mémoire du navigateur.
• il est synchronisé avec le DOM réel.
• c'est ce que Vue et bien d'autres frameworks utilisent !

Pourquoi faire ?

• ça permet de découpler la logique de rendu du DOM réel.
• c'est plus facile à manipuler et à inspecter.
• c'est facile à réutiliser en dehors du navigateur.

Comment ça marche ?

Comment créer son Virtual DOM ?

Il faut plusieurs ingrédients pour créer son Virtual DOM :

• une fonction "h" hyperscript qui, en gros, est du "JavaScript qui produit du HTML". Elle sert à créer des vnodes (nœuds virtuels).
• une fonction de montage dans le DOM : mount.
• une fonction de retrait du DOM : unmount.
• une fonction de mise à jour du DOM : patch.

La démonstration de Marc étape par étape, nous permet de comprendre comment implémenter ces différentes méthodes !

Vous pouvez retrouver l'implémentation de ces différentes méthodes sur le repo GitHub suivant : https://github.com/themarcba/vue-vdom

Construire un design system avec Chakra UI - Sybren Willemot (Replay)

Sybren fait le parallèle entre design system et un mélange tout préparé pour de la pâtisserie.

Ça permet d'aller plus vite dans un cas pour la cuisine, dans l'autre pour le développement de son produit !

Chakra UI a donc pour mission d'accélérer le processus de développement en proposant :

• une mise en oeuvre simple de design system
• une liste de composants
• de l'accessibilité
• un thème configurable et extensible
• une compatibilité avec Vue 3

S'ensuit une démonstration de comment on peut se servir de Chakra que je vous invite à visionner.

La saga des problèmes de rendu Web - Alba Silvente Fuentes (Replay)

Dans cette saga, Alba nous propose une vue d'ensemble des modes et stratégies de rendu Web avec leurs avantages et inconvénients.

Rendu côté client (Client Side Rendering)

Les plus :

• moins cher (pas de serveur).
• support hors-ligne (s'il n'y a pas d'APIs).
• UX dans l'application.

Les moins :

• mauvaise performance au premier rendu.
• accessibilité (JavaScript désactivé).

Rendu côté serveur (Server Side Rendering)

Les plus :

• amélioration des performances (charge initiale).
• amélioration de la sécurité.
• meilleur référencement (SEO).

Les moins :

• interactivité limitée.
• mauvais pour les connexions lentes.

Génération de sites statiques (Static Site Generation)

Les plus :

• performant (CDNs).
• pas cher.
• SEO
• amélioration de la sécurité.
• évolutif et facile à maintenir.

Les moins :

• interactivité limitée.
• authentification de l'utilisateur ou traitement des données.

Génération différée de sites (Deferred Site Generation)

Les plus :

• améliorations des temps de "build".
• conserver les avantages de la génération statique : SEO & performance.

Les moins :

• support limité.
• complexité accrue.

Régénération statique incrémentale (Increment Static Regeneration)

Les plus :

• prise en charge des données dynamiques (sans "rebuild").
• disponibilité (page de "fallback").
• temps de "build" plus rapide.

Les moins :

• support limité.

Rendu de bord (Edge Rendering)

Les plus :

• fonctionne mieux avec du contenu dynamique.
• évolutivité améliorée.
• réduit la latence du réseau.
• mise en cache en temps réel.

Les moins :

• flexibilité : utiliser plusieurs modes de rendu.

Rendu hybride (Hybrid Rendering)

• Il s'agit généralement d'une technique qui combine le rendu côté serveur et le rendu côté client (on appelle ça le rendu universel).
• Hybrid 2.0 : la stratégie de mise en cache par route. Avec cette stratégie, les routes peuvent être une page statique générée à la demande, revalidée, une SPA (Single Page Application) ou bien côté serveur.

Il existe beaucoup d'autres méthodes de rendu

Que choisir ?

Pour son projet, Alba a choisi la Jamstack. C'est une approche architecturale qui dissocie l'expérience web de la couche données et logique de l'application. Elle assure l'évolutivité, la flexibilité, la performance et la facilité de maintenance.

JAM :

• J = Javascript
• A = API
• M = Markup

Dans sa démonstration, Alba utilise pour la partie "J", Nuxt.js, pour le "A" Storyblok car c'est là où elle travaille et pour "M", Netlify !

E-Commerce aussi facilement qu'un composant UI - Ramona Schwering (Replay)

Ramona nous présente shopware/frontends un petit framework qui permet d'ajouter des fonctionnalités e-commerce dans son site web en se servant de ShopWare en tant que source de données.

Le projet se base techniquement sur Vue 3, Vite, Nuxt 3 et Tailwind.

Comment ça fonctionne concrètement ?

Ramona nous fait ensuite une démonstration de comment ça fonctionne avec une carte produit et un panier basique que je vous invite à visionner.

L'idée de Shopware est d'offrir des outils pour construire un e-commerce facilement grâce au pouvoir des composables tout en offrant à la fois une bonne expérience développeur et une bonne expérience utilisateur !

Écrire de (vrais) bons tests - Markus Oberlehner (Replay)

Markus nous fait une présentation sur comment faire du TDD quand on est un développeur Vue.js.

Tout d'abord, pourquoi écrire des tests ?

• Pour refactoriser en toute confiance !
• Pour écrire un meilleur code plus rapidement !
• Pour déployer le vendredi (si on a envie) !

C'est quoi le TDD ?

C'est :

1. écrire un test qui échoue.
2. implémenter une fonction qui permet au test de fonctionner.
3. refactoriser sa fonction.

Comment écrire de bons tests ?

1. Écrivez les tests en premier !
2. Découplez tout !

Découpler ?

Oui, découpler :

• le cadre pour réduire le coût du changement.

• les détails d'implémentation :

=> utiliser findByRole, findByLabelText, findByText plutôt que les sélecteurs CSS.

=> écrire ses propres méthodes d'utilitaires/tests.

• l'interface utilisateur :

=> comment ferait-on si on devait tester un assistant vocal ?

Grâce au découplage, notre test ressemblerait à ça :

Pourquoi découpler ?

• ça fournit une documentation de facto.
• on peut le partager avec un expert du domaine et il pourra comprendre ce que ça fait.

S'en est suivie une démonstration que je vous invite à visionner.

Merci d’avoir lu ce résumé de la seconde partie du deuxième et dernier jour de la Vue.js Amsterdam 2023.

Cet article était le dernier de la série consacrée au résumé de ces deux jours de conférences. Vous pouvez retrouver l’ensemble des articles ci-dessous :

1. Partie 1
2. Partie 2
3. Partie 3
4. Partie 4