Compartilhe esta publicação
No mar de libs e frameworks: conhecendo o Vue.js - Parte II
Bom, se você chegou agora aqui e não viu a parte I deste artigo, aqui segue o link para você ficar por dentro do que foi falado e do que vamos tratar neste artigo.
Milene, tu falou bastante sobre o Vue no último artigo, mas não falou muitas coisas sobre ele, vamos continuar então? Vamos! =D
No que o Vue é baseado e no que se destaca?
O Vue se destaca pela sua simplicidade em executar as mesmas tarefas dos outros frameworks. Nele, você possui os mesmos conceitos que um framework reativo possui, como data bind, two way, events, criação de componentes, entre outros. Mas o que o difere dos demais então? A simplicidade de trabalhar com ele é uma boa resposta para essa questão... Podemos começar com o Single File Components?
Single File Components
Como dito anteriormente, o Vue trabalha na estrutura de HTML, CSS e JS em um único arquivo, e é nisso que o “Single file components” se baseia, ou seja, componentes de um só arquivo. Mas como isso funciona? Normalmente, quando começamos com uma linguagem/tecnologia nova uma das primeiras coisas que fazemos é aprender a fazer o famoso “Hello World” naquele ambiente, então não fugiremos muito aqui.
Abaixo segue o código de um componente, composto pela estrutura explicada anteriormente, com a tag style, onde estamos colocando os estilos do nosso componente, a tag template onde consta o nosso HTML, parte em que é inserido nossos dados via JS, e a tag Script, onde declaramos nossos dados a serem mostrados no nosso template. Simples, não?
A união de dois frameworks?
O Vue é composto pelas boas práticas de dois frameworks muito utilizados hoje em dia, são eles o ReactJS e o AngularJS (versão 1). Portanto, tem muitas coisas semelhantes a eles, mas também tem detalhes diferentes e bem interessantes: além de sintaxe (que mistura um pouco das de AngularJS e ReactJS, tirando o melhor de cada um) e API simples e claras, o Vue conta com os seguintes aspectos importantes para ser levado em conta:
Flexibilidade
VueJS não é um "ditador" de regras como o Angular 1 por exemplo. Ele te deixa livre para fazer o uso dele conforme melhor se adequar ao seu projeto, ou seja, ele que se molda à sua necessidade, e não sua necessidade que se molda a ele. Então, se seu projeto precisa ser livre na maioria das partes da implementação e não ter o padrão MVC meeesmo, o Vue é uma boa opção. Há pessoas que definem o Vue como uma lib JS e outros que já o definem como um framework, mas além de definições o mais importante é que você pode usá-lo desde um projeto super pequeno e básico até um projeto grande e complexo, afinal, como dito anteriormente, ele se adequa a sua necessidade.
Performance
O Vue tem uma performance muito boa, e em alguns testes ele se saiu melhor do que o ReactJS (comparando Vue.JS e ReactJS com dados tabulares dinâmicos). E essa performance foi alcançada mesmo sem o VueJS fazer uso de Virtual-DOM como o ReactJS.
O Cenário do teste:
Página que tinha uma tabela de dados aninhados, atualizando com frequência com um número fixo de linhas, englobando um radar de jogos de futebol;
O teste: Cada solução foi executada com 50 jogos. Cada jogo atualiza-se uma vez por segundo e aumentará, no mínimo, seu clock e uma célula de jogador. Outras propriedades são aleatoria e independentemente atualizadas. Uma vez que cada jogo tenha iniciado, iniciaram uma gravação da linha de tempo por 30 segundos.
Resumo com 50 jogos:
Resumo com 100 jogos:
Resumo com 500 jogos:
Nos gráficos acima, podemos verificar que o tempo de scripting do React é bem superior ao do Vue, o que acaba pesando no tempo total de range da aplicação pois o Vue lida com mudanças frequentes de elementos existentes e dados muito melhor do que o React devido ao seu sistema de reatividade. Também podemos avaliar por outro lado as questões de rendering, painting, others e idle, ou seja, se sua aplicação não tem uma necessidade muito grande de lidar com dados dinâmicos e as outras questões são mais importantes, é indispensável avaliar o que sua app necessita e o que mais pesa na hora de escolher a tecnologia a ser utilizada.
VueJS Livre!
Assim como tantas libs e frameworks, o Vue pode ser utilizado em qualquer tipo de projeto e tecnologia. Você pode estar implementando seu projeto com qualquer outra linguagem, mesmo assim você pode usar o Vue. Que beleza, né?
A Popularidade do Vue
Google Trends:
No gráfico abaixo, referente a análises em 2015 da popularidade do VueJS (segundo o Google Trends), o Vue teve um crescimento bem considerável - superando frameworks bem conhecidos como Ember e Meteor. Ele ainda não está no mesmo nível que Angular e React (no gráfico, Angular foi omitido, pois diminuía os restantes). Mas, levando em conta que o Vue é relativamente bem novo, ele está crescendo com uma taxa muito considerável.
Github Trend Statistics:
Aqui nós podemos notar uma tendência similar ao gráfico acima, onde o crescimento do React é deslocado cerca de 1.5 anos para a direita do Angular, e a do Vue se desloca 1.5 anos do React. Outro estudo mais científico é o do JS.ORG | STATS - onde o Vue atualmente está na 13º posição, no all-times ranking, e também tem estado constantemente na lista dos "10 mais" mensal e semanal por vários meses. E, se considerarmos apenas os projetos que já existem nos rankings semanais/mensais, ele estará constantemente entre os três projetos com melhor colocação!! =D
Stack Overflow Trends
Neste gráfico do Stack Overflow Trends, que compara novas libs e frameworks que vêm crescendo na área de desenvolvimento (nota-se que excluímos aqui o Angular e o React, pois estes são os mais usados diariamente), vemos o grande avanço do crescimento Vue comparado ao ano de 2016 e principalmente comparado com a proporção de crescimento dos outros frameworks e libs JS, ele vem alcançando uma taxa de crescimento muito elevada, e o melhor: isso está acontecendo muito rapidamente! :D
Estatísticas de Usuários
Recentemente, o Vue passou de 1 milhão de downloads no NPM, com uma contagem mensal de 120~150k. Como referência, esse número representa cerca de 1/4 do Angular 1 e 1/12 do React. A documentação oficial do Vue tem atualmente ~150k de visitantes únicos e ~450k de visualizações de página por mês, segundo o Google Analytics:
Empresas utilizando Vue em produção
Alibaba
Baidu
Tencent
Xiaomi
Line Corp
Nintendo
Projetos de código aberto que agora usam VueJs extensivamente: Laravel, Gitlab e Pagekit.
Concluindo...
Vue é muito simples mesmo. Comparativamente com Angular e, principalmente, com React, se todos os itens acima preencheram a lista de pré-requisitos do seu sistema, e você é o tipo de desenvolvedor que não quer ou não tem muito tempo para ter uma curva de aprendizado grande para implementar sua aplicação, o Vue facilita mais ainda, pois você terá uma flexibilidade grande para fazer o que preferir e a curva de aprendizado é bem baixa. Também tem ótima performance e liberdade - coisa que, com o Angular, você encontrará problemas se tiver uma aplicação de alta escala, porque ele utiliza alguns pretextos para conseguir rodar o código independente do browser deixando a desejar na performance. E com relação React, comparando com o Vue, o primeiro de torna muito verboso e, para os iniciantes, o fluxo entre componentes pode ficar muito confuso; porém, com o vue é muito simples, sem falar na performance citada acima no item referente a esse assunto. O Vue está a recém na sua versão 2.0 e já tem muitos aspectos melhores do que outros frameworks que comentamos, o que mantém a esperança de que o mesmo só tem a crescer e contribuir ainda mais com a comunidade, tornando assim o desenvolvimento de SPA’s e componentes cada vez mais simples. Conhecendo essa base de Vue dada aqui, você já pode começar a experimentá-lo e conhecê-lo mais profundamente para implementar em suas aplicações futuras se esse satisfaz as suas necessidades. Bons estudos!
Vem mais por aí?
Este artigo é um overview do Vue, ou seja, muitas coisas mais técnicas poderão ser explicadas em um futuro bem próximo aqui com novos artigos (Spoiler)!!! Assim teremos mais sobre VueJS aqui no portal da BrazilJS, principalmente focado no passo a passo do desenvolvimento e assuntos específicos como Diretivas, Formulários, Build de projetos, Alterações de dados e mais! =D
Referências:
Se ficou interessado(a), nos acompanhe para saber mais! =D Beijos, e até logo! :) <3