Vue JS: Por que você deve conhecer esse framework?

Antes de tentar dizer pra você porque eu acredito que você deveria conhecer o Vue, eu gostaria de explicar o porque eu precisei começar a desenvolver neste framework. A resposta é bem direta: porque nosso cliente precisava de um projeto em Vue JS. Calma, eu vou te contextualizar melhor!

O nosso time estava no início de um projeto, todos os produtos de frontend do nosso cliente já haviam sido construídos utilizando o Vue. Logo, foi necessário nos esforçarmos para aprender sobre o framework.

Portanto, relato aqui o ponto de vista de alguém que partiu de não conhecer o Vue para entregar um sistema de sucesso com ele!

Curva de aprendizado com Vue JS

No começo do projeto, tínhamos somente uma pessoa desenvolvedora no nosso time com experiência avançada em desenvolvimento web, mas em pouco tempo todo o time já era capaz de atuar nos portais que construímos e lidar habilmente com as tarefas do nosso backlog.

É claro que erramos bastante no processo de aprendizado (peço perdão a todos os itens que deixamos desalinhados depois de apanhar muito para o CSS), mas com o tempo conseguimos melhorar nosso aprendizado da ferramenta. E, nesse processo todo, um documento que me ajudou muito, foi a documentação atualizada e traduzida para o português do Vue que está disponível no site oficial.

O crescente desenvolvimento do Vue JS

Nos últimos anos, o Vue tem disputado espaço com os outros grandes frameworks na comunidade, como os bem consolidados Angular e React. E eu não falo isso só porque o Vue é meu “xodozinho”, a pesquisa de insights do stackoverflow de 2020 ilustra bem o que eu quero dizer.

Esse gráfico é resultado de uma pesquisa feita para pessoas desenvolvedoras perguntando se elas gostariam de continuar trabalhando com a tecnologia a qual elas estavam desenvolvendo na época. Nesse caso, Vue disputa no topo, bem perto de React e Asp Net Core. Em seguida, os pesquisadores perguntaram aos entrevistados com quais tecnologias não tiveram nenhum contato até o momento mas apresentavam interesse em começar a desenvolver, e esse foi o resultado

Agora, sobre o código em Vue JS

Elementos e variáveis: data e methods

Começando por como declaramos variáveis que utilizaremos no componente ou na tela e como declarar os métodos que esse componente vai utilizar. Os principais responsáveis por gerenciar esses elementos são as funções data e methods, que disponibilizam para o DOM respectivamente quais variáveis e métodos ele poderá acessar. Vejamos no exemplo abaixo, vindo de muito tempo atrás em uma galáxia muito distante, como são utilizadas a variável nomePessoa e o método exibeFuncao.

Validações: v-if e v-show

Além do valor das variáveis exibidos para a pessoa usuária na tela, podemos falar sobre como o Vue manipula o conteúdo de forma interativa. As validações nativas da linguagem v-if e v-show podem ser usadas em um componente para determinar se ele deverá ou não ser exibido. No caso do v-if, o elemento somente é gerado no DOM se (ou quando) sua condição for verdadeira, enquanto um componente marcado pelo v-show será gerado no DOM mas será exibido ou não a depender do resultado da condição. Para decidir qual usar, é importante pensar no tamanho do seu componente e se há necessidade de gerá-lo todo mas não exibi-lo (com o v-show) ou se há um cenário em que a exibição dele se altere e sua re-geração seja necessária (usando o v-if).

Repetições: V-FOR

Quando estamos exibindo na tela uma lista de itens relacionados, como a lista de compras no carrinho ou a lista de itens disponíveis à venda, por exemplo, vamos repetir na tela um mesmo componente. Para isso, podemos usar o v-for para renderizar uma lista de elementos com base em uma lista (ou iterando sobre um objeto, mas com array é mais comum). O campo key utilizado no código abaixo é usado junto ao v-for para que sua aplicação possa diferenciar cada um dos elementos da lista, conseguindo aplicar nos componentes em tela alterações realizadas no vetor no javascript.

Ligando javascript e HTML: Data Binding

Citei anteriormente algumas condicionais usadas para renderizar um componente, mas até agora eu estava mostrando que elas respondiam ao valor de uma variável sem falar bem como isso funciona. Isso quer dizer que eu gero o componente uma vez e acabou? Não, é agora que vem o Data Binding. No Vue, o Data Binding funciona para alterações numa “via de mão dupla”. O Two-Way Data Binding quer dizer, basicamente, que qualquer alteração que realizada no Javascript vai ser percebida pelo DOM e qualquer alteração no DOM vai ser percebida no Javascript. Então é dessa forma que os componentes “escondidos” com v-if ou v-show podem alternar entre sendo exibidos respondendo à sua variável ou novos elementos aparecem com o v-for.

Outros tópicos interessantes

Poderíamos falar aqui sobre vários tópicos interessantes que o Vue tem para oferecer, mas como a proposta desse texto não é mergulhar nas profundezas técnicas do Vue, vamos pular para conclusões. Caso você queira ler mais sobre o assunto e a gente ainda não tenha decidido aparecer aqui no site com uma segunda parte, eu recomendo uma leitura da documentação oficial do Vue e descubra um pouco mais sobre o seu principal framework de componentes, o Vuetify.

Por que eu deveria conhecer o Vue JS?

Depois de apresentar um pouco sobre o que é o Vue em si, volto à nossa principal pergunta: “Por que eu deveria conhecer o Vue?”.

No meu caso, conhecer o framework foi praticamente uma obrigação, mas eventualmente eu e você vamos começar um novo projeto e precisamos nos perguntar qual framework usar.

Muita gente na comunidade está optando pelo Vue, mesmo que ainda não existam grandes plataformas apadrinhadas por grandes empresas construídas nele. Um dos pontos que mais gostei na minha experiência foi a curva de aprendizado, que considero muito positiva para aqueles que estão tendo seu primeiro contato com o frontend.

Além de saber como construir uma solução a partir do Vue, conhecer novos frameworks por si só te dá um poder importante. Não só porque você é um profissional com várias tecnologias no currículo, mas porque as similaridades e diferenças entre frameworks estão dizendo alguma coisa. Sendo capaz de compará-las, você é capaz de decidir quando usar cada um com base no tamanho do produto final, número de usuários simultâneos, conhecimento prévio do seu time, ou até mesmo entender o motivo das semelhanças entre eles.

Se o Vue surgiu anos depois do lançamento do React e ainda carrega a mesma ideia de gerenciamento de estado da aplicação, temos um forte indício de que essa é uma abordagem que funciona muito bem na prática: Quanto mais frameworks você conhece, menos você depende deles.