Svelte.js 3 par la pratique
4.3 (23 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
140 students enrolled

Svelte.js 3 par la pratique

Créer des applications légères et performantes avec Svelte.js
Highest Rated
4.3 (23 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
140 students enrolled
Current price: $104.99 Original price: $149.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 5.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Apprendre à créer des applications légères et performantes avec Svelte
Course content
Expand all 51 lectures 05:20:42
+ Projet 1 : "Switter"
18 lectures 01:16:47
Parcourir une collection de messages côté template
02:46
Two-way binding avec bind:value
02:46
Vider le textearea après soumission
01:01
Création d'un nouveau component Svelte
06:28
Passer une prop à un composant enfant
02:54
Dispatcher un custom event d'un composent enfant vers son parent
08:22
Ajout d'un input pour l'auteur
04:09
Gérer le format des dates
06:36
La réactivité en Svelte
05:15
Ajouter une class CSS conditionnellement
05:10
"if" côté template
02:21
Définir une valeur par défaut
01:29
Afficher ou masquer un component
05:36
+ Projet 2 : "Gymscheduler"
12 lectures 01:23:20
Démo de "Gymscheduler"
01:49
Création d'une nouvelle application Svelte.js
01:35
Créer dynamiquement un menu déroulant
10:46
Ajouter dynamiquement une ou plusieurs instances de TrainingDay
09:45
Gérer la soumission du formulaire de création d'exercice
07:42
Styles CSS
02:20
Lister les séries et nombre de répétitions de chaque exercice
03:58
Emission d'un custom event lors de la création d'un nouvel exercice
07:53
Passer les props au component TrainingWeekSummary
06:18
Préparation du résumé en utilisant reduce()
11:57
Utilisation d'un lifecycle hook
08:37
Rendu du résumé détaillé du programme hebdomadaire
10:40
+ Projet 3 : "ExpenseTracker"
21 lectures 02:40:35
Démo de "ExpenseTracker"
02:59
Création d'une nouvelle application Svelte.js
02:40
Utilisation de Bootstrap pour créer un tableau de dépenses
05:54
Création d'un writable store
07:20
Utiliser des données du store en les passant en tant que props
07:36
Création du component ExpenseCreate.svelte
11:31
Mise à jour du store
07:10
Initialiser un formulaire
03:55
Création du component ExpenseTotal.svelte
06:44
Utilisation du tweening pour animer les modifications du total
11:42
Animation du DOM à l'aide d'une transition
04:24
Récupération de la configuration d'une base Firestore
05:25
Se connecter à Firestore pour récupérer un snapshot de notre collection
14:22
Création d'un service permettant d'interagir avec Firestore
11:52
Attribuer une nouvelle valeur à notre store Svelte
04:15
Création d'une nouvelle dépense dans Firestore
07:28
Implémentation de l"edit in place"
11:02
Affichage d'un formulaire de mise à jour si en mode édition
10:16
Ecouter notre custom event
10:18
Récapitulatif de l'update
04:32
Suppression d'une dépense
09:10
Requirements
  • Connaître les fondamentaux de JavaScript et HTML
Description

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.

Who this course is for:
  • Développeuses et développeurs web en poste, freelances, étudiant(e)s en informatique, autodidactes motivé(e)s