Comparaison des frameworks JS: React, Vue et Hyperapp

L'auteur du matériel, dont nous publions la traduction aujourd'hui, pense qu'Hyperapp est une alternative notable aux frameworks Web tels que React ou Vue . Il dit que la raison de cette affirmation est qu'il a découvert que Hyperapp était plus facile à apprendre que les deux cadres. Son idée a été critiquée, car il semble qu'elle repose uniquement sur son opinion, et cette approche ne donne tout simplement pas aux autres cadres la possibilité de montrer leurs points forts. Cet article vise une analyse objective d'Hyperapp, React et Vue, basée sur des exemples simples qui démontrent leurs capacités, et sur la base des résultats de leurs tests.

Exemple # 1: contre-application

L'implémentation de la contre-application est probablement l'un des exemples les plus couramment utilisés en programmation réactive. C'est extrêmement simple et compréhensible:

• Nous avons besoin du count variable, qui stockera la valeur du compteur.
• Deux méthodes seront nécessaires pour incrémenter et décrémenter le count variables.
• Un mécanisme est nécessaire pour afficher la valeur stockée dans count et la présenter à l'utilisateur.
• Deux boutons sont nécessaires qui sont liés aux méthodes appropriées, permettant à l'utilisateur d'agir sur la variable de count .

Voici une implémentation de cet exemple utilisant les frameworks en question.

▍ Réagir

 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 (           <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")); 

▍Analyse

Si vous n'êtes pas familier avec ces cadres, ou même avec au moins l'un d'entre eux, alors ici, vous rencontrerez probablement quelque chose d'incompréhensible. Analysons donc ce code.

• Lorsque vous utilisez les trois cadres, il existe import commandes d' import au début du code d'application.
• React utilise un paradigme orienté objet. Cela crée une classe pour le composant Counter . Vue va de la même façon. Ici, une nouvelle instance de la classe Vue est créée, des informations lui sont transmises. Et enfin, Hyperapp utilise un paradigme fonctionnel, il utilise la view , l' state et les actions des entités indépendantes.
• Si nous parlons du count variables, alors dans React, il est initialisé dans le constructeur du composant, et dans Vue et Hyperapp, c'est une propriété des data et state objets d' state , respectivement.
• Si nous allons plus loin dans l'exploration de ces applications, nous pouvons voir que React et Vue utilisent des méthodes très similaires pour interagir avec la variable count . Dans React, pour modifier l'état d'une application, la méthode setState héritée de React.Component . Dans Vue, la valeur de this.count modifiée directement. Les méthodes Hyperapp sont écrites à l'aide de la syntaxe de la fonction de flèche ES6. Parmi les frameworks en question, il est le seul à l'utiliser, puisque React et Vue sont obligés d'utiliser le mot this clé this dans leurs méthodes. Les méthodes Hyperapp, en revanche, nécessitent de leur transmettre, en tant qu'argument, un objet avec l'état d'application. Cela signifie qu'ils sont plus susceptibles d'être réutilisables dans divers contextes.
• La partie de l'application responsable de la sortie des données sur la page est presque identique dans les trois exemples. La particularité de Vue est que lors de l'utilisation de ce framework, la fonction h doit être passée au sous-système de rendu. Hyperapp utilise onclick au lieu d' onclick , et ici, la variable count est accessible différemment de React et Vue, en raison des particularités de la façon dont l'état de l'application est stocké dans chaque framework.
• Et enfin, les trois frameworks utilisent la liaison à l'élément #app . Dans chacun d'eux, cette opération est effectuée différemment. Il convient de noter que dans Vue, cette opération semble la plus simple et la plus compréhensible et donne au développeur une conception plus flexible, travaillant avec le sélecteur d'élément et non avec l'élément lui-même.

▍ Conclusions

Si vous comparez directement le code qui résout le même problème écrit à l'aide des trois cadres, il s'avère que Hyperapp, pour la mise en œuvre de l'application de compteur, nécessite le moins de lignes de code, et c'est le seul cadre qui utilise une approche fonctionnelle. Cependant, la quantité de code écrit à l'aide de Vue, si vous comptez le nombre de caractères, il s'avère un peu moins, et l'utilisation d'un sélecteur d'élément semble très bonne. Le code de l'application React semble être le plus long, mais cela ne signifie pas qu'il est beaucoup plus difficile à comprendre que le code écrit pour travailler avec d'autres frameworks analysés.

Exemple n ° 2: travailler avec du code asynchrone

Il est possible que, dans la pratique, vous ayez à gérer du code asynchrone. L'une des opérations asynchrones les plus courantes consiste à envoyer une demande à une API. Pour les besoins de cet exemple, l'API JSONPlaceholder est utilisée , qui contient des données conditionnelles et répertorie les publications. Voici ce que nous allons faire ici:

• Nous enregistrons le tableau pour le publier dans l'état de l'application.
• Nous appelons, en utilisant la méthode appropriée, fetch() , indiquant l'URL dont nous avons besoin, attendons que les données arrivent, analysons le code JSON reçu, qui est un tableau d'objets, et enfin mettons à jour la variable posts en y écrivant les données reçues.
• Nous affichons un bouton sur la page qui appelle la méthode qui charge la liste des publications.
• Répertoriez les publications des posts aide des touches.

Considérons un code qui implémente le schéma d'action ci-dessus.

▍ 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")); 

▍Analyse

Analysons ce code et comparons les trois cadres étudiés.

• Comme dans l'exemple précédent, le stockage de l'état de l'application, la sortie des données et la connexion à l'élément de page sont très similaires dans les trois cadres. Ici, les mêmes différences sont observées, que nous avons déjà mentionnées ci-dessus.
• Le téléchargement de données à l'aide de la fonction fetch() est une opération assez simple; elle fonctionne comme prévu dans tous les frameworks. La principale différence ici, cependant, est que Hyperapp prend en charge les opérations asynchrones un peu différemment des autres frameworks. Au lieu de modifier l'état directement, dans une action asynchrone, cette action appelle une autre action synchrone, qui reçoit les données et les convertit dans un format approprié. Cela rend le cœur de l'application plus fonctionnel et mieux adapté à la fragmentation en petites pièces susceptibles d'être réutilisées. Cette approche permet en outre d'éviter certains des problèmes inhérents aux rappels imbriqués qui peuvent survenir dans des situations comme celles-ci.
• Si nous parlons de la taille du code, l'application Hyperapp a encore besoin de moins de lignes de code pour atteindre le même objectif, mais le code Vue semble plus court, et si vous comptez le nombre de caractères dans le code, il est plus court que les autres options.

▍ Conclusions

L'exécution d'opérations asynchrones s'est avérée tout aussi simple dans tous les cadres. Hyperapp peut conduire le développeur à écrire du code plus fonctionnel et modulaire lorsqu'il travaille avec des actions asynchrones, mais les deux autres frameworks font également un excellent travail de leur tâche et, à cet égard, donnent au développeur la possibilité de choisir.

Exemple 3: répertorier le composant d'élément pour une application To-Do

Les applications To-Do sont probablement l'exemple le plus connu en programmation réactive. Apparemment, quelque chose de similaire a été implémenté en utilisant presque tous les frameworks existants. Ici, nous n'implémenterons pas l'intégralité de l'application. Au lieu de cela, concentrons-nous sur un composant sans état simple afin d'explorer les possibilités des frameworks à l'étude pour créer de petits blocs de construction d'applications Web pouvant être réutilisés.

Considérons l'implémentation du composant en utilisant les frameworks étudiés. Dans cet exemple, nous développerons cependant les options de code à l'étude en considérant un composant React écrit dans un style fonctionnel.

▍ Réagir (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

Veuillez noter que Hyperapp utilise également un style fonctionnel.

 const TodoItem = ({ id, value, done, toggle }) = (   <li class={done ? "done" : ""} onclick={() => toggle(id)}>       {value}   </li> ); 

▍Analyse

• React, en ce qui concerne l'utilisation de modèles de codage, est le cadre le plus flexible. Il prend en charge les composants fonctionnels, ainsi que les composants conçus comme des classes. De plus, React, dans sa forme standard, prend également en charge les composants Hyperapp.
• Hyperapp prend également en charge les composants fonctionnels de React. Cela signifie que lorsque vous travaillez avec Hyperapp et React, il y a beaucoup de place pour l'expérimentation.
• Vue se classe dernier dans ce test. Il a une syntaxe assez étrange qui est difficile à comprendre tout de suite, même pour ceux qui connaissent React ou Hyperapp.
• Si nous parlons de la longueur du code, tous les exemples ont des tailles très similaires. La seule chose que l'on peut noter ici est que le code sur React, dans l'une des options, s'est avéré être un peu plus volumineux que dans l'autre.

▍ Conclusions

Il faut un certain temps pour s'habituer à Vue, car ses modèles sont légèrement différents des modèles des deux autres frameworks. React est extrêmement flexible, il prend en charge diverses approches utilisées pour créer des composants. Dans le même temps, tout est très simple dans Hyperapp, et il est également compatible avec React, ce qui vous permet de changer le framework, si nécessaire, à un certain stade du projet.

Comparaison des méthodes de cycle de vie des composants

Une autre considération importante affectant le choix d'une infrastructure est les événements de cycle de vie des composants qu'elle prend en charge, auxquels vous pouvez vous abonner et que vous pouvez traiter en fonction des besoins du développeur. Voici un tableau basé sur une analyse de l'API des systèmes à l'étude.

Événement	Réagir	Vue	Hyperapp
Initialisation	constructeur	beforeCreate, créé	-
Montage	comoinentDidMount	avantMonté, monté	créer
Mettre à jour	componentDidUpdate	beforeUpdate, mis à jour	mise à jour
Démontage	componentWillUnmount	-	onremove
Destruction	-	avant Détruire, détruit	ondestroy

▍Analyse

Voici ce que vous pouvez comprendre en analysant ce tableau:

• La plupart des crochets de cycle de vie se trouvent dans Vue. Avec leur aide, le programmeur a la possibilité de traiter tout ce qui se passe avec le composant, soit avant que l'événement correspondant soit appelé, soit après. Cela peut être utile pour gérer des composants complexes.
• Les crochets du cycle de vie de React et Hyperapp sont très similaires, bien que React combine le traitement des événements qui se produisent lors du démontage et de la destruction d'un composant, tandis que Hyperapp agit également avec les événements de création et de montage d'un composant. Les deux offrent au développeur un nombre suffisant de possibilités de traitement des événements du cycle de vie.
• Vue ne gère pas l'événement de démontage (pour autant que vous puissiez le comprendre en analysant l'API du framework), mais s'appuie plutôt sur des hooks associés à la destruction du composant. React ne gère pas un événement de suppression de composant, ce qui permet de traiter uniquement un événement de démontage de composant. Hyperapp ne propose pas de hooks pour gérer les événements de création de composants, mais s'appuie entièrement sur les événements de montage. Selon vos besoins et votre expérience, ces différences doivent être prises en compte lors de la conception d'une application, en tenant compte de la possibilité de traiter les événements du cycle de vie des composants.

▍ Conclusions

En général, on peut noter que les méthodes de gestion des événements qui se produisent pendant le cycle de vie des composants prennent en charge tous les cadres. Ces méthodes résoudront de nombreux problèmes. Les trois cadres offrent des crochets pour toutes sortes d'événements, mais il existe des différences mineures entre eux, dont la source peut être les caractéristiques internes des cadres et les différences dans leur mise en œuvre. Vue dans ce domaine a peut-être une longueur d'avance sur les autres systèmes, offrant un système de traitement des événements plus détaillé, vous permettant de gérer les événements du cycle de vie avant ou après qu'ils se produisent.

Comparaison des performances du framework

En plus de la commodité de l'utilisation du cadre et des techniques de programmation utilisées pour travailler avec lui, de nombreux développeurs sont sérieusement préoccupés par les performances des cadres, en particulier pour les applications assez complexes. Le projet js-framework-benchmark est une source précieuse d'informations sur les performances de divers frameworks.

Par conséquent, jetez un œil aux résultats des tests de React, Vue et Hyperapp.

▍Travailler avec des tables

Voici les résultats des tests des frameworks pour travailler avec des tables. L'indicateur dans les cellules du tableau correspond à la durée de l'opération ± écart type. Le résultat de la division de l'indicateur obtenu par le meilleur indicateur est indiqué entre parenthèses.

Analyse

• Les opérations dans lesquelles les clés (sans clé) ne sont pas utilisées pour la sortie de données sont beaucoup plus rapides que les opérations dans lesquelles les clés sont utilisées (avec clé).
• La plus rapide des six options considérées est celle qui utilise React sans utiliser de touches, ce qui montre des performances impressionnantes dans tous les tests.
• Si vous comparez Vue et React lorsque vous travaillez avec des clés, Vue présente un léger avantage. Dans le même temps, si vous comparez React et Vue dans des variantes où les clés ne sont pas utilisées, Vue affiche des performances nettement inférieures à React.
• Vue et Hyperapp, comme vous pouvez le voir sur les résultats, ont quelques difficultés avec le test, dans lequel la mise à jour partielle du tableau est effectuée, et React s'y montre bien, probablement en raison d'une optimisation visant à accélérer de telles opérations.

▍Chargement, lancement, tailles de code

Voici un tableau avec les résultats d'une étude d'indicateurs liés à la vitesse de lancement du framework, à sa taille, à son utilisation du thread principal.

Analyse

• Le code Hyperapp s'est avéré être le plus petit parmi les frameworks étudiés. Les codes React et Vue ont à peu près la même taille.
• Hyperapp a besoin de moins de temps pour se lancer. La raison de cela, bien sûr, est la petite taille du code cadre et l'approche minimaliste de la conception de son API.
• Vue, en ce qui concerne le temps nécessaire pour lancer le framework, est un peu plus rapide que React.

▍Travailler avec la mémoire

Considérez maintenant les résultats du test d'allocation de mémoire.

Analyse

• Hyperapp est le framework le moins exigeant en termes de consommation de mémoire.
• En général, on peut noter que tous les frameworks ne consomment pas beaucoup de mémoire. Cela suggère qu'ils fonctionneront à peu près de la même manière sur les ordinateurs modernes.

▍ Conclusions

Si, lors du développement d'un projet, vous avez besoin d'atteindre des performances maximales, vous devez comprendre, d'une part, quel type d'application vous développez, et d'autre part, de déterminer clairement les besoins de cette application. Si vous combinez l'analyse des performances des trois cadres, vous avez le sentiment que Vue et React sont mieux adaptés aux applications plus complexes, et Hyperapp est meilleur aux applications à plus petite échelle qui ont besoin de traiter moins de données, ce qui nécessite un lancement aussi rapide que possible, et qui peut avoir besoin de travailler sur les ordinateurs les moins rapides.

Cependant, il convient de rappeler que les tests de performances utilisés ici sont loin de la réalité, d'une sorte de scénario moyen. Par conséquent, après les avoir testés et comparés sur un projet réel, vous pouvez voir d'autres résultats.

Notes supplémentaires

Il convient de noter que la comparaison de cadres Web peut ressembler à quelque chose comme la comparaison de pommes et d'oranges. Voici quelques autres considérations concernant React, Vue et Hyperapp qui peuvent être utiles pour choisir un cadre spécifique pour un projet:

• React contourne le problème selon lequel les éléments JSX voisins doivent être enveloppés dans l'élément parent, introduisant le concept de fragments - des éléments qui vous permettent de regrouper un ensemble d'éléments descendants sans ajouter de nœuds supplémentaires au DOM.
• React fournit au développeur des composants d'ordre supérieur , tandis que Vue utilise des mixins pour réutiliser les fonctionnalités des composants.
• Vue utilise plus pleinement le concept de séparation des responsabilités, en séparant la structure et les fonctionnalités de l'application à l'aide de modèles .
• Hyperapp, comparé à React et Vue, ressemble à un système qui fournit une API de niveau inférieur. Le code des applications Hyperapp s'avère plus court, il offre une grande flexibilité, ce qui peut être utile dans les cas où le développeur peut vouloir s'y attaquer en affinant et en recherchant ses mécanismes internes.

Résumé

L'auteur de ce document estime que si vous lisez jusqu'à présent, vous savez déjà lequel des cadres étudiés ici correspond le mieux à vos besoins. En fin de compte, nous ne parlions pas duquel des cadres est le meilleur, mais plutôt de celui qui est le mieux à même de se manifester dans diverses situations. En conséquence, nous pouvons tirer les conclusions générales suivantes:

• React — , , , - , . , , , , . , React — , .
• Vue , - JavaScript-, — . React, , , , React - . Vue , , , , React.
• , , Hyperapp — , , — . , React Vue, . , . , Hyperapp, , , , Hyperapp-, . , , Hyperapp, , , , React Vue, .

! -?


^{, - 10% :)}