Svelte

Les programmes, pré-requis et objectifs sont régulièrement mis à jour afin d'être au plus proche des avancées de la technologie. Vous pouvez consulter la dernière version en suivant le lien internet du programme : https://www.humancoders.com/formations/svelte

Jour 1 : rappels et introduction à Svelte
Rappels JS
Valeurs et variables
Asynchrone
ES6+
Démarrer avec Svelte
Qu'est ce que Svelte ?
Les outils que nous allons utiliser (NPM, Github, Node)
Installer Svelte
Structure d'une application Svelte
Afficher notre première variable
La réactivité avec Svelte
Les composants
Communiquer via les « props »
Pour aller plus loin sur le binding
Les classes CSS dynamiques
Mise en pratique sur les différentes notions vues

Structure de Code
Insérer une structure de code dans le template
If, else, else-if
Each
Await blocks
Les clés
Mise en pratique sur les différentes notions vues

Jour 2 : zoom sur les composants, transitions et les stores
Aller plus loin avec les composants
Les différents types de composants
La communication entre composants
Les événements personnalisés
Travailler avec les slots
Named & default slots
Les cycles de vie
Mise en pratique sur les différentes notions vues

Les transitions
La direction de transition avec Svelte
Ajouter des paramètres
Les transitions CSS et JS personnalisés
Les événements de transition
Mise en pratique sur les différentes notions vues

Gérer les données via un store
Pourquoi un store
Les différents types de store
Créer un store writable
S'abonner à un store
Mettre à jour des données du store
Les « auto-suscriptions »
Comprendre les stores « readable »
Le « custom store »
Mise en pratique sur les différentes notions vues

Jour 3 : les tests et les sappers
Tests
Tests unitaires
Tests d'intégration
Mise en pratique sur les différentes notions vues

Sapper
C'est quoi ?
Routing
Layout personnalisé
Rendu côté serveur
Prefetch
Export statique
Déploiement
Mise en pratique sur les différentes notions vues