Componentização: o que é, por que usar e exemplo na prática!

Se você é uma pessoa programadora, desenvolvedora ou até mesmo deseja se tornar uma, provavelmente já ouviu falar sobre componentização.

Os componentes têm o objetivo de prezar principalmente pela reutilização de código e ganho de tempo. Depois de ser criado, um componente pode ser utilizado por outras pessoas desenvolvedoras para inserir em diferentes aplicações. Isso corta diversas etapas dentro do processo de desenvolvimento.

Atualmente, existem muitos frameworks espalhados, a maioria prezando pela componentização. Então, se você quer saber mais sobre o que é um componente e como criar um, continue com a gente e tenha uma excelente leitura.

• O que é componentização?
• O que é um componente?
• Como surgiu a componentização?
• Quais os benefícios da componentização?
• Quais os desafios de usar a componentização?
• Como identificar um componente no código?
• Propriedades, estado e imutabilidade da componentização!
• 5 dicas para uma boa componentização!
• Exemplo de componentização na prática!

O que é componentização?

A componentização trata-se de pegar um bloco de código ou até mesmo uma estrutura em vários minissistemas para transformá-la em algo completo a partir deles. Cada minissistema pode ser compreendido como um componente, que deve ter foco em apenas uma funcionalidade ou conjunto de funcionalidades do mesmo tipo.

Um exemplo é pegarmos uma tela para realizar a separação do que pode se tornar um componente e o que não pode se tornar. É possível visualizar que a maior parte de um código pode ser componentizada. Isso diminui a complexidade do código, gerando mais facilidade em sua manutenção e reutilização.

O que é um componente?

O termo componente pode ser utilizado em diversas situações em nosso dia a dia, classificando uma coisa como algo único. Na tecnologia isso não é diferente. Por sua vez, o componente, em TI, pode ser utilizado tanto de forma individual como em conjuntos com outros componentes.

Para entendermos melhor, imagine uma bicicleta. Separadamente ela apresenta diversos componentes, por exemplo o pneu, o freio, o pedal, o guidão, o banco entre diversos outros itens que pode ser encontrado. Ao juntar todos eles (o ato de componentizar), a bicicleta é formada.

Nas aplicações isso é bem parecido. Você pode ter um componente que realiza uma soma, outro que insere imagens e assim por diante, podendo, então, realizar a junção de todos eles dentro de seu software.

Como surgiu a componentização?

A componentização foi criada por Doug Mcilroy, responsável pela empresa Nato Software no ano de 1968. Ele teve como ideia realizar a criação de componentes de código para facilitar o desenvolvimento de outras aplicações a partir da reutilização de códigos.

Conforme foram passando os anos, a empresa começou a pensar e cada vez mais colocar em prática essa ideia para poder realizar a definição dos padrões de softwares em suas tarefas utilizando, então, a linguagem de programação .NET como principal.

Com o amadurecimento dos padrões de arquitetura e linguagens de programação, pessoas gestoras e programadoras começaram a entender que utilizar a componentização seria possível. Com isso, várias empresas passaram a inserir essa ideia em seus projetos, gerando uma grande economia de tempo para seu desenvolvimento e manutenção.

Quais os benefícios da componentização?

Pensar no desenvolvimento de uma solução estruturando a ideia a partir da componentização traz uma grande quantidade de ganhos. Inclusive, alguns frameworks, como o React.js por exemplo, já foram desenvolvidos com base em componentes, facilitando, então, a manutenção de código.

Dentre todos esses ganhos os que mais se destacam são:

• Manutenção: desenvolver um software componentizado gera às pessoas programadoras uma certa facilidade e rapidez ao realizar as manutenções, já que não é necessário ficar procurando código e sim, ir direto no que precisa ser resolvido. 
• Impactos menores: para realizar manutenções, com o uso de componentes não é preciso alterações em diversas partes do código. Caso seja necessário um deploy dentro da aplicação e ele acabe gerando uma quebra, por exemplo, isso não afetará o código todo, apenas o componente que subiu para o ambiente de produção, gerando poucos impactos no software.
• Reutilização de código: imaginando que uma pessoa desenvolvedora esteja trabalhando em um ecommerce para uma empresa, que nesse layout tenham três blocos de slides e que todos eles são iguais, com a componentização não é preciso a duplicidade de código, sendo possível criar apenas um único componente chamando em diversos lugares, quantas vezes for necessário.
• Fácil entendimento: como para componentizar um bloco é necessário criar um arquivo separado, prezando pela padronização e organização de projeto, fica mais simples entender o que aquele componente faz, quais são seus retornos, props e informações que estão sendo passadas. Isso gera mais legibilidade na estrutura.
• Padrão de código: imaginando um software complexo com grandes estruturas de código, seguir a componentização desses blocos pode fazer grande diferença, já que isso ajudará a pessoa desenvolvedora a localizar problemas mais facilmente.
• Aumento de produtividade: se você trabalha em uma empresa que já tenha um portfólio de componentes ou até mesmo se você tiver eles prontos, é possível reutilizá-los sem a necessidade de criar novos.

Quais os desafios de usar a componentização?

É comum que todas as mudanças feitas dentro de um projeto acabem gerando algum tipo de desafio, seja de aprendizado ou até mesmo de erros que podem ser encontrados dentro do processo.  

Infelizmente, ainda existem muitas pessoas desenvolvedoras ou até mesmo empresas que vendem software que seguem a premissa de que se algo já está desenvolvido ou funcionando, não existe a necessidade de mexer mais, já que isso pode causar grandes retrabalhos.

Porém sabemos que não é verdade e que o princípio de melhoria contínua deve ser aplicado em todas as soluções. Com isso, alguns dos desafios que mais se destacam dentro da componentização são:

• Abertura para mudanças: é bastante comum encontrar dentro das equipes pessoas desenvolvedoras que não estão abertas a mudanças, negando então a refatoração do código para começar a componentização.
• Conhecimento: por mais que a componentização possa ser considerada algo simples de se fazer, de acordo com a complexidade da aplicação isso pode acabar ficando mais difícil, fazendo com que seja necessária uma curva de aprendizado para conseguir aplicar esse processo.
• Documentação necessária: muitas vezes é comum pensar que a componentização trata-se apenas de desenvolver os componentes, porém não é bem assim. Para que outras pessoas desenvolvedoras possam entender o que foi feito e quais componentes foram desenvolvidos, é necessário uma documentação detalhada sobre o que cada componente faz e até mesmo como ele pode ser utilizado. 
• Componentes reutilizáveis: é necessário que, ao desenvolver um componente, você entenda que ele vai poder ser reutilizado em diversas posições dentro da estrutura do site. Dessa forma, ele deve ser bem planejado para que problemas futuros não acabem interferindo na aplicação como um todo.
• Definição de padrões: quando falamos em desenvolvimento de software, ter um padrão dentro do projeto é de grande importância, e com a componentização isso não é diferente. Com isso, é necessário definir os padrões, além manter a equipe de desenvolvimento ciente do que deve ser seguido para que os componentes possam ter uma linha dentro do processo.

Como identificar um componente no código?

Atualmente não existe uma regra definida de como deve ser identificado se determinada estrutura pode ou não ser um componente. Na maioria das vezes, grande parte do conteúdo que é encontrado dentro de uma aplicação, pode se tornar um componente por mais simples que ela seja.

Diante disso, existem situações específicas que uma parte do código pode ser utilizado apenas naquele local, fazendo com que não exista a necessidade de criar um componente. Para entendermos melhor, vamos utilizar a página do Facebook como exemplo.

Tente contar quantos componentes é possível de enxergar nessa tela:

Logo de cara, conseguimos enxergar três componentes. Porém, se olharmos melhor, conseguiremos visualizar ainda mais componentes, desta forma:

A conclusão disso é que tudo aquilo que você acha necessário componentizar e que vai poder ser utilizado em outras situações pode, sim, ser considerado um componente.

Propriedades, estado e imutabilidade da componentização!

Dentro da maior parte dos frameworks conseguimos encontrar uma grande variedade de informações que estão a nosso favor no desenvolvimento. Vamos ver qual a importância das propriedades, estados e imutabilidade dentro de um componente e o ganho que temos com isso utilizando o framework React.

Propriedades

Começando pelas propriedades, também conhecidas como “props”. Essa categoria tem como objetivo passar informações de um componente pai para um componente filho. Isso quer dizer que, com a inserção de uma prop, é possível ter um menu, por exemplo, cada um com o seu nome de forma dinâmica, sem a necessidade da duplicidade de código.

Estado

Com uma estrutura diferente das propriedades, o estado é configurado dentro dele mesmo, isso quer dizer tudo o que vai ser armazenado de informações pode ser guardado dentro de um estado que é utilizado quando desejar. Para ficar mais simples, imagine uma caixa que você pode guardar diversos livros dentro dela, mas que quando desejar utilizar, pode abrir e pegar o livro que quiser.

Imutabilidade

Levando em conta o significado literal da palavra, imutabilidade é algo que não conseguimos realizar uma alteração. No React.js, essa palavra tem o mesmo significado, ou seja não conseguimos realizar alterações em um estado por exemplo apenas colocando o que a pessoa desenvolvedora deseja. Essa mudança só é possível com a utilizado o setState(), por isso seu trabalho é feito em conjunto com o estado.

5 dicas para uma boa componentização!

Quando falamos em componentização, pode parecer que o simples ato de pegar uma estrutura de código e colocar dentro de um novo arquivo já configura componentização, porém não é bem assim que funciona. Criar um componente exige que a pessoa desenvolvedora tenha uma boa estrutura e até mesmo uma lógica em sua mente de como aquele componente pode ser feito.

Com isso, separamos algumas dicas que você pode utilizar para começar a desenvolver o seus componentes seguindo as melhores práticas:

1. Análise da estrutura 

Antes de começar a colocar a mão na massa, busque sempre estruturar o que precisa ser feito e como será feito. Para isso, utilize um papel, um arquivo online ou até mesmo organize em sua mente para entender se realmente é necessário componentizar ou não.

2. Extraia requisitos 

Entender tudo o que seu componente vai ter é essencial, já que o conteúdo já vai estar anotado. Imaginando que você vá desenvolver um componente que vai se comportar como um formulário, por exemplo, antes de tudo separe todos os requisitos que aquele componente vai ter, como os campos do formulário, para depois iniciar seu desenvolvimento.

3. Desenvolva componentes genéricos

Um componente deve ser desenvolvido pensando que outras pessoas poderão fazer o uso dele, além de você. Com base nisso, busque desenvolver o componente mais genérico possível para que não acabe gerando problemas em layouts que não fazem parte da sua aplicação.

4. Documentação dos componentes

Muitas vezes acabamos esquecendo da tão famosa documentação, principalmente quando estamos desenvolvendo algo bastante específico e imaginamos que mais ninguém vai utilizar. A documentação de componente é essencial para que outras pessoas possam utilizá-la e entender o que foi feito. Para desenvolver uma boa documentação, você pode seguir o seguinte padrão dentro de um arquivo “README.md”.

• O que o componente faz?
• Em que versão o componente se encontra?
• Quais as props que foram utilizadas dentro do componente?
• Utiliza alguma biblioteca externa para o desenvolvimento?
• Quais as classes CSS que foram inseridas?
• Imagens do layout do componente

5. Estrutura de pastas e arquivos

De acordo com o nível de complexidade de um componente, ele pode ser mais curto ou mais extenso. Isso quer dizer que você pode acabar usando mais ou menos arquivos em seu desenvolvimento. Com base nisso, ter uma estrutura de onde vão ficar as imagens, os arquivos json e o arquivo principal do componente é de grande importância, já que isso facilitará na hora de realizar as manutenções necessárias.

Exemplo de componentização na prática! 

Agora que já entendemos quais são as vantagens de se utilizar um componente e o quanto ele pode trazer mais facilidade e agilidade para dentro do desenvolvimento do software, vamos colocar a mão na massa e aprender como se criar uma componentização de forma simples.

Para começarmos, vamos imaginar um cenário no qual teremos três botões: Login, Cadastro e Sair. Vamos então criar um botão em forma de componente, que sirva para essas três situações.

No nosso caso vamos utilizar o framework React.js para o desenvolvimento de nosso componente, Para isso, vamos iniciar, realizando a criação de forma simples de um projetinho, rodando o seguinte comando:

npx create-react-app nome-do-projeto

Automaticamente, o projeto será criado. Logo em seguida. abra ele dentro de uma IDE para que possamos realizar alterações dentro do código.

Dentro da pasta “src”, vamos criar um diretório chamado “Components”. Lá ficarão armazenados todos os componentes que são criados. Aproveite para criar um arquivo chamado “buttons.jsx” ou defina o nome que deseja. A estrutura ficará dessa forma:

Vamos agora iniciar o codigo do nosso componente definindo uma prop para que possamos passar essas informações de forma dinâmica em sua chamada. O código do componente ficará assim:

import React from 'react';

export function Button(props) {
  return <button >{props.titleButton}</button>
}

Agora, dentro de nosso arquivo App.js, por padrão ele vem dessa forma:

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Vamos apagar todo o código, deixando o “return” apenas com um título dentro:

import './App.css';

function App() {
  return (
    <h1>Escolha a opção que deseja:</h1>
  );
}

export default App;

Por fim, vamos chamar nosso componente dentro do arquivo App.js, logo abaixo do título que foi inserido. Dentro do componente criamos uma prop chamada “titleButton”.

Agora, na chamada do componente, temos a liberdade de chamar o “titleButton” passando o texto que desejamos como podemos visualizar no print abaixo. 

O resultado no navegador ficará dessa forma:

Conclusão

Diante de tudo isso que já lemos anteriormente, pode se dizer que quando fazemos a utilização da componentização, temos ganhos significativos que podem fazer toda diferença no futuro do projeto, principalmente quando falamos em manutenções de código e organização.

Sempre quando for iniciar um projeto, seja ele dentro da empresa ou individual, você pode estruturar todos os componentes que serão criados, gerando, então, uma padronização dentro do projeto para que o trabalho possa fluir melhor. 

Se você gostou de aprender sobre componentização, você pode ler também sobre como funciona e como é uma aplicação web.