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.
Table des matières de cette formation JavaScript (durée : 5h21m)
-
Projet 1 : "Switter"
- Démo de "Switter" gratuit 00:02:27
- Création d'une nouvelle application Svelte.js gratuit 00:03:34
- Structure d'une application Svelte.js gratuit 00:05:36
- Mettre à jour une variable et l'afficher 00:05:58
- Gérer le 'click' event pour ajouter un nouveau message 00:04:21
- Parcourir une collection de messages côté template 00:02:46
- Two-way binding avec bind:value 00:02:47
- Vider le textearea après soumission 00:01:02
- Création d'un nouveau component Svelte 00:06:29
- Passer une prop à un composant enfant 00:02:54
- Dispatcher un custom event d'un composent enfant vers son parent 00:08:23
- Ajout d'un input pour l'auteur 00:04:10
- Gérer le format des dates 00:06:37
- La réactivité en Svelte 00:05:16
- Ajouter une class CSS conditionnellement 00:05:10
- "if" côté template 00:02:21
- Définir une valeur par défaut 00:01:30
- Afficher ou masquer un component 00:05:36
-
Projet 2 : "Gymscheduler"
- Démo de "Gymscheduler" gratuit 00:01:50
- Création d'une nouvelle application Svelte.js 00:01:35
- Créer dynamiquement un menu déroulant 00:10:47
- Ajouter dynamiquement une ou plusieurs instances de TrainingDay 00:09:45
- Gérer la soumission du formulaire de création d'exercice 00:07:42
- Styles CSS 00:02:20
- Lister les séries et nombre de répétitions de chaque exercice 00:03:59
- Emission d'un custom event lors de la création d'un nouvel exercice 00:07:53
- Passer les props au component TrainingWeekSummary 00:06:19
- Préparation du résumé en utilisant reduce() 00:11:57
- Utilisation d'un lifecycle hook 00:08:37
- Rendu du résumé détaillé du programme hebdomadaire 00:10:40
-
Projet 3 : "ExpenseTracker"
- Démo de "ExpenseTracker" gratuit 00:02:59
- Création d'une nouvelle application Svelte.js 00:02:41
- Utilisation de Bootstrap pour créer un tableau de dépenses 00:05:54
- Création d'un writable store 00:07:21
- Utiliser des données du store en les passant en tant que props 00:07:37
- Création du component ExpenseCreate.svelte 00:11:32
- Mise à jour du store 00:07:10
- Initialiser un formulaire 00:03:56
- Création du component ExpenseTotal.svelte 00:06:45
- Utilisation du tweening pour animer les modifications du total 00:11:42
- Animation du DOM à l'aide d'une transition 00:04:25
- Récupération de la configuration d'une base Firestore 00:05:26
- Se connecter à Firestore pour récupérer un snapshot de notre collection 00:14:22
- Création d'un service permettant d'interagir avec Firestore 00:11:53
- Attribuer une nouvelle valeur à notre store Svelte 00:04:15
- Création d'une nouvelle dépense dans Firestore 00:07:28
- Implémentation de l"edit in place" 00:11:03
- Affichage d'un formulaire de mise à jour si en mode édition 00:10:17
- Ecouter notre custom event 00:10:19
- Récapitulatif de l'update 00:04:33
- Suppression d'une dépense 00:09:11
- Fichiers sourcestélécharger
- Certificat
Formateur : Codeconcept
-
Avec quelle version de logiciel ce tuto est-il compatible ?JavaScript
-
Quel est le niveau requis pour suivre ce tuto ?intermédiaire
