Il s'agit d'un petit article de réponse à la publication
«Comparaison des frameworks JS: React, Vue et Hyperapp» . En général, je ne suis pas un grand fan de telles comparaisons. Cependant, puisque nous parlions d'un cadre aussi marginal que Hyperapp, en comparaison avec des mastodontes tels que React et Vue, j'ai pensé, pourquoi ne pas considérer tous les mêmes exemples sur
Svelte . Pour ainsi dire, pour compléter le tableau. De plus, cela prend littéralement 5 minutes. C'est parti!
Si tout à coup vous n'êtes pas familier avec
Svelte et le concept de disparition des frameworks, vous pouvez lire les articles
«Magically Disappearing JS Framework» et
«Disappearing Framework» .
Pour la commodité des lecteurs, j'ai copié les exemples de l'
article original sous les spoilers pour le rendre plus pratique à comparer. Eh bien, commençons.
Exemple n ° 1: contre-application
Réagirimport 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"));
▍Svelte
<div> <h1>{count}</h1> <button on:click="set({count: count - 1})">-</button> <button on:click="set({count: count + 1})">+</button> </div>
→ Un
exemple pratique.▍Analyse
Svelte composant - un fichier html, qui a un format bien connu unique composant File (SFC), sous une forme ou une autre, sont déjà utilisés dans
la Vue ,
Ractive ,
Riot et d' autres cadres. En plus du modèle html lui-même, un composant peut avoir le comportement et la logique décrits en javascript, ainsi que des styles étendus du composant.
Aucune partie du composant n'est requise, par conséquent, le composant du compteur ne peut être constitué que du modèle html du compteur lui-même. Pour modifier la valeur de la variable
count , le gestionnaire de clics utilise la méthode intégrée du composant
set () décrite dans la
documentation .
Exemple n ° 2: travailler avec du code asynchrone
Réagir 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"));
▍Svelte
<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>
→ Un
exemple pratique.▍Analyse
Contrairement à JSX, qui, comme une copie conforme, est utilisé dans les 3 cadres de la comparaison d'origine, et étend en fait le code javascript avec une syntaxe de type html,
Svelte utilise des fonctionnalités plus familières - incorporant du code js et css en html en utilisant
< script> et
<style> .
Le script de composant exporte un objet JS simple, divisé en sections. La section des
méthodes décrit les méthodes des composants qui peuvent être utilisées via l'instance de composant et dans les gestionnaires d'événements. Ainsi, lorsque vous cliquez sur le bouton, la méthode
getData () est
appelée , à l'intérieur de laquelle les données sont demandées et à la fin de l'opération, les données sont simplement installées dans l'état du composant et immédiatement dessinées dans le modèle.
Notez l'utilisation de la déstructuration de l'objet de publication (post) à chaque étape de l'itération de la liste de publication:
{#each posts as {title, body}}
Cette astuce évite la redondance dans des modèles comme
{post.title} et simplifie visuellement les modèles en utilisant une entrée plus courte
{title} .
Exemple 3: répertorier le composant d'élément pour une application To-Do
React (style fonctionnel) function TodoItem(props) { return ( <li class={props.done ? "done" : ""} onclick={() => props.toggle(props.id)}> {props.value} </li> ); }
Réagir 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> );
▍Svelte
<li class="{done ? 'done' : ''}" on:click="set({done: !done})">{value}</li>
→ Un
exemple pratique.▍Analyse
Tout est assez banal ici. Nous exposons la classe css en fonction de la valeur
effectuée et modifions cette valeur à l'opposé lorsque vous cliquez sur un élément de la liste.
Comparaison des méthodes de cycle de vie des composants
Avertissement: A
partir de
ce moment -
là ,
j'ai décidé d'omettre la comparaison avec Hyperapp, car sinon la table va lire tout simplement pas.▍Analyse
Svelte est extrêmement minimaliste, y compris en termes de crochets de cycle de vie. Il n'y a que 4 crochets:
- onstate - appelé avant la création du composant et chaque changement d'état avant la mise à jour du DOM.
- oncreate - le moment où le composant est créé est appelé.
- onupdate - appelé immédiatement après le montage dans le DOM et chaque changement d'état après la mise à jour du DOM.
- ondestroy - appelé lorsque le composant est détruit et supprimé du DOM.
Comparaison des performances du framework
Honnêtement, je ne sais pas quoi commenter. Les repères eux-mêmes et la façon dont ils sont exécutés suscitent toujours beaucoup de controverse, donc je ne pense pas qu'il soit logique de concentrer inutilement l'attention.
Cependant, nous n'avons toujours pas d'autres données.
▍Travailler avec des tables
▍Chargement, lancement, tailles de code
▍Travailler avec la mémoire
▍Analyse
À en juger par les chiffres,
Svelte est assez rapide, «mange» peu de mémoire (y compris parce qu'il n'utilise pas VirtualDOM), il démarre rapidement et a une petite taille.
En général, je ne peux pas dire que les résultats des benchmarks de ces 3 frameworks différaient considérablement. Cependant, seul
Svelte a une colonne exclusivement «verte», c'est-à-dire il est assez bon à la fois à tous égards, ce qui signifie qu'il est parfaitement équilibré et n'a pas de distorsions évidentes en termes de vitesse ou de consommation de mémoire ou d'autres mesures. En général, avec lui, vous pouvez démarrer en toute sécurité n'importe quel projet, du Web habituel, aux appareils mobiles, Smart TV et systèmes plus exotiques.
Résumé
Svelte est un excellent outil pour créer des composants de presque toutes les applications Web. Il est aussi puissant que React, et bien qu'il ait une communauté beaucoup plus petite, il nécessite moins d'efforts à maîtriser. Il est flexible, comme Vue, alors qu'il est beaucoup plus minimaliste et vérifié, car il n'essaie pas de saisir à la fois toutes les idées du développement web moderne.
De plus, il est le seul à utiliser le concept de
frameworks menacés . En d'autres termes, il n'a aucun
runtime spécifique autre que le navigateur lui-même.
Les applications s'avèrent rapides, ne demandent pas de ressources et sont de petite taille. De plus,
Svelte peut être utilisé de manière «transparente» dans des applications écrites dans d'autres frameworks, sur lesquelles j'ai l'intention d'écrire la prochaine fois.
Si vous avez rencontré pour la première fois ce merveilleux cadre, vous pourriez être intéressé à lire d'autres articles à ce sujet:
→
Cadre JS disparaissant comme par magie→
saisie semi-automatique de 1 Ko→
SvelteJS: La sortie de la deuxième versionSi vous avez encore des questions sur
Svelte , rejoignez la
chaîne de télégrammes en langue russe
SvelteJS . Là, vous pouvez toujours poser une question et obtenir des conseils, découvrir les dernières nouvelles et simplement profiter de la conversation. Nous serons ravis de vous voir!