Erstellen Sie eine Leseliste mit Sufle

Sufle: Ein steigender Stern in der Frontend -Framework -Landschaft

Svelte hat schnell an Popularität gewonnen und den Status eines "nur einem anderen Frontend -Framework" übertrifft. Zu den Auszeichnungen gehören "Breakthrough of the Year" (State of JS 2019), die Top -Zufriedenheitsbewertung (Bundesstaat JS 2020) und der Titel des beliebten Web -Frameworks (Stack Overflow 2021). Dieser Erfolg ergibt sich aus seiner überzeugenden Mischung aus kleinen Bündelgrößen, hervorragenden Leistung und benutzerfreundlichem Design. Über seine Kernstärken hinaus bietet SVELTE wertvolle Funktionen wie ein integriertes Staatsmanagement, Übergänge und Animationen. In diesem Tutorial wird untersucht, wie Sufle diese Effizienz erreicht. Nachfolgende Tutorials werden tiefer in den Bau von Anwendungen mit Svelte eingehen.

Die Entstehung von Svelte

Während die Mainstream -Adoption von Sufle in den frühen 2020er Jahren begann, zeichnen sich seine Ursprünge mit seinem ersten Github -Commit auf Ende 2016 zurück. Sufte wurde von Rich Harris (auch bekannt für den Rollup -Bundler) erstellt und kam aus seinen Erfahrungen als Grafikredakteur bei The Guardian

hervor. Sein Bedürfnis nach einem Tool, das die Erstellung interaktiver Website -Visualisierungen vereinfachte, ohne die Leistung oder die Bündelgröße zu beeinträchtigen und gleichzeitig für weniger technisch kompetente Kollegen zugänglich zu sein, führte zu Sufels Entwicklung.

zunächst in der Open-Source-Community, die eine kleine, engagierte Anhängerschaft in der Open-Source-Community gewann, kam Selte's Breakthrough mit der Veröffentlichung von Version 3 im April 2019 an. Diese Version, eine vollständige Umschreiung, in der die Entwicklungserfahrung und die Benutzerfreundlichkeit im Rampenlicht hervorgehoben wurden. Seine Popularität ist seitdem angestiegen, hat mehr Betriebe angezogen und dazu führt, dass Rich Harris sich Vercel anschloss, um sich auf die Vollzeit-Sumente zu konzentrieren. Für einen umfassenden Vergleich von Svelte mit React and Vue siehe "Svelt 3: Ein radikaler Compiler-basiertes JavaScript-Framework".

Erstellen einer einfachen Buchliste

Erstellen wir eine einfache Buchlistenanwendung, um die Funktionen von Svelte zu veranschaulichen. Die endgültige Anwendung ähnelt dem Bild unten:

npm install Wir beginnen mit der offiziellen SufleTe-Projektvorlage (Alternativen umfassen vite-basierte Vorlagen oder Sveltekit für komplexere Anwendungen). Nach der Installation der erforderlichen Pakete (App.svelte) werden wir

ändern, um die grundlegende HTML -Struktur zu erstellen:

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

Dieser Code, der direkt auf der oberen Ebene geschrieben wurde

Als nächstes werden wir eine statische Buchliste und eine Schleife hinzufügen, um sie zu rendern:

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

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

bind:value={newBook} newBook erstellt eine Zwei-Wege-Bindung zwischen der Eingabe und der on:keydown={addBook} Variablen. addBook fügt einen Event -Hörer hinzu; Die Funktion books aktualisiert das

-Array, wenn die Eingabetaste gedrückt wird. Die Reaktivität von Selte löscht die Komponente automatisch erneut.

Selte's Compilation Process

.svelte Selte's Leistung und kleine Bündelgrößen sind auf der Naturkompilierer Natur zurückzuführen. Es wird die

-Dateien vorverarbeitet und sie in optimierte JavaScript verwandelt, die die DOM chirurgisch aktualisiert. Dadurch wird die Notwendigkeit einer großen Laufzeit beseitigt und ermöglicht effiziente Rerverser.

Styling und Übergänge hinzufügen

Verbessern wir die Benutzeroberfläche mit CSS:

<🎜>

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

Sufle Seltas Scopes Styles standardmäßig. Lassen Sie uns schließlich einen Fade-In-Übergang hinzufügen:

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

Der vollständige Code, einschließlich Styling und Übergang, ist unten dargestellt:

<🎜>

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

Dies führt zu einer funktionalen und visuell ansprechenden Buchliste. (Bild der endgültigen Anwendung würde hier gehen:

)

architektonische Überlegungen und zukünftige Verbesserungen

Dieses Tutorial bietet eine grundlegende Einführung. Größere Anwendungen erfordern das Zustandsmanagement, mehrere Komponenten und Komponenten -Interaktionsmechanismen. Svelte bietet Lösungen dafür, die in nachfolgenden Tutorials untersucht werden.

Ist Selte richtig für Ihr nächstes Projekt?

Die aktive Wartung, robuste Werkzeuge, stabile Merkmale, wachsendes Ökosystem und die Verfügbarkeit von Sveltekit machen es zu einem starken Anwärter auf verschiedene Projekte. Die Gemeinschaft floriert und der Rahmen zeigt keine Anzeichen einer Verlangsamung.

Nächste Schritte

Dies ist der erste Teil einer sechsteiligen Serie. Zukünftige Teile werden die Template -Syntax, reaktive Anweisungen, Speichern, Komponentenwechselwirkung und Tests abdecken. Die komplette Serie ist auch bei Amazon erhältlich.

Das obige ist der detaillierte Inhalt vonErstellen Sie eine Leseliste mit Sufle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!