Crie interfaces 2x mais rápido! (ou mais)

Olá,

Seja bem vindo ou bem vinda a mais um conteúdo! Esse post é especial pra você que ainda passa horas pra deixar o seu site igual ao design! Quer saber como construir suas telas 2x mais rápido??? Acompanhe esse post!

Conteúdo

Se você desenvolve com react, vue ou angular já deve ter parado para olhar seus arquivos de estilos e notado bastante código para deixar sua interface exatamente como deseja! Isso ocorre porque na maioria das vezes algo assim:

não fica assim:

por isso precisamos criar e aplicar estilos.

O Problema

Quando o projeto está em seu início acabamos não percebendo esses problemas de excesso de código, mas com o tempo em que são necessárias mais tela e mais componentes vemos o código crescer e ser cada vez mais cansativo, criar uma estilo para cada nova tag.

Solução ?

Você pode estar achando que essa interrogação está incorreta, mas não, na verdade as "soluções" encontradas podem ser úteis para alguns e não tanto para outros, parte também da necessidade do seu projeto.

Com o tempo as comunidades de programação foram se unindo e buscando formas de tornar o desenvolvimento dos projetos mais ágeis e ao mesmo tempo organizadas, tanto no back-end (servidor), quanto no front (web e mobile), e voltado ao front-end, foram surgindo várias novas bibliotecas, com o objetivo de encapsular o máximo possível de componentes, para evitar que o usuário passe muito tempo em algo que já foi feito por outra pessoa e que possa ser reaproveitado!

Através desse princípio surgiram alguns projetos com o bootstrap, que traz consigo um conjunto de componentes, como headers, modais, footers e entre outros, mas com o tempo acabou, pra algumas pessoas, se tornando uma dor de cabeça, já que por mais que entregasse muitos componentes prontos, não dava ao dev uma forma simples de personalizar, ou seja, caso tivesse que fazer alguma alteração para se encaixar no layout do seu site, teria bastante dificuldade e o código gerado no fim das contas seria bem complexo e perderia todos os "pros" de se utilizar.

Mas isso não quer dizer que o bootstrap foi ruim, na verdade ajudou como base para o surgimento de outras bibliotecas, que além de trazer vários componentes prontos, ainda conseguem entregar um alto nível de personalização (aqui onde o chakra entra) ! Dentre os melhores e mais famosos ultimamente temos:

1. ant design
2. Tailwind css
3. chakra ui (o queridinho desse post)

Tá, mas qual a diferença? 🧐

bom meu caro, cada uma dessa bibliotecas tem uma particularidade, e é isso que vou comentar a seguir!

ANT DESIGN

o ant design traz consigo vários componentes prontos bem legais, como calendário, carousel, cards, icone de avatar, popover, dentre outros.

PONTOS POSITIVOS

Sem dúvida o mais legal do ant design é o nível de alterações e personalização, trazendo ainda componentes que pra fazer na mão demoraria com certeza horas, ou iria necessidades de várias libs externas instaladas, então se você precisa desses componentes e tem certeza que vai precisar alterar bastante para deixar do jeitinho que precisa, recomendo usar essa biblioteca, que vai acelerar seu processo, e permitir também muita personalização e mantendo a semântica do código

PONTOS NEGATIVOS

Vamos para o que mais interessa, pra quem eu não recomendo o ant design? Bom, o principal problema do ant design é exatamente o fato de que vai precisar de alteração, dificilmente você vai manter ele como está, os botões e estilos não são os mais "elegantes" e vai precisar de um jeitinho pra se encaixar, por isso, se você está 100% focado em ter agilidade, tem outras alternativas melhores que irei mostrar a seguir!

Tailwind css

O lema do tailwind é : "Rápida construção de modernos websites sem sair do seu html", e acaba fugindo bastante do formato que o ant design usa para que possamos construir as telas.

Diferentemente do ant design, o tailwind css não traz componentes (blocos de código) pronto, na verdade podemos imaginar como um css em linha, onde ao invés de construirmos as telas assim:

fazemos dessa maneira:

MINHA SINCERA OPINIÃO (POLÊMICA)

Não vou fazer um pros/contras porque tenho uma opinião um pouco polêmica relacionada ao tailwind, na minha visão não consigo ver um bom cenário para usa-lo, para devs iniciantes considero avançado demais, acredito ser bem difícil compreender e utilizar essas propriedades já que o ideal é aprender o css, e para devs mais avançados acaba atrapalhando mais que ajudando, pois será muito código css dentro de uma classe e em um único arquivo, como no seguinte exemplo:

acredito ser bastante código para um exemplo tão simples, que o próprio ant-design já nos entrega em um componente pronto, só precisando personalizar.

Nem consigo imaginar um projeto grande com várias telas e páginas com todo o código css dentro de uma classe, e até mesmo componentes com um nível de personalização mais complexo, vai precisar de vários monitores para ver o fim da linha 😅

MAS PARA DEIXAR CLARO, MEU OBJETIVO NÃO É CRITICAR QUEM USA, SÓ EXPLICAR OS FATOS QUE ME FAZEM PREFIRIR OUTRAS TECNOLOGIAS :)

CHAKRA UI 😍

JÁ DEU PRA NOTAR QUE É MEU FAVORITO NÉ? Basicamente o chakra traz o melhor dos dois mundos, ou seja: personalização e agilidade

O chakra segue a mesma ideia que o ant-design, componentes prontos e que podem ser personalizados, a diferença é que na maioria das vezes a personalização é minima!!! 🤩 os componentes estão sempre atualizados nas ultimas recomendações e padrões de design, ou seja, quer ter sua interface atualizada com os conceitos de ux/ui ? Use o chakra! (além disso todos os componentes também usam questões de acessibilidade digital)  

Atualmente inclusive estou usando o chakra em produção e é simplesmente incrível, cumpre realmente com o propósito que é, menos tempo cuidando dos estilos e mais tempo com a regra de negócio.

COMO CRIAMOS TELAS COM O CHAKRA UI

"tá, mas como que o chakra faz essa magia ?", como falei ele junta o melhor dos dois mundos, ou seja, temos o formato de componentes assim como o do ant-design com o adicional que os estilos e mudanças minímas necessárias se pode fazer através de propriedades passadas dentro daquele componente. Como mostro do exemplo abaixo:

Inclusive se achou esses nomes grandes o chakra ainda tem uma funcionalidade que permite abreviações, onde background color fica bgColor e width fica w somente :)

Vamos agora fazer um ranking de notas pra essas tecnologias e as considerações finais

Notas

1. TAILWIND CSS - 5,5 (não cumpre bem com a ideia de agilidade nem de semântica)
2. ANT DESIGN - 8,0 (traz a facilidade dos componentes mais exige muita personalização)
3. CHAKRA UI - 9,5 (cumpre bem com todos os aspectos que avaliamos nesse post)

Porque 9,5 ? Para não falarem que estou dando vantagem pro chakra 🌚

Considerações finais

Olha... esse foi o post que mais me deu trabalho pra escrever haha, acho que vale um "ping" por todo esse conhecimento. Espero que tenham gostado e até a próxima!!

Links úteis

Essa sessão é voltada para compartilhar conteúdos e cursos para você evoluir na carreira e ainda ajudar para que esse canal continue compartilhando conhecimento!

Quer aprender a programar com as tecnologias mais atuais e ainda ganhar dinheiro e até mesmo criar seu próprio negócio no processo ?? Então acesse o Curso de desenvolvimento web Full Stack do Igor Oliveira e dê um start na sua carreira!

Tá procurando um desconto né? Então use o cupom "marcos" e aproveite!