react atomic design
1.0.0
Il s'agit d'un passe-partout avec la méthodologie Atomic Design utilisant quelques éléments sympas, comme les modules Storybook, Flow et CSS. N'hésitez pas à tester, changer et tout adapter.
Lire l'article complet
Populairement connu dans le monde du design, Atomic Design aide à créer des systèmes de conception cohérents, solides et réutilisables. De plus, dans le monde de React, Vue et des frameworks qui stimulent la composantisation, Atomic Design est utilisé inconsciemment ; mais lorsqu’il est utilisé correctement, il devient un puissant allié pour les développeurs.
Le nom Atomic Design vient de l’idée de séparer les composants en atomes, molécules, organismes, modèles et pages, comme dans l’image ci-dessus. Mais quelles sont les responsabilités de chaque partie séparée ?
Les atomes sont les plus petits composants possibles, tels que les boutons, les titres, les entrées ou les palettes de couleurs d'événements, les animations et les polices. Ils peuvent être appliqués sur n'importe quel contexte, globalement ou au sein d'autres composants et modèles, en plus d'avoir de nombreux états, comme cet exemple de bouton : désactivé, survol, différentes tailles, etc.
Ils sont la composition d’un ou plusieurs composants d’atomes. Ici, nous commençons à composer des composants complexes et à réutiliser certains de ces composants. Les molécules peuvent avoir leurs propres propriétés et créer des fonctionnalités en utilisant des atomes, qui n'ont aucune fonction ou action par eux-mêmes.
Les organismes sont la combinaison de molécules qui travaillent ensemble ou même avec des atomes qui composent des interfaces plus élaborées. À ce niveau, les composants commencent à avoir la forme finale, mais ils sont toujours assurés d'être suffisamment indépendants, portables et réutilisables pour être réutilisés dans n'importe quel contenu.
Dans cet état, nous arrêtons de composer les composants et commençons à définir leur contexte. De plus, les modèles créent des relations entre les organismes et d'autres composants à travers les positions, les emplacements et les motifs des pages, mais ils n'ont aucun style, couleur ou composant rendu. C'est pourquoi cela ressemble à un wireframe.
Les pages sont les parties de navigation de l'application et c'est là que les composants sont distribués dans un modèle spécifique. Les composants reçoivent un contenu réel et sont connectés à l'ensemble de l'application. À ce stade, nous pouvons tester l’efficacité du système de conception pour analyser si tous les composants sont suffisamment indépendants ou si nous devons les diviser en parties plus petites.
Lorsque nous avons commencé à utiliser Atomic Design au sein de React, nous avons dû ajuster certaines règles de la méthodologie pour garantir que les composants soient réutilisés autant que possible, qu'ils soient sans état, sans styles de positions et sans marges très spécifiques afin d'éviter tout effet secondaire dans le processus. pages de candidature.
Ainsi, à chaque nouveau composant, nous nous demandions : « Ces composants sont-ils suffisamment génériques pour éviter la spécificité et/ou la répétition du code quel que soit le contexte dans lequel ils sont utilisés ?
Nous avons donc pu écrire quelques règles :
| Scénario | Description |
|---|---|
$ yarn start | Démarrez un simple serveur Webpack |
$ yarn dev | Créer un serveur de développement au port 5000 |
$ yarn storybook | Démarrez Storybook avec les histoires importées |
$ yarn flow | Valider les types de flux |
@danilowoz
@dleitee
MIT
