Atomic Design

Les avantages selon le chef de projet digital

• Une construction globale et cohérente de la charte graphique du projet par la formalisation d’un design system (regroupement de tous les atomes, molécules, composants et templates dans un environnement).

• L’homogénéité des pages est guidée et garantie par le design system.

• Une flexibilité et un gain de temps dans les ajustements. Si un changement est nécessaire (ex : une couleur principale à modifier), il est possible avec l’Atomic design de réaliser une fois la modification dans le design system pour que celle-ci s’applique sur l’ensemble des écrans.

• Evolution du projet simplifiée. Un élément créé dans le design system est réutilisable plusieurs fois.

• Travail collaboratif. Avec cette méthode, il est plus facile de travailler en simultané sur un même outil en ligne et à plusieurs (chef de projet, ux/ui designer, développeur).

Les avantages selon les développeurs

• Mise en place d'outil de living style guide

• Une architecture applications / librairies

• Automatiser les tests visuels sans passer par des tests 'End to End'

Living style guide et presentational components

L'atomic design, s'intègre bien avec la philosophie des frameworks front end modern. Depuis quelques années, tous les frameworks ont adopté la notion de composant. L'une des approches consiste à mettre en place différents types de composants : les "containers" ou "smart components" et les "presentationals" ou "dumb components" dans le but de maximiser la réutilisation des composants de présentation à travers les différentes applications d'une organisation. Les composants de présentation sont également appelés "dumb components" car ce sont des composants qui gèrent exclusivement l'affichage. Autrement dit, leur responsabilité est de gérer le HTML et le CSS, ce qui en fait des candidats parfaits pour l'atomic design et l'utilisation d'un outil de living style comme Storybook.

Une architecture applications / librairies

La mise en place d’un outil de living style guide associée au respect de la méthodologie derrière l'atomic design présentent les avantages de pouvoir travailler ses composants d'affichage en isolation. Très souvent certains composants sont accessibles une fois connectés et avec des profils particuliers. Pouvoir travailler ses composants en isolation permet d'économiser du temps, que ce soit le temps de rentrer le login et le mot de passe, mais également le temps de préparer tous les jeux de données pour pouvoir accéder à toutes les parties d'une application. Cela permet également au développeur front d'être à l'abri des instabilités de la partie backend en phase de développement.

Poussée à l'extrême, cette méthodologie permet de mettre en place une architecture applications / librairies dans laquelle un composant d'affichage développé pour une application “A” pourra être réutilisé par une application “B” sans surcoût en termes de temps de développement. Si la charte graphique évolue en modifiant le code à un endroit, cette modification peut alors s’appliquer automatiquement à l’ensemble des applications.

Gain de temps sur les tests automatisés d'interfaces utilisateurs

Une des idées principales de l'atomic design, c'est la composition en partant de la plus petite unité possible. Si l'on couple ce principe avec un outil de living style guide, cela nous ouvre les portes pour une nouvelle stratégie de tests automatisés. Un outil tel que Storybook nous permet d'afficher les différents états des composants sans passer par une configuration backend complexe. Les différentes parties prenantes d'un projet collaborent plus efficacement mais cela permet aussi d'ajouter un outil de tests automatisés comme Cypress.

Cypress est un outil permettant de nous assurer qu'une modification sur un des états d'un composant n'entraîne pas de régression sur un autre. La technique est équivalente au tests "End to End" mais l'exécution des tests est beaucoup plus rapide car nous n'avons pas besoin d'avoir une chaîne complète backend et frontend.

Pour toutes ces raisons l’Atomic Design s'est imposé comme une approche graphique agile incontournable au sein de l’agence Eurelis.

Que ce soit pour un projet web ou mobile, nos équipes sont disponibles pour répondre à vos questions et vos besoins, n’hésitez pas à nous contacter pour en savoir plus.