Deviens un ninja avec Vue

Deviens un ninja
avec Vue

Cet ebook t'aide à comprendre la philosophie de Vue 3, les outils (dont TypeScript, Vite, esbuild...), les librairies de l'écosystème (vue-router, @vue/test-utils, axios...) et chaque brique du framework de façon pragmatique. Dès la fin de la lecture, tu seras capable de démarrer ton projet et développer l'application de tes rêves !

Si tu veux passer la vitesse supérieure, un Pack Pro est disponible avec des exercices pour comprendre chaque étape essentielle de la construction d'une application. De quoi apprendre les bonnes pratiques, avoir des exemples de code pragmatiques et des tests pour tous les cas d'utilisation que tu peux rencontrer, et gagner des dizaines d'heures sur ton prochain projet !

Tous les exemples utilisent TypeScript et l'API Composition pour construire une application complète avec un router, des formulaires, des appels HTTP, des tests, etc.

Disponible en PDF, EPUB & HTML; Anglais & Français; Paiement PayPal ou CB via Stripe.

Acheter

J'ai déjà acheté cet ebook, mais je veux récupérer la dernière version.

Cet ebook est mis à jour régulièrement, voir l'historique des révisions. La version courante utilise Vue 3.5.13.

Ce que vous apprendrez

Découvrez les notions que nous étudierons dans ce livre

  • Vue moderne

    Le livre et les exercices se concentrent sur Vue moderne : API de Composition, script setup, et bien sûr TypeScript.

  • Comment ça fonctionne

    Tu découvriras bien sûr la syntaxe des templates, le routage, les tests, les formulaires. Mais le livre explique aussi comment le framework fonctionne, pourquoi certains choix sont meilleurs que d'autres, et les raisons derrière les choix d'architecture.

  • Bonnes pratiques

    Le livre et les exercices ont évolué, maturé et se sont améliorés en même temps que le framework, et grâce à notre longue expérience sur des projets réels. Gagne du temps en bénéficiant de cette expérience, de nos trucs et astuces et des meilleures pratiques.

  • Composants

    Apprend comment concevoir tes pages en les divisant en composants. Découvre les diverses manières de les faire collaborer et communiquer entre eux. Intègre des librairies de composants réutilisables dans ton application.

  • Tests

    Nous passerons aussi du temps à parler des tests, unitaires et de bout en bout, et à apprendre comment les écrire, les exécuter et les maintenir. Si tu optes pour le Pack Pro, tous les exercices consistent à faire passer des tests automatisés que nous avons écrits, et qui peuvent te servir d'inspiration pour écrire tes propres tests.

  • Performance

    La performance est au cœur de nombreux choix architecturaux faits par Vue. Tu apprendras le comment, mais aussi le pourquoi. Et nous nous assurerons que tu puisses écrire du code aussi efficace que possible sans tomber dans les pièges que l'optimisation peut apporter.

Table des matières

Voici tous les chapitres que tu pourras lire dans notre eBook. Tu peux aussi consulter l'historique des révisions ici.

  1. IntroductionGratuit
  2. Une rapide introduction à ECMAScript 2015+Gratuit
    • Transpileur
    • let
    • Constantes
    • Raccourcis pour la création d’objets
    • Affectations déstructurées
    • Paramètres optionnels et valeurs par défaut
    • Rest operator
    • Classes
    • Promises
    • (arrow functions)
    • Async/await
    • Set et Map
    • Template de string
    • Modules
    • Conclusion
  3. Un peu plus loin qu’ES2015+Gratuit
    • Types dynamiques, statiques et optionnels
    • Hello TypeScript
  4. Découvrir TypeScriptGratuit
    • Les types de TypeScript
    • Valeurs énumérées (enum)
    • Return types
    • Interfaces
    • Paramètre optionnel
    • Des fonctions en propriété
    • Classes
    • Utiliser d’autres bibliothèques
  5. TypeScript avancéGratuit
    • readonly
    • keyof
    • Mapped type
    • Union de types et gardien de types
  6. Le monde merveilleux des Web ComponentsGratuit
    • Le nouveau Monde
    • Custom elements
    • Shadow DOM
    • Template
    • Les bibliothèques basées sur les Web Components
  7. La philosophie de VueGratuit
  8. Commencer de zéroGratuit
    • Un framework évolutif
    • Vue CLI
    • Bundlers : Webpack, Rollup, esbuild
    • Vite
    • create-vue
    • Single File Components
  9. Syntaxe des templates
    • Interpolation
    • Utiliser d’autres composants dans un template
    • Lien de propriété avec v-bind
    • Événements avec v-on
    • Templates et TypeScript
    • Résumé
  10. Directives
    • Des conditions dans les templates avec v-if
    • Masquer du contenu avec v-show
    • Rendu unique avec v-once
    • Répéter des éléments avec v-for
    • Du contenu HTML avec v-html
    • Du contenu non interprété v-pre
    • Autres directives
  11. Créer des composants
    • Une propriété réactive avec ref
    • Une propriété réactive avec reactive
    • ref ou reactive
    • Dériver une valeur avec computed
    • Produire un effet de bord avec watchEffect et watch
    • Passer des props aux composants
    • Des événements spécifiques avec emit
    • Fonctions du cycle de vie
  12. API Composition
    • Une conception propre grâce à l’API Composition
    • Extraire de la logique commune
    • L’API Composition hors des composants
    • Un exemple de la communauté : VueUse
  13. Style des composants
    • Styles scoped
    • Styles module
    • v-bind en CSS
    • v-deep, v-global et v-slotted
    • PostCSS
    • Pre-processeurs CSS
  14. Les nombreuses façons de définir des composants
    • API Options
    • API de Composition
    • Script setup
    • API Classe
  15. script setup
    • Migrer un composant
    • Retour implicite
    • defineProps
    • defineEmits
    • defineOptions
    • Fermé par défaut et defineExpose
  16. Tester ton application
    • Tester c’est douter
    • Tests unitaires
    • Vitest
    • @vue/test-utils
    • Snapshot testing
    • Tests de bout en bout
    • Cypress
  17. Envoyer et recevoir des données avec HTTP
    • Obtenir des données
    • Options avancées
    • Intercepteurs
    • Tests
  18. Slots
    • Projection de contenu avec slot
    • Slots nommés
    • Contenu par défaut
    • Slot props
    • Slots typés avec defineSlots
  19. Suspense
    • Afficher une alternative
    • Gérer les erreurs avec onErrorCaptured
    • Événements
    • Suspense contre onMounted
    • script setup et await
  20. Le routeur
    • En route
    • Navigation
    • Paramètres
    • Routeur et Suspense
    • Passer les paramètres comme props
    • Redirections
    • Sélection de la route
    • Routes imbriquées
    • Gardes de navigation
    • Meta information
    • Tests avec vue-router-mock
  21. Chargement à la demande
    • Composants asynchrones
    • Composants asynchrones et Suspense
    • Chargement à la demande par le routeur
    • Grouper plusieurs composants dans le même bundle
  22. Formulaires
    • La directive v-model
    • De meilleurs formulaires avec VeeValidate
    • Composants de formulaire personnalisés
    • Macro defineModel
  23. Provide/inject
    • Une manière d’éviter les props passe-plat
    • Tester des composants qui utilisent inject
    • Providers hiérarchiques
    • Plugins
  24. Gestion d’état
    • Le pattern store
    • Les librairies flux-like
    • Pinia
    • Tester Pinia
    • Pourquoi utiliser un store ?
  25. Animations et effets de transition
    • Animations en pur CSS
    • Transitions d’entrée/sortie
    • Transitions dans les listes
    • Et plus encore !
  26. Patterns pour composants avancés
    • Références de template avec ref
    • Références de template avec useTemplateRef
    • Références de composant
  27. Directives personnalisées
    • Cycle de vie d’une directive
    • Valeur des directives
    • Argument des directives
    • Modificateurs des directives
  28. Internationalisation
    • Mise en place de vue-i18n
    • Traduction de textes
    • Messages paramétrisés
    • Pluralisation
    • Changer la locale
    • Formatage
    • Autres fonctionnalités (lazy-loading, support de Vite et plus)
  29. Sous le capot
    • Les changements de rendu
    • La compilation des templates
    • Le DOM virtuel
    • JSX
    • Réactivité
  30. Performances
    • Premier chargement
    • Taille des ressources
    • Faire un beau paquet : le bundle
    • Tree-shaking
    • Minification et élimination de code mort
    • Autres types de ressources
    • Compression
    • Chargement fainéant : le lazy-loading
    • Rendu côté serveur
    • Cache pour rechargement
    • Performances à l’exécution
    • key dans v-for
    • v-memo
    • Conclusion
  31. Ce n’est qu’un au revoir

Le Pack Pro

Passe à la vitesse supérieure en construisant un vrai projet, étape par étape !

Le Pack Pro te propose une série d'exercices qui permet de construire l'application PonyRacer de A à Z, en te frottant à tous les problèmes des applications JavaScript modernes. À chaque étape, tu reçois un jeu d'instructions correspondant à l'un des chapitres du livre, et un ensemble de tests unitaires et end-to-end à faire passer. Un module NodeJS que nous avons conçu sera là pour t'aider à analyser ton code et calculer ton score. A toi de résoudre le problème grâce à nos astuces ! Lorsque tu as terminé, ou si tu es bloqué, tu peux consulter la solution que nous avons élaborée. La plateforme te permet de suivre tes progrès, et t'informe lorsque nous mettons à jour les exercices. Tu peux alors passer à cette nouvelle version (gratuitement), et reprendre là où tu en étais. C'est un excellent moyen de suivre l'évolution des bonnes pratiques !

Un magnifique poney avec un look rétro

PonyRacer

Construis une application complète

Grâce au Pack Pro, tu apprendras à construire une application pour parier sur des courses de poneys (parce que tout le monde aime les poneys), mais surtout, tu apprendras tous les cas d'utilisation dont tu pourrais avoir besoin dans une véritable application Vue.

Liste des exercices

Voici toutes les leçons que tu pourras suivre avec notre Pack Pro.

  1. C'est parti !Gratuit

    Générons le squelette du projet, et commençons notre aventure !

  2. Quiz sur les templatesGratuit

    Un quiz facile pour commencer avec la syntaxe de templating. Prêt ?

  3. TemplatesGratuit

    Apprenez-en un peu plus sur les composants et la syntaxe de templating avec un nouveau composant pour le menu responsive.

  4. Liste des coursesGratuit

    Créez un nouveau composant pour afficher la liste des courses.

  5. Détail d'une courseGratuit

    Affichez un détail de course plus convivial, avec une liste de poneys.

  6. Propriétés calculéesGratuit

    Utilisez des propriétés `computed` dans vos composants.

  7. Composant poney

    Ajoutez un joli composant poney, avec une belle image en 8-bit et un événement personnalisé.

  8. Quiz sur les composants

    Vérifions si nous nous souvenons de tout ce dont nous avons besoin pour construire des composants.

  9. Fonctions de cycle de vie

    Extrayons de la logique et utilisons-la dans le hook `onMounted`.

  10. Script setup

    La syntaxe `script setup` est géniale, utilisons-la !

  11. HTTP

    Récupérez des données via HTTP depuis l'API REST de Ponyracer.

  12. Slots

    Construisez des composants d'interface avancés avec les slots.

  13. Suspense

    Gérez le chargement des données avec classe 😎.

  14. Quiz sur le router

    Vérifions vos connaissances sur le router !

  15. Router

    Ayez de belles URLs qui reflètent le contenu affiché en utilisant le Vue Router.

  16. Formulaire d'inscription

    Construisez notre premier formulaire en utilisant `v-model`.

  17. Formulaire de connexion

    Validation et erreurs avec `vee-validate`.

  18. Validateurs personnalisés dans les formulaires

    Ajoutez de la validation avec des validateurs intégrés et personnalisés.

  19. Gestion de l'état

    Affichez notre utilisateur connecté et son score avec l'aide du pattern Store.

  20. Se souvenir de moi et déconnexion

    Devoir se connecter à chaque fois est pénible : souvenons-nous de notre utilisateur pour la prochaine fois ! Nous avons aussi besoin d'un moyen de la/le déconnecter.

  21. Gestion de l'état avec Pinia

    Refactorons notre gestion de l'état pour utiliser Pinia 🍍

  22. Animations et transitions

    Ajoutez de belles animations et transitions dans notre application.

  23. HTTP avec authentification

    Certains points d'API REST sont sécurisés : voyons ce que nous devons faire pour les appeler, et comment utiliser les intercepteurs. Aussi une petite introduction à JSON Web Token.

  24. Websockets

    Affichez la course en direct avec des données en temps réel du serveur via WebSockets !

  25. Booster un poney

    Nous pouvons rendre un poney beaucoup plus rapide en cliquant dessus : une bonne excuse pour ajouter quelques arcs-en-ciel et apprendre un truc de test pour maîtriser le temps.

  26. Score utilisateur réactif

    Le score de notre utilisateur devrait se mettre à jour en temps réel. Un autre cas d'utilisation pour notre gestion de l'état utilisant Websocket.

  27. Routes protégées avec des gardes

    Utilisons des gardes pour protéger des parties de notre application.

  28. Vues imbriquées et redirections

    Une vraie application a souvent des vues imbriquées et des redirections.

  29. Quiz avancé sur le router

    Vérifions vos connaissances sur le router - partie 2 !

  30. Chargement à la demande

    Le router peut charger à la demande des parties de notre application. Voyons comment !

  31. Graphiques dans votre application

    Chaque application professionnelle a son graphique. Voyons comment Vue peut jouer avec Chart.js.

  32. Directive personnalisée

    Apprenez à construire une directive personnalisée pour simplifier nos templates

  33. Internationalisation

    Localisation, pluriel et traductions en Vue.

  34. Astuces de performance

    Vue est rapide, mais il reste quelques astuces à apprendre pour rendre notre application plus rapide.

  35. Passer en production

    Dernière étape pour livrer notre application ! Que devons-nous faire pour lancer notre produit ?

236Pages
1 409Acheteurs
513Packs Pro
1 603€ de dons à l'équipe de Vue

Extraits gratuits

Jette un oeil à ces extraits pour te faire une idée.

eBook

Lis les 8 premiers chapitres

EPUBPDFHTML

Pack Pro

Teste les 6 premiers exercices

Teste les exercices

Prix et packages

Ce livre est fourni en deux langues : l'anglais et le français. Le Pack Pro (notre plateforme en ligne pleine d'exercices) peut être acheté pour une équipe de toute taille, avec une réduction appropriée.

eBookPack Pro
Prix libre99,00 €
AcheterAcheter
PDF
ePUB
HTML
Anglais
Français
Exercices
Tests
Projet complet
Quiz
Code source de l'application

Foire aux questions

Comme tu as probablement une question angoissante en tête, on va essayer d'y répondre calmement

  • Cet ebook s'adresse à tous ceux qui veulent découvrir et/ou apprendre en profondeur Vue.js. Des étudiants débutants aux développeurs très expérimentés, en passant par des fans absolus d'autres frameworks (Angular, React) et des utilisateurs de Vue.js 2.x, tous ont trouvé dans ce livre des éléments pour progresser.
    Cela peut aussi être un bon cadeau à faire à un ami ! ;)

  • En bons adeptes des tests, chacun de nos bouts de code donnés en exemples sont analysés statiquement et testés unitairement. Cela nous permet, lors de la rédaction de ce livre, d'upgrader Vue.js à chaque nouvelle release, et de détecter automatiquement les changements non compatibles. Ensuite, cela te garantira que chaque bout de code est fonctionnel, et que les mises à jour de Vue.js n'ont rien cassé. Idem pour le Pack Pro, où le projet est régénéré intégralement à chaque nouvelle version, et chaque étape testée en détail.

  • On rédige ce livre en Asciidoc, et on utilise AsciiDoctor pour produire les formats attendus (PDF, EPUB, et HTML). Un build orchestré par Vite analyse les bouts de code en exemple, les teste tous unitairement, avant de les embarquer dans le texte source de l'ebook.

  • Soyons honnêtes : les ventes de ce livre ne payeront jamais le temps investi pour l'écrire (tous les auteurs de livres techniques te le diront).
    Mais nous sommes heureux de sponsoriser, même modestement, l'équipe de développement, qui n'est pas salariée par une grosse entreprise comme le sont celles de React et Angular. Tu pourras ainsi récompenser les auteurs pour leur travail, et les développeurs du framework, selon le ratio que tu veux.

  • Absolument pas.

  • Non, c'est la seule restriction : la revente et la redistribution sont interdites.

  • Nous ne recueillons que ton email, nécessaire pour l'envoi de ton achat, de ta facture et de quelques emails pour vous notifier d'une nouveauté dans l'ebook. Tu peux à tout moment demander la suppression de ton email de notre base de données (mais nous ne pourrons plus t'envoyer les mises à jour).

  • Oui, tu recevras une facture pour chaque achat. Et tu pourras même saisir les coordonnées spécifiques de ton entreprise si tu comptes lui faire suivre.

  • Bien sûr ! Il te suffit d'indiquer la quantité dont tu as besoin lors de l'achat, et tu auras une réduction en fonction. Tu pourras ensuite inscrire les membres de ton équipe un par un, pour leur permettre l'accès à la plateforme. Si ce n'est pas clair, envoie un email à hello+books@ninja-squad.com pour en discuter.

  • Merci de poser cette question ! :) Oui, nous donnons des formations sur Vue.js pour tous les niveaux, mais aussi sur d'autres sujets qui peuvent t'intéresser. Nos actions de formation sont également certifiées Qualiopi, ta formation peut donc être financée intégralement ou partiellement par ton OPCO.

L'auteur

Photo de Cédric Exbrayat

Cédric Exbrayat

Je suis un développeur web, un membre de l'équipe Angular qui s'intéresse aussi à Vue.js, et un des co-fondateurs de Ninja Squad. Toute notre petite entreprise est impliquée dans l'écriture de ce livre, écrivant certaines parties, testant le code, et donnant des retours.

Ninja Squad est uniquement composée de quatre développeurs, qui aident d'autres équipes à construire leurs projets, niveau backend comme frontend. La qualité du code est notre priorité, et en tant que développeurs expérimentés, les ninjas aiment partager leurs connaissances avec d'autres. Les livres comme celui-ci sont un bon moyen, mais nous écrivons aussi sur notre blog, nous donnons des formations à d'autres développeurs, et nous organisons des conférences, la plus chère à notre cœur étant MiXiT.

Notre soutien à Vue.js

Vue.js est gratuit, mais des développeurs indépendants le développent et le maintiennent !

Ninja Squad a choisi de soutenir les développeurs durant cette vente. Quand tu achèteras notre livre électronique, tu ne décideras pas seulement de combien tu veux le payer, mais aussi, si tu le désires, de combien tu veux donner à Vue.js. Notre société s'engage à reverser périodiquement l'ensemble des dons reçus.

Acheter « Deviens un ninja avec Vue »

Choisis ton produit
€ (TTC)
Pour les auteurs
42,00 € (100 %)
Pour l'équipe de Vue
0,00 € (0 %)
Saisis tes coordonnées