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:

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):

, 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!