Deviens un ninja avec Vue (extrait gratuit)

La sixième version de la spécification a atteint son état final en 2015. Il est donc supporté par les navigateurs modernes, mais il y a encore des navigateurs qui ne supportent pas toute la spécification, ou qui la supportent seulement partiellement. Et bien sûr, avec une spécification maintenant annuelle (ES2016, ES2017, etc.), certains navigateurs seront toujours en retard. Ainsi, on peut se demander à quoi bon présenter le sujet s’il est toujours en pleine évolution ? Et tu as raison, car rares sont les applications qui peuvent se permettre d’ignorer les navigateurs devenus obsolètes. Mais comme tous les développeurs qui ont essayé ES2015+ ont hâte de l’utiliser dans leurs applications, la communauté a trouvé une solution : un transpileur.

Un transpileur prend du code source ES2015+ en entrée et génère du code ES5, qui peut tourner dans n’importe quel navigateur. Il génère même les fichiers sourcemap, qui permettent de déboguer directement le code ES2015+ depuis le navigateur. En 2015, il y avait deux outils principaux pour transpiler de l’ES2015+ :

Le code source de Vue était d’ailleurs transpilé avec Babel, avant de basculer en TypeScript pour la version 3.0. TypeScript est un langage open source développé par Microsoft. C’est un sur-ensemble typé de JavaScript qui compile vers du JavaScript standard, mais nous étudierons cela très bientôt.

Pour parler franchement, Babel est biiiiien plus populaire que Traceur aujourd’hui, on aurait donc tendance à te le conseiller. Le projet est maintenant le standard de-facto.

Si tu veux jouer avec ES2015+, ou le mettre en place dans un de tes projets, jette un œil à ces transpileurs et ajoute une étape à la construction de ton projet. Elle prendra tes fichiers sources ES2015+ et générera l’équivalent en ES5. Ça fonctionne très bien, mais, évidemment, certaines nouvelles fonctionnalités sont difficiles, voire impossibles à transformer, parce qu’elles n’existent tout simplement pas en ES5. Néanmoins, l’état d’avancement actuel de ces transpileurs est largement suffisant pour les utiliser sans problème, alors jetons un coup d’œil à ces nouveautés ES2015+.

Si tu pratiques le JS depuis un certain temps, tu dois savoir que la déclaration de variable avec var peut être délicate. Dans à peu près tous les autres langages, une variable existe à partir de la ligne contenant la déclaration de cette variable. Mais, en JS, il y a un concept nommé hoisting ("remontée") qui déclare la variable au tout début de la fonction, même si tu l’as écrite plus loin.

Ainsi, déclarer une variable name dans le bloc if :

est équivalent à la déclarer tout en haut de la fonction :

ES2015 introduit un nouveau mot-clé pour la déclaration de variable, let, qui se comporte enfin comme on pourrait s’y attendre :

L’accès à la variable name est maintenant restreint à son bloc. let a été pensé pour remplacer définitivement var à long terme, donc tu peux abandonner ce bon vieux var au profit de let. La bonne nouvelle est que ça doit être indolore, et que si ça ne l’est pas, c’est que tu as mis le doigt sur un défaut de ton code !

Tant que l’on est sur le sujet des nouveaux mot-clés et des variables, il y en a un autre qui peut être intéressant. ES2015 introduit aussi const pour déclarer des…​ constantes ! Si tu déclares une variable avec const, elle doit obligatoirement être initialisée, et tu ne pourras plus lui affecter de nouvelles valeurs ensuite.

Comme pour les variables déclarées avec let, les constantes ne sont pas hoisted ("remontées") et sont bien déclarées dans leur bloc.

Il y a un détail qui peut cependant surprendre le profane. Tu peux initialiser une constante avec un objet et modifier par la suite le contenu de l’objet.

Mais tu ne peux pas assigner à la constante un nouvel objet :

Même chose avec les tableaux :

Ce n’est pas un nouveau mot-clé, mais ça peut te faire tiquer en lisant du code ES2015. Il y a un nouveau raccourci pour créer des objets, quand la propriété de l’objet que tu veux créer a le même nom que la variable utilisée comme valeur pour l’attribut.

Exemple :

peut être simplifié en :

Tu peux aussi utiliser un autre raccourci, quand tu veux déclarer une méthode dans un objet :

qui peut être simplifié en :

Celui-là aussi peut te faire tiquer en lisant du code ES2015. Il y a maintenant un raccourci pour affecter des variables à partir d’objets ou de tableaux.

En ES5 :

Maintenant, en ES2015, tu peux écrire :

Et tu auras le même résultat. Cela peut être perturbant, parce que la clé est la propriété à lire dans l’objet et la valeur est la variable à affecter. Mais cela fonctionne plutôt bien ! Et même mieux : si la variable que tu veux affecter a le même nom que la propriété de l’objet à lire, tu peux écrire simplement :

Le truc cool est que ça marche aussi avec des objets imbriqués :

Et la même chose est possible avec des tableaux :

Bien entendu, cela fonctionne avec des tableaux de tableaux, des tableaux dans des objets, etc.

Un cas d’usage intéressant de cette fonctionnalité est la possibilité de retourner de multiples valeurs. Imagine une fonction randomPonyInRace qui retourne un poney et sa position dans la course.

Cette nouvelle fonctionnalité de déstructuration assigne la position retournée par la méthode à la variable position et le poney à la variable pony. Et, si tu n’as pas usage de la position, tu peux écrire :

Et tu auras seulement une variable pony.

Il est aussi possible d’assigner une valeur à la variable déstructurée si elle est undefined dans l’objet :

La variable position contient alors 1 dans ce cas.

JS a la particularité de permettre aux développeurs d’appeler une fonction avec un nombre d’arguments variables :

Ce dernier cas est celui qui nous intéresse. Souvent, on passe moins d’arguments quand les paramètres sont optionnels, comme dans l’exemple suivant :

Les paramètres optionnels ont la plupart du temps une valeur par défaut. L’opérateur OR (||) va retourner l’opérande de droite si celui de gauche est undefined, comme cela serait le cas si le paramètre n’avait pas été fourni par l’appelant (pour être précis, si l’opérande de gauche est falsy, c’est-à-dire undefined, 0, false, "", etc.). Avec cette astuce, la fonction getPonies peut ainsi être invoquée :

Cela fonctionnait, mais ce n’était pas évident de savoir que les paramètres étaient optionnels, sauf à lire le corps de la fonction. ES2015 offre désormais une façon plus formelle de déclarer des paramètres optionnels, dès la déclaration de la fonction :

Maintenant, il est limpide que la valeur par défaut de size sera 10 et celle de page sera 1 s’ils ne sont pas fournis.

La valeur par défaut peut aussi être un appel de fonction :

ou même d’autres variables, d’autres variables globales, ou d’autres paramètres de la même fonction :

Ce mécanisme de valeur par défaut ne s’applique pas qu’aux paramètres de fonction, mais aussi aux valeurs de variables, par exemple dans le cas d’une affectation déstructurée :

ES2015 introduit aussi une nouvelle syntaxe pour déclarer un nombre variable de paramètres dans une fonction. Comme on le disait précédemment, tu peux toujours passer des arguments supplémentaires à un appel de fonction, et y accéder avec la variable spéciale arguments. Tu peux faire quelque chose comme :

Mais tu seras d’accord pour dire que ce n’est ni élégant, ni évident : le paramètre ponies n’est jamais utilisé, et rien n’indique que l’on peut fournir plusieurs poneys.

ES2015 propose une syntaxe bien meilleure, grâce au rest operator …​ ("opérateur de reste").

ponies est désormais un véritable tableau, sur lequel on peut itérer. La boucle for …​ of utilisée pour l’itération est aussi une nouveauté d’ES2015. Elle permet d’être sûr de n’itérer que sur les valeurs de la collection, et non pas sur ses propriétés comme for …​ in. Ne trouves-tu pas que notre code est maintenant bien plus beau et lisible ?

Le rest operator peut aussi fonctionner avec des affectations déstructurées :

Le rest operator ne doit pas être confondu avec le spread operator ("opérateur d’étalement"), même si, on te l’accorde, ils se ressemblent dangereusement ! Le spread operator est son opposé : il prend un tableau et l’étale en arguments variables. Le seul cas d’utilisation qui me vient à l’esprit serait pour les fonctions comme min ou max, qui peuvent recevoir des arguments variables, et que tu voudrais appeler avec un tableau :

Une des fonctionnalités les plus emblématiques : ES2015 introduit les classes en JavaScript ! Tu pourras dorénavant facilement faire de l’héritage de classes en JavaScript. C’était déjà possible, avec l’héritage prototypal, mais ce n’était pas une tâche aisée, surtout pour les débutants…​

Maintenant, c’est les doigts dans le nez, regarde :

Les déclarations de classes, contrairement aux déclarations de fonctions, ne sont pas hoisted ("remontées"), donc tu dois déclarer une classe avant de l’utiliser. Tu as probablement remarqué la fonction spéciale constructor. C’est le constructeur, la fonction appelée à la création d’un nouvel objet avec le mot-clé new. Dans l’exemple, il requiert une couleur, et nous créons une nouvelle instance de la classe Pony avec la couleur "blue". Une classe peut aussi avoir des méthodes, appelables sur une instance, comme la méthode toString() dans l’exemple.

Une classe peut aussi avoir des attributs et des méthodes statiques :

Ces méthodes statiques ne peuvent être appelées que sur la classe directement :

Une classe peut avoir des accesseurs (getters, setters), si tu veux implémenter du code sur ces opérations :

Et, bien évidemment, si tu as des classes, l’héritage est possible en ES2015.

Animal est appelée la classe de base et Pony la classe dérivée. Comme tu peux le voir, la classe dérivée possède toutes les méthodes de la classe de base. Mais elle peut aussi les redéfinir :

Comme tu peux le voir, le mot-clé super permet d’invoquer la méthode de la classe de base, avec super.speed() par exemple.

Ce mot-clé super peut aussi être utilisé dans les constructeurs, pour invoquer le constructeur de la classe de base :

Les promises ("promesses") ne sont pas si nouvelles, et tu les connais ou les utilises peut-être déjà, parce qu’elles existaient déjà via des bibliothèques tierces. Mais, comme nous les utiliserons beaucoup avec Vue, et même si tu n’utilises que du pur JS sans Vue, on pense que c’est important de s’y attarder un peu.

L’objectif des promises est de simplifier la programmation asynchrone. Notre code JS est plein d’asynchronisme, comme des requêtes AJAX, et, en général, on utilise des callbacks pour gérer le résultat et l’erreur. Mais le code devient vite confus, avec des callbacks dans des callbacks, qui le rendent illisible et peu maintenable. Les promises sont plus pratiques que les callbacks, parce qu’elles permettent d’écrire du code à plat, et le rendent ainsi plus simple à comprendre. Prenons un cas d’utilisation simple, où on doit récupérer un utilisateur, puis ses droits, puis mettre à jour un menu quand on a récupéré tout ça.

Avec des callbacks :

Avec des promises :

J’aime cette version, parce qu’elle s’exécute comme elle se lit : je veux récupérer un utilisateur, puis ses droits, puis mettre à jour le menu.

Une promise est un objet thenable, ce qui signifie simplement qu’il a une méthode then. Cette méthode prend deux arguments : un callback de succès et un callback d’erreur. Une promise a trois états :

Quand la promesse est réalisée (fulfilled), alors le callback de succès est invoqué, avec le résultat en argument. Si la promesse est rejetée (rejected), alors le callback d’erreur est invoqué, avec la valeur rejetée ou une erreur en argument.

Alors, comment crée-t-on une promise ? C’est simple, il y a une nouvelle classe Promise, dont le constructeur attend une fonction avec deux paramètres, resolve et reject.

Une fois la promise créée, tu peux enregistrer des callbacks, via la méthode then. Cette méthode peut recevoir deux arguments, les deux callbacks que tu veux voir invoqués en cas de succès ou en cas d’échec. Dans l’exemple suivant, nous passons simplement un seul callback de succès, ignorant ainsi une erreur potentielle :

Quand la promesse sera réalisée, le callback de succès (qui se contente ici de tracer l’utilisateur en console) sera invoqué.

La partie la plus cool, c’est que le code peut s’écrire à plat. Si par exemple ton callback de succès retourne lui aussi une promise, tu peux écrire :

ou plus élégamment :

Un autre truc cool est la gestion d’erreur : tu peux définir une gestion d’erreur par promise ou globale à toute la chaîne.

Une gestion d’erreur par promise :

Une gestion d’erreur globale pour toute la chaîne :

Tu devrais sérieusement t’intéresser aux promises, parce que ça va devenir la nouvelle façon d’écrire des APIs, et toutes les bibliothèques vont bientôt les utiliser. Même les bibliothèques standards : c’est le cas de la nouvelle Fetch API par exemple.

Un truc que j’adore dans ES2015 est la nouvelle syntaxe arrow function ("fonction flèche"), utilisant l’opérateur fat arrow ("grosse flèche") : ⇒. C’est très utile pour les callbacks et les fonctions anonymes !

Prenons notre exemple précédent avec des promises :

Il peut être réécrit avec des arrow functions comme ceci :

N’est-ce pas super cool ?!

Note que le return est implicite s’il n’y a pas de bloc : pas besoin d’écrire user ⇒ return getRights(user). Mais, si nous avions un bloc, nous aurions besoin d’un return explicite :

Et les arrow functions ont une particularité bien agréable que n’ont pas les fonctions normales : le this reste attaché lexicalement, ce qui signifie que ces arrow functions n’ont pas un nouveau this comme les fonctions normales. Prenons un exemple où on itère sur un tableau avec la fonction map pour y trouver le maximum.

En ES5 :

Ça semble pas mal, non ? Mais en fait ça ne marche pas…​ Si tu as de bons yeux, tu as remarqué que le forEach dans la fonction find utilise this, mais ce this n’est lié à aucun objet. Donc this.max n’est en fait pas le max de l’objet maxFinder…​ On pourrait corriger ça facilement avec un alias :

ou en bindant le this :

ou en le passant en second paramètre de la fonction forEach (ce qui est justement sa raison d’être) :

Mais il y a maintenant une solution bien plus élégante avec les arrow functions :

Les arrow functions sont donc idéales pour les fonctions anonymes en callback !

Nous discutions des promesses précédemment, et il est intéressant de connaître un autre mot-clé introduit pour les gérer de façon plus synchrone : await.

Cette fonctionnalité n’est pas introduite par ECMAScript 2015, mais par ECMAScript 2017, et pour utiliser await, ta fonction doit être marquée comme async. Quand tu utilises le mot-clé await devant une promesse, tu pauses l’exécution de la fonction async, attends la résolution de la promesse, puis reprends l’exécution de la fonction async. La valeur retournée est la valeur résolue par la promesse.

On peut donc écrire notre exemple précédent en utilisant async/await comme ceci :

Et notre code a l’air complètement synchrone ! Une autre fonctionnalité assez cool de async/await est la possibilité d’utiliser un simple try/catch pour gérer les erreurs :

Note que, même si le code ressemble à du code synchrone, il reste asynchrone. L’exécution de la fonction est mise en pause puis reprise, mais, comme avec les callbacks, cela ne bloque pas le fil d’exécution : les autres événements peuvent être gérés pendant que l’exécution est mise en pause.

On va faire court : on a maintenant de vraies collections en ES2015. Youpi \o/ !

On utilisait jusque-là de simples objets JavaScript pour jouer le rôle de map ("dictionnaire"), c’est-à-dire un objet JS standard, dont les clés étaient nécessairement des chaînes de caractères. Mais nous pouvons maintenant utiliser la nouvelle classe Map :

On a aussi une classe Set ("ensemble") :

Tu peux aussi itérer sur une collection, avec la nouvelle syntaxe for …​ of :

Tu verras que cette syntaxe for …​ of est aussi supportée par Vue pour itérer sur une collection dans un template.

Construire des strings a toujours été pénible en JavaScript, où nous devions généralement utiliser des concaténations :

Les templates de string sont une nouvelle fonctionnalité mineure, mais bien pratique, où on doit utiliser des accents graves (backticks `) au lieu des habituelles apostrophes (quote ') ou apostrophes doubles (double-quotes "), fournissant un moteur de template basique avec support du multiligne :

Le support du multiligne est particulièrement adapté à l’écriture de morceaux d’HTML, comme nous le ferons dans nos composants Vue :

Une dernière fonctionnalité est la possibilité de les "tagger". Tu peux définir une fonction, et l’appliquer sur une chaîne de caractères template. Ici askQuestion ajoute un point d’interrogation à la fin de la chaîne de caractère :

Mais quelle est la différence avec une fonction classique alors ? Une fonction de tag reçoit en fait plusieurs paramètres :

Par exemple, si l’on a la chaîne de caractère template contenant les expressions suivantes :

alors la fonction de tag reçoit les différents morceaux statiques et dynamiques. Ici, nous avons une fonction de tag qui passe en majuscule les noms des protagonistes :

Passons à l’un des grands changements introduits : les modules.

Il a toujours manqué en JavaScript une façon standard de ranger ses fonctions dans un espace de nommage, et de charger dynamiquement du code. Node.js a été un leader sur le sujet, avec un écosystème très riche de modules utilisant la convention CommonJS. Côté navigateur, il y a aussi l’API AMD (Asynchronous Module Definition), utilisée par RequireJS. Mais aucun n’était un vrai standard, ce qui nous conduit à des débats incessants sur la meilleure solution.

ES2015+ a pour objectif de créer une syntaxe avec le meilleur des deux mondes, sans se préoccuper de l’implémentation utilisée. Le comité Ecma TC39 (qui est responsable des évolutions d’ES2015+ et auteur de la spécification du langage) voulait une syntaxe simple (c’est indéniablement l’atout de CommonJS), mais avec le support du chargement asynchrone (comme AMD), et avec quelques bonus comme la possibilité d’analyser statiquement le code par des outils et une gestion claire des dépendances cycliques. Cette nouvelle syntaxe se charge de déclarer ce que tu exportes depuis tes modules, et ce que tu importes dans d’autres modules.

Cette gestion des modules est fondamentale dans Vue, parce que tout y est défini dans des modules, qu’il faut importer dès que l’on veut les utiliser. Supposons que l’on veuille exposer une fonction pour parier sur un poney donné dans une course et une fonction pour lancer la course.

Dans races.service.js:

Comme tu le vois, c’est plutôt simple : le nouveau mot-clé export fait son travail et exporte les deux fonctions.

Maintenant, supposons qu’un composant de notre application veuille appeler ces deux fonctions.

Dans un autre fichier :

C’est ce que l’on appelle un named export ("export nommé"). Ici, on importe les deux fonctions, et on doit spécifier le nom du fichier contenant ces deux fonctions, ici 'races.service'. Évidemment, on peut importer une seule des deux fonctions, si besoin avec un alias :

Et si tu veux importer toutes les fonctions du module, tu peux utiliser le caractère joker *.

Comme tu le ferais dans d’autres langages, il faut utiliser le caractère joker * avec modération, seulement si tu as besoin de toutes les fonctions ou la plupart. Et comme tout ceci sera prochainement géré par ton IDE préféré qui prendra en charge la gestion automatique des imports, on n’aura plus à se soucier d’importer les seules bonnes fonctions.

Avec un caractère joker, tu dois utiliser un alias, et j’aime plutôt ça, parce que ça rend le reste du code plus lisible :

Si ton module n’expose qu’une seule fonction, ou valeur, ou classe, tu n’as pas besoin d’utiliser un named export, et tu peux bénéficier de l’export par défaut, avec le mot-clé default. C’est pratique pour les classes notamment :

Note l’absence d’accolade pour importer un export par défaut. Tu peux l’importer avec l’alias que tu veux, mais pour être cohérent, c’est mieux de l’importer avec le nom du module (sauf évidemment si tu importes plusieurs modules portant le même nom, auquel cas, tu devras donner un alias pour les distinguer). Et, bien sûr, tu peux mélanger l’export par défaut et l’export nommé, mais un module ne pourra avoir qu’un seul export par défaut.

En Vue, tu utiliseras beaucoup de ces imports dans ton application. Chaque composant et service sera une classe, généralement isolée dans son propre fichier et exportée, et ensuite importée à la demande dans chaque autre composant.

Voilà qui conclue notre rapide introduction à ES2015+. On a zappé quelques parties, mais si tu as bien assimilé ce chapitre, tu n’auras aucun problème à coder ton application en ES2015+. Si tu veux approfondir, je te recommande chaudement Exploring JS par Axel Rauschmayer, ou Understanding ES6 par Nicholas C. Zakas. Ces deux ebooks peuvent être lus gratuitement en ligne, mais pense à soutenir ces auteurs qui ont fait un beau travail ! En l’occurrence, j’ai relu récemment Speaking JS, le précédent livre d’Axel, et j’ai encore appris quelques trucs, donc si tu veux rafraîchir tes connaissances en JS, je te le conseille vivement !

Tu sais probablement que les applications Vue peuvent être écrites en ES5, ES2015+, ou TypeScript. Et tu te demandes peut-être qu’est-ce que TypeScript, et ce qu’il apporte de plus.

JavaScript est dynamiquement typé. Tu peux donc faire des trucs comme :

Et ça fonctionne. Ça offre plein de possibilités : tu peux ainsi passer n’importe quel objet à une fonction, tant que cet objet a les propriétés requises par la fonction :

Cette nature dynamique est formidable, mais elle est aussi un handicap dans certains cas, comparée à d’autres langages plus fortement typés. Le cas le plus évident est quand tu dois appeler une fonction inconnue d’une autre API en JS : tu dois lire la documentation (ou pire le code de la fonction) pour deviner à quoi doivent ressembler les paramètres. Dans notre exemple précédent, la méthode printColor attend un paramètre avec une propriété color, mais encore faut-il le savoir. Et c’est encore plus difficile dans notre travail quotidien, où on multiplie les utilisations de bibliothèques et services développés par d’autres. Un des co-fondateurs de Ninja Squad se plaint souvent du manque de type en JS, et déclare qu’il n’est pas aussi productif, et qu’il ne produit pas du code aussi bon qu’il le ferait dans un environnement plus statiquement typé. Et il n’a pas entièrement tort, même s’il trolle aussi par plaisir ! Sans les informations de type, les IDEs n’ont aucun indice pour savoir si tu écris quelque chose de faux et les outils ne peuvent pas t’aider à trouver des bugs dans ton code. Bien sûr, nos applications sont testées et Vue a toujours facilité les tests, mais c’est pratiquement impossible d’avoir une parfaite couverture de tests.

Cela nous amène au sujet de la maintenabilité. Le code JS peut être difficile à maintenir, malgré les tests et la documentation. Refactoriser une grosse application JS n’est pas chose aisée, comparativement à ce qui peut être fait dans des langages statiquement typés. La maintenabilité est un sujet important, et les types aident les outils, ainsi que les développeurs, à éviter les erreurs lors de l’écriture et la modification de code.

Vue commença comme un pur framework JavaScript, mais les contributeurs voulaient nous aider à écrire du meilleur JS en ajoutant des informations de type à notre code. Ce n’est pas un nouveau concept pour JS, c’était même le sujet de la spécification ECMAScript 4, qui a été abandonnée.

C’est pourquoi Vue supporte TypeScript, le langage de Microsoft, depuis Vue 2.0. Le support de TypeScript dans Vue 2.0 n’était cependant pas parfait. Quand Vue 3.0 a été annoncé, l’une des grandes nouveautés était le support amélioré de TypeScript : en fait, le framework lui-même est maintenant écrit en TypeScript.

Je pense que c’était la meilleure chose à faire pour plusieurs raisons. TypeScript est très populaire, avec une communauté et un écosystème actifs. Nous l’utilisons beaucoup pour construire nos applications front-end, et, honnêtement, c’est un très bon langage.

TypeScript est un projet de Microsoft, mais ce n’est pas le Microsoft de l’ère Ballmer et Gates. C’est le Microsoft de Nadella, celui qui s’ouvre à la communauté, et donc, à l’open-source.

Mais la raison principale de parier sur TypeScript est le système de types qu’il offre. C’est un système optionnel qui vient t’aider sans t’entraver. De fait, après avoir codé quelque temps avec, il est difficile de revenir à du pur JavaScript. Tu peux toujours écrire des applications Vue juste en utilisant JavaScript, mais TypeScript améliore vraiment l’expérience.

Comme je le disais, j’aime beaucoup ce langage, et on jettera un coup d’œil à TypeScript dans le chapitre suivant. Tu pourras ainsi lire et comprendre n’importe quel code Vue, et tu pourras décider de l’utiliser, ou pas, ou juste un peu, dans tes applications.

Si tu te demandes "mais pourquoi avoir du code fortement typé dans une application Vue ?". D’après notre expérience, la raison principale est la facilité de refactoring. On a généralement des types qui représentent nos entités métiers : un User, un Account, une Invoice, etc. Mais il est assez rare d’avoir une modélisation parfaite au premier essai. Au cours du temps, les entités évoluent, grossissent, se divisent en d’autres entités. Les champs sont renommés, et dans une application JavaScript, tu n’as pas vraiment de garantie que tu n’as pas cassé la moitié de tes pages…​ C’est là où TypeScript brille : le compilateur va te guider dans les changements à faire et tu dormiras paisiblement la nuit.

C’est pourquoi nous allons passer un peu de temps à apprendre TypeScript (TS). Et peut-être qu’un jour le système de type sera approuvé par le comité de standardisation, et il sera normal d’avoir de vrais types en JS.

Il est temps désormais de se lancer dans TypeScript !

La syntaxe pour ajouter des informations de type en TypeScript est basique :

Les différents types sont simples à retenir :

Dans ces cas, les types sont facultatifs, car le compilateur TS peut les deviner depuis leur valeur (c’est ce que l’on appelle l’inférence de type).

Le type peut aussi être défini dans ton application, avec, par exemple, la classe suivante Pony :

TypeScript supporte aussi ce que certains langages appellent des types génériques, par exemple avec un Array :

Cet Array ne peut contenir que des poneys, ce qu’indique la notation générique <>. On peut se demander quel est l’intérêt d’imposer cela. Ajouter de telles informations de type aidera le compilateur à détecter des erreurs :

Et comment faire si tu as besoin d’une variable pouvant recevoir plusieurs types ? TS a un type spécial pour cela, nommé any.

C’est pratique si tu ne connais pas le type d’une valeur, soit parce qu’elle vient d’un bout de code dynamique, ou en sortie d’une bibliothèque obscure.

Si ta variable ne doit recevoir que des valeurs de type number ou boolean, tu peux utiliser l’union de types :

TypeScript propose aussi des valeurs énumérées : enum. Par exemple, une course de poneys dans ton application peut être soit ready, started ou done.

Un enum est en fait une valeur numérique, commençant à 0. Tu peux cependant définir la valeur que tu veux :

Depuis TypeScript 2.4, tu peux même donner une valeur sous forme de chaîne de caractères :

Cependant, pour être tout à fait honnêtes, nous n’utilisons pas d’enum dans nos projets : on utilise des unions de types. Elles sont plus simples et couvrent à peu près les mêmes usages :

TypeScript permet même de créer ses propres types, on pourrait donc faire comme suit :

Tu peux aussi spécifier le type de retour d’une fonction :

Si la fonction ne retourne rien, tu peux le déclarer avec void :

C’est déjà une bonne première étape. Mais, comme je le disais plus tôt, JavaScript est formidable par sa nature dynamique. Une fonction marchera si elle reçoit un objet possédant la bonne propriété :

Cette fonction peut être appliquée à n’importe quel objet ayant une propriété score. Maintenant comment traduit-on cela en TypeScript ? Facile !, on définit une interface, un peu comme la "forme" de l’objet.

Cela signifie que le paramètre doit avoir une propriété nommée score de type number. Tu peux évidement aussi nommer ces interfaces :

Tu verras que l’on utilise très souvent les interfaces dans le livre pour représenter nos entités.

On utilise également les interfaces pour représenter nos modèles métiers dans nos projets. Généralement, on ajoute un suffixe Model pour le montrer de façon claire. Il est alors très facile de créer une nouvelle entité :

Y’a un autre truc sympa en JavaScript : les paramètres optionnels. Si tu ne les passes pas à l’appel de la fonction, leur valeur sera undefined. Mais, en TypeScript, si tu déclares une fonction avec des paramètres typés, le compilateur te gueulera dessus si tu les oublies :

Pour montrer qu’un paramètre est optionnel dans une fonction (ou une propriété dans une interface), tu ajoutes ? après le paramètre. Ici, le paramètre points est optionnel :

Tu peux aussi décrire un paramètre comme devant posséder une fonction spécifique plutôt qu’une propriété :

La définition de cette interface serait :

Une classe peut implémenter une interface. Pour nous, un poney peut courir, donc on pourrait écrire :

Le compilateur nous obligera à implémenter la méthode run dans la classe. Si nous l’implémentons mal, par exemple en attendant une string au lieu d’un number, le compilateur va crier :

Tu peux aussi implémenter plusieurs interfaces si ça te fait plaisir :

Et une interface peut en étendre une ou plusieurs autres :

Une classe en TypeScript peut avoir des propriétés et des méthodes. Avoir des propriétés dans une classe n’est pas une fonctionnalité standard d’ES2015, c’est seulement possible en TypeScript.

Tout est public par défaut. Mais tu peux utiliser le mot-clé private pour cacher une propriété ou une méthode. Ajouter public ou private à un paramètre de constructeur est un raccourci pour créer et initialiser un membre privé ou public :

Ce qui est l’équivalent du plus verbeux :

Ces raccourcis sont très pratiques et nous allons beaucoup les utiliser en Vue !

Mais, si on travaille avec des bibliothèques externes écrites en JS, comment savoir les types des paramètres attendus par telle fonction de telle bibliothèque ? La communauté TypeScript est tellement cool que ses membres ont défini des définitions pour les types et les fonctions exposés par les bibliothèques JavaScript les plus populaires.

Les fichiers contenant ces définitions ont une extension spéciale :`.d.ts`. Ils contiennent une liste de toutes les fonctions publiques des bibliothèques. DefinitelyTyped est l’outil de référence pour récupérer ces fichiers. Par exemple, si tu veux utiliser la bibliothèque de test Jest dans ton application TypeScript, tu peux récupérer le fichier dédié depuis le repository directement avec NPM :

Maintenant, si tu te trompes dans l’appel d’une méthode Jest, le compilateur te le dira, et tu peux corriger !

Encore plus cool, depuis TypeScript 1.6, le compilateur est capable de trouver par lui-même ces définitions pour une dépendance si elles sont packagées avec la dépendance elle-même. De plus en plus de projets adoptent cette approche et Vue fait de même. Tu n’as donc même pas à t’occuper d’inclure ces interfaces dans ton projet Vue : le compilateur TS va tout comprendre comme un grand si tu utilises NPM pour gérer tes dépendances !

Ainsi mon conseil est d’essayer TypeScript. Tous mes exemples dans ce livre l’utiliseront à partir de maintenant, car Vue et tout l’outillage autour sont vraiment conçus pour en tirer parti.

Tu peux utiliser le mot-clé readonly (lecture seule) pour marquer une propriété d’un objet ou d’une classe comme étant…​ en lecture seule. De cette façon, le compilateur refusera de compiler du code qui tente d’assigner une nouvelle valeur à cette propriété :

Le mot-clé keyof peut être utilisé pour un type représentant l’union de tous les noms des propriétés d’un autre type. Par exemple, si tu as une interface PonyModel :

Tu veux écrire une fonction qui renvoie la valeur d’une propriété. Voici une première implémentation naïve :

Il y a deux problèmes ici :

C’est ici que keyof peut être utile. keyof permet de lister toutes les clés d’un type :

On peut donc utiliser ce type pour rendre getProperty plus strictement typée, en déclarant que :

On fait ici d’une pierre, deux coups :

Maintenant voyons comment nous pouvons utiliser keyof pour aller encore plus loin.

Disons que tu veux construire un type qui a exactement les mêmes propriétés que PonyModel, mais tu souhaites que chaque propriété soit optionnelle. Tu peux bien sûr le définir manuellement :

Mais on peut faire quelque chose de plus générique avec un mapped type, un "type de transformation" :

Le type Partial est une transformation qui applique le modificateur ? à chaque propriété du type ! En fait, Partial est suffisamment fréquent pour qu’il soit inclus dans TypeScript depuis la version 2.1, et il est déclaré comme ceci dans la bibliothèque standard.

TypeScript offre également d’autres types de transformation.

Les unions de types sont très pratiques. Disons que ton application a des utilisateurs connectés et des utilisateurs anonymes, et que, de temps en temps, tu dois faire une action différente selon le cas. Tu peux modéliser les entités comme ceci :

Je ne sais pas pour toi, mais je n’aime pas trop ces typages explicites as …​. Peut-on faire mieux ?

La première possibilité est d’utiliser un type guard, un gardien de types, une fonction spéciale dont le seul but est d’aider le compilateur TypeScript.

C’est mieux ! Mais on a toujours besoin de retourner une valeur par défaut, même si nous avons couvert tous les cas.

On peut légèrement améliorer la situation si l’on abandonne les gardiens de types et que l’on utilise une union de types à la place.

C’est encore mieux, car TypeScript comprend automatiquement le type utilisé dans la branche else.

Parfois, tu sais que ce modèle va grandir dans le futur, et que d’autres cas devront être gérés. Par exemple, si tu ajoutes un AdminUser. Dans ce cas, on peut utiliser un switch. Un switch sur une union de types ne compilera pas si l’un des cas n’est pas géré. Donc introduire notre AdminUser, ou un autre type plus tard, ajouterait automatiquement des erreurs de compilation dans tous les endroits de notre code où nous devons les gérer !

J’espère que ces astuces vous aideront dans vos projets. Penchons-nous maintenant sur les Web Components.

Les composants sont un vieux rêve de développeur. Un truc que tu prendrais sur étagère et lâcherais dans ton application, et qui marcherait directement et apporterait la fonctionnalité à tes utilisateurs sans rien faire.

Mes amis, cette heure est venue.

Oui, bon, peut-être. En tout cas, on a le début d’un truc.

Ce n’est pas complètement neuf. On avait déjà la notion de composants dans le développement web depuis quelque temps, mais ils demandaient en général de lourdes dépendances comme jQuery, Dojo, Prototype, AngularJS, etc. Pas vraiment le genre de bibliothèques que tu veux absolument ajouter à ton application.

Les Web Components essaient de résoudre ce problème : avoir des composants réutilisables et encapsulés.

Ils reposent sur un ensemble de standards émergents, que les navigateurs ne supportent pas encore parfaitement. Mais, quand même, c’est un sujet intéressant, même si on ne pourra pas en bénéficier pleinement avant quelques années, ou même jamais si le concept ne décolle pas.

Ce standard émergent est défini dans trois spécifications :

Note que les exemples présentés ont plus de chances de fonctionner dans un Chrome ou un Firefox récent.

Les éléments customs sont un nouveau standard qui permet au développeur de créer ses propres éléments du DOM, faisant de <ns-pony></ns-pony> un élément HTML parfaitement valide. La spécification définit comment déclarer de tels éléments, comment tu peux les faire étendre des éléments existants, comment tu peux définir ton API, etc.

Déclarer un élément custom se fait avec un simple customElements.define :

Et ensuite l’utiliser avec :

Note que le nom doit contenir un tiret, pour indiquer au navigateur que c’est un élément custom.

Évidemment ton élément custom peut avoir des propriétés et des méthodes, et il aura aussi des callbacks liés au cycle de vie, pour exécuter du code quand le composant est inséré ou supprimé, ou quand l’un de ses attributs est modifié. Il peut aussi avoir son propre template. Par exemple, peut-être que ce ns-pony affiche une image du poney, ou seulement son nom :

Si tu jettes un coup d’œil au DOM, tu verras <ns-pony><h1>General Soda</h1></ns-pony>. Mais cela veut dire que le CSS ou la logique JavaScript de ton application peut avoir des effets indésirables sur ton composant. Donc, en général, le template est caché et encapsulé dans un truc appelé le Shadow DOM ("DOM de l’ombre"), et tu ne verras dans le DOM que <ns-pony></ns-pony>, bien que le navigateur affiche le nom du poney.

Avec un nom qui claque comme celui-là, on s’attend à un truc très puissant. Et il l’est. Le Shadow DOM est une façon d’encapsuler le DOM de ton composant. Cette encapsulation signifie que la feuille de style et la logique JavaScript de ton application ne vont pas s’appliquer sur le composant et le ruiner accidentellement. Cela en fait l’outil idéal pour dissimuler le fonctionnement interne de ton composant, et s’assurer que rien n’en fuit à l’extérieur.

Si on retourne à notre exemple précédent :

Si tu essaies maintenant de l’observer, tu devrais voir :

Désormais, même si tu ajoutes du style aux éléments h1, rien ne changera : le Shadow DOM agit comme une barrière.

Jusqu’à présent, nous avions utilisé une chaîne de caractères pour notre template. Mais ce n’est habituellement pas la manière de procéder. La bonne pratique est de plutôt utiliser l’élément <template>.

Un template spécifié dans un élément <template> n’est pas affiché par le navigateur. Son but est d’être à terme cloné dans un autre élément. Ce que tu déclareras à l’intérieur sera inerte : les scripts ne s’exécuteront pas, les images ne se chargeront pas, etc. Son contenu peut être requêté par le reste de la page avec la méthode classique getElementById(), et il peut être placé sans risque n’importe où dans la page.

Pour utiliser un template, il doit être cloné :

Toutes ces spécifications constituent les Web Components. Je suis loin d’en être expert, et ils présentent toute sorte de pièges.

Comme les Web Components ne sont pas complètement supportés par tous les navigateurs, il y a un polyfill à inclure dans ton application pour être sûr que ça fonctionne. Ce polyfill est appelé web-component.js, et il est bon de noter qu’il est le fruit d’un effort commun entre Google, Mozilla et Microsoft, entre autres.

Au-dessus de ce polyfill, quelques bibliothèques ont vu le jour. Elles proposent toutes de faciliter le travail avec les Web Components, et viennent souvent avec un lot de composants tout prêts.

Parmi les initiatives notables, on peut citer :

Je ne vais pas rentrer dans les détails, mais tu peux facilement utiliser un composant existant. Supposons que tu veuilles embarquer une carte Google dans ton application :

Il y a une tonne de composants disponibles. Tu peux en avoir un aperçu sur https://www.webcomponents.org/.

Tu peux faire plein de trucs cools avec LitElement et les autres frameworks similaires, comme du binding bidirectionnel, donner des valeurs par défaut aux attributs, émettre des événements custom, réagir aux modifications d’attribut, répéter des éléments si tu fournis une collection à un composant, etc.

C’est un chapitre trop court pour te montrer sérieusement tout ce que l’on peut faire avec les Web Components, mais tu verras que certains de leurs concepts vont émerger dans la lecture à venir. Et tu verras sans aucun doute que Vue a été conçu pour rendre facile l’utilisation des Web Components aux côtés de nos composants Vue. Il est même possible d’exporter nos composants Vue sous forme de Web Components.

Vue s’est toujours présenté comme un framework évolutif qui, au contraire d’alternatives comme Angular ou React, peut être adopté progressivement. On peut parfaitement prendre une page HTML statique, ou une application basée sur jQuery, et y ajouter un peu de Vue.

Donc, pour commencer, j’aimerais montrer comme c’est simple de mettre en place Vue dans une page HTML.

Créons une page HTML vide index.html :

Ajoutons-y un peu de HTML que Vue devra gérer :

Les accolades autour de user font partie de la syntaxe de Vue. Elles indiquent que user doit être remplacé par sa valeur. Nous expliquerons tout cela en détails dans le prochain chapitre, pas d’inquiétude.

Si tu ouvres cette page dans ton navigateur, tu verras qu’elle affiche Hello {{ user }}. C’est normal : nous n’avons pas encore utilisé Vue.

Faisons-le. Vue est publié sur NPM et il existe des sites (appelés CDNs, pour Content Delivery Network) qui hébergent les packages NPM et permettent ainsi de les inclure dans nos pages HTML. Unpkg est l’un d’entre eux, et on peut donc l’utiliser pour ajouter Vue à notre page. Bien sûr, tu pourrais aussi choisir de télécharger le fichier et de l’héberger toi-même.

Si tu recharges la page, tu verras que Vue affiche un avertissement dans la console, nous informant que l’on utilise une version dédiée au développement. Tu peux utiliser vue.global.prod.js pour utiliser la version de production et faire disparaître l’avertissement. La version de production désactive toutes les validations sur le code, est minifiée, et est donc plus rapide et plus légère.

Il nous faut à présent créer notre application, avec la fonction createApp. Mais cette fonction a besoin d’un composant racine.

Pour créer ce composant, il nous suffit de créer un objet qui le définit. Cet objet peut avoir de nombreuses propriétés, mais pour l’instant, nous allons seulement y ajouter une fonction setup. Pas de panique, nous reviendrons en détails sur la définition d’un composant et sur cette fonction. Mais son nom est assez explicite : elle prépare le composant et Vue appellera cette fonction lorsque le composant sera initialisé.

La fonction setup ne fait que retourner un objet avec une propriété user et une valeur pour cette propriété. Si tu recharges la page, toujours pas de changement : il nous reste toujours à appeler createApp avec notre composant racine.

createApp crée une application qui doit être "montée", c’est-à-dire attachée à un élément du DOM. Nous utilisons ici la div avec l’identifiant app. Si tu recharges la page, tu devrais voir Hello Cédric s’afficher. Bravo, tu viens de créer ta première application Vue.

Peut-être pourrions-nous ajouter un autre composant ?

Créons un composant qui affiche le nombre de messages non lus. Il nous faut donc un nouvel objet UnreadMessagesComponent, avec une fonction setup similaire :

Cette fois, au contraire du composant racine dont la vue est directement définie par la div #app, nous voudrions définir un template pour le composant UnreadMessagesComponent. Il suffit pour cela de définir un élément script avec le type text/x-template. Ce type garantit que le navigateur ignorera simplement le contenu du script. On peut ensuite référencer le template par son identifiant dans la définition du composant.

On veut pouvoir insérer ce nouveau composant à l’intérieur du composant racine. Pour pouvoir faire ça, nous devons autoriser le composant racine à utiliser le composant unread messages, et lui assigner un nom en PascalCase.

On peut ensuite utiliser <unread-messages></unread-messages> (qui est la version dash-case de UnreadMessages) pour insérer le composant où on le veut.

En comparaison des autres frameworks, une application Vue est extrêmement simple à mettre en œuvre : juste du pur JavaScript et HTML. Pas d’outillage nécessaire. Les composants sont de simples objets. Même un développeur qui ne connaît pas Vue peut sans doute comprendre ce qui se passe. Et c’est l’une des forces du framework : c’est facile de démarrer, facile à comprendre et les fonctionnalités peuvent être apprises progressivement.

On pourrait se contenter de cette approche minimale, mais soyons réalistes : ça ne tiendra pas très longtemps. Trop de composants vont devoir être définis dans le même fichier. On voudrait aussi pouvoir utiliser TypeScript au lieu de JavaScript, ajouter des tests, de l’analyse de code, etc.

Nous pourrions installer et configurer toute une série d’outils nous-mêmes. Mais profitons plutôt du travail de la communauté et utilisons Vue CLI (qui a été le standard pendant de nombreuses années) ou l’outil maintenant recommandé, Vite.

La Vue CLI (Command Line Interface) est née pour simplifier le développement d’applications Vue. Elle permet de créer le squelette de l’application, et ensuite de la construire. Et elle offre un vaste écosystème de plugins. Chaque plugin ajoute une fonctionnalité spécifique, comme le support pour les tests unitaires, ou le linting, ou le support de TypeScript. La CLI a même une interface graphique !

L’une des caractéristiques de Vue CLI est de permettre d’écrire chaque composant dans un fichier unique avec l’extension .vue. Dans ce fichier, toutes les parties d’un composant sont définies : sa définition en JavaScript/TypeScript, son template HTML, et même ses styles CSS. Un tel fichier est appelé Single File Component, ou SFC.

Mais l’intérêt principal de la CLI est d’éviter d’avoir à apprendre et à configurer tous les outils qu’elle utilise (Node.js, NPM, Webpack, TypeScript, etc.), tout en restant flexible et configurable.

Mais la CLI est désormais en mode maintenance, et Vite est l’alternative recommandée. Explorons donc pourquoi.

Quand on écrit des applications modernes en JavaScript/TypeScript, on a souvent besoin d’un outil qui bundle (rassemble) tous les assets (le code, les styles, les images, les polices de caractères).

Pendant longtemps, Webpack a été le favori indiscutable. Webpack vient avec une fonctionnalité simple, mais très pratique : il comprend tous les types de module JavaScript qui existent (les modules ECMAScript modernes, mais aussi les modules AMD et CommonJS, des formats qui existaient avant le standard). Cette compréhension rend facile d’utilisation n’importe quelle bibliothèque que tu trouves sur Internet (le plus souvent sur NPM) : il y a juste besoin de l’installer, de l’importer dans un de tes fichiers, et Webpack s’occupe du reste. Même si tu utilises des bibliothèques avec des formats très différents, Webpack va joyeusement les convertir et packager tout ton code et le code de ces bibliothèques ensemble dans un seul gros fichier JS : le fameux bundle.

C’est une tâche très importante, parce que même si le standard a défini les modules ECMAScript en 2015, la plupart des navigateurs ne les supportent que depuis peu !

L’autre tâche de Webpack est aussi de t’aider pendant le développement, en fournissant un serveur de développement et en surveillant ton projet (il peut même faire du HMR, Hot Module Reloading, c’est-à-dire du rechargement de module à chaud). Quand quelque chose change, Webpack lit le point d’entrée de l’application (main.ts par exemple), puis il lit les imports et charge ces fichiers, puis il lit les imports de ces fichiers importés et les charge, et ainsi de suite récursivement. Tu vois l’idée ! Quand tout est chargé, il remet tout cela dans un grand fichier, contenant à la fois ton code et les bibliothèques importées depuis node_modules, en changeant le format des modules si besoin. Le navigateur recharge alors tout ce fichier pour afficher les changements 😅. Toute cette boucle peut prendre un certain temps quand on travaille sur des gros projets avec des centaines, voire des milliers de fichiers, même si Webpack vient avec un système de caches et d’optimisations pour être le plus rapide possible.

La CLI Vue (comme beaucoup d’autres outils) utilise Webpack pour la majeure partie de son travail, aussi bien quand on construit l’application avec npm run build, que quand on lance le serveur de développement avec npm run serve.

Ce qui est chouette, c’est que l’écosystème Webpack est extraordinairement riche en plugins et loaders : tu peux donc faire pratiquement ce que tu veux, même les trucs les plus improbables. D’un autre côté, une configuration Webpack peut rapidement devenir assez difficile à comprendre avec toutes ces options.

Si je parle de Webpack et ce que font les bundlers, c’est parce que de sérieuses alternatives ont émergé ces derniers temps, et il peut être assez difficile de saisir ce qu’elles font et quelles sont leurs différences. Pour être honnête, je ne suis pas sûr de comprendre tous les détails moi-même, et j’ai pourtant pas mal contribué aux CLIs Vue et Angular, toutes deux utilisant massivement Webpack ! Mais je tente quand même une explication.

Une alternative sérieuse est Rollup. Rollup entend faire les choses de façon plus simple que Webpack, en en faisant moins par défaut, mais souvent plus vite que Webpack. Son auteur est Rich Harris, qui est aussi l’auteur du framework Svelte. Rich a écrit un article assez populaire appelé "Webpack et Rollup : les mêmes, mais différents". Sa conclusion est "Utilise Webpack pour les applications, et Rollup pour les bibliothèques". En fait, Rollup peut faire quasiment tout ce que fait Webpack pour les builds de production, mais il ne vient pas avec un serveur de développement qui pourrait surveiller tes fichiers pendant que tu travailles.

Une autre super alternative est esbuild. À la différence de Webpack et Rollup, esbuild n’est pas lui-même écrit en JavaScript. Il est écrit en Go et compilé en code natif. Il a aussi été conçu avec le parallélisme en tête. Cela le rend bien plus rapide que Webpack et Rollup. Genre 10 à 100 fois plus rapide 🤯.

Pourquoi ne pas utiliser esbuild plutôt que Webpack alors ? C’est exactement ce qu’Evan You, l’auteur de Vue, a pensé quand il développait Vue 3. Il a eu une autre brillante idée. En 2018, Firefox a officiellement supporté les Modules ECMAScript natifs (souvent appelés "ESM natifs"). En 2019, ce fut au tour de Node.js, et des autres navigateurs principaux. De nos jours, ton navigateur personnel peut probablement comprendre les ESM natifs sans problème. Evan a imaginé un outil qui servirait les fichiers au navigateur au format ESM, laissant le gros du travail à esbuild quand il faut transformer les fichiers sources en fichier ESM si besoin (par exemple pour les fichiers TypeScript ou Vue, ou pour des modules dans un format plus ancien).

Vite (encore un mot français) était né.

L’idée derrière Vite est que, comme les navigateurs modernes supportent les modules ES, on peut maintenant les utiliser directement, au moins pendant le développement, plutôt que de générer un bundle.

Donc lorsque tu charges une page dans un navigateur quand tu développes avec Vite, tu ne charges pas un seul gros fichier JS contenant toute l’application : tu charges juste les quelques ESM nécessaires pour cette page, chacun dans leur propre fichier (et chacun dans leur propre requête HTTP). Si un ESM a des imports, alors le navigateur demande à Vite ces fichiers également.

Vite est donc principalement un serveur de développement, chargé de répondre aux requêtes du navigateur, en lui envoyant les ESM demandés. Comme on a peut-être écrit notre code en TypeScript, ou utilisé un SFC avec une extension .vue (voir plus loin), Vite doit parfois transformer ces fichiers sur notre disque en un ESM que le navigateur peut comprendre. C’est ici qu’esbuild intervient. Vite est bâti au-dessus d’esbuild et quand un fichier demandé a besoin d’être transformé, Vite demande à celui-ci de s’en occuper et envoie ensuite le résultat au navigateur. Si tu changes quelque chose dans un fichier alors Vite n’envoie que le module qui a changé au navigateur, au lieu d’avoir à reconstruire toute l’application comme le font les outils basés sur Webpack !

Vite utilise aussi esbuild pour optimiser certaines choses. Par exemple si tu utilises une bibliothèque avec des tonnes de fichiers, Vite "pré-bundle" cette bibliothèque en un seul fichier grâce à esbuild et l’envoie au navigateur en une seule requête plutôt que quelques dizaines/centaines. Cette tâche est faite une seule fois au démarrage du serveur, tu n’as donc pas à payer le coût à chaque fois que tu rafraîchis la page.

Le truc marrant est que Vite n’est pas vraiment lié à Vue : il peut être utilisé avec Svelte, React ou autre. En fait, certains frameworks recommandent même son utilisation ! Svelte, de Rich Harris, a été l’un des premiers à sauter le pas et recommande maintenant officiellement Vite.

esbuild est très fort pour la partie JS, mais il n’est pas (encore) capable de découper l’application en plusieurs morceaux, ou de gérer entièrement les CSS (alors que Webpack et Rollup le font par défaut). Il n’est donc pas adapté pour packager l’application pour la prod. C’est là que Rollup entre en jeu : Vite utilise esbuild pendant le développement, mais utilise Rollup pour le build de prod. Peut-être que dans le futur, Vite utilisera esbuild pour tout.

Vite est cependant plus qu’une simple enveloppe autour d’esbuild. Comme on l’a vu, esbuild transforme les fichiers très vite. Mais Vite ne lui demande cependant pas de faire ce travail à chaque fois qu’une page est rechargée : il utilise le cache du navigateur pour effectuer le moins de travail possible. Ainsi si tu affiches une page que tu as déjà chargé, elle sera affichée instantanément. Vite vient aussi avec plein d’autres fonctionnalités et un riche ensemble de plugins.

Une note importante : esbuild transpile TypeScript en JavaScript, mais il ne le compile pas : esbuild ignore complètement les types ! Ça le rend hyper rapide, mais cela veut donc dire que tu n’auras pas de vérification des types de la part de Vite pendant le développement. Pour vérifier que ton application compile, tu devras exécuter Volar (vue-tsc), généralement quand tu construis l’application.

Alors, tu as envie d’essayer ? Parce que moi oui !

Vite propose des exemples de projets pour React, Svelte et Vue, mais l’équipe Vue a également lancé un petit projet basé sur Vite appelé create-vue. Et ce projet est maintenant la façon recommandée de démarrer un nouveau projet Vue 3.

create-vue est donc bâti au-dessus de Vite et fournit des squelettes de projets Vue 3.

Pour démarrer, tu lances simplement :

La commande npm create quelquechose télécharge et exécute en fait le package create-quelquechose. Donc ici npm create vue exécute le package create-vue.

Tu peux alors choisir :

et ton projet est prêt !

Nous allons bien sûr explorer ces différentes technologies tout au long du livre.

Tu veux t’y mettre ?

Pour créer ta première application avec Vite, suis les instructions de l’exercice Getting Started  ! Il fait partie de notre Pack Pro, mais est accessible à tous nos lecteurs.

Terminé ?

Si tu as bien suivi les instructions (et obtenu un score de 100 % j’espère !), tu as à présent une application en place, qui fonctionne. Examinons quelques-uns de ses fichiers. Le point d’entrée de l’application est le fichier main.ts :

Il monte un composant App défini dans App.vue, qui ressemble à cela lorsqu’il est créé :

App.vue est un Single File Component. Un quoi ?

Un Single File Component (SFC) est un composant dont toutes les parties sont définies dans un seul fichier.

Il définit :

L’outillage compile le code TypeScript en JavaScript pour nous. Il compile aussi le template en JavaScript (nous expliquerons dans un prochain chapitre en quoi ça consiste). Le compilateur Vue, au contraire du navigateur, accepte et comprend les éléments en PascalCase, donc on peut utiliser <hello-world> ou <HelloWorld> pour le composant fils. Nous utiliserons la version PascalCase à partir de maintenant.

Comme nous l’avons vu dans l’exercice, Vite peut lancer les tests unitaires, les tests end-to-end, le linter, etc. Chaque exercice vient avec ses tests unitaires et end-to-end déjà écrits, ce qui te permettra de vérifier à chaque étape que ton code est correct. Et, comme Vite est extrêmement rapide, l’expérience de développement est super agréable 🚀.

Maintenant que nous avons appris à nous servir de l’outillage, et que nous sommes prêts à écrire plus de composants, passons à la syntaxe des templates.

The templating syntax

How to build components

Script setup

Slots

Advanced component patterns

How to build components

Forms

The many ways to define components

Script setup

Forms

Slots

Global

Style your components

Router

Advanced component patterns

Custom directives

State Management

Internationalization

From zero to something

Style your components

Testing your app

Lazy-loading

Performances

The templating syntax

Script setup

Composition API

State Management

Router

The many ways to define components

Script setup

Suspense

Global

The many ways to define components

Performances

The templating syntax

Forms

Style your components

Provide/inject

State Management

Animations and transition effects

How to build components

Forms

Suspense

Router

Forms

Slots

Directives

Router

Slots

The wonderful world of Web Components

How to build components

Under the hood

Global