VT-S5A-rocordier-Svelte.mp4

Introduction

Salut tout le monde, avant de partir pour un autre exemple concret de création de projet Svelte, permettez-moi de vous rappeler brièvement pourquoi ce framework est tout simplement génial. Svelte, c'est comme la baguette magique du développement web. Il a été conçu pour rendre le développement d'applications web plus rapide, plus efficace et plus agréable. Comment ? C'est un framework qui se distingue par son approche de compilation côté client. Au lieu par exemple de laisser l'indicateur effectuer un travail intensif, Svelte va déplacer une grande partie du travail au moment de la compilation. Le résultat ? Des applications plus légères, chargements plus rapides et une UX qui est au faire dire wow. Mais ce n'est pas tout, Svelte simplifie également le processus de développement. Exit le code boilerplate ennuyeux, Svelte se concentre sur l'essentiel en permettant de créer des applications avec un code propre et concis. Maintenant, sans plus tarder, passons à un exemple concret que vous puissiez voir par vous-même à quel point Svelte est puissant et facile à utiliser.

Installation des prérequis

Donc nous voici sur le PC. Donc avant de lancer dans le code, on va devoir installer quelques outils qui vont permettre de lancer le projet Svelte. Donc tout d'abord on a l'outil NodeJS fin npm qui va être installé grâce NodeJS. Donc vous pouvez l'installer sur Windows, MacOS et Linux sur le site officiel donc vous tapez NodeJS dans la barre de recherche et vous l'avez. Voilà donc après avoir installé ça vous avez normalement la commande npm de disponibole dans le terminal. Donc vous pouvez tester ça facilement en faisant node tiret v et là normalement vous avez la version de votre Node qui est installée ducoup vous avez npm et voilà la commande va s'installer comme ça. Voilà. Après ça vous devez avoir un IDE pour coder, classique, donc normalement vous en avez un j'imagine mais bon je vais quand même le dire. Donc vous avez VS Code qui est gratuit, qui marche très très bien et moi je vais utiliser WebStorm dans cette vidéo pour réaliser ce tuto donc WebStorm qui est disponible gratuitement pour les étudiants grâce à la suite IntelliJ donc voilà. Et donc maintenant avec tout ça vous avez tout et ben let's go pour le projet.

Création du projet Svelte

Donc nous voici dans WebStorm pour lancer le projet Svelte, donc tout d'abord on va ouvrir un terminal et taper npm create svelte arobase latest et le nom de votre app donc ici tuto tiret svelte. Hop ! On va le laisser faire. Donc là vous aller avoir une première question donc les deux là sont des projets qui viennent de zéro alors qu'ici ça va être une démo app. Nous pour le tuto on va prendre la démo app pour montrer tous les fondements du framework. Donc là il nous donne des indications sur quoi faire après, donc là il vient de nous créer le projet qui vient d'apparaître tuto svelte ici. Donc on a le fichier source avec les lib donc les images tout ça, les routes avec toutes les pages donc le compteur le header le machin. Donc on va faire cd tuto svelte, npm install pour installer toutes les dépendances dont a besoin le projet svelte donc là aussi on va le laisser procéder. Donc voilà une fois que c'est fait vous avez un nouveau dossier qui est apparu donc nodes modules, donc c'est connu hein, c'est toutes les dépendances javascript utilisées par le projet. Ensuite là il y avez git init donc ça c'est si vous voulez lancer un dépôt Git relié au projet nous on va pas le faire ici et ducoup après le npm run dev tiret tiret open donc tiret tiret open c'est pour ouvrir directement le navigateur.

Présentation du projet

Donc ici on a notre petite application de base on va dire donc ici c'est un compteur tout simple voilà avec des petites animations. Donc je vais vous montrer un peu comment ça fonctionne tout ça. Donc on va aller tout de suite voir le fichier Counter.svelte donc Counter.svelte c'est là où il y aura toute la logique du compteur. Donc vous avez toujours, donc c'est un peu comme Vue si il y en a qui connaisse, donc vous avez une partie script qui va contenir tout le JavaScript du composant, une partie HTML qui n'est pas du tout obligé d'être entouré par une seule balise, vous pouvez très bien mettre un input ici par exemple, voilà ça marchera très bien il est juste ici. Là ça va mettre à jour vue que j'ai mis un bind:value avec la variable count qui est définie ici. Donc ici on va avoir deux boutons plus et moins qui vont venir avec un on deux points click donc c'est pas un onclick tout court bon après ça c'est juste la syntaxe de Svelte. Donc on va appeler une fonction, c'est une petite fonction qui va juste enlever un au compteur. Donc après on le truc de classe avec les styles pour chaque classe. Docn ici on a vraiment affaire à un composant classique de Svelte.

Svelte.dev

Donc vous pouvez aussi aller sur Svelte.dev doc c'est le site de Svelte. Vous allez avoir le REPL pour faire directement le code sur Internet ou alors encore le tuto, un très bon tuto qui va vous permettre de passer en revue toutes les possibilités de Svelte.

Outro

Et sur ce je vous dis bye bye !