39,00

Tuto Svelte 3 et SvelteKit 1.0 avec JavaScript

39,00

  • Une formation vidéo de 7h42m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
Svelte 3 et SvelteKit 1.0

ajouter ce cours aux favoris retirer ce cours des favoris

Le framework JavaScript Svelte permet de créer des applications Web « réactives ».
Par son intermédiaire, le DOM se synchronise automatiquement avec les variables de l'application. Il est même possible de synchroniser les variables les unes par rapport aux autres en utilisant des « déclarations réactives ».
Pour créer des applications Svelte, vous devrez écrire du code HTML, CSS et JavaScript. Le code JavaScript sera composé :

  • De code JavaScript traditionnel (Vanilla JavaScript).
  • De code JavaScript « amélioré », spécifiquement destiné à Svelte.

Après compilation, vous obtiendrez un code optimisé, léger, rapide et directement exécutable dans le navigateur.

Le framework Svelte est souvent comparé à ses aînés, Angular, React et Vue.
Contrairement à ces frameworks, pour lesquels la majeure partie du travail est effectuée dans le navigateur, Svelte inclut une étape de compilation qui produit une application Javascript pur (Vanilla JavaScript) optimisée. Il en résulte des performances bien plus élevées que dans les autres frameworks, et une taille des bundles vraiment réduite.

Au programme de ce cours Svelte et SvelteKit pour débutant

Cette formation vidéo est une introduction au framework Svelte 3 et à son acolyte SvelteKit 1.0, spécialisé dans la création de sites Web SPA (application mono page). Le programme s'étale sur près de 8 heures et abordera les chapitres suivants : 

  • La syntaxe de base de Svelte
  • Conditions, boucles et gestion événementielle
  • Les composants
  • Slots et Lifecycle hooks
  • Gestion des formulaires
  • Les stores de Svelte
  • Animations et transitions
  • Une application SPA avec Svelte
  • SvelteKit

Ce cours en ligne s'adresse à tous ceux qui veulent découvrir ce framework très prometteur qui fait et fera parler de lui dans les années à venir. La formation est orientée pratique. À travers de très nombreux exemples courts et ciblés, vous allez découvrir toutes les ficelles de Svelte et SvelteKit. Pour être à l’aise avec ce qui va être abordé dans ce manuel, vous devez avoir une première expérience de codage en JavaScript.
Nous ne reviendrons pas sur les instructions basiques de ce langage.

Un ebook de 205 pages est fourni en bonus ainsi que tous les codes présentés pendant cette formation !
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.

Assez parlé ! Il est temps de découvrir les immenses possibilités de Svelte et SvelteKit, d’acquérir de nouvelles compétences et … de devenir un inconditionnel du développement Svelte !
 

Table des matières de cette formation JavaScript (durée : 7h42m)

  • Introduction et premiers pas
    • 01 Préparation de l’environnement de développement 00:04:35
    • 02 Les extensions utiles dans VS Code 00:05:06
    • 03 Le site Officiel de Svelte gratuit 00:06:00
    • 04 Premiers pas avec Svelte via le REPL gratuit 00:06:34
    • 05 Ajout d’un composant 00:04:10
    • 06 Installation ou mise à jour de Node.js 00:03:49
    • 07 Création d’un premier projet Svelte avec Vite 00:06:17
  • La syntaxe de base de Svelte
    • 08 Création d’un squelette Svelte standard avec Vite 00:02:51
    • 09 Les interpolations 00:07:46
    • 10 Exercice 00:05:30
    • 11 Variables réactives 00:05:02
    • 12 Data binding 00:09:36
    • 13 Plusieurs composants dans une application Svelte 00:07:59
    • 14 Utilisation d’un objet JSON pour les props 00:02:57
    • 15 Passage de fonctions d'un composant à un autre 00:09:09
    • 16 Interpolations en texte brut ou en HTML 00:02:57
    • 17 Classes conditionnelles 00:04:56
  • Conditions, boucles et gestion événementielle
    • 18 Exécution de code HTML conditionnellement 00:07:18
    • 19 Boucles each 00:08:35
    • 20 Deux paramètres dans une boucle each 00:09:35
    • 21 Parcours d’objets JSON avec each 00:02:22
    • 22 Gestion événementielle de la souris 00:04:01
    • 23 Gestion événementielle du clavier 00:06:47
    • 24 Les modificateurs d’événements (event modifiers) 00:05:43
  • Les composants
    • 25 Première approche des composants gratuit 00:08:26
    • 26 Encore plus de composants 00:14:21
    • 27 Passer des données d'un enfant au parent avec des Custom Events 00:09:07
    • 28 Transmission de données au parent avec un Custom Event 00:03:24
    • 29 Chaînage d'événements de composant à composant 00:09:42
    • 30 Chaînage d'événements du DOM 00:05:47
  • Slots et Lifecycle hooks
    • 31 Slots simples 00:07:26
    • 32 Slots nommés 00:03:25
    • 33 Slot par défaut 00:01:29
    • 34 Affichage conditionnel de slots 00:05:40
    • 35 Utilisation conjointe de slots et de props dans une application Svelte 00:03:29
    • 36 Lifecycle Hooks 00:01:34
    • 37 Interfaçage d'une API REST dans le hook onMount 00:13:00
    • 38 Utilisation du bloc {#await} 00:02:26
    • 39 Interfaçage de la base de données The Movie Database 00:13:48
    • 39B Suite Interfaçage de la base de données The Movie Database 00:10:36
  • Gestion des formulaires
    • 40 Input de type text et input de type number 00:02:25
    • 41 Input de type radio et de type checkbox 00:07:09
    • 42 Select et option 00:03:47
    • 43 Les autres balises input 00:03:36
    • 44 Binding avec un composant 00:05:14
    • 45 Challenge 00:12:11
    • 46 Validation d'un formulaire côté front 00:07:14
  • Les stores de Svelte
    • 47 Les stores de Svelte gratuit 00:01:14
    • 48 Un premier exemple 00:11:22
    • 49 Challenge 00:18:05
    • 50 Éviter les fuites mémoire avec unsubscribe() 00:04:30
    • 51 Faciliter l'accès au store 00:01:36
    • 52 Ajout d'une fonctionnalité pour supprimer un livre 00:06:18
    • 53 Déplacement de la logique programmatique dans le store 00:07:14
    • 54 Readable stores 00:09:01
  • Animations et transitions
    • 55 Animation de nombres avec le module motion 00:10:15
    • 57 Action sur une propriété CSS inline 00:03:42
    • 58 Le store Spring 00:02:32
    • 59 Animations d'éléments HTML avec le module transition 00:07:33
    • 60 Animations d'éléments HTML avec le module transition 00:03:41
    • 61 Capturer le début et la fin d'une animation 00:03:22
    • 62 Utiliser des animations d'apparition et de disparition différentes 00:02:18
  • Une application SPA avec Svelte
    • 63 Création d'une application SPA gratuit 00:03:07
    • 64 Un routeur basé sur le hashing 00:06:21
    • 65 Passage de paramètre dans l'URL 00:04:37
    • 66 Bouton et lien Page précédente dans les pseudo-pages 00:02:49
  • SvelteKit
    • 67 Application de démonstration de SvelteKit 00:03:02
    • 68 L'architecture d'une applications SvelteKit 00:02:23
    • 69 Une application SvelteKit from scratch gratuit 00:04:52
    • 70 Utilisation de props dans les pages 00:07:03
    • 71 Création d'un composant de layout 00:08:33
    • 72 Définition de règles de styles globales 00:02:52
    • 73 Utilisation d'un layout spécifique à une ou plusieurs pages 00:01:04
    • 74 Charger des données de façon asynchrone 00:03:31
    • 75 Plusieurs sources de données 00:03:32
    • 76 Routes dynamiques 00:14:21
    • 77 Erreur dans une route dynamique 00:06:23



Formateur : Mediaforma

Mediaforma a publié 98 tutoriels et obtenu une note moyenne de 4,4/5 sur 14 452 tutoriels vendus. Voir les autres formations de Mediaforma

  • Avec quelle version de logiciel ce tuto est-il compatible ?
    svelte 3
  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
Parcours Developpeur Front End
accédez à plus de 1434 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données