Blog
27 de março de 2021
Porque utilizar JSX em Vue
Uma breve introdução ao Vue
Vue é um framework Javascript open source para construção de interfaces de usuário. Muito poderoso para o desenvolvimento de UI complexas, e também é muito conhecido pela facilidade em desenvolver aplicações single page (página única). Vue se enquadra em um framework progressivo, pois ele pode ser integrado com uma aplicação server-side que precisa, de alguma forma, otimizar a UI.
Recapitulando <template> Vue
Geralmente quando falamos em template vue temos em mente a tag template que envolve todo o código. Dessa forma podemos vincular declarativas diretamente nas tags HTML, como v:model, v:bind, v:src etc. Internamente o Vue compila esses templates dentro de funções de renderização do Virtual DOM.
Assim, a reatividade fica claramente fácil de entender, vinculando a diretiva do HTML com dados dentro da função data, como no exemplo a seguir:
No exemplo acima, sabemos que a variável “name” está vinculada ao campo input por meio da diretiva v-model. O que o usuário digitar no campo input, através da reatividade, será apresentado imediatamente no <h1> “Seu nome é….”
Então, já entendemos e recapitulamos como funciona o Vue template, e o quão simples é identificar o que acontece no código. Agora, vamos entender mais profundamente o que é uma função de renderização e o que é a sintaxe JSX.
Função de Renderização Vue
Se você for uma pessoa desenvolvedora curiosa, já deve ter aberto a documentação para ver que “diabos” de função de renderização é essa em Vue. Podemos ver algo muito peculiar na documentação, informando que o Vue recomenda que templates sejam utilizados para construir o HTML da aplicação, porém vemos também o seguinte:
“Haverá situações, no entanto, em que você realmente precisará de todo o poder de programação do JavaScript.”
Então, seguindo essa última declaração, porque não, sempre utilizar TODO o poder de programação em JavaScript ?
Vamos entender qual problema as “function render” tentam resolver. Imagine que você tenha um componente que dependendo do nível do usuário ele irá exibir ou não um certo conteúdo:
Ao começar a implementar a lógica que, segundo o nível do usuário, será renderizado ou não o conteúdo, rapidamente chegamos a esse nível de complexidade:
Claramente não está nada legal essa forma de renderização dos componentes. Nesse momento você já percebeu que as funções de renderização serão a “bala de prata” para resolver este problema, vejamos:
Uall!!! Agora sim, muito melhor, o código está mais clean code. Explicando resumidamente o código acima: temos a “render function” que renderiza diretamente no DOM propriedades de uma instância Vue. Portanto, de acordo com o valor passado para a propriedade “level” será renderizado o conteúdo do slot default do Vue. Simples, não é mesmo ? Não. Se você nunca teve contato com esse tipo de renderização, não será tão simples de entender.
Esse primeiro código, é um pouco mais fácil de entendermos, vamos complicar um pouco mais, veja o exemplo a seguir:
Pronto, agora sim. Um código que na minha humilde opinião é complexo demais à primeira vista, necessitando de um pouco mais de estudo aprofundado na documentação, que aliás, esses exemplos estão todos lá. Mas e agora, se utilizar template Vue não é sempre a melhor opção, e utilizar render function aumenta a complexidade do código, qual seria a melhor opção?
Originally published at https://becatriz7.medium.com on March 28, 2021.
Texto: Rebeca Beatriz