Re: "Comparison of JS-frameworks: React, Vue and Hyperapp"

This is a small response article to the publication "Comparison of JS-frameworks: React, Vue and Hyperapp" . In general, I'm not a big fan of such comparisons. However, since we were talking about a marginal framework like Hyperapp, in comparison with mastodons like React and Vue, I thought, why not consider all the same examples on Svelte . So to speak, for the sake of completeness. Moreover, it takes literally 5 minutes. Go!
 
 
Re: "Comparison of JS-frameworks: React, Vue and Hyperapp"
 
"Magically disappearing JS framework" and "Disappearing frameworks" .
 
 
For the convenience of the readers, I copied examples from of the original article under the spoilers, so it was more convenient to compare. Well, let's begin.
 
 


Example №1: the application-counter


 
React [/b]
import 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 ( ?
?
?

{this.state.count}

.
.
.
.
);
}
}
ReactDOM.render ( , Document.querySelector ("# app"));

 
 
Vue [/b]
import Vue from "vue";
new Vue ({
dаta: {count: 0},
.
} methods: {
.down: function (value) {
this.count - = value;
},
up: function (value ) {
This.count + = value;
}
},
.
Render: function (h) {
return (

{This.count}


);
},
El: "#app"
});

 
 
Hyperapp [/b]
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) => (
.
.
.

{state.count}

.
.
.
.
);
app (state, actions, view, document.querySelector ("# app"));

 
 


▍Svelte


 

{count}



 
Working example.
 
 


▍ Analysis


 
Component Svelte Is an html file that has the well-known Single File Component (SFC) format, in one form or another, already applied in Vue , Ractive , Riot and some other frameworks. In addition to the html template itself, the component can have the behavior and logic described in jаvascript, as well as the component's scoped styles.
 
 
No part of the component is mandatory, so the counter component can only consist of the html template of the counter itself. To change the value of the variable count , the click handler uses the built-in method of the component. set () , described in documentation .
 
 


Example number 2: work with asynchronous code


 
React [/b]
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 ( ?
?
?
{this.state.posts.map (post => (
.


{post.title


{Post.body}
))}
);
}
}
ReactDOM.render ( , Document.querySelector ("# app"));

 
 
Vue [/b]
import Vue from "vue";
new Vue ({
dаta: {posts:[]},
.
methods: {
.getdаta: function (value) {
fetch (`https: //jsonplaceholder.typicode.com /posts`)
.then (response => response.json ())
.then (json => {
this.posts = json;
});
}
},
render: function ( h) {
return (
.
.
.
{this.posts.map (post => (
.


{ .

.
.
.
.
.
.
{post.body}
))}
);
},
el: "#app"
});

 
 
Hyperapp [/b]
import {h, app} from "hyperapp";
const state = {
posts:[]
};};
const actions = {
getdаta: () => (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) => ( ?
?
?

? actions.getData ()}> Get posts
.
{state.posts.map (post => (
{Post.title}
.

.
.
{Post.body}
))}
);
app (state, actions, view, document.querySelector ("# app"));

 
 


▍Svelte


 

{#each posts as {title, body}}


{title}


{body}
{/each}

 
Working example.
 
 


▍ Analysis


 
Unlike JSX, which, as a carbon copy, is used in all 3 frameworks from the original comparison, and essentially extends the jаvascript code with an html-like syntax, Svelte uses more familiar features - the implementation of js and css code in html using the tags [b]
+ 0 -

Add comment