De base le HTML n'est pas hyper pratique pour gérer des applications en ligne. A part pour les champs de formulaires il lui manque l'équivalent des composants visuels utilisés dans les logiciels de développement logiciels classiques : boites de dialogue, fenêtres, contrôles en tous genres.
Des librairies existent côté client (JavaScript, TypeScript ou CSS) comme serveur afin de contourner le problème.
VueJS est l'une des solutions front-end pour gérer des modèles et automatiser l'affichage de leur contenu en fonction de données accessibles en JavaScript. Il suffit de quelques tags ou attributs dédiés pour gérer des boucles, conditions et liens entre éléments du DOM et variables du programme.
La prise en main de VueJS est relativement facile pour ses fonctionnalités de base. La doc est claire contrairement à son opposant du moment : ReactJS. Et le gros avantage de VueJS est qu'il génère des éléments du DOM. Tout est accessible depuis le code JavaScript. On n'est pas obligé de tout prévoir en amont avec un système de préprocessing comme avec ReactJS (usine à gaz pondue par Facebook pour ses besoins et passée en open source ensuite).
Dans cette vidéo je vous propose de reprendre l'exemple qui avait été fait avec Fetch API pour lire une liste de livre et j'utilise un bout de VueJS pour faire l'affichage.
Le lien entre la variable recevant le contenu de l'API et le bloc HTML affichant la liste se fait à l'aide d'un observeur. La modification de la variable déclenche automatiquement la mise à jour de la zone HTML.
Le code source reste clair et lisible. Ce que vous pouvez vérifier en le téléchargeant depuis ce dépôt de code.
Certaines informations n'ont pas été affichées. Vous devez vous connecter pour y accéder.
