recherche

Maison >interface Web >js tutoriel >NgSysV.Création d'une simple application Web réactive Svelte

NgSysV.Création d'une simple application Web réactive Svelte

Patricia Arquette
Patricia Arquetteoriginal
2024-11-28 14:47:14510parcourir

Cette série d'articles est indexée sur NgateSystems.com. Vous y trouverez également une fonction de recherche par mot-clé très utile.

Dernière révision : 24 novembre

1. Présentation

Le post précédent créait une webapp Svelte entièrement composée de HTML simple. Il ne contenait aucun Javascript et n'utilisait donc aucune des fonctionnalités sophistiquées de génération HTML dynamique de Svelte. Cet article ne fera qu'effleurer la surface des fonctionnalités de Svelte mais devrait vous donner une idée de la puissance du langage.

2. Etat et réactivité

Vue objectivement, une webapp est une hiérarchie complexe de pages HTML, de popups, de tableaux, de formulaires et de boutons. Cet assemblage vertigineux d'éléments visuels est « informé » par des données. Les tableaux sont gonflés avec le contenu d'un tableau JavaScript. Les fenêtres contextuelles apparaissent et disparaissent à la demande des champs de drapeau. Les formulaires s'épanouissent avec des données lorsqu'ils sont « poussés » par la souris et le clavier. Bref, c'est compliqué. Comment une sorte d’ordre peut-il être établi dans cette situation ?

Collectivement, l'ensemble des données définissant l'apparence d'une application Web à tout moment est appelé état de l'application Web. De nombreux efforts ont été consacrés à la technologie de développement logiciel conçue pour faciliter l'écriture d'applications Web qui réagissent efficacement lorsque l'état change. Les plateformes comme Svelte sont expressément conçues pour offrir une bonne réactivité.

Regardons l'approche de Svelte pour la définition de l'État et sa mise en œuvre de la réactivité.

2.1 Une webapp réactive simple

Une fonctionnalité courante sur une page Web est une fenêtre pop-up qui s'affiche (généralement de manière ennuyeuse) lorsque vous la démarrez, mais qui, obligeamment, disparaît lorsque vous cliquez dessus. Voyons comment Svelte vous permettrait d'utiliser l'état et la réactivité pour implémenter cela dans une application Web.

En Javascript, vous devez définir une variable avant de pouvoir l'utiliser. Ainsi par exemple, une commande comme

console.log(myDataItem);

générera une erreur à moins que quelque part plus tôt dans le code vous l'ayez défini en utilisant une instruction comme 

let myDataItem;

En passant, vous trouverez utile d'avoir accès à un "terrain de jeu" qui vous permet d'essayer rapidement des morceaux de JavaScript comme celui-ci. La vue « inspecter » de n'importe quelle page de navigateur fournit un tel terrain de jeu : ouvrez l'inspecteur sur une page aléatoire et sélectionnez l'onglet « console » dans sa barre de menu. Vous pouvez également essayer la console javascript sur PlayCode.

Il y a beaucoup à dire sur le mot-clé let de JavaScript (essayez de demander à chatGPT la "portée") mais let a une signification supplémentaire dans Svelte car c'est ainsi que vous définissez l'état. Dans un programme Svelte, toute variable définie avec let fait partie de l'état du programme.

Et alors ? Eh bien, j'ai dit plus tôt que les variables d'état - les variables qui définissent l'apparence d'une webapp - sont "réactives". Cela signifie que lorsque leur valeur change, l’apparence de l’application Web est automatiquement modifiée en conséquence. Supposons que vous utilisiez une variable booléenne popupVisible pour définir l'état de la fenêtre contextuelle. Svelte - une plateforme réactive - pourrait-elle utiliser la valeur de la variable pour déterminer si la popup est visible ou non ? Essayons.

Voici le code que je propose d'utiliser. Je vais vous expliquer ce qu'il fait dans une minute :

//src/routes/ page.svelte - supprimez cette ligne avant d'exécuter
<script>
    laissez popupVisible = true ;

    fonction togglePopup() {
        popupVisible = !popupVisible;
    }
</script>

<div>
    {#if popupVisible}
        <bouton
           >



<p>Le code ici est divisé en deux sections. La section "script" supérieure, définie par le <script></script> tags, déclare une variable javascript popupVisible et une fonction togglePopup(). La section inférieure "modèle" spécifie le HTML "modéré" par un bloc logique Svelte {#if} {/if}. Le code svelte peut référencer des variables et des fonctions définies dans le fichier <script> section pour guider la génération de code HTML. Les références sont entourées d'accolades {}, sauf lorsqu'elles sont utilisées directement dans un bloc logique - voir la documentation Svelte sur Basic Markup et Logic Blocks pour plus de détails.</p>

<p>Le code affiché ci-dessus est très grossier. Une « pop-up » est normalement définie par un symbole <div> balise formatée avec une bordure et du CSS de positionnement. Ici, j'ai utilisé un <bouton> tag - quelque chose qui serait plus couramment utilisé pour définir l'élément "submit" sur un formulaire. J'ai fait cela simplement parce que cela me permet d'éviter certains détails techniques qui pourraient vous distraire. J'ai coloré le bouton "popup" en bleu pour que vous puissiez le voir.</p>

<p>Si vous avez encore une copie du projet squelette svelte-dev Svelte créé dans la publication 2.1, essayez d'utiliser ce code pour remplacer l'intégralité du contenu de src/routes/page.svelte. Lorsque vous ouvrez un terminal sur le projet et démarrez le serveur de développement comme avant, votre navigateur devrait maintenant prendre vie et afficher l'écran ci-dessous :</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173277643775221.jpg" alt="NgSysV.Creating a simple Reactive Svelte webapp"></p>

<p>Le rectangle bleu est le "pop-up". Il est affiché au démarrage car à ce stade, la variable popupVisible est définie sur true et la logique Svelte pilotant la génération HTML de la page est invitée à créer un <bouton> tag dans ce cas.</p>

<p>Essayez maintenant de cliquer sur la fenêtre contextuelle. Magie! Cela disparaît. En effet, le <bouton> La balise spécifiant que le popup contient une clause onClick qui fait qu'un clic sur l'élément exécute la fonction togglePopup. Cela définit à son tour la variable popupVisible sur false.</p><p>J'ai dit plus tôt que la modification d'une variable « état » de Svelte amène Svelte à actualiser l'écran en réexécutant la section modèle de la page. Ainsi, la section modèle est réexécutée et maintenant, puisque la valeur de popupVisible est fausse, le <bouton> le code affichant la pop-up est contourné, laissant une page vide.</p>

<p>Prenez un moment maintenant pour laisser cela pénétrer. Si vous aviez toujours travaillé avec le code primitif de manipulation DOM que j'ai introduit dans le post 1.1, cet effet n'aurait pu être obtenu qu'en écrivant une bonne partie de textes assez techniques (et probablement plutôt inefficace) du code de bas niveau. Ici, il vous suffit de changer la valeur d'une variable. Sveltekit a géré les conséquences complexes <strong>automatiquement</strong> (et, rassurez-vous, efficacement). </p>

<p>En bref, Svelte vous offre un langage de haut niveau qui vous permet de laisser les détails fastidieux de la gestion de l'écran du navigateur au framework.  </p>

<p><em>En octobre 24, Svelte 5 a introduit une série d'améliorations dans ses arrangements de définition de réactivité. La construction let décrite ci-dessus fonctionne toujours bien pour tout ce qui est dans cette série d'articles, mais un nouveau concept de runes est désormais disponible pour gérer des exigences plus complexes. Voir Que sont les runes pour plus de détails.</em></p>

<h4>
  
  
  2.2 Saisie des données
</h4>

<p>Rendons le pop-up un peu plus intéressant. Imaginez que vous ayez pour tâche de maintenir une liste de « produits » pour une entreprise manufacturière. Vous voudriez un utilitaire qui affiche la liste actuelle et vous permet d'ajouter de nouveaux produits. En pratique, bien sûr, vous voudriez également qu'il puisse modifier et supprimer des entrées, mais gardons les choses simples pour l'instant. </p>

<p>Jetez un œil au code suivant. Cela élargira probablement vos connaissances en JavaScript, mais les commentaires internes devraient vous aider.<br>
</p>

<pre class="brush:php;toolbar:false">//src/routes/ page.svelte - supprimez cette ligne avant d'exécuter
<script>
    laissez popupVisible = false;
    laissez newProductNumber = "" ;
    laissez les produits = []; // Un tableau d'objets produit {productNumber : productNumber}
</script>

<div>



<p>La section "modèle" ici commence par vérifier la valeur de popupVisible. Si cela est faux (ce qui sera le cas au démarrage car la variable vient d'être initialisée dans la section "script"), la webapp affiche la liste actuelle des "produits" de la webapp (un tableau de productNumbers stocké dans un tableau de produits). </p>

<p>Le code continue et affiche un bouton "Ajouter un autre produit" - un bouton normal maintenant, pas la version bizarre utilisée dans l'exemple précédent. Mais, comme auparavant, il est associé à une fonction on:click, et celle-ci définit la valeur de popupVisible sur true.</p>

<p>Que se passera-t-il si l'on clique sur le bouton ? Pourquoi, puisque popupVisible est une variable réactive, la webapp actualisera son écran.</p>

<p>Cette fois, la section d'affichage des produits du formulaire est ignorée et le contrôle se déplacera directement vers la deuxième partie de la section modèle.</p><p>Ici, vous verrez quelque chose qui ressemble davantage à une fenêtre contextuelle conventionnelle. Celui-ci utilise un <form> balise dans un conteneur div> pour collecter les entrées d'une variable d'état newProductNumber.  Un qualificatif spécial "bind" Svelte est utilisé ici pour synchroniser newProductNumber avec la saisie au clavier de l'utilisateur. Chaque fois que l'utilisateur tape un caractère dans le champ <input> du formulaire, le newProductNumber est mis à jour. 

<p>Lorsque l'utilisateur clique enfin sur le bouton « S'inscrire » du formulaire, sa fonction on:click est ainsi capable d'insérer un newProductNumber entièrement mis à jour dans le tableau des produits et de réinitialiser le champ popupVisible.</p>

<p>Enfin, puisque popupVisible est une variable réactive, la section "modèle" du code est réexécutée et la popup est remplacée par la liste mise à jour des numéros de produits.</p>

<p>Une ou deux autres choses peuvent vous intriguer. Dans l'exemple précédent, le qualificatif anon:click faisait référence à une fonction définie dans le fichier <script> section. Dans cette nouvelle version de page.svelte, cependant, la fonction est définie explicitement dans le <bouton> spécification HTML du champ. Les deux approches sont parfaitement valables. La version utilisée ici vous semble probablement un peu étrange, mais il s'agit d'un arrangement largement utilisé qui présente l'avantage que la logique de la fonction est définie à son point d'invocation. Il est ainsi beaucoup plus facile de voir ce qui se passe. </p>

<p>Pour référence, l'expression :<br>
"() => { .... }" dit "voici une fonction définie par les instructions JavaScript suivantes : "{ .... }". Il existe de nombreuses variantes. Demandez à chatGPT de vous donner un tutoriel sur "flèche "fonctions .</p>

<p>En passant, vous remarquerez également que j'ai été beaucoup plus aventureux avec mon "styling". Il y a un titre, par exemple, et tout est bien centré (l'"héritage" CSS garantit que le>

</p><p>Mais c'est assez de contexte. Voyons la webapp en action. Collez le nouveau code sur le contenu actuel de votre fichier page.svelte, enregistrez-le et (si nécessaire) ouvrez un terminal sur votre projet et redémarrez votre serveur de développement avec la commande npm run dev -- --open. Voici ce que vous devriez voir dans votre navigateur : </p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173277643810144.jpg" alt="NgSysV.Creating a simple Reactive Svelte webapp"></p>

<p>Et voici ce que vous devriez voir lorsque vous cliquez sur le bouton :<br><br></p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173277643952736.jpg" alt="NgSysV.Creating a simple Reactive Svelte webapp"></p>

<p>Comme il n'y a pas de validation sur le champ newProductNumber, vous constaterez que vous pouvez saisir des caractères ainsi que des chiffres - nous corrigerons ce problème dans un prochain article. Néanmoins, lorsque vous cliquez sur le bouton « S'inscrire », vous devriez voir la fenêtre contextuelle remplacée par la page d'affichage de l'inventaire d'origine, avec votre nouveau « numéro » de produit ajouté à la liste.</p>

<p>Ce bout de Svelte commence presque à ressembler à un système d'information ! </p><h3>
  
  
  3. En avant et vers le haut
</h3>

<p>Cet article vous a donné un bref aperçu des concepts clés incarnés dans la langue Svelte. Malheureusement, il y a un problème. Comme vous l'aurez sûrement remarqué, l'exemple "Inventaire" que vous venez de voir est effectivement inutile car à chaque fois que vous fermez la webapp, sa liste de produits disparaît ! La prochaine étape consiste donc à vous présenter la technologie de base de données <strong>Firestore</strong> de Google. Cela vous permettra de créer un stockage <strong>persistant</strong> sur un serveur hôte. </p>

<h3>
  
  
  Post-scriptum (a) : Lorsque les choses tournent mal – Enquêter sur les problèmes de mise en page avec l'inspecteur Chrome
</h3>

<p>« Quand les choses tournent mal » dans l'article 2.1 décrit comment gérer certains des problèmes les plus grossiers que vous rencontrerez lors du développement d'une application Web. Mais maintenant que vous travaillez à un niveau plus avancé, vous avez besoin d’un outil plus sophistiqué. Cette section vous présente le "Chrome Inspector", une aide précieuse pour corriger les problèmes de mise en page de l'écran de votre webapp et les erreurs logiques dans votre JavaScript (et bien plus encore, comme vous le verrez plus loin dans cette série).</p>

<p>L'Inspecteur est lancé sur une page d'application web en faisant un clic droit sur la page et en sélectionnant l'option "Inspecter". Voici un exemple de sa sortie :</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173277644070139.jpg" alt="NgSysV.Creating a simple Reactive Svelte webapp"></p>

<p>Dans cette capture d'écran, j'ai :</p>
  • Lancement de l'Inspecteur, comme ci-dessus. wLa fenêtre d'inspection masque désormais la moitié inférieure de la fenêtre de l'application Web. Cela peut être gênant car l'inspecteur peut désormais masquer certains éléments de l'application Web que je souhaite inspecter ! Ceci est partiellement géré en "dimensionnant" la fenêtre de l'inspecteur en cliquant et en faisant glisser sur sa bordure supérieure. Vous pouvez également utiliser l'outil "Dock Side" sous l'icône à trois points à l'extrême droite du menu pour ancrer l'Inspector sur le côté de l'écran.
  • Sélection de l'onglet "Éléments" dans la barre de menu de l'Inspecteur
  • Agrandissement de la zone et
    lignes dans la hiérarchie des balises HTML affichées dans le panneau d'inspection de gauche et survolées avec la souris sur le symbole

    tag affichant le titre de la webapp

Si vous essayez cela vous-même, vous remarquerez que le titre a acquis des graphiques colorés. Ceux-ci vous montrent la taille et la position de la marge, de la bordure et du remplissage qui ont été ajoutés à votre texte. Le panneau d'inspection de droite fournit plus de détails. Si vous cliquez sur l'onglet calculé dans son menu, vous obtiendrez un graphique expliquant le code couleur et les tailles détaillées des différents éléments. Si vous cliquez sur l'onglet "Styles", vous verrez les détails des styles attachés au texte. Le premier ensemble d'entrées de la liste confirme les styles définis explicitement avec la balise>

La beauté de ce panneau est que vous pouvez utiliser l'inspecteur pour voir l'effet de la modification et de l'ajout de styles. Par exemple, supposons que vous souhaitiez essayer une police rouge sur le titre, cliquez quelque part dans l'entrée element.style en haut du panneau et saisissez color: red. Le titre, obligeamment, devient désormais rouge. Notez la possibilité d'utiliser la saisie semi-automatique pour essayer différentes couleurs.

Je ne veux pas insister sur ce point, mais je pense que vous devriez commencer à voir comment cette fonctionnalité peut vous fournir un outil précis et intuitif pour enquêter et résoudre les problèmes de mise en page. Pour plus d'informations, consultez la documentation de Google sur l'inspecteur chez DevTools.

Soyez prêt à y consacrer beaucoup de temps. L'Inspector est un outil complexe, il vous faudra donc un certain temps avant de pouvoir l'utiliser en toute confiance. Mais ce sera du temps bien dépensé. L'Inspector m'a certainement épargné d'innombrables heures d'expérimentation aveugle avec les paramètres du code source. L'affichage graphique de l'inspecteur rend visible toutes les propriétés cachées des largeurs, des marges et du remplissage des éléments.

Post-scriptum (b) : Enquête sur les problèmes de logique avec l'inspecteur Chrome

L'inspecteur peut également vous aider à trouver des erreurs logiques en vous permettant de visualiser votre code source et de définir des « points d'arrêt » sur les lignes où vous souhaitez que l'exécution s'arrête. Après avoir actualisé l'application Web (avec l'inspecteur toujours ouvert), vous pouvez inspecter les valeurs des champs à chaque point d'arrêt. Voici une capture d'écran de l'inspecteur en action :

NgSysV.Creating a simple Reactive Svelte webapp

Dans cette capture d'écran, j'ai :

  • Lancement de l'Inspecteur comme avant.
  • J'ai cliqué sur l'onglet "Sources" au-dessus du panneau de gauche et développé la hiérarchie des sources pour localhost dans la vue de la page pour me permettre de cliquer sur l'entrée page.svelte en italique pour mon itinéraire dans la ligne src/routes.
  • J'ai noté que le panneau de droite affiche désormais la source de page.svelte et j'ai cliqué sur let popupVisible = false ; ligne pour définir un point d'arrêt (confirmé par un surlignage bleu sur son numéro de ligne).
  • Actualisation de la page dans le navigateur et notation que l'application Web affiche désormais un "message en pause dans le débogueur" qui comprend un bouton "Reprendre l'exécution" et un bouton "Passer au prochain appel de fonction". Vous verrez également que let popupVisible = false; la ligne est maintenant en surbrillance

L'effet de tout cela a été de mettre la webapp en mode "code debug". En ce moment, je débogue la section