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.
En savoir plus sur les localités en présentiel
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
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*

Envie d’en savoir plus sur cette formation ?

Documentez-vous sur la formation

Ces formations peuvent vous intéresser

Quelle est votre situation ?

Vous êtes ?

Veuillez choisir un lieu

Please fill out this field.

Please fill out this field.

Veuillez sélectionner un niveau de formation

Informez-vous gratuitement et sans engagement sur la formation.

Please fill out this field.

Please fill out this field.

Please fill out this field.

Veuillez saisir une adresse email

  • Vous voulez dire ?
  • ou plutôt ?

En cliquant sur "J'envoie ma demande", vous acceptez les CGU et déclarez avoir pris connaissance de la politique de protection des données du site maformation.fr

Haut de page