Smashing Podcast Episódio 40 Com Mike Cavaliere: O que é Chakra UI para Reagir?

Este episódio foi gentilmente apoiado por nossos queridos amigos do Wix, que são conhecidos por dar a você a liberdade de criar, projetar, gerenciar e desenvolver sua presença na web exatamente do jeito que você deseja. Obrigado!

Neste episódio, estamos falando sobre a interface do usuário do Chakra. O que é e como pode ajudar em seus projetos React? Drew McLellan fala com o especialista Mike Cavaliere para descobrir.

Mostrar notas

• Chakra UI
• Mike no Twitter
• Site pessoal de Mike
• Livro Cut In The Jamstack

Atualização semanal

• Projetando com código: uma abordagem moderna para o design
  escrito por Mikolaj Dobrucki
• Automatizando o teste do leitor de tela no macOS usando o VO automático
  escrito por Cameron Cundiff
• A ascensão do Design Thinking como uma estratégia de resolução de problemas
  escrito por Josh Singer
• Como executar uma auditoria de UX para uma importante plataforma de EdTech
  escrito por Mark Lankmilier
• Criando um blog de vários autores com o Next.js
  escrito por Dom Habersack

Transcrição

Drew McLellan: Ele é engenheiro de software sênior de uma agência chamada Echobind. Ele escreve código há duas décadas e usa JavaScript o tempo todo. Ele adora o Jamstack, e seu novo livro, Cut Into The Jamstack, ensina o leitor a construir um software como um aplicativo de serviço do zero. Sabemos que ele conhece o Jamstack, mas você sabia que uma vez ele se perdeu no corredor da manteiga de amendoim? Meus amigos, por favor, dêem as boas-vindas a Mike Cavaliere. Olá Mike. Como você está?

Mike Cavaliere: Estou absolutamente sensacional hoje.

Drew: Isso é bom de ouvir. Eu queria falar com você hoje sobre um projeto que eu realmente não tinha ouvido falar, de alguma forma, até encontrá-lo em seu livro Jamstack. Eu não tenho certeza de como eu perdi porque parece estar amadurecendo e bem documentado e um real… Apenas um grande projeto. Espero que hoje possamos conversar sobre isso, e eu possa conversar para descobrir o que eu deveria saber o tempo todo. Estou falando da interface do usuário do Chakra, é claro. Diga-me, o que é Chakra UI? Em que espaço está e que problema está resolvendo para nós?

Mike: Chakra UI é uma estrutura de interface do usuário para React ou kit de ferramentas de interface do usuário, acho que eles o definem como. Em qualquer pilha de aplicativos, hoje em dia você não quer inventar uma interface do usuário do zero. Você quer pegar algum kit de ferramentas. Isso tem sido o caso por um tempo.

Mike: Chakra UI é uma ótima abordagem em um kit de ferramentas React UI. Há uma série de vantagens, mas uma é que é… Por um lado, é robusto. Isso significa que ele tem todos os elementos de interface do usuário que você possa imaginar. Tem interruptores. Tem invólucros em torno de grades. Tem todos os tipos de elementos de forma de coisas.

Mike: É feito para ser muito componível, então tudo usa adereços de estilo. Seus componentes, eles são ótimos assim que saem da caixa. Você pode soltá-los e usá-los como estão. Mas se você quiser fazer um ajuste, é muito fácil passar algumas propriedades de estilo. Eles são totalmente acessíveis. A acessibilidade, que todo mundo fala, mas sempre se esquece de implementar ou dá um pouco de esforço para implementar, ela está embutida para você.

Mike: Não é incomum eu montar algo com a interface do Chakra e obter uma pontuação muito boa no Lighthouse. Na verdade, eu estava verificando o site do Cut Into The Jamstack hoje, e a pontuação de acessibilidade é muito alta. Também é totalmente temático. Você pode definir a configuração do tema desde o início. Há apenas uma longa lista de vantagens para ele.

Mike: Torna o desenvolvimento muito rápido, que foi o que originalmente me atraiu nele. Echobind, nós o usamos internamente. Mas para mim, não tenho senso de design. Um pouco, mas não sou designer de forma alguma. Eu posso pegar componentes do Chakra e alterar as coisas levemente para torná-lo consistente e as coisas parecerem boas fora da caixa. Você é capaz de se desenvolver rapidamente. A experiência do desenvolvedor é ótima. É simplesmente incrível em tantos níveis.

Mike: A última coisa que vou dizer antes de continuar divagando sobre isso. Mas também tem muitos React Hooks que são auxiliares para coisas de funcionalidade muito comuns que acompanham esses elementos que você está usando. Por exemplo, no modo escuro. Há ganchos embutidos para usar o modo escuro mais claro que permitem alternar cores em seu tema.

Mike: Há outro para divulgação usada que é para alternar coisas como módulos. Que você sempre precisa de um estado ligado, desligado. Mas o Hook apenas simplifica isso ainda mais para que você possa se concentrar nas coisas que a estrutura não pode inferir automaticamente. Vou cortar aí, porque foi muito.

Drew: Isso é muito bom. Só para eu ter meu entendimento certo, antes de tudo é Shakra não Chakra? Shakra?

Mike: Eu não seria o especialista nisso. Eu tenho dito Shakra apenas por causa da ioga. Mas teremos que pedir aos fundadores que verifiquem novamente.

Drew: É um sistema de design pronto para uso que você pode usar para criar a interface do usuário do seu projeto.

Mike: Sim.

Drew: É especificamente para projetos React.

Mike: Sim. Existe um projeto Chakra Vue por aí. Eu não sou uma pessoa muito Vue, mas eu sei que ele existe. Pode haver para outros quadros também, mas eu sou muito, muito focado em React, então estou usando o React padrão do Chakra.

Drew: Sim. Eu estive familiarizado com React no passado. Eu usei React quando trabalhei na Netlify. Agora eu faço tudo em Vue. Essa foi uma das primeiras coisas que eu olhei. Ah, existe um Vue? Este parece ser bom. Existe uma versão Vue dele? Encontrei uma versão Vue dele e parece estar um pouco atrasada. Eu acho que está em 0.9 ou algo assim, em vez de 1.6 ou qualquer que seja a versão atual do React. Não tenho certeza de quão atual isso é.

Drew: Temos frameworks bastante desatualizados por aí. Coisas como Foundation UI, Bootstrap, Bulma. Eles existem há muito tempo e são uma geração anterior de framework, ao que parece. Então temos algumas abordagens mais modernas. Acho que muitos ouvintes estarão familiarizados com o Tailwind e o projeto Tailwind UI. Onde o Chakra UI se encaixa nessa paisagem? É mais próximo de algo que o Tailwind pode... Uma abordagem que o Tailwind pode ter. Isso é correto?

Mika: Acho que sim. Admitidamente, eu estava querendo realmente cavar muito mais no Tailwind apenas porque é tão popular agora. Mas eu não posso falar de forma inteligente sobre os prós e contras de Tailwind em si e como... Minha sensação é que Chakra e Tailwind são abordagens alternativas. Você pega um, não os dois ao mesmo tempo, obviamente.

Mike: Ainda não sei quais são os prós e os contras de ambos. Estou tão apaixonado pelo Chakra que continuo usando-o por padrão. Eu estou tipo, “Ok, eu sei disso muito bem agora. Eu amo isso. Vou aprender o outro mais tarde.” Mas Tailwind obviamente, extremamente popular. Acho que o Tailwind tem sua estrutura básica em um kit de ferramentas de interface do usuário. Isto é Justo?

Drew: Certo. Sim.

Mike: Ok. Isso provavelmente seria mais parecido com o kit de ferramentas de interface do usuário do Tailwind. Na página inicial do Chakra, eles têm uma comparação sobre por que você pode querer alcançar um ou outro, mas eu não a internalizei.

Drew: Sim. Isso é bom. Como mencionamos, para projetos React e a maneira como se manifesta, em vez de alguns desses sistemas de design mais tradicionais, que fornecem uma grande quantidade de nomes de classes para colocar em seu HTML e você precisa usar alguma estrutura HTML, coloque as classes certas isto. É assim que você obtém a UI se manifestando em seu projeto. Com o Chakra, por ser baseado em React, está dando a você toda uma carga de componentes para cada um desses elementos. Você pode simplesmente importar para o seu projeto. Esses componentes encapsulam sua própria marcação e estilo, não é?

Mike: Sim. Você não terá que escrever uma classe usando Chakra. eu não tenho. Eu nem sei se é possível. Todo o paradigma React é uma composição e propriedades de componentes. Encapsulamento de componentes significa que você passa certas propriedades para o componente. No Chakra, você tem essa noção de um tema que é um paradigma global. Há um tema padrão e tem valores para cor e espaçamento e certas unidades para todas as coisas comuns.

Mike: Você pode personalizar esse tema. Ele o personaliza globalmente. Você pode aumentá-lo da maneira que precisar. Quando você chama o próprio componente, por exemplo, uma entrada de texto. Um componente de entrada. Isso terá cores padrão e raio de borda e preenchimento e margem conforme definido pelo tema. Quando você quiser estilizá-lo ainda mais, se não quiser fazer isso em uma base global, por exemplo, quando eu especificar as margens inferiores, faço isso caso a caso. Eu não faço isso em um nível global porque isso pode levar à catástrofe. Você apenas passa como um prompt.

Mike: Existem prompts de atalho. Se eu tiver um componente de entrada, apenas digo, MB é igual e, em seguida, um valor e aplicará a margem inferior. Ou eles têm MX e MY para vertical e horizontal. Ou você pode apenas especificar M e passar a string como faria com a propriedade CSS margin. Não há nomes de classe. Ele faz todos os nomes de classe dinamicamente e ofusca isso do usuário.

Drew: Sim. Eu acho que é aí que a comparação com o Tailwind deve entrar. Porque a forma como o Tailwind funciona, dá a você um monte de classes. Se você quiser aumentar a margem, há uma classe que você pode colocar para aumentar a margem. Na verdade, parece que você está fazendo o mesmo... É uma implementação diferente, mas a mesma abordagem de como é arquitetada. Na verdade, estamos usando adereços e você está passando um adereço para ajustar essas coisas.

Drew: Quão fácil é personalizar um design? É o caso de apenas poder ajustar cores, margens e preenchimento e fazer com que pareça um pouco diferente? Ou você pode realmente marcar um tema com Chakra?

Mike: Ah, você pode fazer o que quiser. É ótimo. Você pode estilizar no nível do componente ou no nível do tema. Só depende de quão criativo você quer ser com ele. Eu consegui pegar alguns componentes e fazer algumas coisas loucas com eles. Parte do que o torna realmente estilizado é que esses componentes são bastante atômicos.

Mike: Usando o exemplo da caixa de texto novamente, se você quiser uma caixa de texto, seu componente é exatamente isso. Você pode estilizar tudo ao seu redor ou pode estilizar a própria caixa de texto. Ou você pode mudar o tema. Definindo as cores para renomear tudo globalmente.

Mike: Na verdade, eu twittei para o criador do Chakra UI, Seg, dizendo que eles deveriam colocar uma galeria no site porque é muito bom. Você pode criar alguns belos desenhos com ele. Eles são muito variados e você pode não saber na superfície. Não sei se a interface do usuário do Chakra tem alguma indicação que torne óbvio que você está usando uma interface do usuário do Chakra para o seu site.

Mike: Eu vi algumas coisas bem legais com ele. Mas você pode fazer qualquer coisa com ele. Eu fiz sites estáticos. A página inicial do Cut Into The Jamstack é feita com ele. Apenas como um exemplo. Nós o usamos bastante no Echobind. Não me lembro se usamos isso para echobind.com. Mas certamente muitos dos sites de nossos clientes. Então o aplicativo que estou construindo, JamShots, é um aplicativo. Ele ainda não tem páginas de marketing. Mas é tudo apenas UI e toda essa UI é construída usando Chakra.

Mike: Uma outra coisa enquanto estou elogiando Chakra é que, há um outro site que eu tenho usado muito ultimamente, e eu uso em... Vou apresentar o livro também. Chakratemplates.net. Chakra-templates.net. É um padrão de design comum que quem está contribuindo está encontrando uma unidade hero ou uma unidade de preço. Eles só precisam copiar e colar o código Chakra.

Mike: Eu uso isso inteiramente para a página inicial do livro porque me economizou muito tempo em desenvolvê-lo. É como se você tivesse um modelo de preços. Deixe-me copiar e colar isso. Deixe-me ajustar um pouco os adereços de estilo para que tudo fique consistente no meu site. É isso. É apenas outra coisa que é separada do Chakra em si, mas é uma economia de tempo porque você precisa dessas coisas em tantos sites e quem quer reinventar a roda todas as vezes.

Drew: Parece que pode ser uma economia de tempo real, não apenas para projetos pessoais em que você deseja lançar algo rapidamente, mas em um contexto de agência.

Mike: Ah, sim. Absolutamente.

Drew: Isso se aplica igualmente a interfaces de aplicativos e sites de marketing? Ele distorce de um jeito ou de outro ou é apenas útil em tudo o que você está construindo?

Mike: Eu diria que são os dois. Definitivamente é. Já usei para ambos. Nossa empresa tem usado para ambos. Nós construímos, eu diria que nos inclinamos fortemente para a construção de aplicativos de pilha completa e aplicativos móveis. Definitivamente, temos muito mais necessidade de interface do usuário do que coisas de marketing. Embora às vezes também construímos isso. É útil para ambos.

Mike: Há algo no site que eles mencionam, como quando você não gostaria de usar o Chakra? Eles dizem isso por causa da maneira como simplifica essa interface CSS. Pode haver desafios quando você tem muitos dados na tela. Se você estiver criando toneladas e toneladas de elementos DOM e fazendo muitas atualizações em tempo real, poderá ou não enfrentar desafios de desempenho.

Mike: Eu nunca vi um problema de desempenho. Mas também não construí algo com tantos dados em tempo real. É preocupação. Se eu fosse construir um aplicativo como esse, provavelmente gostaria de usar duas abordagens diferentes de qualquer maneira, apenas para ver como elas funcionam com muito. Mas sim. É universalmente útil para ambos os casos.

Drew: Eu acho que sempre há um trade-off, não há opções de tecnologia? Algo que torna tudo muito, muito simples. Realmente rápido de implementar. A compensação pode ser que, quando você estiver criando 1.000 pontos de dados ou qualquer outra coisa em uma página, esse método de trabalho não funcionará bem e o deixará lento.

Drew: Sim. Acho justo. Costumo encontrar nas escolhas de tecnologia, o mais importante é apenas saber. Basta saber quais são os trade-offs e quais são as limitações. Nenhum deles é bom ou ruim. Você só precisa encontrar um equilíbrio adequado para sua própria situação.

Drew: Como você esperaria encontrar com um sistema de design desse tipo, ele vem com componentes para tipografia. Para layout. Em seguida, vamos aos detalhes de botões e elementos de formulário e há uma biblioteca de ícones. Há praticamente tudo o que você esperaria ver em uma página de pia de cozinha de sistemas de design. Você tem tudo lá. Tudo me parece muito moderno. Notei que o componente de grade de layout realmente usa grade CSS, o que é sempre bom de ver. Não é só dar alguns flex box.

Mike: Ah, sim. Totalmente.

Drew: É geralmente muito flexível para trabalhar? Você acha que os elementos de layout são capazes de construir qualquer tipo de interface do usuário que você precisa?

Mike: Sim. Sim. Absolutamente. O que é ótimo nisso é que eles, em alguns casos, fornecem mais de um nível de abstração. No caso da grade CSS, eles têm uma grade simples que é como, ok. Você quer soltá-lo e aqui está sua grade. Você apenas coloca coisas dentro dele e especifica, acho que o número de colunas ou algo assim. Então você tem uma grade.

Mike: Mas se você precisa ter um pouco mais de flexibilidade no comportamento da grade, então você tem um componente de grade genérico, que provavelmente é... O componente de grade simples provavelmente envolve o outro componente de grade. É apenas mais uma fachada em cima de si mesma.

Mike: Essa abordagem para composição de componentes é um paradigma valioso no mundo React por causa da mesma coisa. Se você tem um componente que é muito versátil e tem muitos acessórios, bem, pode haver um conjunto de casos de uso para os quais você deseja usar o componente de uma maneira bastante comum. Você apenas o envolve com outro componente com adereços estáticos ou pré-especificados para os componentes mais robustos.

Mike: Eles usam essa abordagem muito bem no Chakra. Ainda não encontrei nada que não possa fazer com ele. Tenho certeza que está por aí em algum lugar. Ou algo que é um pouco mais trabalhoso de fazer. Mas geralmente ainda não aconteceu. Não que eu possa pensar, pelo menos.

Drew: Bem, uma das coisas que fiquei muito feliz em ver e algo que você mencionou anteriormente também, é que parece haver um foco bastante forte na acessibilidade.

Mike: Sim.

Drew: Certamente nas informações promocionais. Isso nasce no próprio código? Eles praticam o que pregam? É realmente tem boa acessibilidade incorporada?

Mika: Acho que sim. O mais próximo que fiz de testá-lo foi rodar o Lighthouse contra ele. Ele fornece consistentemente altas pontuações para acessibilidade. Eu normalmente usarei Chakra Next.js. Next.js é desempenho direto na caixa. É bastante frequente que você veja pontuações altas e tudo mais. Acabei de twittar hoje sobre como a página inicial do livro tem três das quatro partituras do Lighthouse. Há acessibilidade, melhores práticas, desempenho e um quarto. Não estou pensando agora.

Mike: Tudo, menos o desempenho, saiu perto de 100%. A parte de desempenho fica por minha conta só porque coloquei muito na página e ainda não otimizei. Ele tende a fazer isso. As pontuações de acessibilidade no Lighthouse são ótimas sempre que uso a interface do usuário do Chakra.

Drew: Isso é ótimo. Você mencionou que eles estão usando renderização do lado do servidor e o que você tem. Coisas como Next e Gatsby e o que eu tenho de você, não é absolutamente nenhum problema, não é? Não há nenhum obstáculo para estar ciente de usar Chakra com eles?

Mike: Ah, não. De jeito nenhum. Eu não usei. Eu costumo focar em Next.js. Não conectei ao Gatsby ou a qualquer outra ferramenta SSR. Mas desde que o framework não tenha nada que o impeça de usá-lo como tal, então deve estar tudo bem.

Mike: Para o React, o Chakra fornece um provedor de API de contexto. Um provedor de temas para que quando você... Nos meus aplicativos Next.js, por exemplo, você tenha um... Next.js tenha um arquivo JS ou TS do aplicativo sublinhado que apenas envolve todas as páginas do aplicativo. Você apenas conecta o provedor de temas e o Chakra faz o resto do trabalho e ele fica disponível em todos os lugares. Certamente não há obstáculos para adicionar ao Next.js. Mas imagino que não para Chakra também.

Drew: O Chakra usa TypeScript? Acredito que sim, não é?

Mike: Ele suporta. Sim.

Drew: Ele suporta. Isso é uma grande vantagem para pessoas que já usam o TypeScript em seus projetos. Existe alguma desvantagem nisso se as pessoas ainda não estiverem usando o TypeScript?

Mike: Acho que não. Eu uso o TypeScript por padrão em todos os meus projetos, e o Echobind também. Mas quando eu faço coisas em um nível pessoal, eu uso… eu gosto de dizer uma pitada de TypeScript. Typescript é extremamente valioso na redução de erros criando tipos estáticos. No entanto, há uma transportadora para isso, onde, dependendo do seu conhecimento, o TypeScript pode ser um verdadeiro obstáculo.

Mike: Meu limite mínimo para... O rigor do TypeScript que eu uso é bastante baixo simplesmente porque você pode obter muito valor do TypeScript com digitação básica. Isso evitará muitos contratempos comuns. Quando você entra na digitação mais avançada, se você não está super confortável com essas coisas, isso pode realmente te deixar mais lento e te frustrar.

Mike: Isso é apenas para dizer a mesma coisa com Chakra e TypeScript. Eu costumo usar uma quantidade leve de TypeScript, pelo menos no começo, até que eu esteja realmente desenvolvendo e estabilizando um projeto. Mas não apresenta desafios no uso do Chakra, com ou sem TypeScript. É ótimo com. Eu amo com, mas você certamente pode usá-lo sem também.

Drew: Sim. Acho que com o TypeScript você obtém 80% dos benefícios, como você diz, com apenas alguns tipos. Se você for muito longe na toca do coelho, acabará com um script que é principalmente TypeScript. Em seguida, um pouco de JavaScript para o fundo.

Mike: Ou você passa tanto tempo tentando descobrir o jeito certo de digitar algo e seu cérebro explode. É assim que você acabou de colocar qualquer ou desconhecido. Você o atalho. O que eu defendo em casos como esse. Se está demorando muito para você fazer algo, então há uma alavanca que você pode puxar.

Drew: A documentação do Chakra parece ser muito bem elaborada, eu pensei, com… Ela tem uma visão geral de cada componente. Em seguida, ele realmente inclui quaisquer notas técnicas sobre as considerações de design que foram feitas ao implementar esse componente. O que, como engenheiro de front-end, acho ótimo. Eles estão falando a minha língua. Eu entendo. Eu sei o que o componente está fazendo um pouco sob o capô.

Drew: Isso é apenas da minha perspectiva, navegando na documentação sem um projeto real no qual estou trabalhando. Quando você está realmente trabalhando em um projeto e no meio dele, apenas a documentação aguenta? É tão útil quanto parece?

Mike: Ah sim. Absolutamente. Minha perspectiva é um pouco diferente. Nem sempre preciso saber o que está acontecendo sob o capô, mas sinto que posso inferir normalmente. Se estou olhando para um componente de caixa, estou apenas olhando para os documentos agora enquanto estamos conversando para relembrar. Se eu olhar para um componente de caixa, eu fico tipo, “Ok. Isso é provavelmente um div por padrão. Eu vejo isso passando nas propriedades do gradiente, seja o que for.”

Mike: Eu posso ter uma noção do que está acontecendo no capô sem entender completamente a mágica deles para traduzir CSS. Traduza os adereços para CSS. Mas a documentação é ótima porque é muito linear. É muito consistente. Ele lista tudo com exemplos. Um pouco de copiar e colar.

Mike: Ele usa apenas um bom espaço em branco, então olhar para a página não parece esmagador. Você pode encontrar o que precisa facilmente. A busca deles também é ótima. A pesquisa deles é útil. 90% do tempo, acho que é para isso que vou lá. Pode estar indo lá e vendo se existe um componente para fazer alguma coisa. Geralmente faz. E tropeçar em outra coisa que era útil que eu não conhecia. Ou apenas me refrescando em alguns dos princípios. Sempre encontro o que preciso aqui.

Drew: A única coisa que não gostei nos documentos foi o número de anúncios neles. Em todas as páginas da oferta comercial do Chakra UI Pro.

Mike: Eu não os tinha visto. Interessante. Eu já vi. Eu definitivamente já vi. Mas não estou vendo agora. Oh sim. OK. Há Chakra UI Pro. Acho que filtrei isso mentalmente. Eu te escuto. Pelo menos não é muito grande e na sua cara.

Drew: Não é muito grande. Só está no lugar errado. É exatamente onde você está procurando as informações. Que eu acho que é por isso que eles fizeram isso. Vale a pena mencionar ao considerar o ecossistema e tudo ao redor do projeto é que há um conjunto profissional de componentes que é… Acho que é equivalente a algumas das coisas que estão na interface do usuário do Tailwind que está lá. Páginas de marketing e aqui são componentes e mais dessas seções compostas de páginas e páginas inteiras e layouts e coisas. That you, está disponível nos fabricantes de Chakra, mas como uma oferta comercial.

Mike: Sim. Basta dar uma olhada rápida nele agora. Alguns deles estão realmente disponíveis. Ou versões deles estão disponíveis gratuitamente, como modelos de Chakra. Os modelos Chakra, eu acho, são a solução de código aberto para o Chakra Pro ou o concorrente de código aberto. Tenho certeza que você vai ganhar uma tonelada pagando por isso. Parece que o Chakra Pro é extremamente robusto e com preços razoáveis, se você tiver uma necessidade profissional paga por eles. Há algumas opções para o seu projeto, parece.

Drew: Sim. Parece que há um grande ecossistema construído em torno dele. Você sabe há quanto tempo o projeto está indo e o que vem a seguir? Está em uso generalizado na comunidade React?

Mike: Eu quero dizer sim. Não sei em que grau. Eu estaria curioso para ver qual é, eu acho, a participação de mercado do Tailwind versus Chakra hoje em dia. Eu sei que Chakra recebeu um prêmio há relativamente pouco tempo. Prêmio GitNation React para o projeto mais impactante para a comunidade. Eu diria que é bem grande e bem abraçado. Com razão, o que é ótimo. As pessoas definitivamente estão gostando. Eu não sou o único.

Drew: Uma coisa que sempre vale a pena pensar ao trazer uma dependência para o seu projeto é o que acontece quando você precisa atualizar essa dependência.

Mike: Sim.

Drew: Chakra está sendo melhorado o tempo todo, eu imagino. É o caso de uma vez que você o importou e construiu com ele, você o deixa bloqueado em uma determinada versão? Ou geralmente é seguro manter-se atualizado? É relativamente estável em termos de design e coisas do seu site que não mudam com as atualizações do Chakra?

Mike: Tem sido até agora. Sim. Principalmente, eu diria que é por causa do progresso do desenvolvimento. Eles estão na versão 1.6.3 agora. Alguns meses atrás, eles foram de zero a um. Essa foi a única vez que eles tiveram mudanças de ruptura. Desde então, eles estão constantemente fazendo lançamentos de recursos e correções de bugs.

Mike: Nos últimos dois meses, tudo tem sido apenas acréscimos. Adições e correções. Não há mudanças de ruptura envolvidas. Não sei como é o roteiro, mas imagino que continue assim. Toda vez que eu atualizo, uma dessas versões menores, está tudo bem. Eu nunca vi algo quebrar com isso. Mas quando eles saíram com o 1.0, houve algumas mudanças importantes. Mas não me lembro de ter sido catastrófico.

Drew: Você sabe qual é a situação com os tamanhos dos pacotes e a capacidade de sacudir o Chakra em árvore? Isso adiciona muito peso ao seu projeto ou as coisas são importadas apenas à medida que você as usa?

Mike: Não me lembro de imediato, honestamente. Eu provavelmente deveria saber disso. Eu não percebi isso adicionando muito peso. Principalmente porque você está importando os componentes individualmente. Não importando todo o Chakra ou algo assim. Eu diria que está na linha de ter suporte para trepidação de árvores, mas não testei. Até agora, não tive coisas que tivessem um peso enorme vindo especificamente disso.

Drew: Sim. Isso é sempre uma consideração importante, não é?

Mike: Sim.

Drew: Há mais alguma coisa que devemos saber sobre Chakra UI antes de mergulharmos e usá-lo em um projeto?

Mike: Não. É ótimo. Há uma comunidade bastante ativa também. Vejo atualizações com frequência. Estou olhando para a documentação agora e vendo componentes que não tinha visto antes. Eu vejo que há um monte de adição de recursos acontecendo. Isso é ótimo.

Drew: Sim. Isso é ótimo. Você tem um livro chamado Cut Into The Jamstack, que é uma versão prévia. Uma versão beta no momento. Você está auto-publicando isso. Isso está certo?

Mike: Sim. Sim. Eu sou. Foi minha primeira tentativa de um livro técnico. Eu só quero divulgar sem me comprometer com algo como, é formal, eu acho. Também sou uma pessoa que gosta de informalidade, principalmente na hora de criar coisas. Isso me dá a capacidade de fazer do meu jeito, fazendo assim.

Drew: O livro literalmente orienta o leitor na construção de um software como um aplicativo de serviço.

Mike: Sim.

Drew: Tudo no Jamstack. Por que você decidiu escrever isso agora e adotar essa abordagem com o livro?

Mike: Boa pergunta. Eu tenho codificação por cerca de 20 anos e acho que tentei escrever um livro há algum tempo e ele simplesmente não tomou forma. Estou em um ponto da minha carreira em que realmente quero compartilhar mais conhecimento. Eu tenho usado por tantos anos e sinto vontade de realmente colocar mais por aí e ajudar os outros.

Mike: Por volta de outubro do ano passado, eu tive isso... eu queria lançar algo que fosse produto. Um ebook parecia uma boa maneira de começar. Sou realmente apaixonado pelo Next.js e pelas coisas que você pode fazer com ele. Eu uso o termo Jamstack e considero o Next.js como parte do Jamstack porque ele tem uma geração de site estático como padrão.

Mike: Mas eu acho que uma coisa que não é comentada o suficiente, na minha opinião, ou poderia ter mais alguma explicação é construir software como aplicativos de serviço com ele. Porque o Jamstack não é apenas para sites. Funciona muito bem para sites direcionados a conteúdo por ser estático, ágil e amigável para SEO.

Mike: Mas há muitas funcionalidades ricas lá, especialmente no Next.js, onde a Vercel teve sua Conferência Next.js ontem e eles estão lançando mais e mais recursos incríveis lá. Sou apaixonado por construir software como serviço. Os sites de software são ótimos, mas o software é feito para fazer coisas.

Mike: Essa pilha para mim é o futuro do desenvolvimento de software como serviço. Isso me lembra o que Ruby on Rails era quando foi lançado. Foi uma evolução, por assim dizer. Ele automatizou e simplificou muitas coisas que você costumava fazer manualmente. Acelerou o ritmo de desenvolvimento e aumentou a qualidade do mesmo.

Mike: Next.js e Jamstack e Vercel e Chakra UI, todos eles estão produzindo coisas que simplificam muitas coisas para você. Next.js, ele simplifica muitos problemas relacionados à velocidade e problemas relacionados à acessibilidade. Instalação. Isso é tudo, o roteamento é feito para você. Você não precisa se preocupar com o roteamento do lado do cliente ou do lado do serviço. É automático. Chakra UI faz isso com acessibilidade e temas. Essas ferramentas juntas, elas simplesmente… A experiência do desenvolvedor fica realmente ótima e tudo… Dá a você liberdade para realmente criar software.

Mike: Para responder a sua pergunta. A razão de eu lançar um livro agora é por causa do momento certo de eu realmente querer colocar algo lá fora e com o ecossistema Jamstack começando a se concretizar e crescer. Também me deu a chance de escrever mais código no Jamstack, o que eu adoro.

Drew: Eu acho que, como você disse, é fácil aceitar a ideia do Jamstack quando você pensa em sites e sites tipicamente leves. Mas dar o próximo passo para pensar em como você pode usar a abordagem para criar um aplicativo da Web completo é muito mais difícil. É um obstáculo maior, eu acho, para superar se você está acostumado a pensar na mentalidade do lado do servidor.

Mike: Sim.

Drew: É um salto muito maior para ver, ok. Eu posso colocar minha autenticação em um serviço-

Mike: Sim.

Drew: … e eu posso… eu acho que para os leitores, do ponto de vista do leitor do seu livro, apenas passando e construindo este exemplo, seguindo com você, provavelmente é uma ótima maneira de superar esse obstáculo apenas para ajudar gentilmente mude sua mentalidade para, ok. É assim que eu poderia fazer todas essas coisas, mas no Jamstack. Você concordaria com isso?

Mike: Sim. É isso que eu espero. Eu acho que sim. Isso é realmente o que se pretende. Eu estava assinando uma palestra recentemente, uma palestra de conferência que... Parte da minha motivação para o tópico e a maneira como decidi ensinar neste livro é que eu poderia ensinar a vocês uma linguagem de programação. Uma estrutura, mas é melhor apresentar a pilha de uma maneira prática, porque todo desenvolvedor que tem muita experiência é bom em documentar e pesquisar no Google e usar o estouro de pilha. Por que eu perderia seu tempo ensinando isso para você?

Mike: Eu quero dar a você um mergulho rápido e profundo na pilha e no que posso fazer com ela. Você vai pegar o que é ótimo sobre cada uma das peças individuais. NextOFF e Prisma. Next.js e Chakra. Vou vinculá-lo à documentação apenas para economizar alguns cliques. Mas você verá através de um exemplo interativo, como essas peças se conectam. Você também vai entender as partes difíceis.

Mike: Uma coisa que vou aprofundar, por exemplo, é esse recurso que estou construindo para upload assíncrono de vários arquivos. Next.js tem um front-end e um back-end para ele. Embora na frente do front-end e na parte de trás do front-end, se você usar essa analogia, terá a camada React. Então você tem a camada do nó. Existem essas rotas de API.

Mike: Se você quiser fazer upload de vários arquivos com isso e usar um serviço, eu uso Cloudinary no livro. Mas se você usar um serviço de API para seus uploads de imagem e mídia, o que você deve fazer, há muitas peças móveis lá. Existe o lado do cliente, com o qual o usuário interage. Há as solicitações de API para o Cloudinary ou outro provedor. Mas então você precisa fazer várias solicitações de API para torná-lo eficiente. Você precisa fazer alguma assinatura no Cloudinary, para o qual precisa de uma chamada de API.

Mike: Você precisa pegar esse sinal e precisa fazer o upload, que sai do navegador e burla sua API e vai direto para o Cloudinary. Então você precisa salvar isso em seu banco de dados, que usa seu back-end front-end do front-end. Há muitas peças e Next.js… Na comunidade Next.js, ainda não existe um plugin de código aberto para isso. Que eu posso extrair do aplicativo agora que o construí e colocá-lo em um porque outras pessoas terão isso.

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. Sim. 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.

Dre: Fantástico.

Mike: I've got another one coming up in probably a couple of weeks. Sim. Sim. 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. É isso.

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. Você teve alguma palavra de despedida?

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