Svelte - niveau avance
Human Coders
Non finançable CPF
Tout public
En ligne
Public admis
Salarié en poste
Demandeur d'emploi
Entreprise
Etudiant
Prix
1680 €
Durée
Nous contacter
Localité
En ligne
Vous pouvez suivre cette formation depuis chez vous ou depuis n’importe quel endroit à distance.
Objectifs
-Maîtriser la composition de composants
-Maîtriser les stores
-Maîtriser les liaisons (bindings) avancées
-Comprendre le contexte
-Créer des transitions
-Savoir animer des éléments
-Maîtriser les stores
-Maîtriser les liaisons (bindings) avancées
-Comprendre le contexte
-Créer des transitions
-Savoir animer des éléments
Programme
Jour 1
Rappels Svelte
- Comprendre la réactivité de Svelte
- Gérer les évènements
- Revoir le principe des stores
- Utiliser les slots
- Lier variables et éléments
Stores avancés
- Utiliser des stores dérivés pour obtenir des valeurs calculées en fonction d'autres stores
- Créer des stores personnalisés pour gérer des données spécifiques à l'application
- Réagir aux premiers et derniers abonnés d'un store
Composition avancée
- Utiliser des slots nommés pour enrichir la flexibilité d'un composant
- Comprendre comment transmettre des données d'un slot enfant à un slot parent grâce aux slots props pour augmenter l'interactivité
Éléments spéciaux
- Créer des groupes d'éléments sans ajouter de balises au DOM avec ``
- Se référer au composant actuel en utilisant ``
- Modifier dynamiquement un élément grâce à ``
- Afficher des composants dynamiquement avec ``
- Aborder d'autres éléments spéciaux pour améliorer une application
Mises en pratique
- Prendre en main de l'application existante*
- Améliorer le système d'inventaire à l'aide de stores dérivés et personnalisés*
- Réutiliser le composant de Slider pour d'autres types de situations avec les slots props*
- Utilisation d'éléments spéciaux pour enrichir l'application existante*
Jour 2
Liaisons avancées
- Manipuler les éléments media tels que l'image et la vidéo
- Obtenir les dimensions des éléments pour une gestion plus précise de l'interface
- Comprendre les particularités de `#each` pour l'itération de collections
- Référencer un élément pour une interaction plus directe
- Référencer une instance pour une communication efficace
Actions
- Mutualiser des fonctionnalités d'élément entre composants
API de contexte
- Comprendre le besoin de contexte pour partager des données entre composants
- Utiliser le contexte
Context module
- Partager une logique entre les instances d'un même composant
Transitions
- Définir des transitions personnalisées pour des effets visuels originaux
- Comprendre l'animation FLIP (First, Last, Invert, Play) pour des transitions fluides.
- Utiliser les transitions globales pour des animations cohérentes au sein de l'application
Mouvement
- Utiliser la fonction d'interpolation `tween` pour animer des éléments
- Utiliser la fonction `spring` pour animer des éléments de manière "élastique"
Mises en pratique
- Ajouter une liste d'objectifs à remplir
- Implémenter un système simple de traduction grâce au contexte*
- Ajouter des transitions pour rendre certaines interfaces plus dynamiques*
- Animer les Pokémons pour rendre la chasse plus difficile*
Rappels Svelte
- Comprendre la réactivité de Svelte
- Gérer les évènements
- Revoir le principe des stores
- Utiliser les slots
- Lier variables et éléments
Stores avancés
- Utiliser des stores dérivés pour obtenir des valeurs calculées en fonction d'autres stores
- Créer des stores personnalisés pour gérer des données spécifiques à l'application
- Réagir aux premiers et derniers abonnés d'un store
Composition avancée
- Utiliser des slots nommés pour enrichir la flexibilité d'un composant
- Comprendre comment transmettre des données d'un slot enfant à un slot parent grâce aux slots props pour augmenter l'interactivité
Éléments spéciaux
- Créer des groupes d'éléments sans ajouter de balises au DOM avec `
- Se référer au composant actuel en utilisant `
- Modifier dynamiquement un élément grâce à `
- Afficher des composants dynamiquement avec `
- Aborder d'autres éléments spéciaux pour améliorer une application
Mises en pratique
- Prendre en main de l'application existante*
- Améliorer le système d'inventaire à l'aide de stores dérivés et personnalisés*
- Réutiliser le composant de Slider pour d'autres types de situations avec les slots props*
- Utilisation d'éléments spéciaux pour enrichir l'application existante*
Jour 2
Liaisons avancées
- Manipuler les éléments media tels que l'image et la vidéo
- Obtenir les dimensions des éléments pour une gestion plus précise de l'interface
- Comprendre les particularités de `#each` pour l'itération de collections
- Référencer un élément pour une interaction plus directe
- Référencer une instance pour une communication efficace
Actions
- Mutualiser des fonctionnalités d'élément entre composants
API de contexte
- Comprendre le besoin de contexte pour partager des données entre composants
- Utiliser le contexte
Context module
- Partager une logique entre les instances d'un même composant
Transitions
- Définir des transitions personnalisées pour des effets visuels originaux
- Comprendre l'animation FLIP (First, Last, Invert, Play) pour des transitions fluides.
- Utiliser les transitions globales pour des animations cohérentes au sein de l'application
Mouvement
- Utiliser la fonction d'interpolation `tween` pour animer des éléments
- Utiliser la fonction `spring` pour animer des éléments de manière "élastique"
Mises en pratique
- Ajouter une liste d'objectifs à remplir
- Implémenter un système simple de traduction grâce au contexte*
- Ajouter des transitions pour rendre certaines interfaces plus dynamiques*
- Animer les Pokémons pour rendre la chasse plus difficile*
Envie d’en savoir plus sur cette formation ?
Documentez-vous sur la formation
Ces formations peuvent vous intéresser

DATA ANALYST | Titre RNCP niveau 7 Bac +5 | co-certifiée école MINES...
À DISTANCE
Avis du centre
Témoignages
Les formations les plus recherchées
Lyon
Toulouse
Marseille
Montpellier
Paris
Bordeaux
Dijon
Mâcon
Nantes
Rennes
Informatique CPF
Informatique en Ligne
Programmation
Programmation CPF
Programmation en Ligne
Developpeur web
Creation site internet
Webmaster
Integrateur web
Technicien informatique
Technicien support informatique
Administrateur systeme
Consultant en informatique
Spark
Technicien reseaux
Creation site internet Villiers-le-Bel
Developpeur web Villiers-le-Bel
Integrateur web Villiers-le-Bel
Programmation Villiers-le-Bel
Webmaster Villiers-le-Bel
Webmaster Beaumont-sur-Oise
Programmation Paris
Integrateur web Beaumont-sur-Oise
Developpeur web Paris
Creation site internet Paris