Création de composant

Sources :

• Conférence ng-conf Designing components with composition
• Conférence Building (And Re-Building) the Airbnb Design System | Maja Wichrowska & Tae Kim

API

Approche Atomic Design (Brad Frost)

=> composants atomes, molécules, organismes, templates, pages

• Atome = composant simple, indivisible, sert de base à d'autres composants. (ex : image, texte)
• Molécule = collection d'atome. Sensible à la taille de l'écran. (exemple : card avec photo + titre)
• Organisme = combinaison de molécules et/ou d'atomes. (exemple : toute une section qui contiendrait un titre + une liste de cards)
• Template = une page sans données

Designing components with composition (cf conf)

• Interaction patterns
• Commencer par trouver les roles ARIA avant de découper le composant
• Laisser l'utilisateur composer ses parties
• Plutôt que d'avoir 50 props sur un composant, avoir des parties de composants qui sont indépendantes
• Avantages : Single responsibility et flexibilité
• Inconvénients : API plus verbeuse et plus grandes (mais plus facile à utiliser)
• Exemple : un composant <dataSource> qui peut utiliser : mat-table, mat-paginator, mat-sort-header

Approche AirBnb (cf conf)

• TLDR : BaseComponent étendu. Chaque variation du component est un nouveau fichier.
• Exemple avec le bouton :
  • BaseButton.jsx (fonctionnel uniquement, très très peu de style et uniquement générique, doit être facilement étendu)
  • Chaque type de bouton est un nouveau fichier : PrimaryButton.jsx, SecondaryButton.jsx, IconOnlyButton.jsx
• Le style peut être override dans son composant étendu
• Avantages :
  • Juste en étendant le baseComponent, on peut implémenter de nouveaux designs
  • Facilité en maintenance
  • Import seulement du bouton dont on a besoin :"import Button from './PrimaryButton';"

Styliser le CSS

(Conf "Designing components with composition")

• Mixin sass avec paramètre

@mixin my-picker($config) {
  height: map-get($config, size);
  width: map-get($config, size);
  background-color: map-get($config, primary-color);
}

// Décomposition du style par catégorie
@include my-picker-base(...);
@include my-picker-color(...);
@include my-picker-typography(...);
@include my-picker-animations(...);

// Vu que c'est un mixin, on peut imaginer appliquer le style uniquement sur une classe précise
@mixin my-picker-color(primaryColor) {
  .my-picker-element {
    color: primaryColor;
  }
}

• CSS Variables
  • Solution partielle au problème : on est obligé de cibler chaque propriété une par une
  • Pas supportés en IE11 et polyfills pas idéal (pb de performance)
• CSS Parts
  • Future solution partielle au problème
  • Pas supporté dans tous les navigateurs et polyfills pas idéal