Componentização

Contexto

Componente é certamente uma palavra que você já ouviu no mundo de programação de software. É um conceito que pode ser utilizado em diferentes momentos e contextos da área.

Aqui focaremos no componente que é utilizado para desenvolvimento de interfaces de usuário (UI).

O que são componentes?

O conceito geral de componente é: partes menores de um todo.

Conceito de componente em UI: partes de um layout ou tela que podem ser reutilizados.

Os componentes idealmente seguem um princípio importante da engenharia de software que é a responsabilidade única, ou seja, cada componente deve existir por um motivo e quanto mais claro e único este motivo é, no contexto da aplicação desenvolvida, melhor.

Também é importante ressaltar que o processo de componentização (criar e definir componentes) pode ser muito pessoal, seguimos boas práticas e conceitos em comum, mas na verdade diferentes desenvolvedores mapeando os componentes de uma mesma aplicação, podem chegar em resultados diferentes e ambos estarem corretos.

Isso vai depender da experiência e forma de trabalhar de cada desenvolvedor. Mas não se preocupe, existem conceitos que todos utilizam (ou a grande maioria) e que podem te ajudar no processo de componentização e, junto com a prática, isto vai te ajudar a criar sua identidade como desenvolvedor.

Qual o resultado esperado?

O primeiro passo é observar o resultado esperado.

Neste passo você deve observar o layout que deseja atingir e começar a pensar na estrutura de componentes (partes menores) que você vai criar para compor a sua UI.

Vamos começar observando um exemplo simples de layout, uma página de descrição de um pet:

Imagine que esta página faz parte de um sistema para veterinários e o seu cliente quer poder visualizar os dados de um pet de forma resumida, após clicar em um dos pets de uma tabela.

Imagine que a aplicação já existe e que você é responsável por implementar apenas esta nova funcionalidade.

Agora observe os elementos desta tela que estão com uma borda azul:

Estes são os principais componentes que juntos formam esta tela. Agora que identificamos os principais componentes, podemos pensar no nome e responsabilidade deles:

Responsabilidades:

1: Foto do pet: a única responsabilidade é mostrar a foto com o estilo esperado (bordas arredondadas, no tamanho (largura e altura) definidos).

2: Cartão dos dados do pet: a responsabilidade é ter o estilo correto com os dados do animal selecionado.

Os nomes dos componentes devem ser capazes de expressar a responsabilidade deles. Neste caso, sugiro os seguintes nomes:

1: ProfilePicture (ou FotoPerfil em português)

2: ProfileCard (ou CartaoPerfil em portugês)

No caso do ProfileCard, ele poderia também ser somente “Card”, mas perceba que este é um nome mais genérico e seria correto se eu pretendesse utilizar este card em diferentes lugares, não só no perfil.

Ainda, poderia existir um componente "Card" genérico que a responsabilidade seria renderizar qualquer informação em formato de card e poderia também possibilitar definir alguns estilos customizados, como arredondamento da borda e cor de fundo.

Esta decisão envolveria as seguintes perguntas considerando o contexto do projeto:

1. Existem outros lugares na aplicação onde utilizo um card?

• Se sim, crio um Card que pode receber qualquer conteúdo e reutilizo ele para criar o ProfileCard (que é mais específico pro perfil do pet) – este que receberia apenas as informações necessárias para o perfil do pet e teria a responsabilidade de apresenta-las na ordem correta.


• Se não, posso criar somente o ProfileCard. Considerando que se no futuro eu vier a precisar de um card parecido com esse, mas com uma estrutura de dados diferente, posso criar este card genérico e modificar o ProfileCard para utilizar este mesmo.

Isto cobre tudo o que precisamos mostrar? Ainda não. Precisamos também de uma forma de mostrar o conteúdo. Perceba que dentro do ProfileCard também temos mais partes (mais componentes):

Perceba que listei todos eles com o número 3, ou seja, todos são um mesmo componente reutilizados para conteúdos diferente, pois para este componente vejo a seguinte responsabilidade:

1. Dado do perfil. Este componente mostra o dado de perfil de um pet no estilo esperado: sempre tendo um título e um conteúdo, podendo estar alinhado no centro ou na esquerda.
   E sobre o nome:


2. Teria o nome ProfileInfo (ou InfoPerfil em português)

Perceba que criamos uma semântica para os componentes que compõem o perfil do pet, todos iniciam com “Profile”. Desta forma tornamos mais fácil de identificar em meio a vários componentes, quais são relacionados e pertencem ao mesmo contexto.

Onde este conceito se aplica?

Este conceito se aplica a qualquer ferramenta que permita utilizar componentização para a criação de interfaces, exemplos: ReactJS, VueJs, Angular e outros.

Compartilhe

Você faria algo diferente? Deixe aqui nos comentários a sua sugestão.

Exercícios

Além do entendimento do que é o conceito de componentes, dicas e boas práticas. É de suma importância que você pratique para que você fica cada vez mais fluente na aplicação deste conceito.

Então deixo aqui alguns layouts para que você pratique o conceito de componentização, baixe os arquivos e edite definindo nome e responsabilidade dos componentes.

Note que o número de campos para colocar nome e responsabilidade dos componentes é arbitrário, podendo ter mais ou menos do que os números definidos.

Em um próximo post, vou disponibilizar a minha resposta para estes layouts.

Fique a vontade para compartilhar o seu resultado nos comentários!