A arte de planejar a Arquitetura de Componentes

Hoje quero falar sobre como podemos refinar e escrever melhores componentes, otimizando o tempo de desenvolvimento com um fluxo sólido, esse guia foi elaborado pela forma como melhor consegui estruturar componentes e pode ser adaptável aquilo que melhor se encaixar para você, não é uma verdade absoluta, mas espero que possa ajudar na criação de seus próximos componentes.

Planejamento

Vamos começar pela etapa que considero mais importante, Planejamento além de ser uma das etapas mais difíceis de se passar, também é onde conseguimos economizar muito tempo nas etapas de execução.

Ferramentas para Documentação

Existem diferentes ferramentas úteis nessa etapa, mas a primeira e mais importante é o Jira ou alguma outra ferramenta para organizar processos, e como organizamos ele faz toda a diferença, ter um modelo que te permita replicar múltiplas vezes e sirva de tema base é fundamental, pois você pode se concentrar mais no conteúdo e menos na organização.

Exemplo de um Template de História de Usuário

Com o template, uma vez você fizer um componente, vai perceber que a história é geralmente composta de forma similar, e nem sempre utiliza todos os componentes do template, porém esse template serve de base para diferentes tipos de histórias e por isso é completo. Trago por exemplo os componentes que faço e geralmente são compostos por Recursos de Desenvolvimento, Ata de Refinamento e Diário de Bordo.

• Recursos do Desenvolvimento: É composto por links úteis e tudo que possa servir para auxiliar quem vai desenvolver o componente, como layout do Figma, regras de negócio entre outros.
• Ata de Refinamento: É pensado e descrito a parte estrutural do componente, como localização dele, pode ser colocado uma imagem de suporte para visualizar anotações sobre o componente, nome dos arquivos relacionados e outros pontos úteis para a criação do componente.
• Diário de Bordo: Nesse diário tudo que for feito vai servir de histórico e dar suporte, nele é listado os principais passos a serem tomados, e também eventuais necessidades que forem descobertas durante o desenvolvimento. Ele é super importante para você e o time, pois assim registra o passado, seu progresso e o futuro para finalizar o componente.

Distribuição do Componente

A divisão de problemas é o fator que mais ajuda nesse processo, e o uso de uma ferramenta para rascunhar um problema e fazer a distribuição de responsabilidades de componentes ajuda e muito, no dia a dia costumo usar o Whimsical e com ele fazer anotações detalhadas sobre o componente.

Exemplo de refinamento de um componente.

Esse tipo de olhar para o componente, me permite ver o Input e o Output, bem como a composição, e a dividir o problema em sub-tarefas. Outro ponto que é muito bom dessa abordagem, é poder prever funções, o comportamento delas, e os tipos de dados de entrada e de saída podem ser analisados, além é claro do próprio ciclo de vida do componente. Em aplicações Typescript o benefício desse tipo de refinamento se estende a poder enxergar os tipos de dados a serem aplicados nas interfaces.

Execução

Esse é o momento em que seu componente foi previamente refinado, e você está seguro para começar a pôr a mão na massa, porém não se trata ainda de apenas escrever o código, é necessário entender que mudanças podem acontecer, e por isso usar de comentários na história da tarefa podem ajudar e muito na documentação do componente, além é claro de usar de ferramentas para consolidar a expectativa e o andamento da entrega.

Diário de Bordo

Como expliquei anteriormente, é muito importante o uso do diário de bordo, durante o desenvolvimento também comentar em suas histórias sobre descobertas, inesperadas falhas ou até mesmo anotar idéias, serve para mais tarde usar de insumo na tarefa.

Diário de Bordo e sua aplicação no dia a dia.

Storybook

Uma das ferramentas mais úteis para homologar o componente de ponta a ponta é um Storybook bem sólido, e isso ajuda que o componente possa ser testado em diferentes telas, cenários, e com os diferentes tipos de dados, ainda facilita na prevenção de eventuais bugs, e se torna uma ferramenta para validar a interface com outras pessoas.

Revisão

Nessa etapa seu componente está quase pronto para ser entregue, porém a parte que documenta a existência dele não acabou, é necessário ainda fazer ter um olhar crítico para o que foi feito.

Testes

Testar o que foi feito é fundamental, e isso é verificar se os testes unitários estão validando o uso do componente, se são testes que atendem a expectativa do ponto de vista do usuário e a funcionalidade, mas além disso é necessário testar se visualmente o componente final atende o design inicial, e é aqui onde pequenas correções podem acontecer.

Qualidade de Código

Ainda que tudo esteja funcional, é importante saber que nem sempre algo que funciona necessariamente esta perfeito, e nesse momento fazer uma análise do código escrito é fundamental, por isso usar algum Linter e algo para formatar código, ajuda a verificar se os padrões do projeto estão sendo atendidos, e junto a ferramenta Sonar concede uma visualização de pendências no código úteis para reescrever um código melhor.

Performance

Esse ponto de revisão é muitas vezes esquecido, mas mesmo após ter feito o planejamento, e escolhido uma abordagem para criar o componente, pode no fim gerar um produto de baixa performance, que irá criar problemas para a aplicação rodar, e isso pode acontecer de diversas formas, seja pelo processamento grande em determinadas funções, o repaint de componentes que mudam de estado entre outros, usar as ferramentas do DevTools para analisar o estado do componente, ajuda a fazer essa revisão e garantir sua performance.

Considerações Finais

Todo planejamento deve resultar em uma execução mais consistente, isso evita surpresas e mantém clareza do que se está sendo feito. Quando refinamos um componente, estamos buscando extrair dele as informações necessárias para desenvolver e prever os possíveis problemas, e todo esse processo é ainda melhor quando discutido e criado em conjunto, por isso sempre busque pessoas para estar junto nessas etapas de planejamento, assim você garante uma entrega melhor onde vários pontos de vistas se convergem.

Esse artigo só foi possível graças às pessoas que nesse ano me ensinaram como me tornar um profissional melhor, e eu só tenho a agradecer a Vinna, Eric Douglas e tantos outros especialistas.

Apaixonado pela Web, minha missão é contribuir para uma internet melhor para todos, agradeço sua leitura, e espero que seu próximo projeto seja um sucesso!