Svelte.js 3 par la pratique
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO Svelte.js 3 par la pratique

Codeconcept
48,99€
3 paiements de 16,00€ avec Klarna. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Svelte n'est pas un framework de plus : c'est un framework ET un compilateur.

Il permet ainsi de créer des applications web en créant des components - comme Angular, React ou Vue vous ont habitué à le faire - mais là où Svelte va plus loin, c'est en vous permettant de réduire considérablement la taille du build grâce à sa fonctionnalité de compilateur. Pour le dire vite, Svelte vous permet de créer des composants puis de les compiler en JavaScript pur. Autrement dit, votre build ne contiendra pas de code spécifique au framework Svelte.
 

Pourquoi utiliser Svelte ? L'avantage est double :

  • Vous générez un build (très) allégé
  • le navigateur de vos clients aura à télécharger et parser beaucoup moins de code, d'où de bien meilleures performances

 

Au programme de ce tuto Svelte.js 3 par la pratique

Dans cette formation en ligne qui va à l'essentiel, vous apprendrez à créer en un temps record vos premières applications Svelte.js.

Le projet 1 baptisé "Switter" est dans l'esprit de "Twitter". Il vous permettra d'assimiler les fondamentaux de Svelte tels que :

  • création de formulaires,
  • event listeners,
  • one-way et two-way binding,
  • création de components,
  • communication entre components via props et custom events,
  • réactivité,
  • ajout conditionnel de classe CSS,
  • loops,
  • affichage conditionnel.

A l'issue du premier projet, vous pourrez commencer à créer vos propres petits projets.

Le projet 2 "Gymscheduler", qui vous permettra de créer un programme de musculation sur une semaine.
Ce sera l'occasion :

  • d'utiliser des lifecycle hooks,
  • de vous perfectionner sur les formulaires (ajout de menus déroulants),
  • d'ajouter dynamiquement d'autres formulaires de personnaliser les saisies utilisateurs,
  • de pratiquer les fondamentaux du projet précédent (customs events, props ...).

Le projet 3, "Expensetracker" sera un gestionnaire de dépenses. Ce projet sera l'occasion de :

  • faire du CRUD vers une base de données Firestore,
  • faire des requêtes Ajax,
  • gérer des stores,
  • d'effectuer des animations de données numériques,
  • d'animer les éléments du DOM pour améliorer l'expérience utilisateur.

Svelte est déjà en v3. Il est donc mature, ce qui vous garantira :

  • qu'il est opérationnel.
  • qu'il est là pour durer.

Enfin, si vous connaissez déjà un des trois frameworks du moment (Angular, React ou Vue), l'apprentissage de Svelte sera très aisé. Si c'est votre premier framework, cette formation vous permettra de démarrer sur un framework moderne qui monte très fort, tout en vous familiarisant avec les concepts utilisés par les big three (Angular, React et Vue).
Cette formation résolument pratique vous rendra la tâche plus aisée encore.

Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions.
Les fichiers projets sont fournis avec le cours.

Bienvenue sur cette formation qui vous permettre de devenir opérationnel rapidement en Svelte.js.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Projet 1 : "Switter"
Chapitre 2
Projet 2 : "Gymscheduler"
Chapitre 3
Projet 3 : "ExpenseTracker"

Plan détaillé du cours

Chapitre 1 : Projet 1 : "Switter"
1h16
 
Leçon 1Démo de "Switter"
Leçon 2Création d'une nouvelle application Svelte.js
Leçon 3Structure d'une application Svelte.js
Leçon 4Mettre à jour une variable et l'afficher
Leçon 5Gérer le 'click' event pour ajouter un nouveau message
Leçon 6Parcourir une collection de messages côté template
Leçon 7Two-way binding avec bind:value
Leçon 8Vider le textearea après soumission
Leçon 9Création d'un nouveau component Svelte
Leçon 10Passer une prop à un composant enfant
Leçon 11Dispatcher un custom event d'un composent enfant vers son parent
Leçon 12Ajout d'un input pour l'auteur
Leçon 13Gérer le format des dates
Leçon 14La réactivité en Svelte
Leçon 15Ajouter une class CSS conditionnellement
Leçon 16"if" côté template
Leçon 17Définir une valeur par défaut
Leçon 18Afficher ou masquer un component
Chapitre 2 : Projet 2 : "Gymscheduler"
1h23
 
Leçon 1Démo de "Gymscheduler"
Leçon 2Création d'une nouvelle application Svelte.js
Leçon 3Créer dynamiquement un menu déroulant
Leçon 4Ajouter dynamiquement une ou plusieurs instances de TrainingDay
Leçon 5Gérer la soumission du formulaire de création d'exercice
Leçon 6Styles CSS
Leçon 7Lister les séries et nombre de répétitions de chaque exercice
Leçon 8Emission d'un custom event lors de la création d'un nouvel exercice
Leçon 9Passer les props au component TrainingWeekSummary
Leçon 10Préparation du résumé en utilisant reduce()
Leçon 11Utilisation d'un lifecycle hook
Leçon 12Rendu du résumé détaillé du programme hebdomadaire
Chapitre 3 : Projet 3 : "ExpenseTracker"
2h40
 
Leçon 1Démo de "ExpenseTracker"
Leçon 2Création d'une nouvelle application Svelte.js
Leçon 3Utilisation de Bootstrap pour créer un tableau de dépenses
Leçon 4Création d'un writable store
Leçon 5Utiliser des données du store en les passant en tant que props
Leçon 6Création du component ExpenseCreate.svelte
Leçon 7Mise à jour du store
Leçon 8Initialiser un formulaire
Leçon 9Création du component ExpenseTotal.svelte
Leçon 10Utilisation du tweening pour animer les modifications du total
Leçon 11Animation du DOM à l'aide d'une transition
Leçon 12Récupération de la configuration d'une base Firestore
Leçon 13Se connecter à Firestore pour récupérer un snapshot de notre collection
Leçon 14Création d'un service permettant d'interagir avec Firestore
Leçon 15Attribuer une nouvelle valeur à notre store Svelte
Leçon 16Création d'une nouvelle dépense dans Firestore
Leçon 17Implémentation de l"edit in place"
Leçon 18Affichage d'un formulaire de mise à jour si en mode édition
Leçon 19Ecouter notre custom event
Leçon 20Récapitulatif de l'update
Leçon 21Suppression d'une dépense

Aperçus

Avis des apprenants

Détail des avis
53
Apprenants
1
Commentaire
5/5
Note moyenne
5/5
1
4/5
0
3/5
0
2/5
0
1/5
0
Florent Lefevre
Florent Lefevre
Publié le 09/04/2024
Bonjour, J'ai fait l'ensemble des leçons, je connaissais déjà un peu le fonctionnent du serveur Node.js et Svelte 4 et SvelteKit et Vite (builder). Pourriez vous en refaire d'autres, notamment sur la version 5 de Svelte qui va bientôt sortir ? Merci pour la qualité de vos petits exercices, notamment avec Firebase que je connaissais pas. Bonne continuation !!!
Codeconcept
Merci pour cet avis très positif :) Lorsque Svelte 5 (qui tarde à sortir en version finale) sera disponible, je créerai une formation dédiée à cette nouvelle version, avec des exemples dédiés.

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

JavaScript

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Payer plus tard ou en 3x

Prix d'achat : 48,00 €
Pour payer plus tard ou en plusieurs versements échelonnés, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez plus tard ou en plusieurs fois

3 paiements de 16,00 €
tous les mois, sans intérêts
Total : 48,00 €
Afficher les conditions : Klarna
Klarna : conditions d'utilisation du paiement différé en 3 échéances.

Attendez ! 🤗

Accédez à plus de 1428 tutos gratuits

Notre politique de protection des données