Qu’est-ce que Svelte Framework et comment l’utiliser ?

Svelte est l’un des frameworks JavaScript les plus en vogue. Dans l’enquête StackOverflow Developer Survey de 2022, il est apparu comme le deuxième framework JavaScript le plus apprécié des développeurs web. Dans ce guide, vous apprendrez les bases et comment construire une simple application de tâches à faire en utilisant Svelte.

Démarrer avec Svelte

Vous allez configurer les choses avec l’outil de construction Vite. Ouvrez le terminal et exécutez les commandes ci-dessous dans l’ordre. Nommez le projet « svelte-app » (ou votre choix), sélectionnez Svelte comme framework et JavaScript comme variante.

 yarn create vite
cd svelte-app
yarn
yarn dev 

Ouvrez le projet dans un éditeur de code, supprimez le fichier lib et effacer le contenu du dossier app.css et le fichier App.svelte fichier.

Comment Svelte se compare à React

Le DOM est une structure arborescente générée à partir du HTML d’un site, qui montre les relations entre les différents éléments qui composent la page.

Contrairement à React qui utilise un DOM virtuel, Svelte est un compilateur qui comprend, au moment de la construction, comment les choses dans votre application pourraient changer. Parce que Svelte travaille au moment de la construction, il en résulte un JavaScript vanille très performant et optimisé.

Réactivité et animation dans Svelte

La structure de la plupart des applications Svelte est illustrée ci-dessous. Vous pouvez choisir de ne pas inclure l’élément style en ne laissant que les balises script et le balisage :

 <script>
// Scripting Logic
</script>

<!-- Markup -->

<style>
/* Scoped Styling */
</style>
 

Dans Svelte, la réactivité est basée sur les affectations. Regardez le code suivant :

 <script>
    let count = 0;
    const handleClick = () => {
        count += 2;
    }
</script>

<main>
You have clicked: 
<button on:click={handleClick}>
     {count} {count === 1 ? 'time' : 'times'}
</button>
</main>
 

Le scénario définit la balise compte variable et handleClick fonction qui incrémente compte par 2. le principal comporte un bouton avec on:click pour exécuter la directive handleClick fonction. La fonction bouton met à jour quand compte changements.

Svelte facilite l’animation des éléments. Supposons que vous ayez une image dont la largeur peut être ajustée en appuyant sur un bouton, le module svelte/motion permet d’animer les éléments. tweened peut être utilisé pour obtenir cet effet.

 <script>
import { tweened } from 'svelte/motion';
import { cubicOut } from 'svelte/easing';
let src="https://images.pexels.com/photos/718752/pexels-photo-718752.jpeg";
    
    let size=tweened(30, {
        duration: 900,
        easing: cubicOut
    })
</script>

<button on:click={()=>size.set($size+30)}>
    Increase Photo Size
</button>
<button on:click={()=>size.set($size-30)}>
    Decrease Photo Size
</button>
<br />
<img src={src} width={$size} />
 

Ce code utilise tweened pour la communication et l’animation des composants et un cubicOut easing pour créer une animation fluide. taille.set(…) renvoie une promesse résolue une fois la transformation terminée.

Construire une application simple de tâches à faire avec Svelte

Ajoutons des fonctionnalités pour valider les éléments avant qu’ils ne soient ajoutés à la liste des tâches, supprimer des éléments, alerter l’utilisateur si la saisie n’est pas valide, et stocker la liste des tâches dans le stockage local.

Créer un src/composants/Item.svelte et dans le fichier App.svelte définissez votre élément <script&gt ; et importer Item de ./composants/Item.svelte. L’article Article est utilisé pour rendre chaque élément de la tâche :

 <script>
  import Item from "./components/Item.svelte";
</script>
 

Définir un tableau appelé todo et quatre variables à savoir : alertMessage, message d’erreur, duplicateMessage, et successMessage.

   import Item from "./components/Item.svelte";
  let todo = [];
  let errorMessage = "Item cannot be empty!";
  let duplicateMessage = "Item already added!";
  let successMessage = "Item has been added and list updated!";
  let alertMessage;
 

Dans la section balisage, sous le script, créez un élément principal comme point d’entrée. À l’intérieur de celui-ci, créez un élément div avec la classe « app ». À l’intérieur de cette div, créez une autre div avec une classe h6 avec la classe « alert hidden ». Cet élément affiche des messages de réussite fondés sur l’élément alertMessage variable.

 <main>
<div class="app">
<h6 class="alert hidden">{alertMessage}</h6>
</div>
</main> 

Créer un h1 rubrique « Svelte To-Do List », puis ajoutez une formulaire élément avec entrée type « texte », Celui-ci doit avoir un espace réservé et une longueur maximale de 32 caractères, ainsi qu’un bouton de soumission avec un symbole on:submit sur le formulaire pour déclencher la fonction addTodoavec la valeur d’entrée comme paramètre.

 
      <form on:submit|preventDefault={() =>
          addTodo(document.querySelector("input").value)}>
        <div>
          <input type="text" placeholder="Enter Something" maxlength="39" />
          <button type="submit">Add</button>
        </div>
      </form>
       

Créer un « todo-container » div à l’intérieur de l' »app » div. Rendre le « todo » div si le todo le tableau n’est pas vide, sinon rendre un div avec le texte « [Empty] ».

Itère sur le tableau todo dans la div « todo », en rendant une image élément composant qui reçoit les props : « item », « done », « removeTodoHandler » et « updateTodoHandler ».

 <div class="todo-container">
      {#if todo.length}
        <div class="todo">
          {#each todo as { item, done } (item)}
            <Item
              {item}
              {done}
              removeTodoHandler={removeTodo}
              updateTodoHandler={updateTodo}
            />
          {/each}
        </div>
      {:else}
        <div>[Empty]</div>
      {/if}
    </div>
  </div>
 

Avant de définir la logique de l’application, définissons le style du message d’alerte. Pour ce faire, définissons un élément style sous le balisage et ajoutez ce qui suit :

   :global(.alert) {
    padding: 10px;
    color: white;
    position: absolute;
    left: 50%;
    top: -25px;
    transform: translateX(-50%);
    width: max-content;
  }
  :global(.error) {
    background-color: rgba(255, 0, 0, 0.6);
  }
  :global(.success) {
    background-color: rgba(0, 128, 0, 0.6);
  }
  :global(.hidden) {
    display: none;
  }
 

Le code définit le style de la boîte d’alerte en fonction du type d’alerte à l’aide de l’élément :global() . Dans le script il y a cinq fonctions : valider(), afficherAlerte(), addTodo(), removeTodo()et updateTodo().

Chaque fonction, sauf afficherAlerteprend en paramètre un élément. La fonction validate vérifie la présence d’une chaîne vide ou d’éléments en double dans la liste des tâches existante (stockée dans le tableau allItems).

   function validate(item) {
    let allItems = todo.map((x) => x.item);
    if (item.length === 0) {
      return "error";
    } else if (allItems.includes(item.trimEnd().trimStart())) {
      return "duplicate";
    } else {
      return "success";
    }
  }
 

La fonction afficherAlerte() affiche un message d’alerte avec un type (erreur, doublon ou succès). Elle définit le message et les styles appropriés en fonction de l’élément type et cache l’alerte après 2 secondes.

   function displayAlert(type) {
    let alert = document.querySelector(".alert");
    alert.classList.remove("hidden");
    if (type === "error") {
      alertMessage = errorMessage;
      alert.classList.add("error");
    } else if (type === "duplicate") {
      alert.classList.add("error");
      alertMessage = duplicateMessage;
    } else {
      alert.classList.add("success");
      alertMessage = successMessage;
    }
    setTimeout(() => {
      alert.className = "alert hidden";
    }, 2000);
  }
 

Le updateTodo() ajoute un nouvel élément à la liste todo après validation. Si l’élément est valide, il est ajouté au tableau des tâches, le champ de saisie est effacé et une alerte de succès est affichée.

   function addTodo(item) {
    let response = validate(item);
    if (response === "error") {
      displayAlert("error");
    } else if (response === "duplicate") {
      displayAlert("duplicate");
    } else {
      todo = [{ item: item.trimEnd().trimStart(), done: false }, ...todo];
      console.log(todo);
      localStorage.setItem("todo", JSON.stringify(todo));
      document.querySelector("input").value = "";
      displayAlert("success");
    }
  }
 

La fonction updateTodo() fait basculer le statut « done » de la fonction todo alors que le tableau removeTodo() supprime un élément spécifique de la base de données todo tableau.

   function updateTodo(item) {
    let target = todo.findIndex((x) => x.item === item);
    todo[target].done = !todo[target].done;
  }
  
  function removeTodo(item) {
    todo = todo.filter((x) => x.item !== item);
  }
 

Maintenant, allez à la page Article.svelte et définir un fichier script qui exporte l’élément élément, removeTodoHandler, fait, et updateTodoHandler prop. Définir une variable appelée hover qui stocke la valeur booléenne false.

 <script>
    export let item;
    export let removeTodoHandler;
    export let done;
    export let updateTodoHandler;
    let hover = false;
</script>
 

Dans la section balisage, un div est défini avec une classe dynamique basée sur la valeur de la variable « done ». Si « done » est vrai, la classe « strike » est ajoutée, ce qui applique une décoration de texte CSS en ligne pour indiquer l’achèvement. Deux directives de composant, « on:mouseenter » et « on:mouseleave », sont incluses pour faire basculer l’élément survol état.

 <div class="item {done ? 'strike' : ''}"
    on:mouseenter={() => (hover = true)}
    on:mouseleave={() => (hover = false)}>

</div>
 

La div parent se compose de deux éléments : une div (qui affiche une case à cocher et un élément à faire), et un bouton qui est rendu conditionnellement lorsque l’état du survol est true. La case à cocher est liée à la variable « done » et déclenche la fonction « updateTodoHandler » lorsqu’elle est modifiée.

     <div>
        <input
            class="done"
            type="checkbox"
            bind:checked={done}
            on:change={() => updateTodoHandler(item)}/>
        <span>{item}</span>
    </div>

    {#if hover}
        <button class="delete" on:click={() => removeTodoHandler(item)}
            >Remove
        </button>
    {/if}
</div>
 

Et c’est tout ! Vous avez réussi à créer une application de liste de tâches fonctionnelle.

L’application todo crée, supprime et marque les éléments comme faits, mais toutes ces données disparaissent lorsque la page est rafraîchie.

Corrigeons cela en ajoutant du stockage. Pour conserver les données lors du rafraîchissement de la page, modifiez le tableau des tâches comme suit :

 let todo=JSON.parse(localStorage.getItem("todo")) || [];
 

Le code récupère et analyse la clé « todo » dans le stockage local du navigateur. Si la valeur n’est pas vraie, elle est remplacée par un tableau vide.

Ensuite, ajoutez la ligne suivante au fichier addTodo(), updateTodo(), et removeTodo() fonctions.

 localStorage.setItem("todo", JSON.stringify(todo));
 

Ceci stocke le todo dans le stockage local, ce qui garantit la persistance des données.

Garder les choses simples avec Svelte

Les développeurs aiment Svelte parce qu’il est plus facile à écrire, surtout si vous êtes un débutant dans le domaine du développement web.

Svelte est une excellente alternative à React, mais pour ceux qui en veulent plus, tout comme les développeurs React ont NextJS (un framework construit au-dessus de React), les développeurs Svelte ont SvelteKit qui est similaire à NextJS.