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·tes les développeur·ses 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 restons ouverts. Cette formation est disponible à distance.
🇺🇸 This training is also available in English

Les objectifs

• Comprendre comment Svelte se démarque des autres frameworks
• Utiliser la syntaxe Svelte pour créer des composants
• Comprendre la réactivité de Svelte
• Maîtriser les stores
• Savoir construire une application avec SvelteKit

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
• Méthodes fonctionnelles des tableaux
• Asynchrone
• ES6+
• Modules

C'est quoi Svelte ?

• Historique du front-end
• Les frameworks
• Pourquoi Svelte ?
• Svelte
• Liens utiles
• Outillage de base

Écrire du Svelte simple

• Bases de la syntaxe
• Blocks #if/else, #each, #await
• Réactivité
• Bindings

Mises en pratique
- Exploration de la syntaxe dans le REPL
- Installation de Svelte
- Construction d'un ToDo et d'un Trombi simples

Jour 2 : Creuser Svelte

Les composants en détail

• Cycle de vie
• Évènements
• Slots
• Module context
• Composants spéciaux

Les Stores

• Concept
• Le store writable
• Autres stores

Effets visuels

• Transitions
• Animations
• Easing

Mises en pratique
- Horloge
- Explorateur de fichiers
- Créer un store personnalisé
- Mise en place de transitions simples

Jour 3 : SvelteKit, ou la mort de Sapper

• C'est quoi un framework d'application ?
• Routing
• Layouts
• Loading des données
• Modules SvelteKit
• Transitional apps
• Builds et déploiements

Mises en pratique
- Créer une application présentant les exercices de la formation
- Créer un Twitter-like
- Déployer le projet

Le(s) formateur(s)

Romain Crestey

Développeur web indépendant, Romain est fan de NodeJS, React/Redux, Typescript, ThreeJS et quelques autres. Auparavant, il était associé-hacker au sein de Ants, et encore avant ça, il était ingénieur en dynamique vibratoire pour l'aéronautique.

Voir son profil détaillé

A propos de Human Coders

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

• une certification Qualiopi, 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...
• 88 formations au catalogue, 1169 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