Porque nem sempre precisaremos de um framework
Substituir o React? Tá maluco?!
Sabe aquela velha historia de que não precisamos utilizar um canhão pra matar um passarinho? Como já devem ter lido muitas vezes, nem sempre precisamos sobrecarregar um projeto com todos os recursos que uma lib oferece, nesse caso podemos optar por alternativas mais leves e com objetivos mais direcionados (como o Preact em relação ao React). Mas e quando o projeto é tão pequeno que nem mesmo a alternativa mais leve vale o esforço?
ES6 Rocks!
O ES6 nos trouxe uma lista enorme de novos e fantásticos recursos além de bons upgrades na sintaxe de alguns recursos já existentes. Um desses novos recursos em particular é extremamente util na criação de componentes dinâmicos: Template Literals (ou Template Strings) e é ele que iremos utilizar nos exemplos a seguir.
O que vamos precisar?
Meu objetivo nesse post é que seja simples o suficiente pra que não precisemos de nenhum tipo de configuração prévia (Nada de babel, Webpack, Gulp, etc). Utilizaremos constantes, arrow functions e template literals que já tem um suporte bastante decente nos browsers modernos. Vocês podem conferir mais sobre o suporte clicando aqui
O que criaremos?
Nada de muito especial, apenas uma lista simples de nomes que será gerada a partir de um array de objetos. Vamos começar?
Primeiro definimos nosso modelo de dados:
{name: 'João',id: '1'},
{name: 'Manuel',id: '2'},
{name: 'Pedro',id: '3'},
{name: 'José',id: '4'}
]
const listComponent = (data) => {
return data.map((item) => {
return (
`<li><span>${ item.id }</span><span>${ item.name }</span></li>`
)
}).join('')
}
return data.map((item) => {
return (
`<li><span>${ item.id }</span><span>${ item.name }</span></li>`
)
}).join('')
}
O que fizemos? Primeiro atribuímos a nossa constante uma arrow function que recebe o argumento data. Em seguida invocamos o método map de nosso argumento que por sua vez invocará uma função de callback para cada item em nosso array, como nosso array contém quatro objetos, teremos então quatro elementos de lista em forma de template strings. Utilizamos então um recurso chamado string interpolation (${ data.value }) para inserir os dados de nossos objetos em nossa template. Por fim note acima que utilizamos o método join() após o map, fizemos isso para evitar algumas virgulas indesejadas na conversão do array em string.
Para prosseguir armazenamos nosso elemento HTML em uma constante:
Esse tipo de abordagem na criação de componentes simples pode ser bastante útil quando precisamos, por exemplo, popular as options de um select dinamicamente ou criar listas de qualquer tipo.
Um ponto importante: Diferentemente do React e outras UI libs modernas que, em resumo, utilizam um DOM virtual absurdamente veloz, o componente que criamos será inserido no DOM real, que é muito mais lento, por isso recomendo fortemente que utilize-o com moderação.
Comments