Dies ist ein kleiner Antwortartikel auf die Veröffentlichung
„Vergleich von JS-Frameworks: React, Vue und Hyperapp“ . Im Allgemeinen bin ich kein großer Fan solcher Vergleiche. Da wir jedoch über einen so marginalen Rahmen wie Hyperapp im Vergleich zu Mastodons wie React und Vue sprachen, dachte ich, warum nicht alle Beispiele auf
Svelte betrachten . Sozusagen, um das Bild zu vervollständigen. Darüber hinaus dauert es buchstäblich 5 Minuten. Lass uns gehen!
Wenn Sie plötzlich nicht mehr mit
Svelte und dem Konzept des Verschwindens von Frameworks vertraut sind, können Sie die Artikel
„Magically Disappearing JS Framework“ und
„Disappearing Framework“ lesen.
Zur Vereinfachung der Lesbarkeit habe ich die Beispiele aus dem
Originalartikel unter die Spoiler kopiert, um den Vergleich zu vereinfachen. Nun, fangen wir an.
Beispiel Nr. 1: Gegenanwendung
Reagiereimport React from "react"; import ReactDOM from "react-dom"; class Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0}; } down(value) { this.setState(state => ({ count: state.count - value })); } up(value) { this.setState(state => ({ count: state.count + value })); } render() { return ( <div> <h1>{this.state.count}</h1> <button onClick = {() => this.down(1)}>-</button> <button onClick = {() => this.up(1)}>+</button> </div> ); } } ReactDOM.render(<Counter />, document.querySelector("#app"));
Vue import Vue from "vue"; new Vue({ data: { count: 0 }, methods: { down: function(value) { this.count -= value; }, up: function(value) { this.count += value; } }, render: function(h) { return( <div> <h1>{this.count}</h1> <button onClick={() => this.down(1)}>-</button> <button onClick={() => this.up(1)}>+</button> </div> ); }, el: "#app" });
Hyperapp import { h, app } from "hyperapp"; const state = { count: 0 }; const actions = { down: value => state => ({ count: state.count - value}), up: value => state => ({ count: state.count + value}) }; const view = (state, actions) => ( <div> <h1>{state.count}</h1> <button onclick={() => actions.down(1)}>-</button> <button onclick={() => actions.up(1)}>+</button> </div> ); app(state, actions, view, document.querySelector("#app"));
»Schlank
<div> <h1>{count}</h1> <button on:click="set({count: count - 1})">-</button> <button on:click="set({count: count + 1})">+</button> </div>
→ Ein
Arbeitsbeispiel.▍Analyse
Eine
Svelte- Komponente ist eine HTML-Datei mit dem berüchtigten SFC-Format (Single File Component) in der einen oder anderen Form, das bereits in
Vue ,
Ractive ,
Riot und einigen anderen Frameworks verwendet wird. Zusätzlich zur HTML-Vorlage selbst kann eine Komponente das in Javascript beschriebene Verhalten und die Logik sowie die Bereichsstile der Komponente aufweisen.
Es ist kein Teil der Komponente erforderlich, daher kann die Komponente des Zählers nur aus der HTML-Vorlage des Zählers selbst bestehen. Um den Wert der
Zählvariablen zu ändern, verwendet der Click-Handler die in der
Dokumentation beschriebene integrierte Methode der
set () -Komponente.
Beispiel Nr. 2: Arbeiten mit asynchronem Code
Reagiere import React from "react"; import ReactDOM from "react-dom"; class PostViewer extends React.Component { constructor(props) { super(props); this.state = { posts: [] }; } getData() { fetch(`https://jsonplaceholder.typicode.com/posts`) .then(response => response.json()) .then(json => { this.setState(state => ({ posts: json})); }); } render() { return ( <div> <button onClick={() => this.getData()}>Get posts</button> {this.state.posts.map(post => ( <div key={post.id}> <h2><font color="#3AC1EF">{post.title}</font></h2> <p>{post.body}</p> </div> ))} </div> ); } } ReactDOM.render(<PostViewer />, document.querySelector("#app"));
Vue import Vue from "vue"; new Vue({ data: { posts: [] }, methods: { getData: function(value) { fetch(`https://jsonplaceholder.typicode.com/posts`) .then(response => response.json()) .then(json => { this.posts = json; }); } }, render: function(h) { return ( <div> <button onClick={() => this.getData()}>Get posts</button> {this.posts.map(post => ( <div key={post.id}> <h2><font color="#3AC1EF">{post.title}</font></h2> <p>{post.body}</p> </div> ))} </div> ); }, el: "#app" });
Hyperapp import { h, app } from "hyperapp"; const state = { posts: [] }; const actions = { getData: () => (state, actions) => { fetch(`https://jsonplaceholder.typicode.com/posts`) .then(response => response.json()) .then(json => { actions.getDataComplete(json); }); }, getDataComplete: data => state => ({ posts: data }) }; const view = (state, actions) => ( <div> <button onclick={() => actions.getData()}>Get posts</button> {state.posts.map(post => ( <div key={post.id}> <h2><font color="#3AC1EF">{post.title}</font></h2> <p>{post.body}</p> </div> ))} </div> ); app(state, actions, view, document.querySelector("#app"));
»Schlank
<div> <button on:click="getData()">Get posts</button> {#each posts as {title, body}} <div> <h2><font color="#3AC1EF">{title}</font></h2> <p>{body}</p> </div> {/each} </div> <script> export default { methods: { getData() { fetch('https://jsonplaceholder.typicode.com/posts') .then(res => res.json()) .then(posts => this.set({ posts })); } } }; </script>
→ Ein
Arbeitsbeispiel.▍Analyse
Im Gegensatz zu JSX, das wie eine Kopie in allen drei Frameworks aus dem ursprünglichen Vergleich verwendet wird und tatsächlich Javascript-Code mit HTML-ähnlicher Syntax erweitert, verwendet
Svelte bekanntere Funktionen - das Einbetten von Js- und CSS-Code in HTML mit
< Skript> und
<Stil> .
Das Komponentenskript exportiert ein einfaches JS-Objekt, das in Abschnitte unterteilt ist. Im Abschnitt
Methoden werden Komponentenmethoden beschrieben, die über die Komponenteninstanz und in Ereignishandlern verwendet werden können. Wenn Sie also auf die Schaltfläche klicken, wird die Methode
getData () aufgerufen , in der Daten angefordert werden. Nach Abschluss des Vorgangs werden die Daten einfach im Komponentenstatus installiert und sofort in die Vorlage gezeichnet.
Beachten Sie die Verwendung der Destrukturierung des Publikationsobjekts (Post) bei jedem Schritt der Iteration der Publikationsliste:
{#each posts as {title, body}}
Dieser Trick vermeidet Redundanz in Vorlagen wie
{post.title} und vereinfacht Vorlagen visuell mithilfe eines kürzeren Eintrags
{title} .
Beispiel 3: Listenelementkomponente für eine Aufgabenanwendung
Reagieren (Funktionsstil) function TodoItem(props) { return ( <li class={props.done ? "done" : ""} onclick={() => props.toggle(props.id)}> {props.value} </li> ); }
Reagiere class TodoItem extends React.Component { render () { return ( <li class={this.props.done ? "done" : ""} onclick={() => this.props.toggle(this.props.id)}> {this.props.value} </li> ); } }
Vue var TodoItem = Vue.component("todoitem", { props: ["id", "value", "done", "toggle"], template: '<li v-bind:class="{done : done}" v-on:click="toggle(id)">{{value}}</li>' });
Hyperapp const TodoItem = ({ id, value, done, toggle }) = ( <li class={done ? "done" : ""} onclick={() => toggle(id)}> {value} </li> );
»Schlank
<li class="{done ? 'done' : ''}" on:click="set({done: !done})">{value}</li>
→ Ein
Arbeitsbeispiel.▍Analyse
Hier ist alles ziemlich banal. Wir machen die CSS-Klasse abhängig vom
erledigten Wert verfügbar und ändern diesen Wert in das Gegenteil, wenn Sie auf ein Listenelement klicken.
Vergleich der Methoden des Komponentenlebenszyklus
Haftungsausschluss : Von nun an habe ich beschlossen, den Vergleich mit Hyperapp wegzulassen, da sonst die Tabellen einfach unlesbar wären.▍Analyse
Svelte ist extrem minimalistisch, auch in Bezug auf Lifecycle-Hooks. Es gibt nur 4 Haken:
- onstate - wird aufgerufen, bevor die Komponente erstellt wird, und jede Statusänderung, bevor das DOM aktualisiert wird.
- oncreate - Der Moment, in dem die Komponente erstellt wird, wird aufgerufen.
- onupdate - wird sofort nach dem Mounten im DOM aufgerufen und jeder Status ändert sich nach dem Aktualisieren des DOM.
- ondestroy - wird aufgerufen, wenn die Komponente zerstört und aus dem DOM entfernt wird.
Vergleich der Framework-Leistung
Ehrlich gesagt weiß ich nicht, was ich kommentieren soll. Benchmarks selbst und die Art und Weise, wie sie ausgeführt werden, sind immer sehr umstritten. Ich halte es daher nicht für sinnvoll, die Aufmerksamkeit unnötig zu konzentrieren.
Wir haben jedoch noch keine anderen Daten.
▍Arbeiten mit Tischen
▍Laden, Starten, Codegrößen
▍Arbeiten mit Speicher
▍Analyse
Gemessen an den Zahlen ist
Svelte ziemlich schnell, "frisst" wenig Speicher (auch weil VirtualDOM nicht verwendet wird), startet schnell und hat eine geringe Größe.
Im Allgemeinen kann ich nicht sagen, dass sich die Ergebnisse der Benchmarks dieser drei Frameworks dramatisch unterschieden. Allerdings hat nur
Svelte eine ausschließlich "grüne" Spalte, d.h. Es ist in jeder Hinsicht auf einmal ziemlich gut, was bedeutet, dass es perfekt ausbalanciert ist und keine offensichtlichen Verzerrungen in Bezug auf Geschwindigkeit, Speicherverbrauch oder andere Metriken aufweist. Im Allgemeinen können Sie damit sicher jedes Projekt starten, vom üblichen Web über mobile Geräte bis hin zu Smart TV und exotischeren Systemen.
Zusammenfassung
Svelte ist ein großartiges Tool zum Erstellen von Komponenten für fast jede Webanwendung. Es ist so mächtig wie React und obwohl es eine wesentlich kleinere Community hat, erfordert es weniger Aufwand, um es zu meistern. Es ist flexibel wie Vue, während es viel minimalistischer und verifizierter ist, da es nicht versucht, alle Ideen der modernen Webentwicklung auf einmal zu erfassen.
Darüber hinaus ist er der einzige, der das Konzept
gefährdeter Frameworks verwendet . Mit anderen Worten, es hat keine bestimmte
Laufzeit außer dem Browser selbst.
Anwendungen darauf stellen sich schnell heraus, sind nicht ressourcenintensiv und klein. Darüber hinaus kann
Svelte „nahtlos“ in Anwendungen verwendet werden, die in anderen Frameworks geschrieben wurden, über die ich beim nächsten Mal schreiben möchte.
Wenn Sie diesen wunderbaren Rahmen zum ersten Mal kennengelernt haben, könnten Sie daran interessiert sein, andere Artikel darüber zu lesen:
→
Magisch verschwindendes JS Framework→ 1
KB Autovervollständigung→
SvelteJS: Veröffentlichung der zweiten VersionWenn Sie noch Fragen zu
Svelte haben , treten Sie dem russischsprachigen
Telegrammkanal SvelteJS bei . Dort können Sie jederzeit eine Frage stellen und sich beraten lassen, die neuesten Nachrichten erfahren und einfach Spaß am Chatten haben. Wir freuen uns, Sie zu sehen!