Vue.js - avancé

Objectifs

- Aborder les bonnes pratiques
- Développer des composants réutilisables
- Améliorer les performances de vos applications
- Comprendre les render functions (Vue.js sans templates!)
- Déveloper des mixins pour développer plus vite
- Avoir une approche plus déclarative
- Appréhender le Server Side Rendering avec Nuxt.
Les programmes, pré-requis et objectifs sont régulièrement mis à jour afin d'être au plus proche des avancées de la technologie. Vous pouvez consulter la dernière version en suivant le lien internet du programme : https://www.humancoders.com/formations/vue-js-avance

Programme de la formation

Les programmes, pré-requis et objectifs sont régulièrement mis à jour afin d'être au plus proche des avancées de la technologie. Vous pouvez consulter la dernière version en suivant le lien internet du programme : https://www.humancoders.com/formations/vue-js-avance
Jour 1: Créer des Composants wrappers avec des slots
Composants
- Nommage et bonnes pratiques
- Props: validation, surcharge
Mise en pratique : début du Moviez (plateforme de recherche de films)
- Events: payloads, casing
Mise en pratique : rating des films
- Usage de $attrs $listeners
- Two way binding
- Comprendre le modifier .sync
Mise en pratique : appliquer au Rating
- v-model sur les composants
- Customisation
- Encore plus loin avec les computed setter
- Composition
- Slots
- Slots nommés
- Slots scopés
Mises en pratique : composants de recherche
- Display cards as results (scoped slots)
- Responsible for fetching data
- Named slot when no results
- Use the v-for in slot
- Usage de template
- Cas pour les slots scopés
- Cas pour les v-for
Jour 2: Ecrire votre propre composant à base de render functions
Render functions
- Le Virtual DOM, createElement/h
- Les composants dynamiques
- Bonnes pratiques lazy loading de composants
- createElement
- Les options
- Passer des props
- Passer des events
- modifiers
- Slots
- Attributs spéciaux
- slot
- ref
- key
- directives
Mise en pratique : rating en render function
- Redistribution de $slots et $scopedSlots
- Usage de scoped slots pour de la logique
Mise en pratique : reimplement vue-promised
- Autres usages
- vue-virtual-scroller
- vue-local-scope
- Media queries
- 3D
- Vue canvas avec vue-konva
Composants fonctionnels
- Quand est ce que les utiliser
- Caveats
- Pas d'instance
- Re rendering
- Evénements
Mise en pratique : montrer la différence de performance pour MovieCard
Comment marche la compilation de template
Astuces pour débugger
Jour 3: Tests et Composition API
- Les Mixins
- Pourquoi l'api de Composition est meilleur
- Usage dans Vue 2.x
- setup dans les composants
- Accès global via Vue.prototype
Mise en pratique : simple \$t function to translate keys
- keep-alive
- Cas d'usage
- Include / exclude
Mise en pratique : refonte du composant de recherche avec l'api de composition
- Abstraction
- Réutilisation
- Tests unitaires
- Jest + @vue/test-utils
- mount ou shallowMount?
- Comment aller plus vite avec les Snapshot testing
Mises en pratique : tests
- MovieCard
- Composant Search
- Mocking de plugins
- Mocking du store
- Mocking du router.

Validation et sanction

Attestation de formation

Type de formation

Non certifiante

Sortie

Sans niveau spécifique