Vous souhaitez discuter avec nous à propos de votre projet de formation ?
Vous voulez plus d'information sur une formation ou notre fonctionnement ?
Rappel Email
Créez des applications web réactives et performantes grâce aux fonctionnalités avancées du framework Svelte
Nous pouvons organiser des sessions à d'autres dates ou dans d'autres villes (Bordeaux, Lille, Lyon, Marseille, Montpellier, Nantes, Nice, Paris, Strasbourg, Toulouse...)
Svelte est le framework JavaScript axé sur la compilation, qui transforme le code en JavaScript optimisé lors de la construction. Il privilégie la réactivité en générant automatiquement les mises à jour d'interface utilisateur en fonction des données pour garantir des performances élevées et un code plus léger.
Lors de cet enseignement pratique Svelte avancé, vous apprendrez à enrichir vos applications Svelte en utilisant ses fonctionnalités avancées telles que le contexte, les transitions ou encore les éléments spéciaux afin de produire des interfaces complexes simplement.
Cette formation Svelte avancé s'adresse aux développeur·ses utilisant déjà Svelte régulièrement, souhaitant explorer les fonctionnalités approfondies de ce framework .
Pour les développeurs·euses front-end débutant avec Svelte, la formation Svelte est faite pour vous. Pour celles et ceux voulant découvrir Svelte autrement, jetez un oeil à notre formation Sveltekit
Grâce à l'enrichissement d'une application pokedex, vous mettrez immédiatement en pratique les notions abordées : de l’amélioration du système d’inventaire à l’ajout d’une liste d’objectifs, en passant par l’ajout de transitions pour rendre vos interfaces plus dynamiques. À l'issue de la formation, l'application réalisée sera opérationnelle et pourra être utilisée comme modèle pour des projets à venir.
Toutes nos formations étant limitées à 6 participant·e·s par session, vous aurez donc un contact privilégié avec votre formateur, Romain Crestey, développeur curieux et passionné, enthousiaste de partager son expérience professionnelle lors des cours et durant les moments d’échanges informels au programme de cette formation.
.map
, .filter
, ...)async
/await
, ...)import
/export
)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 <svelte:fragment>
- Se référer au composant actuel en utilisant <svelte:self>
- Modifier dynamiquement un élément grâce à <svelte:element>
- Afficher des composants dynamiquement avec <svelte:component>
- 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
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
Romain est développeur web senior pour RadioFrance, et formateur Svelte et JS pour différents organismes.
Il fait également partie des administrateurs de la communauté Discord Svelte francophone, et maintient le projet de traduction de la documentation en français de Svelte.
Fan de Svelte, Typescript et NodeJs, il a également passé plusieurs années à développer des applications React.
Human Coders c'est un centre de formation pour développeurs avec :
Créez des applications web réactives et performantes grâce aux fonctionnalités avancées du framework Svelte
Svelte est le framework JavaScript axé sur la compilation, qui transforme le code en JavaScript optimisé lors de la construction. Il privilégie la réactivité en générant automatiquement les mises à jour d'interface utilisateur en fonction des données pour garantir des performances élevées et un code plus léger.
Lors de cet enseignement pratique Svelte avancé, vous apprendrez à enrichir vos applications Svelte en utilisant ses fonctionnalités avancées telles que le contexte, les transitions ou encore les éléments spéciaux afin de produire des interfaces complexes simplement.
Cette formation Svelte avancé s'adresse aux développeur·ses utilisant déjà Svelte régulièrement, souhaitant explorer les fonctionnalités approfondies de ce framework .
Pour les développeurs·euses front-end débutant avec Svelte, la formation Svelte est faite pour vous. Pour celles et ceux voulant découvrir Svelte autrement, jetez un oeil à notre formation Sveltekit
Grâce à l'enrichissement d'une application pokedex, vous mettrez immédiatement en pratique les notions abordées : de l’amélioration du système d’inventaire à l’ajout d’une liste d’objectifs, en passant par l’ajout de transitions pour rendre vos interfaces plus dynamiques. À l'issue de la formation, l'application réalisée sera opérationnelle et pourra être utilisée comme modèle pour des projets à venir.
Toutes nos formations étant limitées à 6 participant·e·s par session, vous aurez donc un contact privilégié avec votre formateur, Romain Crestey, développeur curieux et passionné, enthousiaste de partager son expérience professionnelle lors des cours et durant les moments d’échanges informels au programme de cette formation.
.map
, .filter
, ...)async
/await
, ...)import
/export
)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 <svelte:fragment>
- Se référer au composant actuel en utilisant <svelte:self>
- Modifier dynamiquement un élément grâce à <svelte:element>
- Afficher des composants dynamiquement avec <svelte:component>
- 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
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
Romain est développeur web senior pour RadioFrance, et formateur Svelte et JS pour différents organismes.
Il fait également partie des administrateurs de la communauté Discord Svelte francophone, et maintient le projet de traduction de la documentation en français de Svelte.
Fan de Svelte, Typescript et NodeJs, il a également passé plusieurs années à développer des applications React.
Human Coders c'est un centre de formation pour développeurs avec :
* Nombre de personnes ayant répondu au questionnaire de satisfaction sur cette formation depuis 2012