Cours
PrestaShop

Newsletter

Svelte.js 3

Créer des applications légères et performantes avec Svelte.js

Ou s'abonner pour un accès illimité sans engagement à tout Skilleos pour 19,90€/mois. En savoir plus
chapitre

Chapitres

53

chrono

Durée

05h22 de cours en ligne

chrono

Prérequis

acces

Accès

24h/24 et 7j/7
PC/Mac, tablette et smartphone

certificat

Certificat

Délivré à la fin de la formation

1for1

1 For 1

Un abo ou un achat sur Skilleos = Un cours offert à un bénéficiaire

Samir Medjdoub

Samir Medjdoub

Développeur depuis 2003 dans des entreprises clientes publiques (SNCF, URSSAF, EDF...) et privées (Iron Mountain, Jouve, CDiscount...), avec 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, Samir Medjdoub a ainsi pris la vague Angular 2 dès les versions alpha et bêta fin 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. Les développeuses et développeurs JavaScript (Front, Back ou Fullstack !) ont de très beaux jours devant eux : investissez dans les frameworks, plateformes et librairies JavaScript qui vous ouvriront de belles opportunités en 2019.

Vous souhaitez prendre en main le framework et compilateur qui monte ?

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

Dans ce cours en ligne, vous apprendrez en quoi 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. Dans ce cours, Samir Medjdoub vous accompagnera lors de la mise en place de 3 projets svelte.js, un twitter-like, un programme de musculation hebdomadaire et enfin un gestionnaire de dépenses.

Contenu du cours

  • Code source

À la fin du cours, vous serez capable de :

  • Créer des components
  • Créer des formulaires
  • Implémenter le one-way et two-way binding
  • Faire du CRUD vers une base de données Firestore
  • Faire des requêtes Ajax
  • Gérer des stores
  • Animer les éléments du DOM pour améliorer l'expérience utilisateur

Chapitres

CRÉATION D'UN CLONE TWITTER
1
01:22
Introduction au cours
2
02:27
Démo de "Switter"
3
03:33
Création d'une nouvelle application Svelte.js
4
05:36
Structure d'une application Svelte.js
5
05:58
Mettre à jour une variable et l'afficher
6
04:21
Gérer le 'click' event pour ajouter un nouveau message
7
02:46
Parcourir une collection de messages côté template
8
02:47
Two-way binding avec bind:value
9
01:02
Vider le texte area après soumission
10
06:29
Création d'un nouveau component Svelte
11
02:54
Passer une prop à un composant enfant
12
08:23
Dispatcher un custom event d'un composent enfant vers son parent
13
04:10
Ajout d'un input pour l'auteur
14
06:37
Gérer le format des dates
15
05:16
La réactivité en Svelte
16
05:10
Ajouter une class CSS conditionnellement
17
02:21
"if" côté template
18
01:30
Définir une valeur par défaut
19
05:36
Afficher ou masquer un component
CRÉATION D'UN PLANIFICATEUR DE GYM
20
01:50
Démo de "Gymscheduler"
21
01:35
Création d'une nouvelle application Svelte.js
22
10:47
Créer dynamiquement un menu déroulant
23
09:45
Ajouter dynamiquement une ou plusieurs instances de TrainingDay
24
07:42
Gérer la soumission du formulaire de création d'exercice
25
02:20
Styles CSS
26
03:59
Lister les séries et nombre de répétitions de chaque exercice
27
07:53
Emission d'un custom event lors de la création d'un nouvel exercice
28
06:19
Passer les props au component TrainingWeekSummary
29
11:57
Préparation du résumé en utilisant reduce()
30
08:37
Utilisation d'un lifecycle hook
31
10:40
Rendu du résumé détaillé du programme hebdomadaire
CRÉATION D'UN GESTIONNAIRE D'ACHAT
32
02:59
Démo de "ExpenseTracker"
33
02:41
Création d'une nouvelle application Svelte.js
34
05:54
Utilisation de Bootstrap pour créer un tableau de dépenses
35
07:21
Création d'un writable store
36
07:37
Utiliser des données du store en les passant en tant que props
37
11:32
Création du component ExpenseCreate.svelte
38
07:10
Mise à jour du store
39
03:56
Initialiser un formulaire
40
06:45
Création du component ExpenseTotal.svelte
41
11:42
Utilisation du tweening pour animer les modifications du total
42
04:24
Animation du DOM à l'aide d'une transition
43
05:26
Récupération de la configuration d'une base Firestore
44
14:22
Se connecter à Firestore pour récupérer un snapshot de notre collection
45
11:53
Création d'un service permettant d'interagir avec Firestore
46
04:15
Attribuer une nouvelle valeur à notre store Svelte
47
07:28
Création d'une nouvelle dépense dans Firestore
48
11:02
Implémentation de l"edit in place"
49
10:17
Affichage d'un formulaire de mise à jour si en mode édition
50
10:19
Ecouter notre custom event
51
04:32
Récapitulatif de l'update
52
09:11
Suppression d'une dépense
CONCLUSION
53
00:26
Conclusion

Svelte.js 3

49.00 €

close if for show price

  • langues fr