Merci aux efforts communs du pôle Mobile pour la rédaction de ce bel article et notamment à Anaïs Saï pour la rédaction et les recherches réalisées !
Dans l’industrie du développement, l’efficacité et la cohérence sont essentielles : de l’architecture de notre code à la façon dont nous testons nos composants, chaque détail compte.
Aujourd’hui, je souhaite partager avec vous deux outils qui ont révolutionné ma façon de travailler sur les projets React Native : l’Atomic Design et Storybook.
Nous allons découvrir ensemble comment ces outils peuvent améliorer l’organisation de votre projet et faciliter votre processus de développement.
Préparez-vous à plonger dans un monde de composants bien organisés et faciles à tester !
Atomic Design : Un univers organisé ⚛️
Imaginez une réalité où l’on construit des applications comme on construit des organismes vivants - à partir des plus petits composants de base.
C’est l’idée derrière l’Atomic Design.
Proposé par Brad Frost, ce concept se décompose en cinq niveaux hiérarchiques : atomes, molécules, organismes, templates et pages.
Dans React Native, cela se traduit par une approche où les composants sont considérés comme des atomes. Ceux-ci sont ensuite combinés pour former des molécules, qui à leur tour se regroupent pour former des organismes.
Ces organismes composent ensuite des templates qui définissent la structure des pages. En adoptant cette organisation, nous gagnons en cohérence, en réutilisabilité et en maintenabilité.
b731.png?width=1024&height=768&name=atomic-design%20(1).png)
Storybook : L’atelier des composants 📚
Storybook se présente comme une plateforme ouverte où les développeurs peuvent se retrouver pour créer, tester et visualiser des composants d’interface utilisateurs.
C’est un environnement de développement UI qui nous permet de concevoir de manière isolée et d’expérimenter les éléments dans leurs différents états.
En d’autres termes, Storybook est une bibliothèque de composants, une source unique de vérité pour votre équipe de développement.
Pour une application React Native, Storybook rend la visualisation et l’interaction avec nos composants extrêmement faciles, permettant une meilleure qualité de code et un développement plus rapide.
2d2e.png?width=1024&height=1024&name=une_immense_bibliotheque_ou_des_personnes_se_retrouve_30f36477-f3e0-4477-b171-39a789519a70%20(1).png)
Fusionner Atomic Design et Storybook dans React Native
L’alliance d’Atomic Design et Storybook dans un projet React Native offre une méthode claire et ordonnée pour le développement d’interfaces utilisateur.
Après avoir configuré Storybook dans votre environnement React Native, vous pouvez commencer à développer vos composants en respectant la philosophie d’Atomic Design.
Avec chaque composant que vous créez, vous pouvez ajouter des « stories » correspondantes dans Storybook :
Ces « stories » sont des fonctions qui renvoient un élément React, permettant ainsi de visualiser les différents états de chaque composant.
Par exemple, pour un bouton, vous pouvez avoir une « story » pour le bouton par défaut, une pour le bouton désactivé, et ainsi de suite ...
Cette pratique améliore la qualité du code, favorise la réutilisation des composants et rend le processus de développement globalement plus efficient.
%20(1).png)
En bref, Atomic Design et Storybook offrent un cadre et clarté à un développement de projet, React Native par exemple. L’intégration de ces outils dans vos projets peut améliorer l’organisation, la visualisation et la réutilisation de composants, contribuant ainsi à une meilleure efficacité et cohérence.
" En tant que développeuse mobile, explorer ces technologies a été une expérience enrichissante pour moi, je vous encourage à en faire de même. Le futur du développement est là, et il est atomique ! " par Anaïs 🙋♀️
