Svelte.js 3 par la pratique
Créer des applications légères et performantes avec Svelte.js
Voir la bande annonce
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. 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 meilleure performances
Dans cette formation 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
- reactivité
- 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'effecter 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.
Bienvenue sur cette formation qui vous permettre de devenir opérationnel rapidement en Svelte.js.
Votre formateur
Développeur web depuis 2003 dans des entreprises clientes publiques (SNCF, URSSAF, EDF...) et privées (Iron Mountain, Jouve, CDiscount...), dirigeant de la société rennaise Code Concept spécialisée en formation JavaScript Front, Back et mobiles hybrides, Samir Medjdoub a eu comme comme fil conducteur la conscience qu’il est bien plus facile de rester sur la vague que de tenter de remonter après s’être laissé submerger. Fidèle à cette stratégie, il a ainsi pris la vague Angular 2 dès les versions bêta en 2015, celle de Node.js il y a sept années de cela et a eu la chance d'évoluer dans des sociétés qui avaient été parmi les premières en France à adopter MongoDB, conjointement aux bases de données relationnelles. Il a toujours cru que comparaison était raison et a porté une égale attention à React et Redux dès 2015, puis Vue.js en 2016. Meteor et désormais Svelte.js sont les outsiders qui retiennent régulièrement son attention.
Les développeuses et développeurs JavaScript (Front, Back ou Fullstack !) ont de très beaux jours devant eux : les formations de la société Code Concept vous aideront à investir efficacement dans les frameworks, plateformes et librairies JavaScript qui vous ouvriront de belles opportunités en 2024 !
Programme de la formation
Projet 1 : "Switter"
Valable dans
jours
jours
après votre inscription
-
PrévisualiserDémo de "Switter" (2:26)
-
PrévisualiserCréation d'une nouvelle application Svelte.js (3:33)
-
CommencerStructure d'une application Svelte.js (5:36)
-
CommencerMettre à jour une variable et l'afficher (5:58)
-
CommencerGérer le 'click' event pour ajouter un nouveau message (4:20)
-
CommencerParcourir une collection de messages côté template (2:46)
-
CommencerTwo-way binding avec bind:value (2:46)
-
CommencerVider le textearea après soumission (1:01)
-
CommencerCréation d'un nouveau component Svelte (6:28)
-
CommencerPasser une prop à un composant enfant (2:54)
-
CommencerDispatcher un custom event d'un composent enfant vers son parent (8:22)
-
CommencerAjout d'un input pour l'auteur (4:09)
-
CommencerGérer le format des dates (6:36)
-
CommencerLa réactivité en Svelte (5:15)
-
CommencerAjouter une class CSS conditionnellement (5:10)
-
Commencer"if" côté template (2:21)
-
CommencerDéfinir une valeur par défaut (1:29)
-
CommencerAfficher ou masquer un component (5:36)
Projet 2 : "Gymscheduler"
Valable dans
jours
jours
après votre inscription
-
PrévisualiserDémo de "Gymscheduler" (1:49)
-
CommencerCréation d'une nouvelle application Svelte.js (1:34)
-
CommencerCréer dynamiquement un menu déroulant (10:46)
-
CommencerAjouter dynamiquement une ou plusieurs instances de TrainingDay (9:45)
-
CommencerGérer la soumission du formulaire de création d'exercice (7:42)
-
CommencerStyles CSS (2:20)
-
CommencerLister les séries et nombre de répétitions de chaque exercice (3:58)
-
CommencerEmission d'un custom event lors de la création d'un nouvel exercice (7:53)
-
CommencerPasser les props au component TrainingWeekSummary (6:18)
-
CommencerPréparation du résumé en utilisant reduce() (11:57)
-
CommencerUtilisation d'un lifecycle hook (8:37)
-
CommencerRendu du résumé détaillé du programme hebdomadaire (10:40)
Projet 3 : "ExpenseTracker"
Valable dans
jours
jours
après votre inscription
-
PrévisualiserDémo de "ExpenseTracker" (2:59)
-
CommencerCréation d'une nouvelle application Svelte.js (2:40)
-
CommencerUtilisation de Bootstrap pour créer un tableau de dépenses (5:54)
-
CommencerCréation d'un writable store (7:20)
-
CommencerUtiliser des données du store en les passant en tant que props (7:36)
-
CommencerCréation du component ExpenseCreate.svelte (11:31)
-
CommencerMise à jour du store (7:09)
-
CommencerInitialiser un formulaire (3:55)
-
CommencerCréation du component ExpenseTotal.svelte (6:44)
-
CommencerUtilisation du tweening pour animer les modifications du total (11:42)
-
CommencerAnimation du DOM à l'aide d'une transition (4:24)
-
CommencerRécupération de la configuration d'une base Firestore (5:25)
-
CommencerSe connecter à Firestore pour récupérer un snapshot de notre collection (14:22)
-
CommencerCréation d'un service permettant d'interagir avec Firestore (11:52)
-
CommencerAttribuer une nouvelle valeur à notre store Svelte (4:15)
-
CommencerCréation d'une nouvelle dépense dans Firestore (7:27)
-
CommencerImplémentation de l"edit in place" (11:02)
-
CommencerAffichage d'un formulaire de mise à jour si en mode édition (10:16)
-
CommencerEcouter notre custom event (10:18)
-
CommencerRécapitulatif de l'update (4:32)
-
CommencerSuppression d'une dépense (9:10)
-
CommencerDernière mise à jour lundi 24 juin 2019
FAQ (questions fréquentes)
Combien de temps ai-je accès à ce cours et à ses mises à jour ?
Indéfiniment en cas d'achat du cours à l'unité ; aussi longtemps que votre abonnement sera valide en cas de souscription au forfait complet.
Si le cours ne correspond pas à mes attentes, puis-je être remboursé ?
Oui. Vous disposez de 30 jours d'essai durant lesquels vous pouvez être remboursé
Pourquoi les prix sont-il indiqués Hors Taxes ?
Car vous venez d'une vingtaine de pays différents. La TVA n'est pas la même partout. La plateforme de paiement ajoute donc, dans le cas de la France, 20% de TVA, pour chaque autre pays, la TVA du pays considéré.