Formation Svelte

Formation Svelte

Notée : (6)*

Développez des interfaces web réactives et performantes avec aisance grâce à Svelte !

Prix (Formation inter-entreprise)

1900€ HT / personne

Durée

3 jours

Dates

Nous pouvons organiser des sessions à d'autres dates ou dans d'autres villes (Bordeaux, Lille, Lyon, Marseille, Montpellier, Nantes, Nice, Paris, Strasbourg, Toulouse...)

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.


Vous êtes déjà à l'aise avec les bases de Svelte ?

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.

Les objectifs

  • Comprendre comment Svelte se démarque des autres framework
  • Utiliser la syntaxe Svelte pour créer des composants
  • Comprendre la réactivité de Svelte
  • Maîtriser les stores
  • Construire une application simple

Pré-requis

  • Être autonome dans la lecture et l'écriture de Javascript
  • Être à l'aise avec les méthodes fonctionnelles des tableaux (.map, .filter, ...)
  • Être à l'aise avec l'asynchrone (Promesses, async/await, ...)
  • Être à l'aise avec les modules ESM (import/export)
  • Disposer de Git, Node 16+, un IDE (VSCode, Atom, ...), un navigateur moderne (Chrome ou Firefox)
  • Avoir les droits d'administration sur votre machine
  • Ordinateur portable à apporter

Le programme de la formation Svelte

Jour 1 : Découvrir Svelte

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


Jour 2 : Approfondir Svelte

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


Jour 3 : Pour aller plus loin avec Svelte

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

Télécharger le programme

Le(s) formateur(s)

Romain CRESTEY

Romain CRESTEY

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.

Voir son profil détaillé

A propos de Human Coders

Human Coders c'est un centre de formation pour développeurs avec :

  • une certification Qualiopi, indispensable pour que vous puissiez obtenir des aides au financement via votre OPCO
  • de nombreux clients qui nous font confiance depuis des années
  • un manifeste pour garantir des formations à taille humaine, des formateurs passionnés, de véritables workshops...
  • 120 formations au catalogue, 1571 sessions depuis nos débuts en 2012 avec une moyenne de satisfaction de 4,6/5
  • la possibilité de vous proposer un accompagnement personnalisé ou du conseil après la formation

3 témoignages

Formation très adaptée à ma demande, un tour d'horizon du framework avec des TP adaptés à des vrais cas d'usages

Formation très adaptée à ma demande, un tour d'horizon du framework avec des TP adaptés à des vrais cas d'usages

C'é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 a...

C'é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.

Voir plus

Très bonne formation sur ce framework prometteur. Depuis le temps que j'en cherchais une !

Très bonne formation sur ce framework prometteur. Depuis le temps que j'en cherchais une !

Besoin d'aide ?

Vous souhaitez discuter avec nous à propos de votre projet de formation ?
Vous voulez plus d'information sur une formation ou notre fonctionnement ?


Rappel Email

Nos forces

  • Des formations à taille humaine
  • Des formateurs passionnés
  • Des véritables workshop
Accéder au Manifeste

Nos clients

Formation Svelte

Notée : (6)*

Développez des interfaces web réactives et performantes avec aisance grâce à Svelte !

Formation Svelte

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.


Vous êtes déjà à l'aise avec les bases de Svelte ?

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.

Les objectifs

  • Comprendre comment Svelte se démarque des autres framework
  • Utiliser la syntaxe Svelte pour créer des composants
  • Comprendre la réactivité de Svelte
  • Maîtriser les stores
  • Construire une application simple

Pré-requis

  • Être autonome dans la lecture et l'écriture de Javascript
  • Être à l'aise avec les méthodes fonctionnelles des tableaux (.map, .filter, ...)
  • Être à l'aise avec l'asynchrone (Promesses, async/await, ...)
  • Être à l'aise avec les modules ESM (import/export)
  • Disposer de Git, Node 16+, un IDE (VSCode, Atom, ...), un navigateur moderne (Chrome ou Firefox)
  • Avoir les droits d'administration sur votre machine
  • Ordinateur portable à apporter

Le programme de la formation Svelte

Jour 1 : Découvrir Svelte

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


Jour 2 : Approfondir Svelte

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


Jour 3 : Pour aller plus loin avec Svelte

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

Télécharger le programme

Le(s) formateur(s)

Romain CRESTEY

Romain CRESTEY

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.

Voir son profil détaillé

A propos de Human Coders

Human Coders c'est un centre de formation pour développeurs avec :

  • une certification Qualiopi, indispensable pour que vous puissiez obtenir des aides au financement via votre OPCO
  • de nombreux clients qui nous font confiance depuis des années
  • un manifeste pour garantir des formations à taille humaine, des formateurs passionnés, de véritables workshops...
  • 120 formations au catalogue, 1571 sessions depuis nos débuts en 2012 avec une moyenne de satisfaction de 4,6/5
  • la possibilité de vous proposer un accompagnement personnalisé ou du conseil après la formation

3 témoignages

Formation très adaptée à ma demande, un tour d'horizon du framework avec des TP adaptés à des vrais cas d'usages

Formation très adaptée à ma demande, un tour d'horizon du framework avec des TP adaptés à des vrais cas d'usages

C'é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 a...

C'é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.

Voir plus

Très bonne formation sur ce framework prometteur. Depuis le temps que j'en cherchais une !

Très bonne formation sur ce framework prometteur. Depuis le temps que j'en cherchais une !

* Nombre de personnes ayant répondu au questionnaire de satisfaction sur cette formation depuis 2012