🤯 Etes-vous prêts pour la révolution des composants?

Avec un seul diagramme, ShadCN, l'auteur de la bibliothèque ShadCN UI, a changé :

• la granularité que les bibliothèques de code peuvent (et doivent) avoir,

• la façon dont le code peut être partagé, et qui en est le propriétaire

• et la façon dont je conçois le développement web open source.

C'est flippant. Mais je suis fan. Qu’est-ce qu’il a dit?

ShadCN a annoncé que son CLI supporte maintenant l'utilisation de registres externes pour ajouter des composants. On a l’habitude d’ajouter des bibliothèques de manière unitaire via nos gestionnaires de paquets (npm, yarn, etc.) dans le répertoire « node_modules ». Mais maintenant on peut partager et installer des composants et les copier directement dans notre code en utilisant :

npx shadcn add <...>

Ca peut tout changer - comment on structure le code, comment on le partage, comment on y pense :

• Les composants peuvent (et doivent) être conçus de manière atomique, et non avec des interdépendances intégrées

• Les composants sont partagés non pas en les installant dans un dossier (à toutes fins utiles) en lecture seule, mais en les copiant dans votre code afin que vous puissiez les modifier à votre guise.

• Le terme « composants » ne désigne pas seulement les composants de l'interface utilisateur : « Vous pouvez déjà ajouter des routes, des fichiers de configuration, des variables CSS et la configuration de tailwind avec le CLI » écrit ShadCN.

L’outil IA v0 (et la génération AI en général) a probablement joué un rôle important dans ce changement de mentalité, car elle utilise ce type de configuration « copier-coller ».

Et vous savez quoi ? Penser en composants atomiques aidera probablement à construire un meilleur code. Avec des limites plus claires, une meilleure définition des responsabilités et de meilleurs tests.

Cela soulève toutefois certaines questions, telles que

• comment gérer les mises à jour des composants si le code que nous mettons à jour a été modifié ?

• Comment gérer des composants plus complexes (organismes contre atomes, pour utiliser le langage du système de conception) ?

• comment gérer les conflits entre composants ?

Mais pour l'instant, la question principale est : comment puis-je faire fonctionner cela dans la pratique ? 😆

Le coin “veille”

Skeleton Tailwind

Générer un “skeleton” qui affiche un état de chargement dans React (en utilisant les Suspense) donne l'impression de recréer deux fois le mêmes composants. Il n'y a pas de valeur ajoutée ni de créativité. Cela signifie qu'il est possible de l'automatiser, et c'est là que le « Tailwind Skeleton Generator » intervient.

Supermaven rejoint Cursor

La guerre de l’IA dans les IDE atteint déjà la phase de consolidation, semble-t-il. Supermaven, une alternative à GitHub Copilot, vient d'annoncer qu'ils joignaient leurs forces à celles de Cursor, le fork de VS code avec IA intégré. L'annonce fait écho à la logique qui sous-tend le fork de VS Code par l'équipe de Cursor : Les capacités de l'IA nécessitent une intégration profonde dans l'IDE, et VS Code ne laissent pas assez de possibilités de customisations aux extensions pour le permettre.

Vous pourriez être intéressé par

Drizzle vs Prisma: Quel ORM TypeScript choisir?

Drizzle et Prisma diffèrent dans leur façon de concevoir le rôle d’un ORM. Je vous explique comment, et pourquoi cette différence peut vous aider à choisir entre l’un ou l’autre pour vos projects NodeJS / NextJS.

React Email + Resend dans NextJS

Cette semaine sur la chaine anglophone nous avons examiné pourquoi la programmation des emails est un tel gâchis, comment React Email aide à résoudre le problème, et comment l'intégrer dans Next JS avec Resend.

Comment écrire un ticket utile

Voici (en anglais) 5 astuces pour aider le chef de projet dans votre vie à mieux écrire des tickets de bugs ou de demande de fonctionalité :)

Merci 🙂 

Merci de m’avoir lu jusqu'ici. N'hésitez pas à me faire savoir ce que vous avez pensé de ce numéro de la newsletter afin que je puisse mieux répondre à vos besoins !

David de Kodaps