Partage de composants d'interface utilisateur : copie VS installation

Ces dernières années, il y a eu un changement notable dans la façon dont les développeurs abordent les bibliothèques d'interface utilisateur, s'éloignant de l'installation de bibliothèques de composants entières via des packages npm et se tournant directement vers le copier-coller du code dans leur base de code.

Cette tendance a été largement popularisée par Shadcn/UI, une bibliothèque qui fournit aux développeurs des composants prêts à l'emploi et personnalisables qui peuvent être copiés directement dans un projet pour une flexibilité maximale.

Pourquoi la copie est gagnante pour les composants complexes

L'approche copier-coller brille, en particulier pour les éléments d'interface utilisateur complexes tels que les pages d'authentification, les tableaux de bord détaillés ou les visualisations de données complexes. Ces composants nécessitent une personnalisation fine difficile à réaliser via des packages npm immuables.

Au lieu de surcharger l'API de la bibliothèque avec des options de configuration infinies, cette approche permet aux développeurs de tirer parti de la nature composable et déclarative des frameworks frontend modernes, permettant un meilleur contrôle sur chaque partie du composant.

Au lieu de sélecteurs CSS longs et complexes, vous pouvez appliquer directement des styles aux éléments d'un composant. Au lieu d'injecter des composants à l'aide d'une logique d'injection de dépendances complexe, vous placez ou réorganisez simplement les composants comme bon vous semble.

Un graphique shadcnui interactif sur Bit Platform

Cette approche a pris encore plus d'importance avec l'introduction des assistants de codage IA. Au lieu de générer des composants à partir de zéro via l'IA avec des invites longues et complexes - ou d'engager une longue conversation avec l'assistant - vous pouvez commencer avec une composition prédéfinie proche de ce dont vous avez besoin.

En intégrant le code dans votre projet, vous donnez à l'assistant IA un contexte spécifique et tangible. À partir de là, vous pouvez lui demander d'effectuer des ajustements incrémentiels, tels que modifier les styles, ajouter des fonctionnalités d'accessibilité ou modifier la mise en page.

Composants Bit : packages que vous pouvez modifier directement

Bit a introduit une nouvelle entité dans le monde du développement Web : le composant Bit. En bref, un composant Bit peut être considéré comme un super-package. Vous pouvez le partager, l'installer, le copier et même collaborer dessus indépendamment de toute configuration particulière du projet.

Pour plus de simplicité, nous pouvons diviser les composants de l'interface utilisateur en deux groupes : les composants du système de conception et les composants de bloc. Dans le système de conception, les composants de base tels que Card sont des éléments fondamentaux. Pendant ce temps, les composants de bloc, tels qu'une MediaCard, sont composés d'éléments de système de conception mais offrent des fonctionnalités plus avancées.

Choix 1 : Composer avec les composants du système de conception

Lors de la création d'un nouveau composant, la première option consiste à composer à partir de votre système de conception. Par exemple, pour créer une carte personnalisée, vous devrez peut-être combiner des composants tels que la carte, le bouton et la typographie.

Composants basés sur MUI partagés sur la plate-forme Bit

Ces composants peuvent être installés dans votre projet via l'installation de npm, pnpm, Yarn ou Bit :

npm i @bitdesign/material-ui.surfaces.card bitdesign.material-ui/inputs/button @bitdesign/material-ui.data-display.typography

Choix 2 : Utiliser des composants de bloc

Lorsque vous optez pour un composant de bloc pré-construit, vous disposez de plusieurs choix flexibles au-delà de la simple installation.

Le moyen le plus simple consiste à installer directement le package de composants et à utiliser son API. Cette approche fonctionne bien si le composant répond immédiatement à vos besoins ou ne nécessite que des ajustements mineurs.

Pour les scénarios dans lesquels vous devez apporter des modifications importantes, la commande fork de Bit vous permet de copier le code complet du composant dans votre projet. Cela inclut les fichiers sources, les dépendances et les configurations (y compris les outils de développement du composant).

https://bit.cloud/learnbit-react/material-ui-blocks/content/media-card

Par exemple, pour copier le composant MediaCard et sa configuration, nous exécuterons bit fork et transmettrons son ID de composant (et non le nom du package) comme argument :

bit fork learnbit-react.material-ui-blocks/content/media-card

Il convient de noter que Bit fournit également la commande bit import, qui vous permet de créer des modifications sur le composant et de publier une nouvelle version. Cette option nécessite que vous disposiez des autorisations appropriées pour modifier le composant (contrairement à la commande bit fork, qui n'affecte pas le composant d'origine).

Éjection des fichiers sources des dépendances

Lors du fork de composants avec des dépendances, Bit les installe automatiquement pour plus de commodité. Cependant, si vous avez besoin d'un accès direct au code source d'une dépendance, vous pouvez également duper ces dépendances.

Par exemple, si vous souhaitez copier le composant Button, vous pouvez également le créer à partir de la collection de votre équipe sur Bit Platform :

bit fork bitdesign.material-ui/inputs/button

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!