Une introduction à la composabilité Full Stack —

La composabilité ne consiste pas seulement à créer un système de conception. Nous devons créer et gérer des composants réutilisables dans le frontend et l’UX de notre site Web, ainsi que nous coordonner avec le backend et le contenu lui-même.

Dans cet article, nous expliquerons comment parcourir à la fois les côtés serveur et client de nos projets et comment nous aligner sur le contenu que nous gérerons. Nous comparerons également comment implémenter la logique composable dans notre code en utilisant différentes approches fournies par des frameworks basés sur React comme Remix et Next.js.

Architecture composable

Dans le paysage dynamique du développement Web, le concept de composabilité est devenu un acteur clé dans la création de systèmes évolutifs, maintenables et efficaces. Cela va au-delà de la simple construction de systèmes de conception ; il englobe la création et la gestion de composants réutilisables sur tout le spectre du développement Web, de l’UX frontend à la coordination backend et à la gestion de contenu.

La composabilité est l’art de construire des systèmes de manière modulaire et flexible. Il met l’accent sur la création de composants non seulement réutilisables, mais pouvant s’emboîter parfaitement, formant ainsi une architecture cohérente et adaptable. Cette approche améliore non seulement le processus de développement, mais favorise également la cohérence et l’évolutivité entre les projets.

Nous définissons « l’architecture composable » comme l’idée de créer des systèmes logiciels à partir de petits composants indépendants que vous pouvez combiner pour former un système complet. Considérez un système comme un ensemble de LEGO pièces. En les assemblant, vous pouvez construire des structures, des figures et d’autres créations sympas. Mais ce qui est cool avec ces blocs, c’est que vous pouvez les échanger, réutilisez-les pour d’autres créationset ajoutez de nouvelles pièces à vos modèles existants.

Parties d’une architecture composable

Pour gérer une architecture composable pour nos projets, nous devons connecter deux parties :

Composants modulaires

Décomposez le système en modules ou composants indépendants et autonomes. Les composants modulaires peuvent être développés, testés et mis à jour indépendamment, favorisant ainsi la réutilisation et une maintenance plus facile.

Lorsque nous parlons de composants modulaires, nous faisons référence à des unités telles que :

• Microservices
  Style architectural permettant de développer des applications logicielles sous la forme d’un ensemble de petits services indépendants qui communiquent entre eux via des API bien définies. L’application est décomposée en un ensemble de services faiblement couplés et déployables indépendamment, chacun étant responsable d’une capacité métier spécifique.
• Applications sans tête
  Dans une architecture sans tête, la logique et les fonctionnalités de l’application sont découplées de la couche de présentation, ce qui lui permet de fonctionner indépendamment d’une interface utilisateur spécifique.
• Capacités métier packagées (PBC)
  Un ensemble d’activités, de produits et de services regroupés et proposés sous forme de solution complète. C’est un concept très courant dans l’environnement du commerce électronique.

Apis

Comme les composants de notre architecture peuvent gérer différents types de données, processus et tâches de natures différentes, ils ont besoin d’un langage commun pour communiquer entre eux. Les composants doivent exposer des API (interfaces de programmation d’application) cohérentes et bien documentées. Une API est un ensemble de règles et de protocoles qui permettent à une application logicielle d’interagir avec une autre. Les API définissent les méthodes et les formats de données que les applications peuvent utiliser pour communiquer entre elles.

Avantages d’une architecture composable

En appliquant une approche composable à l’architecture de nos projets, nous verrons certains avantages et avantages :

• Facile à réutiliser.
  Les composants sont conçus pour être modulaires et indépendants. Cela facilite leur réutilisation dans différentes parties du système ou dans des systèmes totalement différents. La réutilisabilité peut réduire considérablement le temps et les efforts de développement, ainsi qu’améliorer la cohérence entre les différents projets.
• Facile à mettre à l’échelle.
  Lorsque la demande pour un service ou une fonctionnalité particulière augmente, vous pouvez faire évoluer le système en ajoutant davantage d’instances des composants concernés sans affecter l’ensemble de l’architecture. Cette évolutivité est essentielle pour gérer des charges de travail croissantes et s’adapter aux exigences changeantes de l’entreprise.
• Facile à maintenir.
  Chaque composant est autonome. S’il est nécessaire de mettre à jour ou de corriger une fonctionnalité spécifique, cela peut être fait sans affecter l’ensemble du système. Cette modularité facilite l’identification, l’isolement et la résolution des problèmes, réduisant ainsi l’impact des activités de maintenance sur l’ensemble du système.
• Indépendance vis-à-vis des vendeurs.
  Cela réduit la dépendance à l’égard de fournisseurs spécifiques pour les composants, facilitant ainsi le changement ou la mise à niveau de pièces individuelles sans perturber l’ensemble du système.
• Développement et itération plus rapides.
  Les équipes de développement peuvent travailler simultanément sur différents composants. Ce développement parallèle accélère le processus de développement global. De plus, les mises à jour et les améliorations peuvent être déployées indépendamment.

L’architecture MACH

Un exemple de composabilité est ce qu’on appelle le Architecture MACH. L’acronyme MACH se décompose en microservices, API-first, Cloud-native et Headless. Cette approche est axée sur l’application de la composabilité de manière à vous permettre de façonner l’ensemble de l’écosystème de vos projets et de votre organisation pour l’aligner sur les besoins de l’entreprise.

L’une des idées principales de l’approche MACH est de permettre aux spécialistes du marketing, aux concepteurs et aux développeurs front-end de faire leur travail sans avoir à se soucier du backend dans le processus. Ils peuvent modifier l’apparence à la volée, exécuter des tests et s’adapter à ce que veulent les clients sans ralentir l’ensemble de l’opération.

Avec l’architecture MACH, atteindre un MVP (produit minimum viable) est comme un voyage en fusée. Les développeurs peuvent créer des prototypes rapides et les entreprises peuvent tester leurs grandes idées avant de se lancer à fond.

MACH aide également à résoudre les mauvaises performances Web, en utilisant des services et des outils améliorés qui s’appliquent spécifiquement à chacun des différents composants de l’écosystème de votre organisation. Par exemple, dans le jeu du commerce électronique, le temps, c’est de l’argent : les sites à l’ancienne utilisant des plates-formes monolithiques perdent des ventes au profit des sites rapides et flexibles construits avec une approche composable. MACH vous permet de créer une configuration informatique personnalisée en utilisant les technologies les plus récentes.

Composabilité avec React

Nous pouvons approfondir et transférer le même concept de composabilité à la mise en œuvre de l’interface utilisateur et à l’expérience de notre application. React encourage les développeurs à décomposer les interfaces utilisateur en petits composants réutilisables qui peuvent être composés ensemble pour créer des interfaces utilisateur complexes. Chaque composant React est conçu pour encapsuler une fonctionnalité spécifique ou un élément d’interface utilisateur, favorisant une architecture modulaire et composable. Cette approche facilite la réutilisation du code, car les composants peuvent être facilement partagés et intégrés dans différentes parties d’une application.

L’architecture basée sur les composants de React simplifie le processus de développement en permettant aux développeurs de se concentrer sur la création de petites unités de fonctionnalités autonomes. Ces composants peuvent ensuite être combinés pour créer des fonctionnalités plus sophistiquées et construire de nouveaux composants « de niveau supérieur ». La réutilisabilité des composants React est un avantage clé, car elle favorise une base de code plus efficace et maintenable. Avec cette idée en tête, nous pouvons créer des systèmes de conception pour nos projets, ainsi que suivre des approches telles que Principe de conception atomique.

Passer au Full Stack

Mais nous pouvons aller encore plus loin et appliquer également l’approche composable à notre logique backend et côté serveur. Les frameworks basés sur React, tels que Remix et Next.js, fournissent des outils puissants pour implémenter la composabilité dans les applications Web tout en tirant le meilleur parti de différentes approches de rendu, telles que rendu côté serveur et génération statique. Voyons quelques concepts appliqués à la fois dans Next.js et Remix qui peuvent nous aider à implémenter la logique du serveur tout en conservant la composabilité de notre code.

Composabilité Full Stack avec Next.js : composants du serveur React

Composants du serveur React ont été introduits par l’équipe React pour relever les défis liés au contenu rendu par le serveur et améliorer la composabilité des applications React. La composabilité, dans le contexte des composants React Server, fait référence à la capacité de diviser une interface utilisateur en unités plus petites et réutilisables qui peuvent être gérées efficacement côté serveur. Les composants du serveur React poussent l’idée de composabilité un peu plus loin en permettre le rendu de certains composants et traité sur le serveur plutôt que sur le client. Ceci est particulièrement utile pour les applications à grande échelle où le rendu de tout côté client peut entraîner des goulots d’étranglement en termes de performances.

Suivant.jsun framework basé sur React, inclut les composants React Server comme approche par défaut lors de la création et de la gestion de composants sur un projet, depuis sa version 13. Certains des avantages identifiés lors de l’utilisation Composants du serveur React sont:

• Déplacez les opérations de récupération de données vers le serveur, plus près de la source de données. Cela réduit également le nombre de requêtes que le client doit effectuer tout en utilisant la puissance de traitement offerte par les serveurs Web, par rapport à la capacité de traitement des appareils clients.
• Meilleure sécurité lors de la gestion et du rendu du contenu.
• De meilleures stratégies de mise en cache.
• Chargement initial de la page amélioré et First Contentful Paint (FCP).
• Réduisez la taille des paquets.

Composabilité Full Stack avec Remix : composants Full Stack

L’un des principes clés de Remix est la capacité de créer des composants d’itinéraire composables, permettant aux développeurs de créer des interfaces utilisateur complexes en combinant des éléments plus petits et autonomes.

Kent C.Doddsun membre très précieux de la communauté des développeurs, a introduit le concept de Composants Full Stack pour décrire la manière dont Remixer Le framework permet aux développeurs de créer des composants, encapsulant la récupération et le traitement des données dont ils ont besoin et impliquent, dans un seul fichier ou module qui gère logique côté client et côté serveur.

Avec l’aide de Chargeur et Action fonctions, en plus des Itinéraires de ressourcesRemix permet aux développeurs d’ajouter une logique côté serveur, comme la récupération ou des mutations de données, sur le même fichier où nous définissons la représentation visuelle du composant.

S’aligner sur le contenu

Enfin, l’un des défis du développement Web consiste à aligner la composabilité de notre architecture et de notre couche de présentation avec le contenu qu’elles gèrent. Un système composable bien conçu doit non seulement prendre en compte les aspects techniques, mais également prendre en compte la nature du contenu qu’il gère. Pour nous aider, nous pouvons utiliser un système de gestion de contenu sans tête tel que Storyblok.

Storyblok : CMS sans tête avec une approche composable

Bloc d’histoire est un système de gestion de contenu sans tête doté de nombreuses fonctionnalités et capacités qui aident les éditeurs de contenu, les spécialistes du marketing et d’autres types d’utilisateurs à créer et gérer efficacement du contenu. Le contenu créé avec Storyblok (ou tout autre CMS Headless) peut être présenté de quelque manière que ce soitcar ces plates-formes n’obligent pas les développeurs à utiliser une logique de couche de présentation particulière.

L’avantage de Storyblok, en termes de composabilité, est la approche par composants il utilise pour gérer les structures de contenu. En raison de sa nature Headless, Storyblok vous permet d’utiliser les composants créés (ou « blocs », comme on les appelle sur la plateforme) avec n’importe quelle technologie ou framework. En lien avec la rubrique précédente, vous pouvez créer des structures de composants pour gérer le contenu dans Storyblok tout en gérer leur représentation visuelle avec les composants React côté client (ou côté serveur) de votre application.

Conclusion

La composabilité est un paradigme puissant qui transforme la façon dont nous abordons le développement Web. En favorisant la modularité, la réutilisabilité et l’adaptabilité, une architecture composable jette les bases de la création d’applications Web robustes et évolutives. Alors que nous naviguons à la fois côté serveur et côté client, en nous alignant sur la gestion de contenu, les développeurs peuvent exploiter tout le potentiel de la composabilité afin de créer un écosystème de développement Web cohérent et efficace.

(je)