Styliser des composants

Introduction

Dans le monde du développement web, la fonctionnalité d’une application est essentielle, mais son apparence l’est tout autant voire plus. Une interface utilisateur avec une bonne intégration UX/UI (User eXperience et User Interface, Expérience Utilisateur et Interface utilisateur) et agréable à l’œil améliore considérablement l’expérience utilisateur et rend une application plus intuitive et professionnelle. Dans les chapitres précédents, nous ne manipulions que du HTML pur sans aucune stylisation. Avant d’aller plus en avant dans le fonctionnement interne de React, il est désormais temps de découvrir comment styliser un composant. Il existe beaucoup de manières de styliser des composants, et nous ne ferons ici que traiter de certaines manières de faire (il existe bien trop de bibliothèques de styles, qui répondent toutes à des besoins spécifiques, pour qu’elles puissent être traitées exhaustivement ici).

La stylisation « vanille »

On parle de code « vanille » lorsque certaines fonctionnalités d’une application n’utilisent aucun package ou aucune bibliothèque externe. Dans le cas d’un développeur JavaScript, on dirait qu’il écrit du JavaScript « vanille » (VanillaJS) s’il n’utilise pas de bibliothèque externe mais qu’il n’utilise que les fonctionnalités du langage JavaScript (en ce sens, le développement en React ne peut pas être du développement JavaScript « vanille »).

Dans le domaine de la stylisation, on parle de stylisation « vanille » lorsqu’aucune bibliothèque externe n’est utilisée pour simplifier le processus de stylisation de l’application. Nous allons d’abord voir les méthodes de stylisation « vanille », avant de voir par quels moyens il est possible de simplifier le développement du design et du design system d’une application.

1. Le style inline

La première manière de styliser une application est l’utilisation du style inline. Le style inline consiste à déclarer les propriétés CSS à l’intérieur même du composant. Pour ce faire, on crée une constante dans le composant où l’on souhaite rajouter du style. Cette constante prend le type CSSProperties. Ce n’est pas strictement nécessaire (TypeScript ne générera pas d’erreur s’il n’est pas renseigné), mais renseigner ce type permet tout à la fois de bénéficier de l’autocomplétion lorsque l’on écrit les propriétés CSS, et provoquera des erreurs en cas d’utilisation d’une propriété CSS inexistante, ce qui permet de traquer plus facilement les bugs de style et les erreurs typographiques. CSSProperties est un type objet, ce qui signifie qu’il peut prendre autant de propriétés que souhaité, tant que ce sont des propriétés CSS valides. En style inline, les propriétés CSS ne s’écrivent pas comme en CSS classique : elles suivent un format camelCase et non snake-case. Par exemple...

Les portals

Dans certains cas, et pour la création de certains composants, il arrive qu’il soit nécessaire de « détacher » un composant de sa place dans l’arborescence des composants. On peut par exemple penser aux boîtes de dialogue (modals), info-bulles (tooltip), fenêtres contextuelles (popover), etc.

Le point commun entre tous ces composants est qu’ils doivent être rendus « au-dessus » du reste de contenu HTML de la page. Bien sûr, modulo quelques tours de passe-passe en CSS, on pourrait complètement « faire avec » la position du composant enfant dans l’arborescence. Mais il est tout à la fois plus simple, et plus cohérent en matière d’arborescence du DOM, de placer ces éléments directement sous la balise <body>.

C’est exactement pour ce genre de situations qu’interviennent les portals (portails). Il s’agit d’une fonctionnalité avancée de React qui permet de rendre un composant enfant en dehors de la hiérarchie du DOM de son composant parent. Normalement, un composant est rendu en tant qu’enfant du composant qui l’invoque. Un portal donne la possibilité de « téléporter » un composant n’importe où ailleurs dans l’arborescence du DOM, tout en conservant son lien logique avec l’arborescence des composants React.

Si nous prenons l’exemple d’une boîte de dialogue, la logique de la boîte de dialogue reste...

Le CSS-in-JS avec styled-components ou emotion

Le CSS-in-JS est une méthode de stylisation qui génère de nouveaux composants React à partir de l’écriture de règles de styles. Les styles sont écrits en utilisant des littéraux de gabarits (template literals) et sont injectés dans le DOM en tant que classes CSS uniques. Les deux principaux frameworks en la matière sont styled-components et emotion. styled-components sera utilisé ici par défaut, mais emotion est similaire dans son fonctionnement. Le passage de l’un à l’autre au besoin devrait donc être une chose aisée.

Cette méthode de stylisation n’est pas native à React. Il sera donc nécessaire de télécharger le package styled-components via les commandes :

npm install styled-components 
npm install --save-dev @types/styled-components

1. La découverte de styled-components

Le package styled-components contient une référence à chaque type d’élément HTML, auquel il est possible d’attacher directement du style CSS. Si nous reprenons notre composant Button, le composant sera désormais divisé en trois parties : en premier lieu, la déclaration des props ButtonProps, en second lieu, la création d’un composant stylisé avec styled-components et, en troisième lieu, l’utilisation de ce composant stylisé au sein de notre propre composant. La première et la troisième partie sont des choses déjà acquises. Pour la seconde partie, la création d’un composant stylisé passe par l’import de styled-components dans le fichier du composant. L’import prend toujours la même forme :

import styled from "styled-components";

Puis, on déclare une constante dont le nom est le plus souvent au format Styled{ComponentName} (dans notre cas, StyledButton). On lui assigne la valeur styled.button. De nouveau, il faut avoir en tête que nous utilisons un bouton pour l’exemple mais que tous les autres éléments HTML sont disponibles (styled.h1, styled.input, styled.ul…). Enfin, on y accole des littéraux de gabarits à l’intérieur desquels il est possible d’écrire du CSS. Le composant...

Les bibliothèques de composants

Lorsque l’on aborde la stylisation des interfaces web, toutes les approches que nous avons étudiées offrent une grande flexibilité et un contrôle inégalé sur l’apparence des composants. Cependant, cette liberté a un coût : elle exige du développeur qu’il définisse manuellement chaque détail stylistique, ce qui peut se révéler fastidieux et chronophage. Ce travail est d’autant plus lourd que le Web moderne exige des composants complexes utilisés sur de nombreux sites internet qui n’existent pas nativement en HTML, comme les menus déroulants ou les carrousels, les graphiques, menu-tiroirs, etc. La stylisation d’éléments tels que les champs de saisie (sélecteur, checkboxes, etc.), notoirement complexe, ajoute aussi à cette charge de travail supplémentaire. C’est précisément pour répondre à ces problématiques que les bibliothèques de composants ont émergé. Plutôt que de bâtir chaque élément à la main, ces bibliothèques offrent un ensemble de composants préconstruits, testés et accessibles, permettant aux développeurs d’accélérer drastiquement la création d’interfaces et de se concentrer sur la logique métier de l’application plutôt que sur la stylisation des composants eux-mêmes. Si chaque projet requiert ses propres méthodes de stylisation selon les besoins, la création de MVP (Minimum Viable Product - produit viable minimum) ou d’applications au design générique se prête particulièrement bien à l’utilisation de bibliothèques de composants.

Cette section ne présentera aucune bibliothèque spécifique : il existe en effet déjà de très (trop) nombreuses bibliothèques de composants pour qu’il soit possible d’en faire une présentation exhaustive. Toutes ont certes des logiques communes, mais chacune a aussi ses propres spécificités. Certaines proposent des composants déjà stylisés pour réaliser des styles génériques (les plus populaires étant MaterialUI...