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.

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
• Apporter un ordinateur portable avec les droits administrateurs
• Avoir installé sur votre machine : Git, Node 10+, un IDE (VSCode, Atom, ...), un navigateur moderne (Chrome ou Firefox)

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)

Jonathan Barthélémy

Consultant spécialisé dans les technologies du web utilisant Javascript (Vue.js/Nuxt, Node.js, Angular, React).

Après des débuts en tant que développeur dans plusieurs types d'entreprises, Jonathan délivre, depuis maintenant 4 ans, son expertise pour différents clients à travers la formation et l'accompagnement des équipes techniques dans leurs transformations numériques.

Voir son profil détaillé

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 (http://weareants.fr), et encore avant ça, il était ingénieur en dynamique vibratoire pour l'aéronautique.

Voir son profil détaillé

Suivi de formation en option

A l'issue de la formation, nos formateurs peuvent aussi intervenir pour vous accompagner dans la mise en application des compétences acquises :

• en répondant à vos questions lors de rendez-vous téléphoniques réguliers
• en étant présents physiquement à l'amorce du projet
• en réalisant un audit de vos pratiques quelques semaines/mois après la formation

Cette idée vous intéresse ? Faîtes-le nous savoir pour que nous trouvions la formule adaptée à votre situation.