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 da 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 que 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 cuja responsabilidade seria renderizar qualquer informação em formato de card e que poderia também possibilitar a definição de alguns estilos customizados, como arredondamento da borda e cor de fundo.

Esta decisão envolveria a seguinte pergunta, considerando o contexto do projeto:

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

• Se sim, crio um Card que pode receber qualquer conteúdo e reutilizo este Card para criar o ProfileCard (mais específico para o perfil do pet) que receberia apenas as informações necessárias para o perfil do animal e teria a responsabilidade de apresentá-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, poderei criar este Card genérico e modificar o ProfileCard para utilizar este mesmo Card.

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 instâncias de um mesmo componente reutilizados para conteúdos diferentes, pois, para este componente, vejo a seguinte responsabilidade:

(3) 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 à esquerda.

E sobre o nome do componente:

(3) Receberia 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 estã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, por exemplo: 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 fique 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 o arquivo 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 à vontade para compartilhar o seu resultado nos comentários!