Componentização com javascript puro

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>
                <span>${ item.id}</span>
                <span>${ item.name}</span>
            </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