Créez une liste de lecture avec Svelte

svelte: une étoile montante dans le paysage du cadre frontal

svelte a rapidement gagné en popularité, dépassant le statut de "juste un autre cadre frontal". Ses distinctions incluent "Breakthrough of the Year" (État de JS 2019), la cote de satisfaction supérieure (État de JS 2020) et le titre du framework Web le plus aimé (Stack Overflow 2021). Ce succès découle de son mélange convaincant de petits paquets, d'excellentes performances et de conception conviviale. Au-delà de ses principaux forces, Svelte propose des fonctionnalités précieuses telles que la gestion intégrée de l'état, les transitions et les animations. Ce tutoriel explore comment Svelte réalise cette efficacité. Les tutoriels ultérieurs approfondiront la création d'applications avec Svelte.

La genèse de svelte

Alors que l'adoption grand public de Svelte a commencé au début des années 2020, ses origines remontent à la fin de 2016 avec son premier engagement GitHub. Créé par Rich Harris (également connu pour le Rollup Bundler), Svelte a émergé de ses expériences en tant que rédacteur en graphique à The Guardian . Son besoin d'un outil qui a simplifié la création de visualisations interactives du site Web sans sacrifier les performances ni la taille du faisceau, tout en restant accessible à des collègues moins compétents, a conduit au développement de Svelte.

Gagner initialement un petit public dédié au sein de la communauté open source, la percée de Svelte est arrivée avec la version de la version 3 en avril 2019. Cette version, une réécriture complète mettant l'accent sur l'expérience du développeur et la facilité d'utilisation, a propulsé Svelte sous les projecteurs. Sa popularité a depuis grimpé en flèche, attirant plus de mainteneurs et conduisant à Rich Harris rejoignant Vercel pour se concentrer sur Svelte à plein temps. Pour une comparaison complète de Svelte avec React et Vue, voir "Svelte 3: Un cadre JavaScript basé sur un compilateur radical."

Construire une application de liste de livres simples

Créons une application de liste de livres simples pour illustrer les capacités de Svelte. L'application finale ressemblera à l'image ci-dessous:

Nous allons commencer par le modèle officiel du projet SVELTE (les alternatives incluent des modèles basés sur Vite ou Sveltekit pour des applications plus complexes). Après avoir installé les packages nécessaires (npm install), nous modifierons App.svelte pour créer la structure HTML de base:

<h4>Add Book</h4>
<input type="text">
<h4>My Books</h4>
<ul>
  <li>A book</li>
</ul>

Ce code, écrit directement au niveau supérieur, exploite la syntaxe HTML-Superset de Svelte.

Ensuite, nous ajouterons une liste de livres statique et une boucle pour la rendre:

<h4>Add Book</h4>
<input type="text">
<h4>My Books</h4>
<ul>
  <li>A book</li>
</ul>

le </pre> <label> Add Book <input type="text" bind:value={newBook} on:keydown={addBook}> </label> <h4>My Books</h4> <ul> {#each books as book} <li>{book}</li> {/each} </ul>

bind:value={newBook} newBook crée une liaison bidirectionnelle entre l'entrée et la variable on:keydown={addBook}. addBook ajoute un écouteur d'événements; La fonction books met à jour le tableau

lorsque l'entrée est enfoncée. La réactivité de Svelte remettra automatiquement le composant.

Processus de compilation de Svelte

Les performances de Svelte et les tailles de petits faisceaux de Svelte sont dues à la nature de son compilateur. Il prépare les fichiers .svelte, les transformant en JavaScript optimisé qui met à jour chirurgicalement le DOM. Cela élimine le besoin d'un grand temps d'exécution et permet des remensions efficaces.

ajoutant du style et des transitions

Améliorons l'interface utilisateur avec CSS:

<🎜>

<label>
  Add Book
</label>
<h4>My Books</h4>
<ul>
  {#each books as book}
    <li>{book}</li>
  {/each}
</ul>

Svelte Scopes Scopes par défaut. Enfin, ajoutons une transition de fondu:

<style>
  input {
    padding: 5px 10px;
  }
  li {
    list-style: none;
  }
  ul {
    padding: 5px 0;
  }
</style>

Le code complet, y compris le style et la transition, est illustré ci-dessous:

<🎜>

<ul>
  {#each books as book}
    <li transition:fade>{book}</li>
  {/each}
</ul>

Cela se traduit par une application de liste de livres fonctionnelle et visuellement attrayante. (L'image de l'application finale irait ici: )

Considérations architecturales et améliorations futures

Ce tutoriel fournit une introduction de base. Les applications plus importantes nécessitent la gestion de l'état, les composants multiples et les mécanismes d'interaction des composants. Svelte propose des solutions pour ces éléments, qui seront explorés dans les tutoriels ultérieurs.

Svelte est-il bon pour votre prochain projet?

La maintenance active de Svelte, les outils robustes, les fonctionnalités stables, l'écosystème croissant et la disponibilité de Sveltekit en font un concurrent solide pour divers projets. La communauté est en plein essor et le cadre ne montre aucun signe de ralentissement.

Étapes suivantes

Il s'agit de la première partie d'une série en six parties. Les pièces futures couvriront la syntaxe du modèle, les instructions réactives, les magasins, l'interaction des composants et les tests. La série complète est également disponible sur Amazon.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!