TUTO Svelte.js 3 par la pratique

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.
 

Pourquoi utiliser 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 meilleures performances

Au programme de ce tuto Svelte.js 3 par la pratique

Dans cette formation en ligne 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,
• réactivité,
• 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'effectuer 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.

Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions.
Les fichiers projets sont fournis avec le cours.

Bienvenue sur cette formation qui vous permettre de devenir opérationnel rapidement en Svelte.js.