Smashing Podcast Episode 40 avec Mike Cavaliere : Qu'est-ce que Chakra UI pour React ?

Cet épisode a été aimablement soutenu par nos chers amis de Wix qui sont connus pour vous donner la liberté de créer, concevoir, gérer et développer votre présence sur le Web exactement comme vous le souhaitez. Merci!

Dans cet épisode, nous parlons de Chakra UI. Qu'est-ce que c'est et comment peut-il vous aider dans vos projets React ? Drew McLellan s'entretient avec l'expert Mike Cavaliere pour le savoir.

Afficher les remarques

• Interface utilisateur des chakras
• Mike sur Twitter
• Site personnel de Mike
• Livre Couper dans le Jamstack

Mise à jour hebdomadaire

• Concevoir avec du code : une approche moderne de la conception
  écrit par Mikolaj Dobrucki
• Automatisation des tests de lecteur d'écran sur macOS à l'aide d'Auto VO
  écrit par Cameron Cundiff
• L'essor du Design Thinking en tant que stratégie de résolution de problèmes
  écrit par Josh Singer
• Comment exécuter un audit UX pour une plate-forme EdTech majeure
  écrit par Mark Lankmilier
• Créer un blog multi-auteur avec Next.js
  écrit par Dom Habersack

Transcription

Drew McLellan : Il est ingénieur logiciel senior pour une agence appelée Echobind. Il écrit du code depuis deux décennies et utilise JavaScript tout le temps. Il adore le Jamstack et son nouveau livre, Cut Into The Jamstack, enseigne au lecteur comment créer un logiciel en tant qu'application de service à partir de zéro. Nous savons qu'il connaît son chemin autour du Jamstack, mais saviez-vous qu'il s'est perdu une fois dans l'allée du beurre de cacahuète ? Mes amis fracassants, veuillez accueillir Mike Cavaliere. Salut Mike. Comment vas-tu?

Mike Cavaliere: Je suis absolument fracassant aujourd'hui.

Drew : C'est bon à entendre. Je voulais vous parler aujourd'hui d'un projet dont je n'avais vraiment pas entendu parler, d'une manière ou d'une autre, jusqu'à ce que je le découvre dans votre livre Jamstack. Je ne sais pas comment je l'avais raté parce qu'il semble mûrir et bien documenté et un vrai… Juste un super projet. J'espère qu'aujourd'hui nous pourrons en parler, et je pourrai rattraper mon retard pour découvrir ce que j'aurais dû savoir depuis le début. Je parle de Chakra UI, bien sûr. Dites-moi, qu'est-ce que Chakra UI ? Dans quel espace se trouve-t-il et quel problème résout-il pour nous ?

Mike : Chakra UI est un cadre d'interface utilisateur pour React ou une boîte à outils d'interface utilisateur, je suppose qu'ils l'expriment ainsi. Dans n'importe quelle pile d'applications, de nos jours, vous ne voulez pas inventer une interface utilisateur à partir de zéro. Vous voulez récupérer une boîte à outils. C'est le cas depuis un moment.

Mike: Chakra UI est une excellente approche sur une boîte à outils React UI. Il y a un certain nombre d'avantages à cela, mais l'un est qu'il est… D'une part, il est robuste. Cela signifie qu'il contient tous les éléments d'interface utilisateur que vous pouvez imaginer. Il a des interrupteurs. Il y a des enveloppes autour des grilles. Il a toutes sortes de choses sous forme d'éléments.

Mike : C'est fait pour être très composable, de sorte que tout utilise des accessoires de style. Vos composants, ils sont excellents dès la sortie de la boîte. Vous pouvez les déposer et les utiliser tels quels. Mais si vous voulez faire un ajustement, il est très facile de passer dans certaines propriétés de style. Ils sont entièrement accessibles. L'accessibilité, dont tout le monde parle mais qu'on oublie toujours de mettre en œuvre ou qui demande un petit effort pour la mettre en œuvre, est intégrée pour vous.

Mike : Il n'est pas rare que je crée quelque chose avec Chakra UI et que j'obtienne un très bon score Lighthouse. En fait, je viens de vérifier le site Web Cut Into The Jamstack aujourd'hui, et le score d'accessibilité est très élevé. Il est également très entièrement thématique. Vous pouvez définir la configuration du thème depuis le début. Il y a juste une longue liste d'avantages à cela.

Mike : Cela le rend très rapide à développer, ce qui m'a attiré à l'origine. Echobind, nous l'utilisons en interne. Mais pour moi, je n'ai pas le sens du design. Un peu, mais je ne suis en aucun cas un designer. Je peux récupérer des composants de Chakra et modifier légèrement les choses pour les rendre cohérents et les choses semblent bonnes dès la sortie de la boîte. Vous êtes capable de vous développer rapidement. L'expérience des développeurs est excellente. C'est juste génial à tant de niveaux.

Mike : La dernière chose que je dirai avant de continuer à divaguer à ce sujet. Mais il contient également de nombreux React Hooks qui sont des aides pour des fonctionnalités très courantes qui accompagnent ces éléments que vous utilisez. Par exemple, en mode sombre. Il y a des crochets intégrés pour utiliser le mode sombre plus clair qui vous permettent de basculer les couleurs de manière très intrusive dans votre thème.

Mike : Il y en a un autre pour la divulgation utilisée qui sert à basculer des choses comme les modules. Ce dont vous avez toujours besoin d'un état allumé, éteint. Mais le crochet simplifie encore plus cela afin que vous puissiez vous concentrer sur les choses que le framework ne peut pas déduire automatiquement. Je vais m'arrêter là, parce que c'était beaucoup.

Drew : C'est vraiment bien. Juste pour que j'aie bien compris, tout d'abord c'est Shakra pas Chakra ? Chakra ?

Mike : Je ne serais pas l'expert en la matière. J'ai dit Shakra juste à cause du yoga. Mais nous devrons demander aux fondateurs de revérifier.

Drew : C'est un système de conception prêt à l'emploi que vous pouvez utiliser pour créer l'interface utilisateur de votre projet.

Mike : Ouais.

Drew : C'est spécifiquement pour les projets React.

Mike : Ouais. Il existe un projet Chakra Vue. Je ne suis pas très fan de Vue mais je sais que ça existe. Il peut y en avoir pour d'autres cadres également, mais je suis très, très concentré sur React, donc j'ai utilisé celui de React par défaut de Chakra.

Drew : Oui. J'ai été familier avec React dans le passé. J'ai utilisé React lorsque je travaillais chez Netlify. Maintenant, je fais tout dans Vue. C'était l'une des premières choses que j'ai regardé. Oh, y a-t-il une Vue ? Cela semble bon. Existe-t-il une version Vue de celui-ci ? J'en ai trouvé une version Vue et elle semble être assez loin derrière. Je pense que c'est sur 0.9 ou quelque chose comme ça, plutôt que sur 1.6 ou quelle que soit la version actuelle de React. Je ne sais pas à quel point c'est courant.

Drew : Nous avons des frameworks assez obsolètes. Des choses comme Foundation UI, Bootstrap, Bulma. Ils existent depuis longtemps et ils sont une génération précédente de framework, semble-t-il. Ensuite, nous avons des approches plus modernes. Je pense que beaucoup d'auditeurs connaissent Tailwind et le projet Tailwind UI. Où Chakra UI se situe-t-il dans ce paysage ? C'est plus proche de quelque chose que Tailwind pourrait… Une approche que Tailwind pourrait adopter. Est-ce exact?

Mike : Je pense que oui. Certes, je voulais vraiment creuser beaucoup plus dans Tailwind simplement parce qu'il est si populaire en ce moment. Mais je ne peux pas parler intelligemment des tenants et des aboutissants de Tailwind lui-même et comment… J'ai l'impression que Chakra et Tailwind sont des approches alternatives. Vous en prenez un, pas les deux en même temps, évidemment.

Mike : Je ne sais pas encore quels sont les avantages et les inconvénients des deux. Je suis tellement amoureux de Chakra que je continue à l'utiliser par défaut. Je me dis : « OK, je le sais très bien maintenant. Je l'aime. J'apprendrai l'autre plus tard. Mais Tailwind évidemment, extrêmement populaire. Je pense que Tailwind a son framework de base dans une boîte à outils d'interface utilisateur. Est-ce juste?

Drew : C'est vrai. Ouais.

Mike : D'accord. Ce serait probablement plus à égalité avec la boîte à outils d'interface utilisateur de Tailwind. Sur la page d'accueil de Chakra, ils ont une comparaison sur les raisons pour lesquelles vous pourriez vouloir atteindre l'un ou l'autre, mais je ne l'ai pas intériorisé.

Drew : Ouais. C'est bien. Comme nous l'avons mentionné, pour les projets React et la façon dont cela se manifeste plutôt que certains de ces systèmes de conception plus traditionnels qui vous donnent tout un tas de noms de classes à mettre sur votre HTML et vous devez utiliser une structure HTML, mettre les bonnes classes sur ce. C'est ainsi que l'interface utilisateur se manifeste dans votre projet. Avec Chakra, parce qu'il est basé sur React, il vous donne tout un tas de composants pour chacun de ces éléments. Vous pouvez simplement importer dans votre projet. Ces composants encapsulent leur propre balisage et style, n'est-ce pas ?

Mike : Ouais. Vous n'aurez pas réellement à écrire une classe en utilisant Chakra. Je n'ai pas. Je ne sais même pas si c'est possible. L'ensemble du paradigme React est une composition et des propriétés de composants. L'encapsulation des composants signifie que vous transmettez certaines propriétés dans le composant. Dans Chakra, vous avez cette notion de thème qui est un paradigme global. Il y a un thème par défaut et il a des valeurs pour la couleur et l'espacement et certaines unités pour toutes les choses courantes.

Mike : Vous pouvez personnaliser ce thème. Il le personnalise globalement. Vous pouvez l'augmenter selon vos besoins. Lorsque vous appelez le composant lui-même, par exemple, une entrée de texte. Un composant d'entrée. Cela va avoir des couleurs par défaut et un rayon de bordure et un rembourrage et une marge tels que définis par le thème. Lorsque vous souhaitez le styliser davantage, si vous ne souhaitez pas le faire de manière globale, par exemple, lorsque je spécifie des marges inférieures, je le fais au cas par cas. Je ne le fais pas au niveau mondial parce que cela peut conduire à une catastrophe. Vous venez de le passer comme une invite.

Mike : Il existe des invites de raccourci. Si j'ai un composant d'entrée, je dis simplement, MB est égal, puis une valeur et il appliquera la marge inférieure. Ou ils ont MX et MY pour vertical et horizontal. Ou vous pouvez simplement spécifier M et transmettre la chaîne comme vous le feriez pour la propriété CSS margin. Il n'y a pas de noms de classe. Il fait tous les noms de classe de manière dynamique et obscurcit cela loin de l'utilisateur.

Drew : Oui. Je pense que c'est là que la comparaison avec Tailwind doit intervenir. Parce que la façon dont Tailwind fonctionne, c'est qu'il vous donne tout un tas de classes. Si vous voulez augmenter la marge, il y a une classe que vous pouvez mettre en place pour augmenter la marge. Il semble en fait que vous preniez la même chose… C'est une implémentation différente, mais la même approche de la façon dont elle est architecturée. Nous utilisons en fait des accessoires et vous passez un accessoire pour ajuster ces choses.

Drew : Est-il facile de personnaliser un design ? S'agit-il simplement de pouvoir modifier les couleurs, les marges et le rembourrage et de le rendre un peu différent? Ou pouvez-vous vraiment personnaliser un thème avec Chakra ?

Mike : Oh, tu peux faire ce que tu veux. C'est bien. Vous pouvez styliser au niveau du composant ou au niveau du thème. Cela dépend simplement de la façon dont vous voulez être créatif avec cela. J'ai réussi à prendre certains composants et à faire des choses folles avec eux. Une partie de ce qui le rend vraiment stylé est que ces composants sont assez atomiques.

Mike : En reprenant l'exemple de la zone de texte, si vous voulez une zone de texte, votre composant n'est que cela. Vous pouvez styliser tout ce qui l'entoure ou vous pouvez styliser la zone de texte elle-même. Ou vous pouvez changer le thème. Définir les couleurs pour tout renommer à l'échelle mondiale.

Mike : En fait, j'ai tweeté le créateur de Chakra UI, Seg, disant qu'ils devraient mettre une galerie sur le site parce que c'est vraiment génial. Vous pouvez créer de beaux designs avec. Ils sont très variés et vous ne les connaissez peut-être pas en surface. Je ne sais pas si Chakra UI a des indications qui montrent clairement que vous utilisez une interface utilisateur Chakra pour votre site.

Mike : J'ai vu des trucs plutôt sympas avec. Mais vous pouvez tout faire avec. J'ai fait des sites Web statiques. La page d'accueil Cut Into The Jamstack est terminée. Juste comme un exemple. Nous l'avons beaucoup utilisé chez Echobind. Je ne me souviens pas si nous l'avons utilisé pour echobind.com. Mais certainement beaucoup de sites de nos clients. Ensuite, l'application que j'ai créée, JamShots, est une application. Il n'a pas encore de pages marketing. Mais ce n'est que de l'interface utilisateur et toute cette interface utilisateur est construite à l'aide de Chakra.

Mike : Une autre chose pendant que je fais l'éloge de Chakra, c'est qu'il y a un autre site Web que j'utilise beaucoup ces derniers temps, et que j'utilise dans… Je vais également l'introduire dans le livre. Chakratemplates.net. Chakra-templates.net. C'est un modèle de conception courant que celui qui contribue trouve une unité de héros ou une unité de tarification. Ils n'ont qu'à copier et coller le code Chakra.

Mike : Je l'utilise entièrement pour la page d'accueil du livre, car cela m'a permis de gagner beaucoup de temps lors de son développement. C'est comme, oh, vous avez un modèle de tarification. Permettez-moi de copier et coller cela. Permettez-moi d'ajuster un peu les accessoires de style pour que tout soit cohérent sur mon site. C'est ça. C'est juste une autre chose qui est distincte de Chakra lui-même, mais c'est juste, c'est un tel gain de temps parce que vous avez besoin de ces choses sur tant de sites Web et qui veut réinventer la roue à chaque fois.

Drew : Il semble que cela puisse être un véritable gain de temps, non seulement pour les projets personnels où vous souhaitez déployer quelque chose rapidement, mais dans le contexte d'une agence.

Mike : Oh, oui. Absolument.

Drew : Est-ce que cela s'applique aussi bien aux interfaces d'applications qu'aux sites marketing ? Est-ce que cela biaise dans un sens ou dans l'autre ou est-ce simplement généralement utile quoi que vous construisiez ?

Mike : Je dirais que c'est les deux. C'est définitivement le cas. Je l'ai utilisé pour les deux. Notre société l'a utilisé pour les deux. Nous créons, je dirais que nous penchons fortement vers la création d'applications complètes et d'applications mobiles. Nous avons définitivement plus besoin d'interface utilisateur que de marketing. Bien que nous construisions parfois cela aussi. C'est utile pour les deux.

Mike : Il y a quelque chose sur le site qu'ils mentionnent, comme quand ne voudriez-vous pas utiliser Chakra ? Ils disent cela à cause de la façon dont il simplifie cette interface CSS. Il peut y avoir des difficultés lorsque vous avez beaucoup de données à l'écran. Si vous créez des tonnes et des tonnes d'éléments DOM et effectuez de nombreuses mises à jour en temps réel, vous risquez ou non de rencontrer des problèmes de performances.

Mike : Je n'ai jamais vu de problème de performances. Mais je n'ai pas non plus construit quelque chose d'aussi gourmand en données en temps réel. C'est une inquiétude. Si je devais créer une application comme celle-là, je voudrais probablement utiliser deux approches différentes de toute façon, juste pour voir comment elles fonctionnent avec beaucoup de choses. Mais ouais. C'est universellement utile pour ces deux cas.

Drew : Je suppose qu'il y a toujours un compromis, n'est-ce pas avec les choix technologiques ? Quelque chose qui le rend vraiment, vraiment simple. Vraiment rapide à mettre en oeuvre. Le compromis peut être qu'une fois que vous créez 1 000 points de données ou quoi que ce soit sur une page, cette méthode de travail ne fonctionnera pas bien et vous ralentira.

Drew : Oui. Je pense que c'est juste. J'ai tendance à trouver dans les choix technologiques que le plus important est simplement de savoir. Juste pour savoir quels sont les compromis et quelles sont les limites. Aucun d'entre eux n'est bon ou mauvais. Vous avez juste besoin de trouver un équilibre approprié à votre propre situation.

Drew : Comme on peut s'y attendre avec un système de conception de ce type, il est livré avec des composants pour la typographie. Pour la mise en page. Ensuite, jusqu'au détail des boutons et des éléments de formulaire et il y a une bibliothèque d'icônes. Il y a à peu près tout ce que vous vous attendez à voir sur la page des éviers de cuisine d'un système de conception. Vous avez tout là-bas. Tout cela me semble assez moderne. J'ai noté que le composant de grille de mise en page utilise en fait une grille CSS, ce qui est toujours agréable à voir. Il ne s'agit pas seulement de donner une boîte flexible.

Mike : Oh, ouais. Totalement.

Drew : Est-il généralement très flexible de travailler avec ? Trouvez-vous que les éléments de mise en page vous permettent de créer n'importe quel type d'interface utilisateur dont vous avez besoin ?

Mike : Ouais. Ouais. Absolument. Ce qui est génial, c'est qu'ils fournissent, dans certains cas, plus d'un niveau d'abstraction. Dans le cas de la grille CSS, ils ont une grille simple qui est comme, d'accord. Vous voulez le déposer et voici votre grille. Vous venez de mettre des choses à l'intérieur et vous spécifiez, je pense, le nombre de colonnes ou quelque chose comme ça. Ensuite, vous avez une grille.

Mike : Mais si vous avez besoin d'un peu plus de flexibilité dans le comportement de la grille, alors vous avez un composant de grille générique, qui est probablement… Le composant de grille simple enveloppe probablement l'autre composant de grille. C'est juste une autre façade sur elle-même.

Mike : Cette approche de la composition des composants, c'est un paradigme précieux dans le monde React à cause de la même chose. Si vous avez un composant très polyvalent et doté de nombreux accessoires, eh bien, il peut y avoir un ensemble de cas d'utilisation pour lesquels vous souhaitez utiliser le composant d'une manière assez courante. Vous l'enveloppez simplement avec un autre composant avec des accessoires statiques ou prédéfinis pour les composants les plus robustes.

Mike : Ils utilisent très bien cette approche dans Chakra. Je n'ai encore rien rencontré que je ne puisse faire avec. Je suis sûr que c'est quelque part. Ou quelque chose qui est juste un peu plus compliqué à faire. Mais cela ne s'est généralement pas encore produit. Pas que je puisse penser au moins.

Drew : Eh bien, l'une des choses que j'ai été vraiment ravie de voir et quelque chose que vous avez également mentionné plus tôt, c'est qu'il semble y avoir cet accent assez fort sur l'accessibilité.

Mike : Oui.

Drew : Certainement dans les informations promotionnelles. Est-ce que cela ressort du code lui-même ? Pratiquent-ils ce qu'ils prêchent ? A-t-il réellement une bonne accessibilité intégrée ?

Mike : Je pense que oui. Le plus proche que j'ai fait pour le mettre à l'épreuve est d'exécuter Lighthouse contre lui. Il fournit systématiquement des scores élevés pour l'accessibilité. J'utiliserai généralement Chakra Next.js. Next.js, c'est la performance dès le départ. C'est assez souvent que vous verrez des scores élevés et tout. Je viens de tweeter aujourd'hui sur la façon dont la page d'accueil du livre contient trois des quatre partitions de Lighthouse. Il y a l'accessibilité, les meilleures pratiques, la performance et un quatrième. Je ne pense pas en ce moment.

Mike : Tout, sauf les performances, a été proche de 100 %. La partie performance est sur moi juste parce que j'ai mis beaucoup sur la page et que je ne l'ai pas encore optimisée. Il a tendance à le faire. Les scores d'accessibilité dans Lighthouse sont excellents chaque fois que j'utilise Chakra UI.

Drew : C'est super. Vous avez mentionné qu'ils utilisent le rendu côté serveur et ainsi de suite. Des choses comme Next et Gatsby et ce que je vous ai, n'est absolument pas un problème, n'est-ce pas ? Il n'y a pas d'obstacles pour être conscient de l'utilisation de Chakra avec ceux-ci ?

Mike : Oh, non. Pas du tout. Je ne l'ai pas utilisé. J'ai tendance à me concentrer sur Next.js. Je n'ai pas branché Gatsby ni aucun des autres outils SSR. Mais tant que le framework n'a rien qui l'empêcherait de l'utiliser en tant que tel, alors ça devrait aller.

Mike : Pour React, Chakra fournit un fournisseur d'API de contexte. Un fournisseur de thèmes pour que lorsque vous… Dans mes applications Next.js par exemple, vous avez un… Next.js a un fichier JS ou TS d'application de soulignement qui enveloppe simplement chaque page de l'application. Il vous suffit de brancher le fournisseur de thème et Chakra fait le reste du travail et il devient simplement disponible partout. Il n'y a certainement aucun obstacle à ajouter à Next.js. Mais j'imagine pas à Chakra non plus.

Drew : Est-ce que Chakra utilise TypeScript ? Je crois que oui, n'est-ce pas ?

Mike : Il le supporte. Ouais.

Drew : Il le soutient. C'est un gros plus pour les personnes qui utilisent déjà TypeScript dans leurs projets. Y a-t-il des inconvénients à cela si les gens n'utilisent pas déjà TypeScript ?

Mike : Je ne pense pas. J'utilise TypeScript par défaut dans tous mes projets, tout comme Echobind. Mais quand je fais des choses à un niveau personnel, j'utilise… j'aime dire saupoudrer de TypeScript. Typescript est extrêmement utile pour réduire les erreurs en créant des types statiques. Il existe cependant un support pour cela, où, selon vos connaissances, TypeScript peut être un véritable obstacle.

Mike : Mon seuil minimum pour… La rigueur de TypeScript que j'utilise est assez faible simplement parce que vous pouvez tirer beaucoup de valeur de TypeScript avec une frappe de base. Cela évitera bien des mésaventures courantes. Lorsque vous entrez dans la dactylographie plus avancée, si vous n'êtes pas très à l'aise avec ce genre de choses, cela peut vraiment vous ralentir et vous frustrer.

Mike : C'est juste pour dire la même chose avec Chakra et TypeScript. J'ai tendance à utiliser une petite quantité de TypeScript, du moins au début jusqu'à ce que je développe et stabilise vraiment un projet. Mais il ne présente aucun défi dans l'utilisation de Chakra, avec ou sans TypeScript. C'est super avec. Je l'aime avec, mais vous pouvez certainement l'utiliser sans aussi.

Drew : Ouais. Je trouve qu'avec TypeScript, vous obtenez 80% des avantages, comme vous le dites, avec seulement quelques types. Si vous allez trop loin dans le terrier du lapin, vous vous retrouvez avec un script qui est principalement TypeScript. Puis un peu de JavaScript vers le bas.

Mike : Ou vous passez tellement de temps à essayer de trouver la bonne façon de taper quelque chose et votre cerveau explose. Voilà comment vous venez de mettre tout ou inconnu. Vous le raccourcissez. Ce que je défends dans des cas comme celui-là. Si cela vous prend trop de temps pour faire quelque chose, alors il y a un levier que vous pouvez tirer.

Drew : La documentation Chakra semble être très bien conçue, je pense, avec… Elle contient un aperçu de chaque composant. Ensuite, il inclut très utilement toutes les notes techniques sur les considérations de conception qui ont été faites lors de la mise en œuvre de ce composant. Ce qui, en tant qu'ingénieur frontal, je pense que c'est génial. Ils parlent ma langue. Je comprends. Je sais ce que fait le composant légèrement sous le capot.

Drew : C'est juste de mon point de vue, parcourir la documentation sans un vrai projet sur lequel je travaille. Lorsque vous travaillez réellement sur un projet et que vous êtes plongé dans les mauvaises herbes, seule la documentation tient le coup ? Est-ce aussi utile qu'il y paraît ?

Mike : Ah ouais. Absolument. Mon point de vue est un peu différent. Je n'ai pas toujours besoin de savoir ce qui se passe sous le capot, mais je sens que je peux généralement en déduire. Si je regarde un composant de boîte, je regarde juste les docs maintenant pendant que nous parlons de rappel. Si je regarde un composant de boîte, je me dis : « OK. C'est probablement une div par défaut. Je le vois passer dans les propriétés du dégradé, peu importe.

Mike : Je peux avoir une idée de ce qui se passe dans le capot sans comprendre pleinement leur magie pour traduire le CSS. Traduisez les accessoires en CSS. Mais la documentation est excellente en ce sens qu'elle est très linéaire. C'est très cohérent. Il répertorie tout avec des exemples. Un petit copier-coller.

Mike : Il utilise juste un très bon espace blanc, donc regarder la page ne semble pas écrasant. Vous pouvez trouver ce dont vous avez besoin facilement. Leur recherche est également excellente. Leur recherche est utile. 90% du temps, je pense que c'est pour ça que j'y vais. Peut-être y aller et voir si un composant existe pour faire quelque chose. C'est généralement le cas. Et tomber sur quelque chose d'autre qui était utile et que je ne connaissais pas. Ou simplement me rafraîchir sur certains des principes. Je peux toujours trouver à peu près ce dont j'ai besoin ici.

Drew : La seule chose que je n'ai pas aimée dans les documents, c'est le nombre de publicités dessus. Sur chaque page pour leur offre commerciale de Chakra UI Pro.

Mike : Je ne les avais pas vus. Intéressant. Je l'ai vu. Je l'ai certainement vu. Mais je ne le vois pas pour le moment. Oh oui. D'accord. Il y a Chakra UI Pro. Je suppose que je l'ai filtré mentalement. Je t'entends. Au moins, ce n'est pas trop gros et dans votre visage.

Drew : Ce n'est pas trop grand. C'est juste au mauvais endroit. C'est juste là que vous cherchez l'information. Ce qui, je suppose, est la raison pour laquelle ils l'ont fait. Cela vaut la peine d'être mentionné en considérant l'écosystème et tout ce qui entoure le projet, c'est qu'il y a un ensemble de composants professionnels qui est... Je suppose que c'est équivalent à certaines des choses qui sont dans Tailwind UI qui est là. Les pages de marketing et voici des composants et plus de ces sections composées de pages et de pages entières et de mises en page et d'autres choses. Que vous, est disponible auprès des fabricants de Chakra, mais en tant qu'offre commerciale.

Mike : Ouais. Il suffit d'y jeter un coup d'œil rapide maintenant. Certains d'entre eux sont effectivement disponibles. Ou des versions d'entre eux sont disponibles gratuitement comme les modèles Chakra. Je suppose que ses modèles Chakra sont la solution open source de Chakra Pro ou du concurrent open source. Je suis sûr que vous allez gagner beaucoup en payant pour ça. Il semble que Chakra Pro soit extrêmement robuste et à un prix raisonnable si vous en avez un besoin professionnel payant. Il y a quelques options pour votre projet, semble-t-il.

Drew : Ouais. Il semble qu'il y ait tout un écosystème construit autour de lui. Savez-vous depuis combien de temps le projet dure et quelle est la suite ? Est-il largement utilisé dans la communauté React ?

Mike : Je veux dire oui. Je ne sais pas à quel degré. Je serais curieux de voir quelle est, je suppose, la part de marché de Tailwind par rapport à Chakra de nos jours. Je sais que Chakra a reçu un prix relativement récemment. GitNation React Award pour le projet le plus impactant pour la communauté. Je dirais qu'il est assez grand et plutôt bien embrassé. Avec raison, c'est super. Les gens apprécient certainement. Je ne suis pas le seul.

Drew : Une chose à laquelle il vaut toujours la peine de penser lorsque vous introduisez une dépendance dans votre projet est ce qui se passe lorsque vous devez mettre à jour cette dépendance.

Mike : Ouais.

Drew : Chakra s'améliore tout le temps, j'imagine. Est-ce un cas où une fois que vous l'avez importé et construit avec, vous le laissez verrouillé sur une certaine version ? Ou est-il généralement sûr de se tenir à jour ? Est-il relativement stable en termes de conception et d'éléments de votre site qui ne changent pas au fur et à mesure des mises à jour de Chakra ?

Mike : Cela a été jusqu'à présent. Ouais. Principalement, je dirais que c'est à cause des progrès du développement. Ils sont sur la version 1.6.3 en ce moment. Il y a quelques mois, ils sont passés de zéro à un. C'était la seule fois où ils avaient des changements de rupture. Depuis lors, ils n'ont cessé de publier des versions de fonctionnalités et de corriger des bogues.

Mike : Depuis au moins deux mois, tout n'a été que des ajouts. Ajouts et corrections. Il n'y a pas de changements de rupture impliqués. Je ne sais pas à quoi ressemble la feuille de route, mais j'imagine qu'elle continuera d'être ainsi. Chaque fois que je l'ai mis à jour, une de ces versions mineures, ça s'est bien passé. Je n'ai jamais vu quelque chose s'en détacher. Mais quand ils sont sortis avec 1.0, il y a eu quelques changements de rupture. Je ne me souviens pas que cela ait été catastrophique.

Drew : Savez-vous quelle est la situation avec la taille des paquets et la capacité de secouer les chakras ? Cela ajoute-t-il beaucoup de poids à votre projet ou les choses ne sont-elles importées que lorsque vous les utilisez ?

Mike : Je ne m'en souviens pas d'emblée, honnêtement. Je devrais probablement le savoir. Je n'ai pas remarqué qu'il ajoutait beaucoup de poids. Principalement parce que vous importez les composants individuellement. Ne pas importer tout Chakra ou quelque chose comme ça. Je dirais que c'est en ligne avec un support pour le secouement des arbres, mais je ne l'ai pas mis à l'épreuve. Jusqu'à présent, je n'ai pas eu de choses qui avaient un poids énorme venant spécifiquement de cela, cependant.

Drew : Ouais. C'est toujours une considération importante, n'est-ce pas?

Mike : Ouais.

Drew : Y a-t-il autre chose que nous devrions savoir sur l'interface utilisateur de Chakra avant de plonger dedans et de l'utiliser sur un projet ?

Mike : Non. C'est super. Il y a aussi une communauté assez active. Je vois souvent des mises à jour. Je regarde la documentation maintenant et je vois des composants que je n'avais pas vus auparavant. Je vois qu'il y a beaucoup d'ajouts de fonctionnalités en cours. C'est génial.

Drew : Ouais. C'est super. Vous avez sorti un livre intitulé Cut Into The Jamstack, qui est une version préliminaire. Une version bêta pour le moment. Vous l'auto-éditez. Est-ce correct?

Mike : Ouais. Ouais. Je suis. C'était ma première tentative de livre technique. Je veux juste le diffuser sans m'engager dans quelque chose comme, c'est formel, je suppose. Je suis aussi quelqu'un qui aime l'informalité, surtout quand je crée des choses. Cela me donne la possibilité de le faire à ma façon en le faisant comme ça.

Drew : Le livre guide littéralement le lecteur dans la création d'un logiciel en tant qu'application de service.

Mike : Ouais.

Drew : Tout sur le Jamstack. Pourquoi avez-vous décidé d'écrire ceci maintenant et d'adopter cette approche avec le livre ?

Mike : Bonne question. Je code depuis environ 20 ans maintenant et je pense que j'ai essayé d'écrire un livre il y a quelque temps et cela n'a tout simplement pas pris forme. Je suis à un moment de ma carrière où je veux vraiment partager plus de connaissances. Je l'utilise depuis tant d'années et je ressens le besoin d'en mettre plus et d'aider les autres.

Mike : Vers le mois d'octobre de l'année dernière, j'ai eu ça… Je voulais mettre quelque chose de produit là-bas. Un ebook semblait être une très bonne façon de commencer. Je suis vraiment passionné par Next.js et les choses que vous pouvez faire avec. J'utilise le terme Jamstack et je considère Next.js comme faisant partie du Jamstack car il a une génération de site statique par défaut.

Mike : Mais je pense que c'est une chose dont on ne parle pas assez, à mon avis, ou qui pourrait nécessiter plus d'explications, c'est de créer des logiciels en tant qu'applications de service avec. Parce que le Jamstack n'est pas réservé qu'aux sites Web. Cela fonctionne très bien pour les sites Web axés sur le contenu car il est statique, rapide et convivial pour le référencement.

Mike : Mais il y a tellement de fonctionnalités riches là-bas, en particulier dans Next.js où Vercel a tenu sa conférence Next.js hier et ils publient de plus en plus de fonctionnalités étonnantes. Je suis passionné par la création de logiciels en tant que service. Les sites Web de logiciels sont formidables, mais les logiciels sont destinés à faire des choses.

Mike : Pour moi, cette pile représente l'avenir du développement de logiciels en tant que service. Cela me rappelle ce qu'était Ruby on Rails à sa sortie. C'était une évolution, en quelque sorte. Il a automatisé et simplifié beaucoup de choses que vous deviez faire manuellement. Cela a accéléré le rythme du développement et en a amélioré la qualité.

Mike : Next.js et l'interface utilisateur Jamstack, Vercel et Chakra produisent tous des choses qui simplifient beaucoup de choses pour vous. Next.js, il simplifie beaucoup de problèmes liés à la vitesse et aux problèmes liés à l'accessibilité. Instanalisation. C'est tout, le routage est fait pour vous. Vous n'avez pas à vous soucier du routage côté client ou côté service. C'est automatique. Chakra UI le fait avec l'accessibilité et la thématisation. Ces outils réunis, ils ont juste… L'expérience du développeur devient vraiment géniale et tout juste… Cela vous donne la liberté de vraiment créer des logiciels.

Mike : Pour répondre à votre question. La raison pour laquelle j'ai publié un livre maintenant est que je voulais vraiment publier quelque chose au bon moment et que l'écosystème Jamstack commençait à se concrétiser et à se développer. Cela m'a également donné l'occasion d'écrire plus de code dans Jamstack, ce que j'adore.

Drew : Je pense, comme vous le dites, qu'il est facile d'accepter l'idée de Jamstack lorsque vous pensez à des sites Web et à des sites Web généralement légers. Mais passer à l'étape suivante en réfléchissant à la manière dont vous pouvez utiliser l'approche pour créer une application Web complète, c'est beaucoup plus difficile. C'est un plus gros obstacle, je pense, à surmonter si vous avez l'habitude de penser dans l'état d'esprit côté serveur.

Mike : Ouais.

Drew : C'est un saut beaucoup plus important à voir, d'accord. Je peux mettre mon authentification à un service-

Mike : Oui.

Drew : … et je peux… Je suppose que pour les lecteurs, du point de vue du lecteur de votre livre, juste en parcourant et en construisant cet exemple, en suivant avec vous, c'est probablement un excellent moyen de surmonter cet obstacle pour simplement aider changez doucement votre état d'esprit en, d'accord. C'est ainsi que j'ai pu faire toutes ces choses, mais sur le Jamstack. Serais-tu d'accord avec ça?

Mike : Ouais. C'est ce que j'espère. Je pense que oui. C'est vraiment ce que c'est prévu. Je signais récemment une conférence, une conférence qui… Une partie de ma motivation pour le sujet et la façon dont j'ai décidé d'enseigner dans ce livre est que je pourrais vous apprendre un langage de programmation. Un framework, mais il est préférable de vous présenter la pile de manière pratique, car chaque développeur qui a beaucoup d'expérience est doué pour la documentation, la recherche sur Google et l'utilisation du débordement de pile. Pourquoi est-ce que je perdrais ton temps à t'enseigner ça ?

Mike : Je veux vous donner une plongée rapide et profonde dans la pile et ce que je peux en faire. Vous allez découvrir ce qui est génial avec chacune des pièces individuelles. NextOFF et Prisma. Suivant.js et Chakra. Je vais vous lier à la documentation juste pour vous faire économiser quelques clics. Mais vous allez voir à travers un exemple interactif, comment ces pièces se connectent. Vous allez également comprendre les parties difficiles.

Mike : Une chose que j'approfondis, par exemple, est cette fonctionnalité que je construis pour le téléchargement multi-fichiers asynchrone. Next.js a un frontal et un backend. Bien qu'à l'avant du front-end et à l'arrière du front-end, si vous utilisez cette analogie, vous avez la couche React. Ensuite, vous avez la couche de nœuds. Il y a ces routes d'API.

Mike : Si vous souhaitez effectuer un téléchargement multi-fichiers avec cela et utiliser un service, j'utilise Cloudinary dans le livre. Mais si vous utilisez un service API pour vos téléchargements d'images et de médias, ce que vous devriez faire, il y a beaucoup de pièces mobiles là-bas. Il y a le côté client, avec lequel l'utilisateur interagit. Il y a les demandes d'API au Cloudinary ou à l'autre fournisseur. Mais ensuite, vous devez faire plusieurs requêtes API pour le rendre efficace. Vous devez signer avec Cloudinary, pour lequel vous avez besoin d'un appel d'API.

Mike : Vous devez prendre ce signe et vous devez effectuer le téléchargement, qui part du navigateur et contourne votre API et va directement à Cloudinary. Ensuite, vous devez enregistrer cela dans votre base de données, qui utilise votre backend frontal du frontal. Il y a beaucoup de morceaux et Next.js… Dans la communauté Next.js, il n'y a pas encore de plugin open source pour ça. Ce que je peux extraire de l'application maintenant qui l'a construite et la mettre dans une seule parce que d'autres personnes vont l'avoir.

Mike: Anyway, all that's just to say that, I think that's something really valuable to teach to people. Even if you're a senior engineer, for a few dollars, you get all this wrapped up for you with a bow on it to be like, okay. This is a series of tools that worked really well together for building SaaS apps with a stack. This hurdle, I don't have to figure out a solution for writing custom. Here's an approach that works.

Mike: I just, I take a lot of joy in trying to prevent people from having to reinvent the wheel. Even though it's fun to reinvent the wheel, if you wanted to just ship something, the more you can reduce that, the better,

Drew: That sounds very, very helpful. The book is in beta now. If people buy it now, do they get updates as it improves?

Mike: Yep. Ouais. It's immensely discounted. It's $10 now. When I finish, it will be 30. Whoever gets it now, will just get updates for the life of the book.

Drew : Fantastique.

Mike: I've got another one coming up in probably a couple of weeks. Ouais. Ouais. It's already 107 pages and it's got a source-code repo that will be shipped with it. That comes along with it now. It's already like you can do… In the first 107 pages, it goes through setup to build a new first full stack page to building a CRUD for photo galleries. Create, Read, Update, Delete. So the front end and backend components. Then shipping a deployment to railway and Vercel. It's pretty practical right away. Then the further, other couple of 100 pages are going to be more in depth with the coding topics.

Drew: Great. That's available now at cutintothejamstack.com.

Mike: Yep. C'est ça.

Drew: I've been learning all about Chakra UI. What have you been learning about lately, Mike?

Mike: I've been digging deeper on the stack. It constantly teaches me new things. One example is just with the Vercel Conference yesterday. The Next.js Conf. Next.js 11 is now out and it's just got a ton of great things with it. There's a real-time collaboration tool built in so when you ship a preview deploy, you can have people commenting on it and moving their mouse around the screen, even it looks like.

Mike: In addition, their performance is getting better and better. Next.js' image component, which I use heavily now is going to have automatic placeholders. It's going to be even more streamlined. I'm constantly learning the better and better ways to do things in this stack. There are always more. It seems like.

Drew: Always. Always more to learn. If you dear listener would like to hear more from Mike, you can follow him on Twitter where he's @mcavaliere, and his personal website is mikecavaliere.com. The book Cuts Into The Jamstack, which amongst other things shows a practical implementation of Chakra UI, is again at cutintothejamstack.com. Thanks for joining us today. Mike. Avez-vous eu des mots d'adieu?

Mike: Nope. Thanks so much for having me, Drew, and keep smashing out there. Maybe I should rephrase that.