Eu já falei aqui sobre libs e frameworks legais para componentizar sua aplicação ou app. Um bom exemplo é o caso do post sobre React JS. Mas o que é componentizar?

O que é componentizar ?

Para responder essa pergunta vamos imaginar um blog como este. Vamos dividi-lo em partes e essas partes serão chamadas de componentes. Cada componente desenvolve um papel. Vamos pensar na barra de “BUSCAR POST”.  A barra de buscar desenvolve um papel relativamente simples, você escreve o que está procurando e na sequencia ela trás o resultado dessa pesquisa.  Podemos desenvolver uma barra de busca de várias formas com várias tecnologias mas a ideia de componentizar é criar 1 barra de busca que sirva para muitos blogs.

Componentizar é exatamente isso, separar um software em partes e tentar reaproveitar ao máximo essas partes. Existe muitas vantagens nisso como por exemplo reaproveitamento de código, pular muitas etapas do desenvolvimento e etc…

Como esse conceito se aplica no Javascript?

O que Framework como react, vue e tantos outros fazem é transforma a componentização um pouco mais fácil. Na web é muito é muito comum lidar com interfaces visuais que se repetem e é comum ver projetos que reescrevem o mesmo código diversas vezes. Então por quê não reaproveitar os mesmo código em projetos futuros?

Nesse exemplo vamos fazer uma listagem de categorias de uma blog. É uma parte bem simples e que poder ser reaproveitada em diversos lugares. A ideia é trazer uma lista com as categrias de uma postagem. Vamos lá?

Primeiro eu vou fazer uma array com todas as categorias.

const data = [
  { name: "Tecnologia", id: "1" },
  { name: "TV", id: "2" },
  { name: "Fofoca", id: "3" },
  { name: "Artes", id: "4" },
  { name: "Culinári", id: "5" },
];

 

Até aqui tudo bem, é só um array de objetos. Agora vamos para para o nosso componente de fato.

const listComponent = (data) => {
  return data
    .map((item) => {
      return "<li> ${item.id} ${item.name} </li>";
    })
    .join("");
};

Uma das vantagens de usar ES6 são as template strings. Com elas podemos concatenar de forma mais práticas variáveis e strings. No nosso return temos a chamada de uma função map para um array. Ela é parecida com each do jquery. O map vai passar por cada item no array e gera uma LI nova.  Por fim basta selecionar uma UL no HTML e fazer um innerHTML (ou append usando jq). Essa parte fica assim.

const el = document.querySelector("[data-list]");
el.innerHTML = listComponent(data);

 

Agora você tem um componente que recebe um array de objetos e transforam em uma lista. Pode parecer bobo mas essa logica resolve problemas muito complexo além de deixar o seu código mais limpo. Vale apena tentar refatorar um projeto usando esse método, tenho certeza que você vai liberar muitas linhas de código e deixar seu app mais leve.

Eu fico por aqui até a próxima !

 

Fonte:

https://medium.com/@vhmendrone/criando-pequenos-componentes-din%C3%A2micos-com-javascript-puro-58b097d82c94