Sufle 3: Ein radikaler Compiler-basiertes JavaScript-Framework

Svelte 3: Ein neuer Ansatz zur Front-End-Entwicklung

In diesem Artikel wird Svelte 3 untersucht, ein einzigartiges Front-End-JavaScript-Framework, das sich durch seinen Kompilierungsprozess unterscheidet. Im Gegensatz zu Frameworks wie React, die ein großes JavaScript -Bundle versenden, erstellt SELTE -Anwendungen Anwendungen in einen deutlich kleineren, optimierten JavaScript -Code. Diese während des Build -Prozesses erreichte Optimierung führt zu schnelleren und effizienteren Anwendungen.

Svelte bietet auch einen unverwechselbaren Ansatz für das Datenmanagement und die DOM -Manipulation. Es aktualisiert direkt das reale DOM und beseitigt die Notwendigkeit eines virtuellen DOM, was zu einer verbesserten Leistung führt. Dies, verbunden mit seiner intuitiven Komponentenerstellung und eingebauten reaktiven Zuständen, macht die Entwicklung angenehm und effizient. Selbst erfahrene React- oder VUE -Entwickler finden SufleTe es wert, erforscht zu haben. Erstellen wir eine einfache Anwendung, um ihre Fähigkeiten zu demonstrieren.

Schlüsselvorteile von Sufle:

• optimiertes JavaScript: svelte kompiliert zu optimiertem JavaScript, wodurch die Laufzeitgröße im Vergleich zu Frameworks wie React.
reduziert wird
• Direkt DOM -Manipulation: Svelt aktualisiert das reale DOM direkt, verbessert die Datenverwaltung und die DOM -Manipulationseffizienz.
• vereinfachte Komponenten: Die Erstellung der Komponenten ist mit Scoped CSS und integrierten Reaktivzuständen gestoppt.
• weniger Kesselplatte: Der Compiler -Ansatz minimiert Code und Kesselplatte, beschleunigende Entwicklung.
• Intuitive Syntax: Reaktivität und Komponentenkommunikation werden mit minimaler Syntax behandelt.
• Leicht und effizient: svelte bietet eine leichte Alternative zu schwereren Rahmenbedingungen wie React und Vue.

Erste Schritte:

Um die Komplexität von Bündelung und Infrastruktur zu vermeiden, folgen wir dem offiziellen Tutorial in SufleT. Stellen Sie sicher, dass Sie Knoten und Git installiert haben. Dann führen Sie:

aus

npx degit sveltejs/template github-repository-searcher

Dies klingt die Svelte -Vorlage in das Verzeichnis

und legt die erforderlichen Werkzeuge ein. Navigieren Sie anschließend zum Verzeichnis (github-repository-searcher) und führen Sie cd github-repository-searcher aus, um Abhängigkeiten zu installieren. Schließlich startet npm install den Entwicklungsserver mithilfe von Rollup. Zugriff auf die Anwendung unter npm run dev. http://localhost:5000

Erstellen einer Svelt -Komponente:

Svelte -Komponenten befinden sich in

Dateien. Die Vorlage enthält .svelte, strukturiert in drei Abschnitte: App.svelte

1. <code></li> <style> /* CSS for styling the list */ </style> <div class="search-wrapper"> <form class="search-form"> <input type="text" bind:value={userSearchTerm} placeholder="search for repositories" /> </form> <ul> {#each filteredRepos as repository} <li> <strong>{repository.name}</strong> <code>{repository.url} / * CSS zum Styling der Liste */
   {#ach Filteredrepos als Repository}
   {repository.name} {repository.url} <p> <code>Search {/jede} App.svelte repositories

   import suche in app.svelte

   und verwenden Sie es bedingt basierend auf der Verfügbarkeit von Repositories <p>. <code>$: Search.svelte filteredRepos Reaktivität und Filterung: userSearchTerm repositories Die Reaktivität von
   Selte wird durch die $: <p> -Syntax in <code> such.svelt <strong> demonstriert. Dies stellt sicher, dass <code> FilteredRepos aktualisiert wird, wenn UseSearchterm
   oder Repositories <p> ändert. Alternative Ansätze, die Funktionen oder Ereignishörer verwenden, werden ebenfalls diskutiert, wodurch die Vorteile der Reaktivitätsfunktionen von Selte hervorgehoben werden. <code>npm run build

   Produktionsbau:

   Ausführen npm build <p>, um ein produktionsbereites Bundle zu erstellen. Die resultierende Bündelgröße ist in der Regel aufgrund des Kompilierungsprozesses von Svelte gering. </p> <p> <strong> Schlussfolgerung: </strong> </p> <ul> svelte bietet eine überzeugende Alternative zu herkömmlichen Frameworks und betont die Code -Effizienz und -leistung. Seine intuitive Syntax- und integrierte Funktionen vereinfachen die Entwicklung und machen sie zu einem starken Anwärter auf die Front-End-Entwicklung. <li> <strong> </strong> Svelte FAQ (präzise Version): </li> <li> <strong> </strong> </li> Was ist Svelte? <li> <strong> Wie unterscheidet sich Selte von React/Vue? React/vue arbeiten im Browser mehr Arbeit. </strong> </li> <li> Wie handelt es sich mit Selte-Komponenten in einer HTML/CSS/JS-ähnlichen Syntax und ist zu effizientem JavaScript kompiliert. <strong> kompiliert. </strong> </li> <li> Verwendet Svelte ein virtuelles Dom? <strong> Nein, es aktualisiert das reale DOM direkt. </strong> </li> <li> Was ist Sveltekit? <strong> </strong> Vorteile von Svelta? </li> </ul> <p> <img src="https://img.php.cn/upload/article/000/000/000/173932009210437.jpg" alt="Svelte 3: A Radical Compiler-based JavaScript Framework"></p>

   Das obige ist der detaillierte Inhalt vonSufle 3: Ein radikaler Compiler-basiertes JavaScript-Framework. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!