Qu'estce que l'interface utilisateur Chakra pour React? — fracassant

À propos de l'auteur

Drew est un ingénieur spécialisé en Frontend chez Snykainsi qu'un co-fondateur de Notist et du petit système de gestion de contenu Perch. Avant cela, …

En savoir plus

A dessiné
↬

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 Cavalier pour le savoir.

Afficher les notes

Mise à jour hebdomadaire

Transcription

Drew McLellan : C'est un ingénieur logiciel principal pour une agence appelée Echobind. Il écrit du code depuis deux décennies et utilise JavaScript tout le temps. Il adore la 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 de la Jamstack, mais saviez-vous qu'il s'est déjà perdu dans l'allée du beurre de cacahuète ? Mes formidables amis, veuillez souhaiter la bienvenue à Mike Cavalier. Salut Mike. Comment vas-tu ?

Mike Cavaliere : Je suis absolument foutu aujourd'hui.

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

Mike : Chakra UI est un framework 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 certain temps.

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 que c'est… D'une part, c'est robuste. Cela signifie qu'il contient tous les éléments d'interface utilisateur que vous pouvez imaginer. Il y a des interrupteurs. Il y a des enveloppes autour des grilles. Il contient toutes sortes de choses sous forme d'éléments.

Mike : Il est conçu pour être très composable, de sorte que tout utilise des accessoires de style. Vos composants, ils sont parfaits dès la sortie de la boîte. Vous pouvez les déposer et les utiliser tels quels. Mais si vous voulez faire un tweak, 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 oublie toujours de la mettre en œuvre ou qui demande un petit effort pour la mettre en œuvre, elle est intégrée pour vous.

Mike : Il n'est pas rare que je crée quelque chose avec Chakra UI et obtienne un très bon score Lighthouse. En fait, je venais de consulter le site Web de 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 n'y a qu'une longue liste d'avantages.

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 très légèrement les choses pour les rendre cohérents et les choses ont fière allure dès la sortie de la boîte. Vous êtes capable de vous développer rapidement. L'expérience du développeur est excellente. C'est tout simplement génial à tant de niveaux.

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

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

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

Mike : Je ne serais pas l'expert là-dessus. 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 standard 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 vraiment une personne de Vue mais je sais que cela existe. Il y en a peut-être aussi pour d'autres images, mais je suis très, très concentré sur React, j'ai donc utilisé celui par défaut de Chakra React.

Drew: Oui. J'ai connu React dans le passé. J'ai utilisé React lorsque je travaillais chez Netlify. Maintenant, je fais tout dans Vue. C'est l'une des premières choses que j'ai examinées. Oh, y a-t-il une Vue ? Cela semble bon. Existe-t-il une version Vue ? J'en ai trouvé une version Vue et cela semble être assez en retard. Je pense que c'est sur 0.9 ou quelque chose, plutôt que sur 1.6 ou quelle que soit la version actuelle de React. Je ne sais pas à quel point c'est actuel.

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ù se situe l'interface utilisateur de Chakra 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 aboutissants de Tailwind lui-même et comment… Mon sentiment est 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 viens d'être tellement amoureux de Chakra que je continue de l'utiliser par défaut. Je me dis : "D'accord, 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 : Exact. Ouais.

Mike : D'accord. Ce serait probablement plus comparable à 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 bon. 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 toute une charge de noms de classes à mettre sur votre HTML et vous devez utiliser une structure HTML, mettez les bonnes classes sur il. 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 à écrire un cours 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 de composants signifie que vous transmettez certaines propriétés au 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, 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 les marges inférieures, je le fais au cas par cas. Je ne le fais pas à ce niveau global car cela peut conduire à la catastrophe. Vous le transmettez simplement en tant qu'invite.

Mike : Il existe des invites de raccourci. Si j'ai un composant d'entrée, je dis simplement que 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 nom de classe. Il fait tous les noms de classe de manière dynamique et les masque à l'utilisateur.

Drew : Oui. Je pense que c'est là que la comparaison avec Tailwind doit entrer en jeu. Parce que la façon dont Tailwind fonctionne, c'est qu'il vous donne tout un tas de cours. Si vous souhaitez augmenter la marge, il existe 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 quant à la façon dont elle est architecturée. Nous utilisons en fait des accessoires et vous transmettez un accessoire pour ajuster ces éléments.

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

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

Mike: En utilisant à nouveau l'exemple de zone de texte, si vous voulez une zone de texte, votre composant est exactement 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 : J'ai en fait tweeté le créateur de Chakra UI, Seg, en 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 le savez peut-être pas en surface. Je ne sais pas si Chakra UI a des indications qui montrent clairement que vous utilisez une Chakra UI pour votre site.

Mike : J'ai vu des trucs assez sympas avec. Mais tu peux tout faire avec. J'ai fait des sites Web statiques. La page d'accueil de Cut Into The Jamstack est terminée. Juste à titre d'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 nos sites 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 juste pendant que je loue Chakra, c'est qu'il y a un autre site Web que j'ai beaucoup utilisé ces derniers temps, et je utiliser dans… Je vais également introduire dans le livre. Chakratemplates.net. Chakra-templates.net. C'est un modèle de conception commun que celui qui contribue trouve une unité de héros ou une unité de prix. 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 fait gagner beaucoup de temps pour le développer. 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 du Chakra lui-même, mais c'est juste, c'est un gain de temps tellement important parce que vous avez besoin de ces choses sur tant de sites Web et qui veut réinventer la roue à chaque fois.

Drew : Ça sonne comme ça. peut être un véritable gain de temps, non seulement pour les projets personnels où vous souhaitez déployer quelque chose rapidement, mais dans le cadre d'une agence.

Mike : Oh, oui. Absolument.

Drew : Cela s'applique-t-il également aux interfaces d'applications et aux sites marketing ? Est-ce que cela fausse dans un sens ou dans l'autre ou est-ce que c'est juste généralement utile quoi que vous construisiez ? C'est certainement le cas. Je l'ai utilisé pour les deux. Notre société l'a utilisé pour les deux. Nous construisons, je dirais que nous penchons fortement vers la création d'applications full stack et d'applications mobiles. Nous avons certainement beaucoup plus besoin d'interface utilisateur que de produits 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 cela simplifie cette interface CSS. Il peut y avoir des défis 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 pourriez ou non 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 qui soit aussi gourmand en données en temps réel. C'est l'inquiétude. Si je devais créer une application comme celle-ci, je voudrais probablement de toute façon utiliser deux approches différentes, 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'y a-t-il pas des 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 autre 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, le plus important est juste 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é pour votre propre situation.

Drew : Comme vous vous en doutez avec un système de conception de ce type, il est livré avec des composants pour la typographie. Pour la mise en page. Ensuite, il y a le 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 d'évier 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. Cela ne donne pas seulement 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. Oui. 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 mettez juste des trucs à 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 simple le composant de grille 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 dans un sens assez courant. Vous l'enveloppez simplement avec un autre composant avec des accessoires statiques ou pré-spécifiés pour les composants les plus robustes.

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

Mike : Oui.

Drew : Certainement dans les informations promotionnelles. Cela est-il né dans le code lui-même ? Mettent-ils en pratique ce qu'ils prêchent ? Est-il réellement doté d'une bonne accessibilité ?

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 est la performance à la boîte. 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 a trois des quatre scores Lighthouse. Il y a l'accessibilité, les meilleures pratiques, les performances et un quatrième. Je ne pense pas pour le moment.

Mike : Tout, sauf les performances, est proche de 100 %. La partie performance est pour 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 utilisaient le rendu côté serveur et tout le reste. Des choses comme Next et Gatsby et ce que j'ai vous, 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 ne me suis pas connecté à Gatsby ni à aucun autre outil SSR. Mais tant que le framework n'a rien qui l'empêche 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ème 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. Vous n'avez qu'à y brancher le fournisseur de thème et Chakra fait le reste du travail et il devient disponible partout. Il n'y a certainement aucun obstacle à ajouter à Next.js. Mais j'imagine que Chakra ne l'est pas non plus.

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

Mike : Il le soutient. Oui.

Drew : Il le supporte. 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. Tapuscrit est extrêmement utile pour réduire les erreurs en créant des types statiques. Il existe cependant un support pour cela, où, selon votre connaissance, 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 obtenir beaucoup de valeur de TypeScript avec une frappe de base. Cela évitera beaucoup d'incidents courants. 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, au moins au début jusqu'à ce que je développe et stabilise vraiment un projet. Mais il ne présente aucun problème d'utilisation de Chakra, avec ou sans TypeScript. C'est super avec. Je l'adore avec, mais vous pouvez certainement l'utiliser aussi sans.

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 principalement TypeScript. Puis un peu de JavaScript jusqu'en bas.

Mike : Ou vous passez tellement de temps à essayer de trouver la bonne façon de taper quelque chose et votre cerveau explose. C'est ainsi que vous venez de mettre n'importe quel 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 vraiment bien présentée, pensais-je, avec… Elle a 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é prises lors de la mise en œuvre de ce composant. Ce qui, en tant qu'ingénieur front-end, je pense que c'est génial. Ils parlent ma langue. Je comprends. Je sais ce que le composant fait un peu sous le capot.

Drew: C'est juste de mon point de vue, parcourant 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 : Oh oui. 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 déduire. Si je regarde un composant de boîte, je regarde juste la documentation maintenant pendant que nous parlons de remise à niveau. Si je regarde un composant de boîte, je me dis : « D'accord. C'est probablement un 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 CSS. Traduisez les accessoires en CSS. Mais la documentation est excellente dans la mesure où 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 facilement trouver ce dont vous avez besoin. Leur recherche est excellente aussi. Leur recherche est utile. 90% du temps, je pense que c'est pour ça que je vais là-dedans. 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 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 en jetant un coup d'œil était le nombre d'annonces dessus. Sur chaque page de 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 en ce 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 ton visage.

Drew : Ce n'est pas trop gros. 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 de mentionner lorsque l'on considère l'écosystème et tout ce qui entoure le projet, c'est qu'il y a un ensemble de composants pro qui est… Je suppose que cela équivaut à certains des éléments de l'interface utilisateur Tailwind. Les pages marketing et voici les composants et plus de ces sections composées de pages et de pages entières, de mises en page et de choses. That you, est disponible auprès des fabricants de Chakra, mais en tant qu'offre commerciale.

Mike : Ouais. J'y jette juste un coup d'œil 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 ce sont les modèles Chakra, la solution open source de Chakra Pro ou le concurrent open source. Je suis sûr que vous allez gagner une tonne en payant pour cela. 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, on dirait.

Drew : Ouais. On dirait qu'il y a tout un écosystème qui s'est construit autour. Savez-vous depuis combien de temps le projet dure et quelle suite il y a ? 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 que c'est assez gros et assez bien adopté. Avec raison, ce qui est génial. Les gens l'apprécient vraiment. Je ne suis pas le seul.

Drew : Une chose à laquelle il faut toujours penser lors de l'ajout d'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 qu'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 ? Oui. 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 fonctionnalités et de corriger des bogues.

Mike : Depuis au moins deux mois, tout n'a été que des ajouts. Ajouts et correctifs. 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'il en sera toujours ainsi. Chaque fois que je l'ai mis à niveau, l'une de ces versions mineures, ça s'est bien passé. Je n'ai jamais vu quelque chose en sortir. Mais quand ils sont sortis avec 1.0, il y a eu quelques changements de rupture. Cependant, je ne me souviens pas que cela ait été catastrophique. Est-ce que cela ajoute beaucoup de poids à votre projet ou les choses ne sont importées que lorsque vous les utilisez ?

Mike : Je ne me souviens pas spontanément, honnêtement. Je devrais probablement le savoir. Je n'ai pas remarqué qu'il ajoute beaucoup de poids. Principalement parce que vous importez les composants individuellement. Ne pas importer tout le chakra ou quelque chose comme ça. Je dirais que c'est conforme à la prise en charge du tremblement 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 : Oui.

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

Mike : Non. C'est génial. 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 jamais vus auparavant. Je vois qu'il y a beaucoup d'ajouts de fonctionnalités en cours. C'est super.

Drew : Ouais. C'est super. Vous avez sorti un livre intitulé Cut Into The Jamstack, qui est une avant-première. Une version bêta pour le moment. Vous l'auto-éditez. C'est vrai ?

Mike : Ouais. Oui. Je suis. C'était ma première tentative pour un livre technique. Je veux juste le faire sortir sans m'engager dans quelque chose comme, c'est formel, je suppose. Je suis aussi quelqu'un qui aime l'informalité, surtout lors de la création de 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 à travers la création d'un logiciel en tant qu'application de service.

Mike :Oui.[19659012]Drew : Tous sur la Jamstack. Pourquoi avez-vous décidé d'écrire ceci maintenant et d'adopter cette approche avec le livre ?

Mike : Bonne question. Je code depuis une vingtaine d'années 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 j'ai envie d'en mettre plus et d'aider les autres.

Mike : Vers octobre de l'année dernière, j'ai eu ça… Je voulais mettre quelque chose là-bas, c'était un produit. 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 de 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 pourrait utiliser plus d'explications, c'est de créer des applications de logiciel en tant que service avec. Parce que la Jamstack n'est pas seulement pour les 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, en particulier dans Next.js où Vercel a tenu sa conférence Next.js hier et ils 'publiez de plus en plus de fonctionnalités étonnantes là-dedans. Je suis passionné par la création de logiciels en tant que service. Les sites Web de logiciels sont géniaux, mais les logiciels sont destinés à faire des choses.

Mike : Cette pile représente pour moi l'avenir du développement de logiciels en tant que services. Cela me rappelle ce qu'était Ruby on Rails à sa sortie. C'était une évolution, pour ainsi dire. 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 augmenté la qualité.

Mike : Next.js et Jamstack et Vercel et Chakra UI, ils produisent tous des choses qui simplifient beaucoup de choses pour vous . Next.js, il simplifie beaucoup de problèmes liés à la vitesse et à l'accessibilité. L'instanalisation. Ce sont tous, 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 fait cela avec l'accessibilité et le thème. Ces outils mis ensemble, ils… L'expérience du développeur devient vraiment géniale et tout simplement… Cela vous donne la liberté de vraiment créer des logiciels.

Mike : Pour répondre à votre question. La raison pour laquelle je publie un livre maintenant, c'est parce que je voulais vraiment publier quelque chose au bon moment et que l'écosystème Jamstack commence à se concrétiser et à grandir. It also gave me a chance to write more code into Jamstack, which, I just love it.

Drew: I think, as you say, it’s easy to get on board with the idea of Jamstack when you’re thinking about websites and typically lightweight websites. But taking that next step into thinking about how you can use the approach to build a full web application, it’s much harder. It’s a bigger hurdle, I think, to get over if you’re used to thinking in the server side mindset.

Mike: Yeah.

Drew: It’s a much bigger jump to see, okay. I can put my authentication out to a service-

Mike: Yes.

Drew: … and I can… I guess for the readers, from the reader’s point of view of your book, just by going through and building this example, following along with you, it’s probably a great way to get over that hurdle to just help gently shift your mindset into, okay. This is how I could do all these things, but on the Jamstack. Would you agree with that?

Mike: Yeah. That’s what I’m hoping. I do think it does. That’s really what it’s intended. I was signing a talk recently, a conference talk that… Part of my motivation for the topic and the way I decided to teach in this book is that, I could teach you one programming language. A framework, but it feels better to introduce you to the stack in a hands-on manner because, every developer who’s got a lot of experience is good at going for documentation and Googling and using stack overflow. Why would I waste your time teaching that to you?

Mike: I want to give you a quick, deep dive into the stack and what I can do with it. You’re going to pick up the what’s great about each of the individual pieces. NextOFF and Prisma. Next.js and Chakra. I’ll link you to documentation just to save you a couple of clicks. But you’re going to see through an interactive example, how these pieces connect together. You’re also going to get an understanding of the hard parts.

Mike: One thing I’m going into depth in, for example, is this feature that I’m building for asynchronous multi-file upload. Next.js has a front end and a backend to it. Though in the front of the front end and the back of the front end, if you use that analogy, you’ve got the React layer. Then you’ve got the node layer. There’s these API routes.

Mike: If you want to do multi-file upload with that and use a service, I use Cloudinary in the book. But if you use an API service for your image and media uploads which you should, there’s a lot of moving pieces there. There is the client side, which the user interacts with. There’s the API requests to the Cloudinary or the other provider. But then you have to make multiple API requests to make it efficient. You have to do some signing against Cloudinary, which you need an API call for.

Mike: You need to take that sign and you need to do the upload, which goes from the browser and circumvents your API and goes directly to Cloudinary. Then you need to save that in your database, which uses your front end backend of the front end. There’s many pieces and Next.js… In the Next.js community, there isn’t an open source plugin for that yet. Which I may extract out of the app now that have built it and put it into one because other people are going to have this.

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. Oui. 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: Fantastic.

Mike: I’ve got another one coming up in probably a couple of weeks. Oui. Oui. 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. That’s it.

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 mikecavalier.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. Did you have any parting words?

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

(il)