Le rôle des ingénieurs frontend dans les systèmes de conception, partie 1

Explorez les responsabilités des développeurs frontend dans les systèmes de conception, y compris la préparation et la maintenance des guides de style de codage, des bibliothèques de composants et des jetons de conception.

Un système de conception est un ensemble de composants, de directives et d’actifs réutilisables qui aident les équipes à créer des produits cohérents. De nombreux systèmes de conception populaires existent aujourd’hui, tels que Matériel par Google, Lignes directrices sur l’interface humaine par Apple, Système de conception fluide par Microsoft, et plus encore. Ces systèmes de conception (et bien d’autres) sont devenus de plus en plus populaires ces dernières années car ils permettent de maintenir la cohérence et l’efficacité de la conception et du développement.

Les ingénieurs logiciels frontaux jouent un rôle crucial dans la création et la maintenance des systèmes de conception. Dans cet article, nous explorerons les nombreuses responsabilités différentes des développeurs frontend lorsqu’ils travaillent avec des systèmes de conception, notamment la préparation et la maintenance des guides de style de codage, des bibliothèques de composants et des jetons de conception.

Guides de style de codage

L’une des principales responsabilités des développeurs frontend lorsqu’ils travaillent avec des systèmes de conception est de mettre en œuvre et de suivre les guides de style de codage. Un guide de style de codage fournit un ensemble de règles et de directives qui garantissent la cohérence du code au sein d’une équipe ou d’une organisation.

Par exemple, un guide de style de codage populaire que beaucoup utilisent lors de la structuration des classes CSS est le Méthodologie BEM. BEM signifie Block, Element, Modifier et c’est une convention de dénomination qui aide les développeurs à créer des classes CSS modulaires et réutilisables.

Avec BEM, les noms de classe sont structurés comme ceci :

.block {
}
.block__element {
}
.block--modifier {
}

Le block est le composant principal ou le contenant, le element fait partie du bloc et le modifier est une variante du bloc ou de l’élément. Un exemple d’utilisation de BEM pour structurer la manière dont les classes CSS sont appliquées peut ressembler à ceci :

<div class="card card--featured">
  <h2 class="card__title">Featured Product</h2>
  <p class="card__description">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>
  <a href="#" class="card__link">Learn More</a>
</div>

Nous avons un card bloc avec trois éléments : card__title, card__description et card__link. Le card--featured Le modificateur est utilisé pour indiquer que cette carte particulière est un produit vedette.

BEM n’est qu’un exemple de guide de style de codage sur la façon de structurer les éléments HTML et les propriétés CSS. Beaucoup d’autres existent comme :

• Conception atomique: une méthodologie qui divise les systèmes de conception en petits composants réutilisables appelés atomes, molécules, organismes, modèles et pages.
• SMACSS (architecture évolutive et modulaire pour CSS): un guide de style de codage préconise une approche modulaire de l’architecture CSS, avec des fichiers séparés pour les styles de base, les styles de mise en page, les styles de module, etc.
• OOCSS (CSS orienté objet): un guide de style de codage qui met l’accent sur la création de CSS réutilisables et orientés objet en séparant la structure avec des classes et en évitant les sélecteurs imbriqués pour créer un code plus modulaire et maintenable.
• Et beaucoup plus.

Les guides de style de codage peuvent aller au-delà de la structuration CSS et peuvent également inclure des directives pour les conventions de nommage, l’indentation, le formatage, les commentaires et plus encore.

Jetons de conception

Les jetons de conception sont un autre aspect important des systèmes de conception que les développeurs frontaux peuvent être responsables de la maintenance. Les jetons de conception sont des informations de conception réutilisables, telles que les couleurs, la typographie et l’espacement, qui sont définies dans un emplacement central et peuvent être consultées et réutilisées dans plusieurs projets.

Par exemple, un système de conception peut définir un ensemble de jetons de couleur :

// Colors
$color-primary: #0088cc;
$color-secondary: #3d3d3d;
$color-success: #47b348;
$color-warning: #ffae42;
$color-error: #dc3545;

Ces jetons de couleur peuvent ensuite être utilisés dans la bibliothèque de composants et tout au long du projet :

.button--primary {
  background-color: $color-success;
  color: $color-primary;
}

En plus des couleurs, les jetons de conception peuvent également définir d’autres aspects de la conception tels que les tailles de police, les familles de polices, les hauteurs de ligne, l’espacement, etc.

// Font sizes
$font-size-xs: 12px;
$font-size-sm: 14px;
$font-size-md: 16px;
$font-size-lg: 20px;
$font-size-xl: 24px;

// Spacing
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 32px;
$spacing-xl: 64px;

En définissant ces valeurs en tant que jetons de conception, elles peuvent être facilement réutilisées dans l’ensemble du projet et mises à jour à partir d’un emplacement central, ce qui contribue à garantir la cohérence et la maintenabilité.

Un autre avantage de l’utilisation des jetons de conception est qu’ils facilitent la mise en œuvre des modifications du système de conception. Par exemple, si un concepteur décide de changer la couleur primaire du système de conception, la modification peut être apportée au jeton de conception pour la couleur primaire (par exemple, $color-primary) et il sera automatiquement appliqué à tous les composants et styles qui utilisent ce jeton. Cela permet d’économiser du temps et des efforts par rapport à la mise à jour manuelle de chaque composant et style individuellement.

Il convient de noter que les jetons de conception peuvent être définis dans différents formats tels que les variables Sass, les propriétés personnalisées CSS, JSON ou même YAML. Le format utilisé dépendra des préférences et des besoins du projet et de l’équipe.

Bibliothèques de composants

Une autre responsabilité importante des développeurs frontaux dans les systèmes de conception est la création et la maintenance de bibliothèques de composants, qui sont une collection de composants d’interface utilisateur réutilisables (comme des boutons, des entrées et des formulaires) qui peuvent être utilisés dans un projet ou une organisation.

L’avantage des bibliothèques de composants est qu’elles permettent aux concepteurs et aux développeurs de travailler plus efficacement car les composants existants peuvent souvent être réutilisés au lieu d’en créer de nouveaux à partir de zéro.

Les bibliothèques et frameworks JavaScript modernes, comme React, facilitent la création de composants réutilisables qui peuvent être facilement partagés et utilisés dans différents projets en nous permettant de créer des composants encapsulés qui gèrent leur propre état.

Par exemple, nous pouvons créer un composant React pour un simple bouton qui utilise certains noms de classe établis dans notre système de conception :

import React from "react";
import "./Button.css";

function Button(props) {
  const { children, primary, ...rest } = props;

  return (
    <button className={`button ${primary ? "button--primary" : ""}`} {...rest}>
      {children}
    </button>
  );
}
export default Button;

Dans l’exemple ci-dessus, le <Button /> Le composant est défini comme une fonction qui prend des accessoires et rend un <button /> élément. Le composant prend en charge un primary prop qui dicte si le bouton doit ou non être stylisé comme un bouton principal.

Ailleurs dans notre application, nous pouvons utiliser le <Button /> composant pour rendre l’élément de bouton que nous espérons afficher à partir de notre bibliothèque de composants.

import React from "react";
import Button from "./components/Button";

function App() {
  return (
    <div>
      <Button primary>Click me. I am the primary button!</Button>
      <Button>But click me too.</Button>
    </div>
  );
}

export default App;

En créant et en utilisant des bibliothèques de composants de cette manière, nous assurons la cohérence de notre application, ce qui permet d’économiser du temps et des efforts de développement et facilite la maintenance et la mise à jour de notre système de conception au fil du temps.

Construire un système de conception avec Kendo UI

Construire un système de conception à partir de zéro peut être une tâche ardue et chronophage, en particulier pour les organisations disposant de ressources limitées. Cependant, l’utilisation d’une bibliothèque de composants d’interface utilisateur telle que Progress Interface utilisateur de Kendo peut simplifier considérablement le processus.

Kendo UI est une bibliothèque complète de composants d’interface utilisateur, tels que des boutons, des entrées, des grilles et des graphiques, qui peuvent être utilisés pour créer des applications Web. L’interface utilisateur de Kendo est conçue dans un souci de personnalisation, ce qui en fait un excellent point de départ pour créer un système de conception. Et le Générateur de thèmes outil est conçu pour vous aider.

En commençant par Kendo UI, les développeurs frontend peuvent personnaliser la bibliothèque pour répondre aux besoins spécifiques de leur organisation. Cela comprend la définition de jetons de conception pour les couleurs, la typographie et l’espacement, ainsi que la création de composants et de styles personnalisés qui respectent les directives de marque et de conception de l’organisation.

Pour plus de détails sur la façon dont cela peut être fait, reportez-vous à l’article Construire un système de conception avec Kendo UI écrit par Thomas Findlay.

Conclure

En conclusion, les systèmes de conception sont devenus de plus en plus populaires ces dernières années, car ils aident les équipes à créer des produits cohérents et à maintenir la cohérence et l’efficacité de la conception et du développement. Les développeurs frontend jouent un rôle crucial dans la création et la maintenance des systèmes de conception, y compris la préparation et la maintenance des guides de style de codage, des jetons de conception et des bibliothèques de composants.

Lorsque vous travaillez avec des systèmes de conception, d’autres concepts importants doivent également être pris en compte, tels que l’accessibilité des composants de l’interface utilisateur, la manière dont les composants du système de conception sont optimisés pour les performances, la qualité de la documentation des composants du système de conception, etc. Nous explorerons et discuterons plus de ces concepts dans un article de suivi !