Dans l'écosystème Javascript actuel, les frameworks front-end sont devenus indispensables au développement d'une application web. La sainte trinité Vue-Angular-React tient le haut du pavé et domine très largement le secteur.

Mais des enfants terribles commencent à émerger. S'inspirant de ces références tout en remettant en question une bonne partie de leur fonctionnement, ces alternatives proposent une nouvelle vision du développement front-end.

Svelte est le fer de lance de ces alternatives, et repose sur l'idée d'écrire, embarquer et exécuter le strict nécessaire, et rien de plus.

Cette formation Svelte s'adresse à tou·te·s les développeur·se·s ayant de l'expérience sur des frameworks front-end tels que React, Vue ou Angular, souhaitant explorer une nouvelle voie prometteuse dans l'applicatif web client.

À l'issue de ces 3 jours, vous aurez compris comment Svelte compense les limitations des frameworks classiques, et saurez monter les bases d'une application Svelte depuis zéro jusqu'à son déploiement.

Installations nécessaires sur votre machine : Git, Node 10+, un IDE (VSCode, Atom, ...), un navigateur moderne (Chrome ou Firefox). Et vous devez avoir les droits d'administrateur.

Covid-19 : Nous nous adaptons dans ces moments difficiles. Nous avons mis en place des outils permettant l'organisation de formations à distance.

Les objectifs

• Comprendre comment Svelte se démarque des autres frameworks
• Repenser la notion de réactivité d'une application
• Maîtriser la gestion d'une application Svelte du composant jusqu'au déploiement

Pré-requis

• Etre autonome en Javascript
• Avoir une expérience avec un framework type React / Vue / Angular
• Ordinateur portable à apporter

Le programme de la formation Svelte

Jour 1 : 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

Jour 2 : zoom sur les composants, transitions et les stores

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

Jour 3 : les tests et les sappers

Tests

• Tests unitaires
• Tests d'intégration

Mise en pratique sur les différentes notions vues

Sapper

• C'est quoi ?
• Routing
• Layout personnalisé
• Rendu côté serveur
• Prefetch
• Export statique
• Déploiement

Mise en pratique sur les différentes notions vues

Le(s) formateur(s)

A propos de Human Coders

Human Coders c'est un centre de formation pour développeurs avec :

• une habilitation Datadock, indispensable pour que vous puissiez obtenir des aides au financement via votre OPCO
• de nombreux clients qui nous font confiance depuis des années
• un manifeste pour garantir des formations à taille humaine, des formateurs passionnés, de véritables workshops...
• 74 formations au catalogue, 878 sessions depuis nos débuts en 2012 avec une moyenne de satisfaction de 4,6/5
• la possibilité de vous proposer un accompagnement personnalisé ou du conseil après la formation