Développement d'Applications Web cybernétiquement améliorées avec Svelte

Svelte.js est un compilateur JavaScript permettant de générer du code efficace qui améliore les performances d’exécution du client. À l’aide de Svelte.js, les utilisateurs peuvent créer des applications frontales et des interfaces utilisateur.

Objectif

À la fin de cette formation, les participants seront en mesure de :

• Développez des applications frontales et des interfaces utilisateur avec Sveltes.js.
• Pré-rendu d’une application web sur un serveur pour améliorer le référencement.
• Utilisez Svelete.js comme alternative à React.js, Angular et Vue.js.

Public Cible

Développeurs Web

Programme de la Formation

Rappels et introduction à Svelte

• Rappels JS
• Valeurs et variables
• Asynchrone
• ES6+
• Démarrer avec Svelte
• Qu’est ce que Svelte ?
• Les outils que nous allons utiliser (NPM, Github, Node)
• Installer Svelte
• Structure d’une application Svelte
• Afficher notre première variable
• La réactivité avec Svelte
• Les composants
• Communiquer via les « props »
• Pour aller plus loin sur le binding
• Les classes CSS dynamiques

Mise en pratique sur les différentes notions vues

 

Structure de Code

• Insérer une structure de code dans le template
• If, else, else-if
• Each
• Await blocks
• Les clés

Mise en pratique sur les différentes notions vues

 

Aller plus loin avec les composants

• Les différents types de composants
• La communication entre composants
• Les événements personnalisés
• Travailler avec les slots
• Named & default slots
• Les cycles de vie

Mise en pratique sur les différentes notions vues

 

Les transitions

• La direction de transition avec Svelte
• Ajouter des paramètres
• Les transitions CSS et JS personnalisés
• Les événements de transition

Mise en pratique sur les différentes notions vues

 

Gérer les données via un store

• Pourquoi un store
• Les différents types de store
• Créer un store writable
• S’abonner à un store
• Mettre à jour des données du store
• Les « auto-suscriptions »
• Comprendre les stores « readable »
• Le « custom store »

Mise en pratique sur les différentes notions vues

 

Les tests et les sappers

• Tests
• Tests unitaires