Segundo o dicionário Michaelis, componente é aquilo que compõe alguma coisa. Sabendo disso, no conceito de Tecnologia da Informação e mais especificamente, Desenvolvimento Web, componentes são recursos que criamos, utilizamos e reutilizamos em nossas aplicações para facilitar o processo de desenvolvimento e o entendimento do código produzido para qualquer um que o veja.

No desenvolvimento de uma aplicação web, um componente baseado ou não em um framework, é uma parte única, que faz sentido por si só e que pode se integrar a outras partes dessa aplicação.

Quando temos diversas ou complexas funcionalidades em uma aplicação front-end que podem se tornar trabalhosas pela quantidade de linhas de código ou então pelo entendimento delas, podemos trabalhar, geralmente, de duas maneiras:

Utilizar snippets (trechos de códigos que podemos salvar como atalhos);

Utilizar componentes.

Quando usamos snippets, de qualquer linguagem de programação, temos partes do código que iremos trabalhar desenvolvidas uma única vez e salvas em um arquivo que a nossa IDE reconhecerá por meio atalhos, como uma opção de preenchimento automático que irá completar o texto com base no que começarmos a digitar.

Você deve estar pensando: “Maravilha! É disso que eu preciso.”. Realmente snippets são ótimos para guardar trechos de códigos que poderemos usar nas nossas aplicações sem termos que ficar decorando cada linha deles. Mas qual a real finalidade de um snippet?

Snippets são apenas atalhos de código, trechos que deixamos salvos na IDE para usar o famoso autocomplete. Eles não representam ou garantem de forma alguma a semântica e a facilidade na produção das aplicações. Muito menos a segurança de que todos da equipe terão aquele snippet salvo em suas máquinas ou que, então, irão entender o que ele significa para a aplicação.

Mais importante do que a própria aplicação, está o modelo de negócios em que ela é aplicada como um produto ou processo.

Então, para que todos os envolvidos nesse modelo de negócios consigam compreender a semântica de cada funcionalidade desenvolvida nas aplicações front-end que atendem a esse modelo, podemos então criar e utilizar os famosos componentes.

Componentes nada mais são do que tags personalizadas que podemos criar livremente com estilos, atributos, funções e até com os nomes que quisermos, respeitando todas as regras das linguagens web, claro.

E o melhor de tudo, é que essas tags personalizadas vão ter todos os seus códigos e definições desenvolvidas uma única vez na aplicação trabalhada, permitindo que a reutilizemos simplesmente pelo seu nome quando e onde acharmos necessário na codificação da aplicação.

Os componentes são como plantas de construção que podemos usar para replicar o que eles representarão em um modelo de produção em massa, de forma reutilizável e escalável. Eles permitem que você troque conjuntos enormes divs e spans cheios de classes, ids, atributos aleatórios pela simples definição de novas tags que representarão exclusivamente o significado da função que ela exercerá. Como, por exemplo, o HTML de uma tela de feed de postagens de uma rede social:

Ou então, um carrossel de slides com textos ou fotografias de uma galeria:

A complexidade para criar o componente será necessária uma única vez e facilitará muito na manutenção de todo o código das aplicações que forem utilizá-lo e reutilizá-lo.

Imagine que um membro de outro time de desenvolvimento saia de férias e que os outros integrantes que ficaram não vão mexer no código dele porque eles dizem não entender o código feito pelo colega. Componentes são ótimas formas de padronizar o código e o processo de entendimento dos membros do time das aplicações em produção.

Claro que deve haver uma documentação bem definida, até porque componentes podem existir em uma aplicação, mas não em outra. Contudo, a documentação deve ser a última coisa necessária em um ambiente de produção.

Só de olhar para as tags e seus atributos, devemos ser capazes de entender o que elas fazem e como utilizá-las por meio da ajuda dos componentes que devem traduzir o modelo de negócios e as funcionalidades da aplicação de forma que todos sejam capazes de entender e desenvolver.