스크립트
00:00:00Voici Asterix, la version de Meta de ShadCN, construite sur notre solution de style, StyleX.
00:00:05Elle est entièrement thématisable, sous licence MIT, et Meta affirme l'avoir perfectionnée en interne
00:00:09pendant 8 ans à travers 13 000 applications. Si vous n'aimez pas Tailwind ou ShadCN,
00:00:15celui-ci devrait vraiment vous intéresser, et même si vous aimez ShadCN,
00:00:18voyons s'il y a une raison de changer.
00:00:24Je suis honnêtement très impressionné par le nombre de composants et de fonctionnalités au lancement,
00:00:29cela prouve bien qu'ils l'utilisent en interne depuis des années.
00:00:32Il y a plus de 150 composants accessibles basés sur React, mais plutôt que de parcourir cette liste,
00:00:37la meilleure façon de vous montrer est probablement via nos modèles, car ils montrent tout en action.
00:00:41Nous avons ici un tableau de groupe avec des sections d'état et des menus déroulants.
00:00:44Nous avons un formulaire de paiement où vous pouvez voir tous les éléments individuels dont vous aurez besoin,
00:00:48ainsi que l'état du formulaire pour des éléments comme les messages d'erreur.
00:00:50Vous pouvez construire un tableau Kanban en glisser-déposer, ou créer un IDE avec des onglets et des barres latérales.
00:00:56Les sites e-commerce, il gère ça aussi.
00:00:58Et même un site de chat IA, il peut le faire, avec un composant Markdown pour afficher la réponse obtenue.
00:01:03Il a aussi un bouton d'abonnement.
00:01:05Oh attendez, ça c'est YouTube, mais allez-y, cliquez sur “s'abonner” si ce que nous faisons vous plaît, ça aide vraiment.
00:01:10Comme vous pouvez le voir, Asterix couvre vraiment la quasi-totalité de vos besoins en composants,
00:01:14et tous ces composants viennent de cette bibliothèque principale.
00:01:16L'utiliser est donc identique à n'importe quel autre composant, et vous pouvez consulter la documentation pour toutes les options disponibles.
00:01:23Par exemple, un bouton peut avoir une icône, du contenu final, des tailles, des variantes, encore une fois, tout ce dont vous avez besoin.
00:01:30Mais parlons maintenant de pourquoi vous devriez vraiment l'utiliser.
00:01:32L'argument de Meta est que les systèmes de design vous ont toujours forcés à choisir entre deux mauvaises options.
00:01:36La première est d'adopter un système d'une grande entreprise comme Material UI, et vos applications finissent toutes par ressembler à un produit Google avec une personnalisation limitée.
00:01:44La seconde est de prendre quelque chose comme ShadCN, de copier-coller les composants dans votre projet, mais vous possédez désormais le code,
00:01:50donc chaque projet a son propre fork de chaque composant, et les correctifs amont deviennent difficiles à suivre car c'est désormais à vous de mettre tout cela à jour.
00:01:57Certains n'aiment pas être responsables de tout ce code de composants, donc Asterix prétend mettre fin à ce compromis.
00:02:03Avec Asterix, le système contrôle le comportement, l'accessibilité et la qualité, tandis que les thèmes contrôlent l'apparence,
00:02:08personnalisés au niveau des jetons pour la couleur, la typographie, le rayon, le mouvement, tout ce dont vous pourriez avoir besoin sans jamais réécrire un composant.
00:02:14Voici donc une application que j'ai créée en utilisant certains de ces modèles du site Asterix,
00:02:18c'est en fait l'aspect par défaut de tous les composants si vous ne fournissez pas de thème, donc il est livré avec un thème de base.
00:02:24Pour créer notre propre thème, nous pouvons utiliser la fonction define theme,
00:02:27et cela s'accompagne en fait de quelques fonctionnalités intéressantes.
00:02:29La première est l'option de couleur.
00:02:31Parfois, vous connaissez votre couleur de marque principale, dans mon cas c'est un vert vif,
00:02:35mais vous ne voulez pas générer la couleur de fond, la couleur d'accentuation, vous ne voulez pas réfléchir à chacune d'entre elles.
00:02:40Donc avec Asterix ici, si je sauvegarde simplement, vous voyez qu'il les génère pour moi,
00:02:44j'obtiens donc un très bon point de départ basé uniquement sur une couleur hexadécimale.
00:02:48Après la couleur, nous avons aussi les options de typographie.
00:02:50C'est assez explicite, nous utilisons “into” ici, mais nous avons aussi une échelle.
00:02:54La taille de base de mon texte sera 14,
00:02:57mais avec un ratio de 1,2.
00:02:59Cela signifie qu'à chaque étape de taille de texte, par exemple si je choisis une taille large,
00:03:03il multipliera la base par 1,2, ce qui donnera nos tailles de texte individuelles,
00:03:08il génère donc tous ces jetons pour nous.
00:03:10Ensuite, nous pouvons contrôler le rayon.
00:03:12C'est également assez explicite.
00:03:14Si je voulais que nos boutons soient arrondis, je pourrais régler cela sur un nombre élevé,
00:03:17et si je voulais que tout ait des coins vifs, je pourrais régler cela sur zéro.
00:03:21Après cela, nous avons la dernière option d'assistance, le mouvement,
00:03:23et cela contrôle essentiellement la vitesse d'animation pour des choses comme le survol et le clic.
00:03:27Vous pouvez donc aller très loin avec le thème personnalisé en définissant simplement quelques variables ici,
00:03:31et cela génère tous les jetons pour vous.
00:03:34Mais que faire si vous n'aimez pas certains des jetons sélectionnés ?
00:03:36Par exemple, si je voulais changer la couleur choisie pour mon bouton secondaire ici,
00:03:40nous pouvons aller dans la section “token” ici,
00:03:42et une chose vraiment cool à propos de ce thème et de cette section “token” est que tout est typé,
00:03:47donc il connaît les jetons que nous pouvons réellement définir,
00:03:49et c'est pourquoi il est préférable de le faire dans un fichier JavaScript ou TypeScript plutôt qu'en CSS,
00:03:53puisque nous pouvons bénéficier de cette sécurité de type.
00:03:55La couleur de fond de ce bouton secondaire est définie par le jeton de couleur neutre,
00:03:58donc tout ce que j'ai à faire est de définir cela sur un tableau où l'un est en mode clair et l'autre en mode sombre.
00:04:03Pour moi, ce sera simplement la même couleur.
00:04:05Si je sauvegarde maintenant, vous pouvez voir qu'il a changé la couleur de mon bouton secondaire,
00:04:08mais nous avons un problème car ce texte n'a pas l'air correct,
00:04:11puisque j'ai changé la couleur.
00:04:12Donc ce que je veux faire, c'est changer cette couleur de texte en noir,
00:04:15mais le problème, c'est que c'est en fait défini par la variable color text primary,
00:04:18donc si je vais de l'avant et que je sauvegarde ceci,
00:04:19vous pouvez voir qu'il change beaucoup de textes sur mon écran en noir,
00:04:22au lieu de juste celui dans le bouton comme je le voulais.
00:04:24Donc, au lieu de changer ce jeton globalement,
00:04:26je peux simplement le changer pour le composant.
00:04:28C'est là que nous pouvons utiliser la section “component”.
00:04:30Je dis que nous voulons changer notre bouton ici.
00:04:32J'indique la variante, ici "secondary",
00:04:35ensuite je peux y mettre toutes les variables CSS que je veux.
00:04:37Je veux juste que la couleur soit noire.
00:04:39Donc maintenant, si je sauvegarde ceci,
00:04:40on peut voir que notre bouton secondaire a cette couleur de texte noire,
00:04:42mais rien d'autre n'a changé.
00:04:44C'est limité à ce seul composant.
00:04:46L'autre chose intéressante à propos de cette section “component”
00:04:47est que vous pouvez aussi définir vos propres variantes personnalisées.
00:04:50Donc, disons que je voulais une variante de bouton appelée “my button”.
00:04:52Je peux configurer cela ici avec une couleur noire et une couleur de fond rouge,
00:04:56et quand j'utiliserai mon bouton,
00:04:57c'est entièrement typé,
00:04:58et il sait que “my button” est une variante valide.
00:05:00Vous pouvez voir ici,
00:05:01que nous avons maintenant un bouton d'abonnement.
00:05:02Vous pouvez vraiment faire beaucoup de choses juste à partir de cette configuration de thème,
00:05:05en ajustant complètement chaque partie de chaque composant,
00:05:07ou juste le style global de votre application.
00:05:09Et il y a même des thèmes pré-construits
00:05:10si vous voulez commencer sur une bonne base.
00:05:12Vous pouvez voir qu'il y a plein de personnalisations dans ces fichiers,
00:05:15et vous pouvez même étendre les thèmes
00:05:16pour construire sur une base existante
00:05:18au lieu d'en refaire un complètement à chaque fois.
00:05:20Tous ces thèmes peuvent aussi être générés pour la production.
00:05:23Cela fonctionne donc dans les applications avec rendu côté serveur comme Next.js.
00:05:26Il générera statiquement tout le CSS et le JavaScript nécessaires.
00:05:28L'un des grands avantages d'avoir un lieu unique comme celui-ci pour vos thèmes
00:05:31est que cela aide à renforcer la cohérence de votre marque.
00:05:34C'est d'ailleurs un argument que j'ai vu contre Tailwind,
00:05:36où comme un développeur peut écrire n'importe quelle classe,
00:05:38ou une IA n'importe laquelle,
00:05:40vous finissez parfois avec des composants qui présentent une légère dérive stylistique
00:05:42car quelqu'un a décidé d'utiliser sa propre classe Tailwind.
00:05:45Quand vous avez un thème défini comme celui-ci,
00:05:46il est tout simplement plus facile à suivre car tout se passe au même endroit.
00:05:49Vous pouvez facilement voir ce qui a changé dans votre thème,
00:05:53et l'IA n'a pas besoin de réfléchir aux classes Tailwind qu'elle peut utiliser,
00:05:56elle utilise simplement les jetons et les composants fournis.
00:05:58Bien que je dirais que vous pouvez obtenir quelque chose d'assez similaire
00:06:00avec Tailwind et ShadCN,
00:06:01où vous définissez tout comme un jeton,
00:06:03bien que ce ne soit pas typé,
00:06:05donc ce sera beaucoup plus difficile à appliquer.
00:06:06Maintenant, en dehors des thèmes,
00:06:07vous pouvez aussi simplement styliser un composant directement
00:06:09si vous voulez effectuer un changement,
00:06:10et il y a en fait plusieurs façons de faire cela.
00:06:12La manière recommandée est probablement d'utiliser X-Style,
00:06:14car cela utilise StyleX,
00:06:16sur lequel ceci a été construit,
00:06:17et que Meta a évidemment créé.
00:06:19Vous pouvez aussi utiliser d'autres bibliothèques comme Tailwind,
00:06:21Panda, et diverses choses comme ça,
00:06:22ou juste du CSS pur avec le nom de la classe.
00:06:24Vous pouvez donc voir ici,
00:06:25que j'ai des surcharges définies dans StyleX.
00:06:27J'ai quelques styles appelés bouton Primaire,
00:06:29où je veux que la couleur soit blanche,
00:06:30et la couleur de fond rouge.
00:06:32Si je veux maintenant juste changer un seul bouton sur cette page,
00:06:34tout ce que j'ai à faire est de lui donner la propriété X-Style,
00:06:36et de lui passer mes styles StyleX,
00:06:38et si je sauvegarde,
00:06:39vous pouvez voir que mon bouton Primaire s'ajuste à ces styles.
00:06:42C'est donc comme ça qu'on stylise quelque chose,
00:06:43si vous voulez juste que ce soit ponctuel,
00:06:45et que vous ne voulez pas faire ce changement
00:06:46pour tous les boutons Primaires.
00:06:47Vous pouvez voir dans la documentation
00:06:48toutes les différentes façons de styliser un composant.
00:06:51C'est super flexible,
00:06:52mais la chose vraiment cool que je veux souligner
00:06:53est ce support de Tailwind.
00:06:55Ils ont en fait fait cela
00:06:56avec ce qu'ils appellent un pont Tailwind.
00:06:58Cela vous permet donc de continuer à utiliser Tailwind,
00:07:00mais il mappe tous les jetons de design
00:07:01de votre thème configuré dans Asterix
00:07:03vers ces classes utilitaires Tailwind.
00:07:06Donc, des choses comme vos couleurs,
00:07:07le rayon,
00:07:07la taille de la police,
00:07:08sont toutes définies par le thème d'Asterix,
00:07:10mais Tailwind peut ensuite les utiliser
00:07:11avec les noms de classe Tailwind.
00:07:13Pour moi cependant,
00:07:13je continuerais probablement à utiliser StyleX
00:07:15car c'est autour de cela qu'Asterix a été construit,
00:07:17et je pense juste que mélanger ces bibliothèques
00:07:18va créer plus de confusion que ça n'en vaut la peine.
00:07:20En passant outre le style,
00:07:21une autre fonctionnalité géniale d'Asterix
00:07:22est simplement à quel point il fonctionne bien avec l'IA.
00:07:24Il y a en fait une CLI Asterix,
00:07:26mais elle n'est pas vraiment destinée à un usage humain,
00:07:28elle est en fait destinée à l'IA.
00:07:29Elle contient des choses comme des commandes
00:07:30pour récupérer toute la documentation
00:07:31sur chaque composant,
00:07:33la charger dans le contexte
00:07:34juste pour aider vos agents à travailler avec ce composant,
00:07:36et elle peut même remplir votre “agents.md”
00:07:38juste pour donner un peu plus de conseils.
00:07:40J'ai trouvé, en utilisant cela
00:07:41dans toutes mes démonstrations,
00:07:42qu'elle faisait un excellent travail,
00:07:43et j'ai trouvé que des modèles comme Fable,
00:07:45GPT,
00:07:45tous pouvaient fonctionner avec Asterix,
00:07:47même si c'est une bibliothèque relativement nouvelle.
00:07:49Dans l'ensemble,
00:07:49vous pouvez voir qu'Asterix est vraiment un système de design
00:07:51bourré de fonctionnalités,
00:07:52et je n'ai fait que survoler les bases.
00:07:54Je recommande vivement de consulter la documentation
00:07:55car elle est vraiment bien écrite,
00:07:57et la plupart de ces composants
00:07:58ont même des sections de bonnes pratiques,
00:08:00ce qui va être très utile pour un LLM,
00:08:02et il y a aussi un terrain de jeu
00:08:03si vous voulez juste l'essayer
00:08:04sans avoir de projet.
00:08:06Utiliseriez-vous quelque chose comme ça ?
00:08:07Dites-le moi dans les commentaires ci-dessous,
00:08:08attendez, abonnez-vous,
00:08:09et comme toujours,
00:08:10à la prochaine.