Au fil des années, l'écosystème JavaScript a énormément évolué. On est passé d'un simple langage permettant d'ajouter quelques interactions sur une page web à un langage permettant de quasiment tout faire. Aujourd'hui, on peut faire des serveurs avec NodeJS, créer des applications natives avec React Native ou NativeScript (pour Vue) mais aussi faire des applications l'hybride avec Ionic etc.
Cependant, il y a un domaine en particulier qui ne cesse d'évoluer : les librairies JavaScript proposant la création d'applications web, avec donc une interface bien plus complexe et des interactions utilisateurs bien plus présentes qu'une simple page web. Je vais donc essayer de vous montrer les différences entre Vue et React en matière d'expérience développeur. Mais avant tout, un petit rafraîchissement sur les raisons pour lesquelles ce genre de librairies ont été créées.
Avant la création de librairies permettant la création d'interfaces web, on avait une approche assez différente de la manière dont on développait nos applications web. En effet, les interfaces devenant de plus en plus complexes et proposant de plus en plus d'interactions, nous manipulions le DOM sans cesse. Le DOM, qu'est ce que c'est ? Il est utilisé pour désigner le Document Object Model. Il s'agit ni plus ni moins d'un gros arbre représentant la structure de notre page HTML.
Image : w3schools
Exécuter du JavaScript quand nous insérons / modifions / supprimons des noeuds HTML peut très vite s'avérer énergivore au niveau de performances.
C'est face à cette problématique que des librairies telles que React ou encore Vue ont vu le jour.
React et Vue marchent suivant le même principe de base. Pour faire simple, ils disposent d'un gros objet JavaScript appelé le Virtual DOM. Le VDOM n'est ni plus ni moins qu'une représentation de la structure du document HTML en JavaScript. Grâce à cet objet, on va pouvoir générer un différentiel entre le DOM et le VDOM. Si nous prenons en compte l'exemple suivant :
<div class="before" style="background: red; position: absolute;" title="stuff" />
<div class="after" style="background: green; position: absolute;" title="stuff" />On peut donc voir que la seule chose qui a changé entre ces deux div est l'attribut class et la propriété background. Grâce au différentiel, les librairies vont pouvoir détecter ce changement et ainsi appliquer le changement aux noeuds et propriétés concernés (ici le changement de classe et le changement de propriété CSS).
C'est donc dans un premier temps par souci de performance que des libraires telles que React et Vue ont été créées.
Cependant, plutôt que de continuer à regarder comment fonctionnent en interne ces librairies, nous allons plutôt voir désormais les différences entre React et Vue pour un développeur, et étudier un peu l'écosystème autour de chacune de ces librairies.
On va commencer par le début. Généralement, lorsque vous décidez de créer un projet React ou Vue et que vous voulez éviter de passer un temps fou à configurer Webpack, installer les loaders appropriés, configurer tout le tooling etc. vous allez alors très certainement utiliser des kits de démarrage rapide (des outils en ligne de commande).
Pour React, il s'agit de create-react-app. Du côté de Vue, on utilise plutôt vue-cli.
En terme de fonctionnalités à proprement parler, vue-cli, notamment en version 3 (qui est encore en alpha), en propose énormément.
Voici un exemple d'utilisation de chacun de ces outils en ligne de commande :
React
$ npx create-react-app <app_name> # Pour React, on utilise npx
$ npm install -g @vue/cli # Pour Vue, on installe un package en global
$ vue create <app_name> # Puis on l'utilise comme ceciPour Vue, le CLI en version 3 nous permet de configurer notre projet via une liste d'options.
Ce qu'il faut savoir à propos de la version 3 du CLI, c'est qu'il a été totalement repensé afin d'intégrer un nouveau workflow. Contrairement à React, le fait d'utiliser le CLI peut nous masquer certaines parties de la configuration. Dans create-react-app, il existe une fameuse commande eject qui permet d'éjecter tout ce qui fait office de configuration. Cependant, cette méthode n'est pas très pratique et même assez rigide, car cela nous oblige, par exemple si l'on veut juste modifier une configuration d'un plugin, à éjecter le tout. De ce fait, les plugins éjectés seront dans notre code source et ne seront plus rattachés par exemple au dépôt Git distant. Vous perdez donc un gros atout : la mise à jour de ces plugins.
Le CLI de Vue en version 3 a été pensé de la manière la plus flexible qu'il soit. En effet, il est possible d'y ajouter au fur et à mesure des plugins via la commande vue add mon-plugin et il est totalement possible de venir écraser la configuration de ce dernier via un simple fichier vue.config.js présent à la racine. De plus, sans rentrer trop dans les détails, Vue CLI 3 ajoute le support des fichiers .env , propose dès la création d'ajouter un router, un gestionnaire de store etc. Il a donc une approche assez developer friendly. Je vous invite à lire cet article qui énumère les nouveautés apportées par la version 3. Du côté de create-react-app, il y a aussi cet article qui résume plutôt bien le CLI et la fonctionnalité d'ejecting.
La première chose évidente que l'on remarquera tout de suite, c'est la syntaxe que proposent les deux librairies. En effet, React a une approche beaucoup plus fonctionnelle et propose aussi par la même occasion une nouvelle syntaxe : le JSX. Heureusement pour nous, le CLI s'est occupé de configurer Babel afin que de notre côté, nous puissions en écrire sans nous poser de questions. Dans les exemples qui suivent, je vais tenter de fournir une comparaison 1:1 (le code source pour chacun des projets est donné en fin d'article)
import React, { Component } from "react";
import "./App.css";
class App extends Component {
state = {
newTodo: "",
todos: [
{
id: 1,
name: "Todo 1",
dueDate: new Date()
},
{
id: 2,
name: "Todo 2",
dueDate: new Date()
},
{
id: 3,
name: "Todo 3",
dueDate: new Date()
},
{
id: 4,
name: "Todo 4",
dueDate: new Date()
}
]
};
// Si votre state dépend des props, vous devez l'initialiser comme ceci,
// sinon préférez l'approche du dessus, qui est plus recommandée
// constructor (props) {
// super(props)
// this.state = {
// }
// }
render() {
return (
<div className="App">
<p className="my-component">Je suis mon premier composant</p>
<ul>
{this.state.todos.map(todo => (
<li key={todo.id}>
{todo.name} - {todo.dueDate.toLocaleString()}
</li>
))}
</ul>
</div>
);
}
}
export default App;Côté Vue, on voit qu'il a une approche un peu différente. Si vous avez utilisé le CLI, vous avez dans le projet un fichier App.vue. Le CLI s'est occupé d'avoir les loaders correspondant pour webpack et configurer le support des fichiers .vue, donc cela devrait marcher out of the box™.
<template>
<div id="app" class="App">
<p class="my-component">
Je suis mon premier composant
</p>
<ul>
<li v-for="todo in todos" :key="todo.id">
{{ todo.name }} - {{ todo.dueDate.toLocaleString() }}
</li>
</ul>
</div>
</template>
<style lang="scss">
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
}
</style>
<script>
export default {
name: "app",
data() {
return {
todos: [
{
id: 1,
name: "Todo 1",
dueDate: new Date()
},
{
id: 2,
name: "Todo 2",
dueDate: new Date()
},
{
id: 3,
name: "Todo 3",
dueDate: new Date()
},
{
id: 4,
name: "Todo 4",
dueDate: new Date()
}
]
};
}
};
</script>On peut donc directement constater des différences : dans React, le fichier .js contenant notre composant ne contient que du JavaScript (JSX pour être plus précis). Il s'agit sans doute d'une syntaxe créée pour nous faciliter la lecture/écriture de nos composants.
Pour les plus minutieux, vous avez peut être remarqué l'utilisation du mot clé className dans React pour simuler l'attribut class en HTML. Cela est tout simplement dû au fait que le JSX reste du JavaScript (qui est par la suite transpilé par Babel), de ce fait, class est un mot clé réservé en JS, il a donc fallu trouver une correspondance, et className a été choisi.
Ensuite, concernant la gestion de l'état d'un composant : sur Vue, on utilise une fonction data, qui retourne un simple object JavaScript contenant le state de notre composant. Sur React, on peut soit initialiser notre state dans le constructeur de la classe, en n'oubliant pas d'appeler le super(props) qui permet d'initialiser correctement le composant avec nos props, soit en déclarant directement une variable state au niveau de la classe.
Là où les choses changent, c'est la manière dont on va boucler sur notre tableau. Vue a une approche plus Angularesque (avec ses directives ng). Comme dit plus tôt, cela peut paraître moins effrayant pour les débutants, car on a l'impression d'écrire de l'HTML avec le v-for. Ce qui est mis entre guillemets est donc interpreté par JavaScript, et on peut donc écrire n'importe quelle expression JS valide. Vue s'occupe automatiquement de binder this, c'est pour cela que je n'ai pas eu à écrire : todo in this.todos.
Sur React, c'est légèrement différent. En effet, on n'écrit pas de l'HTML mais du JSX. Comme nous ne pouvons pas écrire d'instructions for dans le return du render(), la méthode la plus communément utilisée est celle du Array.map. Cela permet d'itérer sur chaque élément de todos, et pour chacun de ces éléments, on retourne directement <li> {todo.name} - {todo.dueDate.toLocaleString()} </li>, qui est donc du JSX valide.
Vue propose des helpers pour les tests conditionnels
- v-if
- v-elseif
- v-else
<template>
<div id="app" class="App">
<p class="my-component">
Je suis mon premier composant
</p>
<ul>
<li v-for="todo in todos" :key="todo.id" v-if="todos.length > 0">
{{ todo.name }} - {{ todo.dueDate.toLocaleString() }}
</li>
</ul>
</div>
</template>Sur React, ce genre de tests conditionnels peut être assez déroutant au départ :
<div className="App">
<p className="my-component">Je suis mon premier composant</p>
<ul>
{this.state.todos.length > 0 &&
this.state.todos.map(todo => (
<li key={todo.id}>
{" "}
{todo.name} - {todo.dueDate.toLocaleString()}{" "}
</li>
))}
</ul>
</div>Pourquoi ce bout de code agit comme un if (this.state.todos.length > 0) { /* affiche mes li ici */ }) ? Car en JavaScript, true && expression va évaluer expression et l'afficher. Dans notre cas, il s'agira donc du map des todos.
Les deux librairies partagent énormément de choses. En effet, elles accomplissent plus ou moins le même but : proposer une manière de créer une interface réactive face à des changements d'états. Et justement, parlons-en de cet état. Sur le principe, Vue et React fonctionnent de manière similaire : un composant est re-rendu lorsqu'un élément de son state (ou qu'une des props) est modifié. Laissez moi vous montrer, en un exemple, la différence fondamentale que je perçois entre Vue et React :
<template>
<div id="app" class="App">
<p class="my-component">
Je suis mon premier composant
</p>
<ul>
<li v-for="todo in todos" :key="todo.id">
{{ todo.name }} - {{ todo.dueDate.toLocaleString() }}
</li>
</ul>
<input type="text" v-model="newTodo" @keyup.enter="addTodo" placeholder="Entrez votre todo...">
</div>
</template>
<script>
export default {
name: "app",
methods: {
addTodo() {
if (this.newTodo === "") return;
const id = this.todos[this.todos.length - 1].id + 1;
const todo = {
id,
name: this.newTodo,
dueDate: new Date()
};
this.todos.push(todo);
this.newTodo = "";
}
},
data() {
return {
newTodo: "",
todos: [
{
id: 1,
name: "Todo 1",
dueDate: new Date()
},
{
id: 2,
name: "Todo 2",
dueDate: new Date()
},
{
id: 3,
name: "Todo 3",
dueDate: new Date()
},
{
id: 4,
name: "Todo 4",
dueDate: new Date()
}
]
};
}
};
</script>class App extends Component {
constructor(props) {
super(props);
this.state = {
newTodo: "",
todos: [
{
id: 1,
name: "Todo 1",
dueDate: new Date()
},
{
id: 2,
name: "Todo 2",
dueDate: new Date()
},
{
id: 3,
name: "Todo 3",
dueDate: new Date()
},
{
id: 4,
name: "Todo 4",
dueDate: new Date()
}
]
};
}
handleChange = e => {
this.setState({
newTodo: e.target.value
});
};
handleInput = e => {
if (e.keyCode === 13) {
const { newTodo, todos } = this.state;
if (newTodo === "") return;
const id = todos[todos.length - 1].id + 1;
const todo = {
id,
name: newTodo,
dueDate: new Date()
};
this.setState(prevState => ({
todos: [...prevState.todos, todo],
newTodo: ""
}));
}
};
render() {
return (
<div className="App">
<p className="my-component">Je suis mon premier composant</p>
<ul>
{this.state.todos.length > 0 &&
this.state.todos.map(todo => (
<ListItem key={todo.id}>
{todo.name} - {todo.dueDate.toLocaleString()}
</ListItem>
))}
</ul>
<input
type="text"
value={this.state.newTodo}
onChange={this.handleChange}
onKeyDown={this.handleInput}
placeholder="Entrez votre todo..."
/>
</div>
);
}
}On peut dès lors constater la chose suivante : lorsque l'on développe avec React, le code est beaucoup plus verbeux et explicite. Cela permet notamment de remonter plus facilement des bugs et d'avoir un contrôle total sur son code. Je pense que c'est cette approche plus verbeuse et plus fonctionnelle qui a conquis autant de développeurs.
Côté Vue, on voit tout de suite que l'approche choisi est plus developer friendly, dans le sens où la librairie aura tendance à simplifier énormément le code (on écrit moins de choses pour en faire tout autant), cependant cela peut se révéler contraignant dans certaines situations. Il s'agit donc d'un choix assez subjectif je pense.
On peut donc voir par exemple que sur React, on doit synchroniser nous-mêmes notre newTodo en écoutant l'événement onChange de l'input, et en mettant à jour le state correctement.
Remarque : on peut voir ici que j'ai décidé d'utiliser une approche assez expérimentale lorsque j'ai créé mes méthodes de classe telles que handleChange ou handleInput. Vous avez peut-être l'habitude de binder this à vos méthodes dans le constructeur et ensuite appeler vos méthodes, mais les déclarer tel que je l'ai fait permet automatiquement d'attacher this au scope de la fonction. (plus d'info ici, cf Method 4)
De plus, on a la possibilité sur React (aussi sur Vue d'ailleurs, mais la pratique est bien plus répandue du côté des développeurs React) de créer ce que l'on appelle des composants fonctionnels. Sans entrer dans les détails (n'hésitez pas à jeter un coup d'oeil à l'article que j'ai référencé, disponible aussi dans les sources), cela nous permet pour faire simple de créer un composant de cette manière :
const MyComponent = state => {
return <div style={state.style}>{state.content}</div>;
};Cela permet de faire énormément de choses, mais cela mérite un article entièrement à part !
Sur Vue, une fois de plus on peut sentir une inspiration du côté d'Angular avec l'attribut v-model. Juste en utilisant cet attribut, Vue va automatiquement faire du two way binding, c'est-à-dire que la valeur de newTodo sera toujours le reflet des modifications apportées par l'utilisateur en tapant dans l'input, ou bien si l'on modifie nous-mêmes dans le code cette valeur.
Un autre sucre syntaxique de Vue concerne l'écoute d'événements. On peut voir que j'ai utilisé l'attribut @keyup.enter. Cela permet directement de réagir à l'event keyup de l'input, et en plus de préciser plus spécifiquement d'écouter seulement l'appui sur la touche enter (sur React, j'écoute plus traditionnellement l'event onKeyDown, puis je vérifie la touche tapée dans la méthode).
Dernière chose, concernant le state directement. Il faut savoir que le state d'un composant, que ce soit dans Vue ou bien dans React, est immutable. C'est-à-dire que nous ne pouvons modifier directement l'état d'un composant. On préférera copier l'état d'avant en modifiant les valeurs qui nous intéressent. Par exemple, c'est grâce à cette immutabilité que l'on peut, par la suite, avoir un système de Undo / Redo, car il devient très simple de parcourir à un moment T le state de son composant.
Cependant, une chose pourrait vous paraître surprenante : sur Vue, j'utilise la méthode push, qui est une méthode en JavaScript qui mute un objet (le modifie dès lors que l'on appelle cette méthode). Or, sur React, on écrit bien plus explicitement la chose et je copie vraiment mon tableau todos provenant de mon state précédent. Avec l'arrivée de l'ES6, cela devient bien plus agréable et quasi transparent de copier un tableau dans un nouveau. Grâce au spreading operator (…, en savoir plus), je dis que je veux récupérer toutes les valeurs de mon prevState.todos, que je copie dans un nouveau tableau auquel j'ajoute mon nouveau todo (avant, nous devions passer par des méthodes tel que Object.assign). Ce qu'il se passe donc côté Vue, c'est que lorsque l'on utilise une méthode qui va muter notre state, la librairie va s'occuper elle-même de faire en sorte de ne pas muter l'état de notre composant.
L'approche de Vue permet donc, pour le développeur, d'écrire plus naturellement son code. En effet, on est plus tenté d'appeler le push directement sur todos, tandis que React va nous imposer de nous-mêmes faire une copie du state, ce qui permet d'être plus rigoureux.
Gérer les styles dans un composant peut à première vue paraître très simple, mais se révèle parfois assez compliqué vu comment le CSS est fait. En effet, le plus gros problème lorsque l'on décide d'avoir une approche basée sur des composants réutilisables, c'est la gestion des règles CSS. Le poids des sélecteurs CSS fait qu'une règle peut très vite se retrouver écrasée par une autre règle présente dans un autre composant.
Du côté de Vue, on a quelque chose qui n'est pas très dépaysant. Avec l'approche du Single File Component (le fait qu'un composant soit défini dans un fichier .vue), on écrit directement nos styles dans une balise <style>. Cela permet d'avoir dans un seul fichier .vue le template du composant, son style et sa logique. De plus, on a la possibilité de choisir directement un pré-processeur pour écrire nos styles.
<style lang="scss" scoped>
li {
font-size: 2rem;
color: red;
&:hover {
color: blue;
}
}
</style>Le mot clé lang permet de spécifier quel pré-processeur on veut utiliser. Ici on utilise SCSS (qui a été au préalable configuré grâce au CLI) et remarquez le mot clé scoped. Derrière cela se cache une notion assez puissante et qui peut être suffisante dans certains cas à régler le problème des classes globales qui pourraient écraser nos classes de composants. En effet, avec ce mot clé, Vue va appliquer les règles de styles seulement au composant actuel.
Pour React, on peut voir qu'unes des approches utilisées par create-react-app est celle d'importer directement avec webpack le fichier App.css. Cependant, cela peut poser problème si l'on décide d'avoir un composant complètement réutilisable et indépendant. Il faudrait en effet "lier" nos styles à notre composant.
Il existe pour cela énormément de manières de le faire en React. Il existe une librairie très populaire dans le monde de React appelé Styled Components 💅. Elle va nous permettre de faire du CSS en JavaScript, mais en plus de supporter les pseudos éléments en CSS (chose qui n'est pas possible en JS vanilla). On crée d'abord un élement styled
const ListItem = styled.li`
font-size: 2rem;
color: red;
:hover {
color: blue;
}
`;puis l'on utilise notre nouveau composant (qui est donc un li) <ListItem>
<ListItem key={todo.id}>
{todo.name} - {todo.dueDate.toLocaleString()}
</ListItem>Lorsque l'on choisit une technologie, négliger son écosystème peut être une grosse erreur. En effet, un projet abandonné et non suivi risque sur le long terme de plus vous bloquer qu'autre chose. Vous avez de la chance, pour le cas de Vue et de React, ce problème ne se pose pas du tout. React dispose d'une communauté gigantesque. Le nombre de ressources que vous trouverez sur Internet ne manquera pas ! Concernant Vue, son utilisation a explosé depuis la version 2. D'abord très utilisé en Chine, il a suivi une forte. Il est aujourd'hui très populaire et sa communauté est extrêmement active.
React ayant un écosystème très développé et possédant des librairies devenues presque indispensables (Redux par exemple ou encore React-Router), Vue a décidé de s'inspirer de cela, et c'est une très bonne chose. Cela permet pour un développeur React voulant essayer Vue de ne pas être trop perdu. On trouve généralement une correspondance pour les grosses librairies existant en React pour Vue :
- Redux -> Vuex
- React-Router -> Vue-Router
Je pense donc que quelque soit le choix que vous faites, l'écosystème ne risque pas d'être le problème, et je vous conseille ces deux repos (les awesome lists sont excellentes pour trouver en un seul endroit une pléthore de ressources intéressantes) :
Du côté de React, la manière la plus efficace et pratique de tester ses composants est via Jest. Cette librairie est extrêmement pratique car elle permet d'utiliser des snapshots. Il s'agit d'une représentation d'un composant à un moment donné. Cela va permettre d'écrire vos tests unitaires, de générer vos snapshots basés sur ces tests. Par la suite, lorsque vous modifierez votre composant et que vous casserez son rendu initial, vous serez prévenu car Jest va exécuter un différentiel entre ce qu'il a reçu de votre test et le snapshot qui avait été généré. Voici un exemple simple tiré de la documentation de Jest :
import React from "react";
import Link from "../Link.react";
import renderer from "react-test-renderer";
it("renders correctly", () => {
const tree = renderer
.create(<Link page="http://www.facebook.com">Facebook</Link>)
.toJSON();
expect(tree).toMatchSnapshot();
});En se basant sur ce test, Jest va donc créer un snapshot ressemblant à cela :
exports[`renders correctly 1`] = `
<a
className="normal"
href="http://www.facebook.com"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
Facebook
</a>
`;Cela permet d'avoir un workflow de test très agréable. L'essayer, c'est l'adopter 👍. Cela a d'ailleurs était un atout non négligeable dans le choix de Jest à Cap Collectif !
Dans l'écosystème Vue, vue-test-utils est l'outil recommandé par la documentation officielle, et bonne nouvelle, il peut être utilisé avec Jest ! Regardons un exemple simple, une fois de plus tiré de la documentation officielle de vue-test-utils
// counter.js
export default {
template: `
<div>
<span class="count">{{ count }}</span>
<button @click="increment">Increment</button>
</div>
`,
data () {
return {
count: 0
}
},
methods: {
increment () {
this.count++
}
}
}Et le code du test
import { mount } from "@vue/test-utils";
import Counter from "./counter";
describe("Counter", () => {
// Now mount the component and you have the wrapper
const wrapper = mount(Counter);
it("renders the correct markup", () => {
expect(wrapper.html()).toContain('<span class="count">0</span>');
});
// it's also easy to check for the existence of elements
it("has a button", () => {
expect(wrapper.contains("button")).toBe(true);
});
});Au niveau des tests unitaires, je trouve personnellement que le système de React avec Jest couplé aux snapshots est vraiment le plus agréable à utiliser !
Mon but avec cet article est de vous proposer une comparaison Apple to apple entre React et Vue dans leur fonctionnement basique. En effet, je n'ai pas parlé des cas plus complexes (l'utilisation d'un store, l'utilisation d'un router, des tests unitaires avancés ou encore en faisant du Server Side Rendering) car sinon cela deviendrait beaucoup trop long et complexe pour un seul article ! Rien que l'utilisation de Vuex / Redux mériterait son propre article.
Cependant, je veux insister sur le fait qu'au bout du compte, le choix de la librairie que vous allez utiliser est très souvent subjectif, dans le cadre de projets personnels notamment. Mais je pense aussi que pour certains cas, React / Vue peut-être plus adapté.
Typiquement, React est énormément utilisé par les grosses entreprises ayant des web-app gigantesques, et devant très souvent gérer une codebase énorme. React est peut être plus adapté pour de très grosses applications, car son approche orienté plus fonctionnelle et sa verbosité font l'une de ses forces. C'est d'ailleurs pour cela que chez nous, à Cap Collectif, nous avons fait le choix d'utiliser React pour la réalisation de notre plate-forme !
Dans mon cas, je trouve que Vue va être beaucoup plus adapté lorsque l'on a besoin rapidement de mettre une idée à l'exécution (un peu à la manière d'un Minimum Viable Product). Cependant, je ne dis pas qu'il ne peut être utilisé pour de grosses applications, au contraire ! Ce qui fait la force de Vue c'est sa simplicité au premier abord. Cependant, poussé à l'extrême, on est capable d'accomplir énormément de choses avec cette librairie. Mais réduire l'utilisation de l'une de ces deux librairies à un certain type de projet serait complètement incorrect. Il s'agit au bout du compte de simples outils, c'est au développeur, et donc à nous, d'en faire quelque chose de génial, parce que comme dirait Hooli, We're making the world a better place.
Au final, les deux partagent le même but mais proposent une philosophie de développement assez différente, et je pense qu'il est intéressant, au moins, d'essayer les deux pour se faire son propre avis ! De plus, la documentation de Vue dispose d'une page de comparaison avec d'autres librairies.
Je termine en posant un petit tableau récapitulatif des deux librairies avec quelques chiffres clés, quelques rappels et quelques benchmarks (les benchmarks sont extraits de ce site, et sont à titre indicatif seulement, ils ne définissent pas quelle est la "meilleure" librairie, loin de là).
| React | Vue | |
|---|---|---|
| Première sortie | 2013 | 2014 |
| Taille (minifiée) | 31.8K (en comptant ReactDOM) | 20.9K |
| Nombre de stars sur Github | 96 652 | 95 286 |
| Nombre de contributeurs sur Github | 1 184 | 190 |
| Langage de templating | JSX | HTML |
| Présence d'un CLI pour assister à la création d'un projet | Oui | Oui |
| Création de 1 000 lignes après chargement de la page | 187.6ms | 169.2ms |
| Création de 10 000 lignes | 2033.7ms | 1521.4ms |
| Temps pour mettre à jour du texte toutes les 10 lignes dans une table de 10 000 lignes | 93.6ms | 168.1ms |
| Temps pour effacer une table avec 10 000 lignes | 224.4ms | 240.9ms |
Code source de l'application React : https://github.com/Liinkiing/react-playground-article
Code source de l'application Vue : https://github.com/Liinkiing/vue-playground-article
Vuejs documentation : https://vuejs.org/v2/guide/
React documentation : https://reactjs.org/docs/hello-world.html
Jest snapshot testing : https://facebook.github.io/jest/docs/en/snapshot-testing.html
React and ES6 : http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html
React Functional Components : https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc
JS spread operator : https://davidwalsh.name/spread-operator
Comparaison Vue avec les autres librairies : https://fr.vuejs.org/v2/guide/comparison.html
Benchmark frameworks js : https://www.stefankrause.net/js-frameworks-benchmark7/table.html
Using the new vue-cli 3 : https://alligator.io/vuejs/using-new-vue-cli-3
Getting started with create-react-app : http://blog.teamtreehouse.com/getting-started-create-react-app-tool
Image à la une : https://www.develodesign.co.uk/news/vue-js-react-js-quick-comparison/