Formation Svelte
| 2100€ HT / personne |
| 3 jours (21 heures) |
Présentation
La formation Svelte vous présentera ce framework JavaScript open source qui permet de développer une application avec une syntaxe minimaliste pour ensuite la déployer.
Montez en compétences, en maîtrisant les concepts et la syntaxe de Svelte. Vous découvrirez la raison pour laquelle Svelte est le framework à utiliser aux dépens de ses concurrents.
Pendant cet enseignement, vous serez apte à contrôler les états et les différents stores. Cela vous permettra de mettre en pratique des moyens pour l’élaboration de votre propre store personnalisé.
Apprenez à mettre en place des animations et des transitions dans l’objectif d’améliorer l’ergonomie de l’application.
Notre formation se basera sur la dernière version du logiciel en date à savoir Svelte 3.
Objectifs
- Comprendre la préparation de l’environnement de développement et l’installation de Node.js
- Maîtriser l’utilisation des extensions utiles dans VS Code
- Acquérir une compréhension approfondie de la syntaxe de base de Svelte et la création de projets avec Vite
- Appliquer les concepts de conditions, boucles, et gestion événementielle
- Explorer l’utilisation des composants, des slots, des hooks de cycle de vie, et des stores
Public visé
Développeurs
Pré-requis
- Connaissance du langage JavaScript
- Connaissance en HTML et CSS
Programme de la formation Svelte
Introduction à Svelte
- Préparation de l’environnement de développement
- Les extensions utiles dans VS Code
- Le site Officiel de Svelte
- Premiers pas avec Svelte via le REPL
- Ajout d’un composant
- Installation ou mise à jour de Node.js
- Création d’un premier projet Svelte avec Vite
La syntaxe de base de Svelte
- Création d’un squelette Svelte standard avec Vite
- Les interpolations
- Exercice
- Variables réactives
- Data binding
- Plusieurs composants dans une application Svelte
- Utilisation d’un objet JSON pour les props
- Passage de fonctions d’un composant à un autre
- Interpolations en texte brut ou en HTML
- Classes conditionnelles
Conditions, boucles et gestion événementielle
- Exécution de code HTML conditionnellement
- Boucles each
- Deux paramètres dans une boucle each
- Parcours d’objets JSON avec each
- Gestion événementielle de la souris
- Gestion événementielle du clavier
- Les modificateurs d’événements (event modifiers)
Contrôle d’état et les stores
- Concept fondamental d’un store
- Élaboration et souscription à un custom store
- Mise à jour des données du store
- Création d’un store writable
- Stores dérivés
- Contrôle des abonnements et des autosouscriptions
Les composants
- Première approche des composants
- Encore plus de composants
- Passer des données d’un enfant au parent avec des Custom Events
- Transmission de données au parent avec un Custom Event
- Chaînage d’événements de composant à composant
- Chaînage d’événements du DOM
Slots et Lifecycle hooks
- Slots simples
- Slots nommés
- Slot par défaut
- Affichage conditionnel de slots
- Utilisation conjointe de slots et de props dans une application Svelte
- Lifecycle Hooks
- Interfaçage d’une API REST dans le hook onMount
- Utilisation du bloc {#await}
- Interfaçage de la base de données The Movie Database
- Suite Interfaçage de la base de données The Movie Database
Gestion des formulaires
- Input de type text et input de type number
- Input de type radio et de type checkbox
- Select et option
- Les autres balises input
- Binding avec un composant
- Validation d’un formulaire côté front
Les stores de Svelte
- Les stores de Svelte
- Un premier exemple
- Éviter les fuites mémoire avec unsubscribe()
- Faciliter l’accès au store
- Ajout d’une fonctionnalité pour supprimer un livre
- Déplacement de la logique programmatique dans le store
- Readable stores
Animations et transitions
- Animation de nombres avec le module motion
- Action sur une propriété CSS inline
- Le store Spring
- Animations d’éléments HTML avec le module transition
- Suite Animations d’éléments HTML avec le module transition
- Capturer le début et la fin d’une animation
- Utiliser des animations d’apparition et de disparition différentes
Une application SPA avec Svelte
- Création d’une application SPA
- Un routeur basé sur le hashing
- Passage de paramètre dans l’URL
- Bouton et lien Page précédente dans les pseudo-pages
SvelteKit
- Application de démonstration de SvelteKit
- L’architecture d’une application SvelteKit
- Une application SvelteKit from scratch
- Utilisation de props dans les pages
- Création d’un composant de layout
- Définition de règles de styles globales
- Utilisation d’un layout spécifique à une ou plusieurs pages
- Charger des données de façon asynchrone
- Plusieurs sources de données
- Routes dynamiques
- Erreur dans une route dynamique
Pour aller plus loin
Formation ELM
Formation Ember.JS
Formation Vue
Langues et Lieux disponibles
Langues
- Français
- Anglais / English
Lieux
-
France entière
- Paris
- Lille
- Reims
- Lyon
- Toulouse
- Bordeaux
- Montpellier
- Nice
- Sophia Antipolis
- Marseille
- Aix-en-Provence
- Nantes
- Rennes
- Strasbourg
- Grenoble
- Dijon
- Tours
- Saint-Étienne
- Toulon
- Angers
-
Belgique
- Bruxelles
- Liège
-
Suisse
- Genève
- Zurich
- Lausanne
-
Luxembourg
Témoignages
Les + : Pour avoir des bases très solide cette formation est parfaite
Les – : Manque peut etre de gros projets a réalisé
Afficher tous les témoignages
Les + : Pour avoir des bases très solide cette formation est parfaite
Les – : Manque peut etre de gros projets a réalisé
Les + : Des petits modules très scalables et très clairs, formateur très sympathique et compétant
Les – : Manque de gros exercices qui rassemblent toutes les connaissances acquises
Noter la formation
| 2100€ HT / personne |
| 3 jours (21 heures) |
UNE QUESTION ? UN PROJET ? UN AUDIT DE CODE / D'INFRASTRUCTURE ?
Pour vos besoins d’expertise que vous ne trouvez nulle part ailleurs, n’hésitez pas à nous contacter.
ILS SE SONT FORMÉS CHEZ NOUS
