Oie! Eu me chamo Klaus Kazlauskas, sou desenvolvedor a mais de 10 anos, e eu estou esperando por algo como o Omlet esse tempo todo.

Você já esteve em um projeto e quis saber quantas vezes seus componentes são usados, ou onde ele é usado? Já quis saber quantos Buttons diferentes foram criados no seu projeto? Ou até mesmo sentiu uma falta de confiança na hora de atualizar componentes? Então, Omlet resolveu tudo isso pra mim.

O que é o Omlet?

É uma ferramenta, em beta, que está sendo desenvolvida pela equipe do Zeplin, para coletar dados de uso dos componentes de múltiplos projetos. Rodando apenas 3 comandos, você vai saber:

• Quantas vezes seu componente foi usado;
• Quais dependem dele, e quais são dependências dele;
• Quais projetos estão usando os componentes;

Fonte: Site do Omlet

No momento que esse artigo foi criado, a ferramenta ainda está em beta, e só suporta componentes escritos em React.

Primeiros passos com o Omlet

Antes de rodar os comandos, precisamos criar uma conta no https://omlet.dev/ e dar um nome pro nosso ÚNICO workspace. Como a ferramenta está em beta, no momento você só pode ter 1 workspace por conta/e-mail, então de um bom nome ou use um e-mail para testes.

Com o workspace criado, escolha o repositório React que você quer coletar dados dos componentes, e rode os seguintes comandos:

• npm i --save-dev @omlet/cli
• npx omlet login
• npx omlet init

Nas próximas vezes, ou após instalar em outros repositórios, você só vai precisar rodar npx omlet analyze.

Pronto. Após alguns segundos você receberá uma URL para o seu workspace com o scan finalizado, e você terá que escolher a pasta ou projeto que tem os seus componentes principais. Agora você tem acesso instantâneo aos dados de uso dos seus componentes. Depois você poderá automatizar isso com uma configuração de CI.

Aba de análise (Analytics)

Nessa aba você tem acesso instantâneo a uma visão geral dos seus componentes e projetos. São apresentados gráficos como:

Componentes principais vs secundários

Fonte: Site do Omlet

Componentes mais utilizados

Fonte: Site do Omlet

Aba de componentes

Nessa aba você terá acesso a lista de todos os seus componentes de todos os seus projetos, além de poder olhar onde e como seu componente é usado ao clicar nele.

Página de tags

Aqui você pode criar quantas tags você quiser, e adicionar para os projetos ou pastas que quiser. Por exemplo, você pode ter a tag core no projeto da sua biblioteca de componentes, e uma tag de deprecated algumas pastas dessa biblioteca. Assim você consegue trackear a adoção dos novos componentes.

Casos de uso

Agora que você sabe sobre o Omlet, instalou ele, e sabe das páginas, que tal saber mais problemas que ele pode resolver pra você?

Aqui vai uma lista de problemas que o Omlet vai ou já resolveu pra mim:

• Usando a página de componentes:
  • Achar onde os componentes são utilizados (em segundos)
  • Saber quais componentes são inúteis e onde eles são usados
  • Descobrir componentes com nome parecidos
• Usando tags:
  • Saber quais componentes queremos refatorar
  • Resolver conflitos de organização ou agrupamento de pastas
• Usando dashboards + tags:
  • Saber como está a adoção dos componentes
  • Saber o progresso da refatoração dos projetos

Esses e mais outros problemas podem ser resolvidos hoje com ele, e o melhor, você não precisa gastar HORAS criando e MANTENDO documentos, listas, gráficos e apresentações. Está tudo disponível para você e sua equipe.

Concluindo

Botando um pouco os pés no chão, vamos relembrar que é uma ferramenta em beta, então espere erros e faltar algumas funções; não é open source, então um dia vão cobrar pra usar; hoje só suporta React, mas tem planos para suportar outras tecnologias.

Dito isso, o Omlet é foda! Ainda acho que o Omlet vai se tornar essencial para quem lida com projetos médios a grandes, ou até mesmo múltiplos pequenos projetos e um design system. Então o futuro preço a ser cobrado deve valer MUITO a pena, principalmente quando comparado com as horas ou dias gastos refatorando coisas que não tem valor, ou pesquisando e trazendo resultados insatisfatórios.

Espero que esse artigo tenha te ajudado. Se gostou, não esqueça de reagir ou compartilhar com seus amigos e colegas, ou seguir se quiser mais artigos como esse.

Não deixe de comentar melhorias ou abrir discussões abaixo!

Um forte abraço e te vejo na próxima \o/