A l’issue de cette formation, vous serez capable de :

• Décrire les principaux concepts liés au framework Svelte
• Ecrire une application Svelte à base de différents composants réactifs, la mettre au point et la proposer aux utilisateurs.

Jour 1

Présentation de Svelte

• Positionnement face à Vue.js, React et Angular
• Ce qui est nouveau par rapport aux trois autres frameworks
• Le compilateur
• Pour un code simple
• Pour un code très léger et rapide
• Architecture de Svelte
• Les bons cas d'utilisation de Svelte
• Installation de Svelte locale et en ligne
• Présentation de l'utilisation de l'IDE et ses extensions
• VS Code, Svelte for VS Code et Svelte Intellisense

Exemples de travaux pratiques (à titre indicatif)

• Installation de Svelte et découverte du code résultant d'une application simple créée en TP à partir de la CLI

Les bases à connaître

• La syntaxe native à Svelte
• Notion de composant Svelte et cycle de vie
• Création d'un composant
• Incorporation de composants pour une IHM riche
• Réutilisation de composants
• Utilisation des accolades
• Variables dites réactives
• Fonctions ou méthodes dites réactives
• Binding des propriétés
• Contrôle de flux avec Svelte : itératives et alternatives

Exemple de travaux pratiques (à titre indicatif)

• Création d'une application de base incluant une IHM réalisée à partir de plusieurs Svelte (partie 1)

Jour 2

Les bases à connaître (suite)

• Passage d'informations entre composants
• Les slots
• Répondre aux évènements
• Les hooks
• Gestion des styles, classes et HTML

Exemple de travaux pratiques (à titre indicatif)

• Création d'une application de base incluant une IHM réalisée à partir de plusieurs Svelte (partie 2)

Formulaires et liaison de données (binding)

• Le binding bi-directionnel
• Gestion des composants de type bouton radio, checkbox, textarea...
• Gestion des listes déroulantes de type SELECT
• Validation de champs et de formulaire

Exemples de travaux pratiques (à titre indicatif)

• Création et gestion par Svelte d'une interface graphique composée de plusieurs zones de saisie

Jour 3

Gestion d'état et des données

• Utilité des stores
• Créer et utiliser un store
• Les stores en lecture et en mise à jour
• Composants d'état et de présentation
• Gérer les souscriptions
• Stores personnalisés

Exemple de travaux pratiques (à titre indicatif)

• Ajout des données de l'interface graphique préalablement écrite dans un store nouvellement créé dans l'application

Transitions et animations

• Fonctionnement des transitions
• Store et valeurs d'animation
• Différents types de transitions, en "in" et en "out"
• Animation d'éléments

Exemple de travaux pratiques (à titre indicatif)

• Modification de l'état d'un objet visuel améliorant l'IHM par l'application d'une transition

Pour aller plus loin

• Appeler des API REST
• Différentes sortes de routage
• L'apport du framework Sapper

Exemple de travaux pratiques (à titre indicatif)

• Codage de l'appel d'un API REST externe