Introduction et mise en place du framework
- Présentation de Svelte.
- Svelte versus autres frameworks.
- Examen d'un cas d’utilisation.
- Présentation du projet fil rouge : une filmothèque.
- Paramétrage de l’environnement.
- Création d'une application.
- Organisation des fichiers de Svelte.
Travaux pratiques
Visualisation des statistiques du site stateofjs.com. Paramétrage de l’éditeur, mise en place d’une application Svelte et analyse des fichiers.
Composants et syntaxes de base
- Mise en place d'un composant.
- Utilisation des accolades.
- Utilisation du data binding.
- Les variables et les méthodes réactives.
- Le traitement des évènements.
- Utilisation des tableaux et des objets.
- Ajout de styles et de classes.
- Insertion du HTML.
- Maîtrise des cycles de vie d'un composant.
- Imbrication de composants.
Travaux pratiques
Création de la première page de la filmothèque avec plusieurs composants.
Communication entre les composants
- Utilisation de if / else / else if.
- Utilisation de each.
- Ajout des clés.
- Communication par props et slots.
- Transmission d'une prop.
- Définition d'une valeur par défaut de prop.
- Transmission d'un objet.
- Utilisation des slots.
- Utilisation des slots nommés.
Travaux pratiques
Ajout de props et de slots pour personnaliser et faire communiquer les composants de l’application.
Aller plus loin avec les évènements
- Quand et comment utiliser les event modifiers ?
- Réagir à un évènement de composant enfant.
- Lancer un évènement personnalisé.
Travaux pratiques
Implémentations de réactions aux survols de vignettes de films (changements de vignettes) et aux clics sur vignettes (modification de l’interface avec affichage du film sélectionné).
Les formulaires
- Définition d'un formulaire.
- Mise en place des bindings d’inputs.
- Définition des bindings de checkboxes et de radios.
- Définition des bindings de selects.
- Définition des bindings de textarea.
- Validation d'un formulaire.
Travaux pratiques
Ajout de filtres dans la page listant les films.
Les stores
- Création et souscription à un store writable.
- Réalisation d'une autosouscription.
- Mise à jour des données du store.
- Création et souscription à un store readable.
- Utilisation des stores dérivés.
- Création et souscription à un custom store.
Travaux pratiques
Ajout d’un store général à la filmothèque.
Les APIs et les routers
- À propos des APIs.
- Connexion à une API tierce.
- Réalisation d'un appel API.
- Utilisation du bloc await.
- Exploration des différents routers.
- Exemple d’utilisation d’un routeur.
Travaux pratiques
Intégration des données provenant de l’API tierce « The Movie Database ». Ajout d’une page « fiche de film » à la filmothèque.
Les animations et les transitions.
- Ajout d'une transition.
- Ajout d'une animation.
Travaux pratiques
Amélioration de l’ergonomie en ajoutant des transitions douces à l’application.
3j
- 21h00 
Télécharger le programme
Partager cette formation