Grâce à cette formation Svelte, vous apprendrez à construire vos applications Svelte en développant vos propres composants Svelte.
Grâce à la création d'une application pokedex, vous mettrez immédiatement en pratique les notions abordées : de la création de l’application Svelte à la gestion des événements, en passant par la création de formulaires et l’ajout de transitions et d’interactions. À 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.
Cette formation Svelte s'adresse aux développeur·ses expérimentés·es sur des framework front-end tels que React, Vue ou Angular, souhaitant explorer une nouvelle voie dans l'applicatif web client.
La formation Svelte avancé vous permettra de produire simplement des interfaces.
De plus, la formation Sveltekit vous donnera les clés pour intégrer dans vos applications Svelte des fonctionnalités avancées telles que le routage ou encore la gestion de données.
🇺🇸 Cette formation est aussi disponible en anglais
Cette formation Svelte s'adresse aux **développeur·ses expérimentés·es** sur des framework front-end tels que React, Vue ou Angular, souhaitant explorer une nouvelle voie dans l'applicatif web client.
Formateur très compétent (explications très détaillées) et très patient. Malgré mes connaissances lointaines en programmation, j'ai pu faire les exercices pendant les 2 premiers jours et ensuite avoir une idée générale de Svelte et Svelte Kit.
.map, .filter, ...)async/await, ...)import/export)Rappels JS
- Définir les variables avec const et let.
- Déclarer les variables avec la déstructuration.
- Manipuler les tableaux avec .map et .filter.
- Utiliser async et await pour gérer les opérations asynchrones.
Premiers pas
- Comprendre l’histoire du web front-end.
- Aborder la définition d’un framework front-end.
- Découvrir les particularités de Svelte.
- Lister les ressources utiles.
- Se lancer avec Svelte.
Écrire du Svelte Simple
- Structurer des fichiers .svelte.
- Ecrire des blocs de compilation #if, #each, #await.
- Particulariser un composant en utilisant les props.
- Styliser un composant en utilisant le bloc <style>.
Mises en pratique :
- Configurer un nouveau projet Svelte
- Créer les fichiers nécessaires pour les composants
- Mettre en place la structure de base de l'interface utilisateur
- Appliquer des styles CSS pour rendre l'interface attrayante et cohérente
Réactivité
- Rendre un composant dynamique avec le state.
- Réagir aux changements d’état.
- Comprendre le cas particulier des tableaux et objets pour la réactivité Svelte.
Évènements
- Utiliser les évènements natifs et les modificateurs.
- Créer des évènements personnalisés au sein d’un composant.
- Transmettre les évènements entre parents et enfants.
- Comprendre quand utiliser les props et quand utiliser les évènements pour communiquer entre composants.
Formulaires
- Lier les valeurs des éléments de formulaire au state.
- Gérer les inputs texte, les checkboxes et les sélecteurs.
- Créer un formulaire complet et gérer la soumission.
Cycle de Vie
- Réagir au montage d'un composant.
- Réagir au démontage d’un composant.
- Comprendre les subtilités du cycle de vie avec tick.
Mises en pratique
- Implémenter des interactions utilisateur dans l'application
- Mettre en place un formulaire interactif
- Intégrer la notion de temps écoulé pour créer des fonctionnalités dynamiques
Stores
- Utiliser les stores pour partager globalement des données.
- Comprendre le fonctionnement sous-jacent d’un store Svelte.
- Partager des données sans autoriser les modifications avec les stores en lecture seule.
Composition
- Utiliser les slots pour insérer du contenu flexible dans les composants.
- Utiliser les slots par défaut pour offrir une expérience de composition plus solide.
Transitions
- Ajouter des transitions aux composants pour améliorer l'expérience utilisateur.
Déploiement
- Déployer une application Svelte en production.
Mises en pratique
- Implémenter la gestion d'un inventaire avec des fonctionnalités interactives
- Ajouter des transitions pour rendre l'application plus attrayante visuellement
- Déployer l'application sur la plateforme de déploiement Vercel pour qu'elle soit accessible en ligne
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.
Cendrine S.
CCMSA 15.07.2024Formateur très compétent (explications très détaillées) et très patient. Malgré mes connaissances lointaines en programmation, j'ai pu faire les exercices pendant les 2 premiers jours et ensuite avoir une idée générale de Svelte et Svelte Kit.
Eric B.
Eric BERNEDEFormation très adaptée à ma demande, un tour d'horizon du framework avec des TP adaptés à des vrais cas d'usages
Alessandro E.
Courrier InternationalTrès bonne formation sur ce framework prometteur. Depuis le temps que j'en cherchais une !
Stéphanie L.
Radio FranceC'était une chouette formation, je l'ai trouvée bien faite et intéressante le formateur répondait bien à toutes nos questions. J'ai beaucoup aimé faire du sveltejs.
Pour en savoir plus, veuillez consulter notre page : Comment financer votre formation ?
Oui, la formation peut être proposée en présentiel ou en distanciel. Pour les inter-entreprises, les modalités (présentiel ou à distance) sont fonction de la session.
Nous pouvons organiser des sessions à d'autres dates ou dans d'autres villes (Bordeaux, Lille, Lyon, Marseille, Montpellier, Nantes, Nice, Paris, Strasbourg, Toulouse...)
Les formations se déroulent toujours en petit groupe de 3 à 6 stagiaires. Nous souhaitons que les formateurs et formatrices puissent passer un maximum de temps avec chacun·e.
Voici une journée type :
* Nombre de personnes ayant répondu au questionnaire de satisfaction sur cette formation depuis 2012