Formation « Créer des blocs avec Gutenberg »

Différences entre React et Jquery

Lecture : 7 minutes • 0

jQuery est une librairie JS très connue, qui permet de manipuler facilement la page avec un code un peu plus simple que celui fourni par Javascript. L'approche de React est complètement différente, et c'est ce que nous allons voir dans ce cours.

Pourquoi jQuery ne suffit plus ?

jQuery

Librairie phare des années 2010, jQuery est utilisé encore aujourd’hui dans une grande majorité des projets web, dont WordPress.

Mais la librairie qui rendait ludique le Javascript ne suffit plus aujourd’hui à combler les besoins d’un web qui a grandement évolué.

Le principe de jQuery est de manipuler le DOM (Document Object Model), c’est-à-dire les éléments d’une page web, ou la transcription du HTML en objets avec lesquels on peut interagir.

Prenons l’exemple d’une notice « cookie » en haut d’un site qui a un bouton en forme de croix pour la fermer. Ce dernier porte la classe .hide-notice, et lorsque on le clic, cela aura pour impact de cacher la notice nommée .notice. voici le code correspondant :

JS
script.js
$('.hide-notice').on('click', function() {
 $('.notice').hide(); 
}

Sur le principe on commence toujours par cibler un élément, grâce à un sélecteur CSS et à l’objet $ (qui fait référence à l’objet jQuery).

Et ensuite on assigne une action ou un événement derrière. Pour la première ligne : on assigne un écouteur d’événement sur le clic.

Lorsque cet élément sera cliqué, on lancera la fonction qui suit, qui va aller cibler cette fois la notice et qui lancera sur lui la fonction hide. En jQuery cette fonction va simplement appliquer un style display: none en CSS.

Cette approche est plutôt sexy mais atteint ses limites au niveau d’une application web complète.

Les limites de jQuery

On va maintenant prendre l’exemple d’une application de gestion de tâches simple, où l’on peut créer des tâches et des listes de tâches. On pourra valider une tâche, la supprimer, en ajouter une nouvelle ainsi que créer et supprimer des listes.

Voici un schéma :

Application de liste de tâches
Une application de gestion de tâches

Dans le coin supérieur droit, on voit qu’il y a le total des tâches accomplies, et des tâches à accomplir. Une fonction permet de compter ces tâches. Le code jQuery ressemblerait à ça :

JS
script.js
function countTasks() {
	var uncompletedTasks = $('.task:not(.is-checked)').length; // compte les tâches à accomplir
  	$('.uncompletedTasks').html( uncompletedTasks + 'Tâches' ); // affiche le compte des tâches
  
 	var completedTasks = $('.task.is-checked').length; // compte les tâches accomplies
  	$('.completedTasks').html( completedTasks + 'Tâches complétées' ); // affiche le compte des tâches
}

A chaque fois, on parcours à nouveau le document pour compter les tâches, en les ciblant via leur nom de classe par exemple (via donc un sélecteur).

En jQuery, lorsqu’une tâche est ajoutée / validée / supprimée, ou lorsque une liste entière est supprimée (qui a pour effet de supprimer plusieurs tâches) alors il faut relancer manuellement la fonction de comptage des tâches.

On commence à se rendre compte qu’il devient très facile à ce point d’oublier d’appeler cette fonction.

On doit donc penser à l’appeler manuellement dès lors qu’une action intervient sur une tâche ou une liste.

Dans cet exemple ça reste relativement simple à gérer. Mais dans des applications plus poussées, c’est vite compliqué !

React et l'approche par composant

Concernant React, l’approche est complètement différente. Cette fois-ci le but est de créer des composants, qui fonctionnent en autarcie les uns vis-à-vis des autres.

Une application est donc découpée en plusieurs composants qui peuvent partager des données mais possèdent leurs propres fonctions et valeurs (les attributes, mais on y reviendra) et des données qu’on peut leur transmettre (les props).

Pour une application de gestion de tâche on pourrait découper comme suit :

  • le composant maitre est l’application
  • il y a un composant pour chaque liste de tâche
  • et chaque tâche est un sous composant

Et c’est là où React devient fou ! Au lieu de mettre du JS dans du HTML, comme on a pu le faire dans le passé, aujourd’hui c’est le contraire : notre composant Javascript a une méthode « render » dans laquelle on peut écrire librement du HTML.

JS
task.js
class Task extends React.Component {
  state = { // état initial du composant
    checked: false, // la tâche n'est pas terminée
  }

  toggleCheck = () => { // C'est une fonction qui permet de valider une tâche
    this.setState( ! this.state.checked )
  }

  render() { // Rendu en HTML 
    return (
      <li>
        <input 
          type="checkbox" 
          value={ this.state.checked } # affichage de l'état
          onClick={ this.toggleCheck() } # On assigne un écouteur au clic
         />      
      </li>
    )
  }
}

Comme vous pouvez le voir, on assigne la fonction toggleCheck directement sur le onClick de la case à cocher. Comme on le faisait dans les premières années de Javascript !

La première grosse différence est le fait que contrairement à jQuery, on arrête de cibler à tout va des éléments via le sélecteur $('.quelquechose').

Attention

Je vous confirme que de passer de jQuery à React, c’est changer entièrement de logique, et parfois c’est un peu déroutant. Mais ne vous inquiétez pas, on s’y fait vite et ensuite, on se demande comment on faisait sans !

De plus, on peut transmettre au composant « parent » l’état de cette tâche, afin que l’application (le composant maitre) tienne automatiquement un compte des tâches terminées et en attente.

Et c’est là où c’est puissant. On évite donc le souci cité précédemment avec jQuery, de devoir lancer manuellement la fonction de comptage à chaque fois qu’il se passe quelque chose.

jQuery manipule le DOM, React manipule les données

Le concept majeur qui différencie les 2 approches est celui-ci :

Avec jQuery on manipule le DOM, alors qu’avec React on manipule les données
Thomas Deneulin

Comme on l’a vu, jQuery nous permet de cibler des éléments de notre page (le DOM) pour les manipuler, alors qu’avec React, on manipule seulement les données et il s’occupe du reste.

C’est là toute la puissance de React. Contrairement à jQuery, on n’a pas besoin de mettre à jour manuellement le DOM lorsqu’une donnée change : on change simplement la donnée dans le composant.

React « sait » quels sont les composants impactés par ce changement et va donc mettre à jour leur rendu, via la fonction render() de manière automatique, intelligente et optimisée.

Différence entre jQuery et React
La différence fondamentale entre les 2 librairies

Dans le cas de notre application de gestion de tâches, lorsque l’on va valider une tâche, le composant parent (la liste) se mettra également à jour, ainsi que le compteur de tâches tout en haut de l’application.

Javascript moderne, JSX, ESNext et compilation

Le code montré ci-dessus n’est pas du JS « natif ». Avez-vous remarqué qu’il manquait les ; en fin de chaque ligne ?

Quand on fait du Javascript avec React on parle de JSX. Et en général on utilise les dernières versions de Javascript : ESNext (ES6, ES7…) qui permettent des écritures plus poussées, plus pratiques, mais bien souvent assez déroutantes à lire et comprendre la première fois.

Le code doit ensuite être compilé pour être interprété par votre navigateur et pour être également rétrocompatible avec ceux qui ne prennent pas en compte les notations JS modernes (c’est toi que je regarde, Edge !).

Conseil

Dans cette formation j'ai fait en sorte que le code utilise au mieux les nouvelles écritures tout en restant intuitif à la lecture. J'aime quand les choses sont simples et je pense qu'on peut marier Javascript et simplicité.

On reviendra sur cette notion de compilation, notamment avec Babel, un peu plus tard dans le cours.

Le saviez-vous ?

Le saviez-vous ?

Aujourd’hui il est même possible d’embarquer du CSS dans les composants React grâce à un outil appelé Styled Components et permettant d’isoler les styles et ainsi éviter les conflits. Sur de gros projets, cela peut s’avérer très pratique pour assurer une bonne maintenabilité à long terme.

React, la librairie JS des apps modernes

Comme vous l’aurez compris, React est né pour palier au besoin des applications web dynamiques grâce à une approche en composants autonomes que jQuery seul ne pouvait pas gérer.

Thomas Deneulin est développeur web, il a notamment crée un Email Builder en React dans WordPress pour les besoin de notre extension DeliPress.  je lui laisse la parole :

Thomas Deneulin
Développeur PHP / React
Orateur

Le conseil Thomas Deneulin

Développeur Full Stack chez WeGlot

ReactJS est une librairie Javascript avant d’être un framework à part entière. L’idée de base étant de pouvoir créer une interface utilisateur aisément.

Tout comme jQuery on pourrait croire ? La différence étant que jQuery manipule le DOM là où l’on va chercher à manipuler la donnée avec ReactJS. Qui plus est, jQuery est là pour simplifier l’écriture de fonctionnalité en Javascript qui nous paraissait compliqué il y a encore quelques années.

Là aussi, l’évolution avec ESNext vient changer la donne.

Suivez-moi sur Twitter : @TDeneulin • Mon site : Essentiel Dev skills

Si vous souhaitez aller plus loin avec les bases de React, je vous conseille la formation React de Thomas Deneulin, disponible sur Capitaine WP !

En résumé

Si je reprend les concepts les plus importants de React

  • Quand on fait du React on créé des composants qui embarquent leurs propres fonctions, valeurs, et même HTML.
  • Chaque composant met à jour son rendu à chaque modification d’état, et ce automatiquement.
  • Chaque composant peut communiquer son état à d’autres composants.

On verra que cette approche est parfaite pour Gutenberg ! Chaque bloc sera un composant à part entière.


Cette première partie est terminée. Dans la prochaine partie on va étudier un peu le coeur de l’extension Gutenberg pour comprendre plus en détail comment il est fait.

0

Questions, réponses et commentaires

    Laisser un commentaire