Code • Publié le 26 janvier 2023

Le principe de réactivité & frameworks web

Ces dernières années nous avons observé un fort développement d’outils se basant sur le principe de réactivité, notamment dans la construction d’interfaces utilisateur interactives. Ce concept, bien qu’assez répandu de nos jours, peut rester flou pour certains. Le but de cet article est donc de présenter, dans les grandes lignes, ce qu’est le principe de réactivité, notamment dans la conception d’interfaces utilisateur.

La programmation réactive, késako ?

Le principe de réactivité est un concept en informatique qui renvoie à l’idée qu’un système devrait être conçu pour répondre aux changements dans son environnement rapidement et de manière appropriée. Comme évoqué plus haut, ce principe est souvent appliqué à la conception de systèmes logiciels interactifs, tels que les interfaces utilisateur, qui doivent répondre aux actions des utilisateurs ou à d’autres événements externes en temps réel.

Plus techniquement, le but est de propager les modifications d'un élément réactif (qui peut être une variable, une entrée utilisateur, etc.) aux autres éléments qui en dépendent.

Cette description peut paraître familière pour certains, puisqu’elle n’est pas sans rappeler un modèle de conception très répandu : le modèle Observer. En effet, le concept de réactivité est basé sur ce principe.

Concepts clés et avantages du principe de réactivité

Le principe de réactivité comporte trois concepts clés :

Détection des changements, pour qu’un système soit réactif, il doit pouvoir détecter les changements dans son environnement. Il peut s’agir d’entrées utilisateur, de variables internes, de sources externes, ou d’autres types d’événements.
Réaction aux changements, une fois qu’un changement a été détecté, le système doit être en mesure d’y répondre rapidement et de façon appropriée. Il peut s’agir de mettre à jour un affichage, d’effectuer un calcul, etc.
Rétroaction, le système doit fournir une rétroaction à l’utilisateur ou à d’autres parties du système pour indiquer qu’un changement a été apporté et quel en a été le résultat.

La programmation réactive comporte de nombreux avantages. Parmi eux, on retrouve notamment :

La diminution du risque de bugs liés à l’oubli de mise à jour de variables.
Un ordre de déclenchement des évènements plus facilement gérable.
La construction d’interfaces utilisateur plus interactives et plus fluides.
Un code, notamment lorsque les applications commencent à devenir larges, beaucoup plus simple et maintenable.

Pour illustrer ces avantages, comparons deux fonctionnalités identiques (un compteur), l’une écrite en JavaScript natif, l’autre utilisant un framework réactif.

D’abord en JavaScript natif :

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/style.css">
  </head>
  <body>
    <button id="increment-counter-button">Increment counter</button>
    <button id="decrement-counter-button">Decrement counter</button>
    <div>
      Result :
      <span id="counter-result"></span>
    </div>
    <script src="src/script.js"></script>
  </body>
</html>

// src/script.js

let counter = 0;
const incrementButton = document.getElementById('increment-counter-button');
const decrementButton = document.getElementById('decrement-counter-button');
const resultContainer = document.getElementById('counter-result');

// fonction d'affichage du résultat du compteur
function displayCounterResult() {
  resultContainer.innerText = counter;
}

// on affiche une première fois le compteur, avec sa valeur par défaut : 0
displayCounterResult();

// au clic, on incrémente de 1 le compteur et on affiche le résultat
incrementButton.addEventListener('click', function() {
  counter++;
  displayCounterResult();
})
// au clic, on décrémente de 1 le compteur et on affiche le résultat
decrementButton.addEventListener('click', function() {
  if(counter > 0){ // on empêche des valeurs négatives
    counter--;
  }
  displayCounterResult();
})

La même chose avec un framework réactif (Vue) :

<script setup>
import { ref } from 'vue';
// on initialise simplement la variable réactive ici
const counter = ref(0); 
</script>

<template>
  <button @click="counter++">
    Increment counter
  </button>
  <button @click="counter > 0 ? counter-- : null">
    Decrement counter
  </button>
  <div>
    Result :
    {{ counter }}
  </div>
</template>

Avec les deux méthodes, le résultat obtenu est le même :

En regardant les différences de code, on peut voir que certains frameworks, comme Vue, ne nécessitent pas de sélectionner manuellement les éléments du DOM (Document Object Model) pour les manipuler. On doit simplement se contenter de gérer nos variables réactives. De plus, pour l’affichage, plus besoin d’avoir une fonction pour changer le texte. Dès que la variable change, le framework le détecte et met à jour directement le DOM avec la nouvelle valeur.

On constate que même pour une fonctionnalité aussi petite, le code fourni est déjà moins important avec un framework réactif. Alors, imaginez pour des applications de grande envergure.

Les frameworks JavaScript réactifs

On les a évoqués précédemment, mais qu’est-ce qu’un framework réactif ? Ce sont des librairies qui fournissent des outils et des abstractions afin de détecter et réagir aux changements d’état de l’application, ce qui facilite la construction de systèmes réactifs par les développeurs. Passons en revue les plus répandus ou ceux qui sont à connaître à l’heure actuelle côté web front-end.

Le framework Vue

Vue.js est un framework JavaScript progressif pour construire des applications web. Il est conçu pour être léger, facile à apprendre et à utiliser. Le framework permet notamment de créer des composants réutilisables, de manière simple et efficace.

L’une des principales caractéristiques de Vue.js est sa syntaxe en templates, qui vous permet de définir la structure de votre interface utilisateur en utilisant une syntaxe simple et expressive. Vue.js fournit également un ensemble d’outils pour gérer l’état et les composants de rendu, y compris un DOM virtuel pour optimiser le rendu des éléments de l’interface utilisateur. Lorsque l’état se met à jour, il calcule la différence et modifie uniquement les parties concernées par la mise à jour, et non pas tout le DOM.

Une des principales différences entre Vue.js et d’autres frameworks est son accent sur la simplicité et la facilité d’utilisation. Il possède une courbe d’apprentissage faible et est parfaitement adapté pour les petites et moyennes applications. À noter qu’il convient très bien pour des applications plus larges. Il est également plus léger que d’autres frameworks, ce qui peut être bénéfique pour les performances, notamment sur les appareils mobiles. D’ailleurs il s’agit d’un framework que nous avons adopté et que nous utilisons chez Atipik. Dans un autre article on partage nos astuces et bonnes pratiques pour le développement avec Vue si cela vous intéresse !

Le framework React

Développé par Facebook et souvent utilisé pour construire des SPA (Single-Page Applications), React permet, à l’instar de Vue, de créer des composants réutilisables de manière simple et efficace. React se base également sur le DOM virtuel, ce qui lui permet d’obtenir de bonnes performances. Il est également adapté pour tout type d’applications, notamment petites et moyennes.

L’une des caractéristiques clés de React est son approche déclarative de la programmation. On décrit à quoi on veut que l’interface utilisateur ressemble, et React s’occupe du reste. Cela rend plus facile le fait de construire et de maintenir une interface utilisateur complexe, parce qu’on n’a pas à se soucier de détails de bas niveau comme la manipulation DOM.

React possède également une communauté importante et active, avec de nombreuses bibliothèques et intégrations tierces disponibles. Il est souvent utilisé en combinaison avec d’autres bibliothèques comme Redux pour gérer l’état de l’application, et React Router pour gérer le routage.

Le framework Angular

Angular est un framework open source basé sur TypeScript et développé par Google, ce qui lui permet d’avoir une communauté tout aussi importante. Il est conçu pour faciliter la construction d’applications front-end, en fournissant tout un ensemble d’outils et de cadres.

Il fournit de nombreux services intégrés pour les tâches courantes comme la création de requêtes HTTP, la validation de formulaires et le routage. En plus du cadre Angular de base, l’écosystème Angular comprend un certain nombre de bibliothèques et d’outils pour la construction d’applications Web modernes, y compris la CLI Angular pour la génération et la gestion de projets, Angular Material pour la mise en œuvre de la conception des matériaux, et AngularFire pour l’intégration avec Firebase.

Sa principale force peut aussi paraître comme un défaut suivant les utilisations. Comme on vient de le voir, Angular est beaucoup plus robuste que ses collègues React et Vue, avec notamment de nombreuses bibliothèques et fonctionnalités intégrées, mais est par la même occasion beaucoup plus lourd. Il est donc plutôt conseillé de l’utiliser dans des contextes de projets très larges.

Le framework Svelte

Svelte est un framework relativement nouveau, mais il a gagné en popularité ces dernières années en raison de son approche de la construction d’applications web.

L’une des principales différences entre Svelte et les autres frameworks est qu’il n’utilise pas de DOM virtuel. Au lieu de ça, il compile le code au moment du build, générant du code JavaScript optimisé qui met à jour le DOM directement. Cela signifie que nous n'avons pas à payer le coût de performance pour mettre à jour un DOM virtuel lors de l'exécution, ce qui peut rendre les applications Svelte plus rapides et plus efficaces.

Svelte utilise une syntaxe de template similaire au HTML, avec des fonctionnalités supplémentaires pour lier les données et contrôler le comportement des composants. Il fournit également un moyen de gérer l’état et de gérer les effets secondaires en utilisant des stores et des déclarations réactives.

Svelte est léger, ce qui est adapté pour le développement de petites et moyennes applications. Il possède une communauté en croissance, avec un certain nombre de bibliothèques tierces et intégrations disponibles.

Le framework Riot.js

Riot.js est également une bibliothèque JavaScript légère. Elle a été créée comme une alternative aux frameworks plus importants, avec un accent sur la simplicité et la facilité d’utilisation.

Le framework utilise une syntaxe de modèle similaire à HTML, avec des fonctionnalités supplémentaires pour lier les données et contrôler le comportement des composants.

Une des caractéristiques clés de Riot.js est sa petite taille et ses dépendances minimales. Il ne mesure que quelques kilooctets, ce qui le rend adapté à une utilisation dans des environnements aux ressources limitées. Il est également facile à apprendre, avec une API simple et un accent sur la flexibilité.

Vous l’avez compris, à l’instar de Svelte, Riot.js est adapté pour la construction de petites et moyennes applications. Il possède une communauté en croissance, ainsi qu’un certain nombre de bibliothèques tierces et intégrations disponibles.

Le framework Alpine.js

Vous pensiez que Riot.js était déjà bien léger ? Eh bien Alpine.js fait encore mieux ! Cette librairie, composée de 15 attributs, 6 propriétés et 2 méthodes, est certainement un des outils les plus minimalistes du tous.

En effet, son utilisation ultra simpliste, via des attributs directement mis sur les balises html, permet le développement de fonctionnalités réactives très rapidement et simplement. Se plonger dans Alpine est une formalité dès lors que l’on comprend le principe de réactivité et de composants. C’est certainement le meilleur pour débuter.

Maintenant, à la différence de lourds frameworks tels que Angular, Alpine.js ne sera vraiment adapté qu’à de petits cas d’utilisations.

En résumé, le principe de réactivité est un concept qui souligne l’importance de construire des systèmes capables de détecter les changements dans leur environnement et d’y réagir efficacement et de manière appropriée, afin de créer l’expérience utilisateur la plus interactive et fluide possible.

Il est donc nécessaire de faire un choix réfléchi du framework à utiliser, en fonction des besoins et des cas d'utilisation. De plus, il est important d'utiliser des composants réutilisables pour une meilleure organisation du code. Affaire à suivre...

Jérémy

Ingénieur Logiciel · Web