React vs Vue
Exploração de duas das ferramentas mais populares de front-end de 2022
Antes de mais, é essencial compreender a diferença entre uma biblioteca e uma framework de JavaScript.
Apesar de não fazer um desenvolvedor ser melhor ou pior, perceber esta diferença pode marcar pontos nas entrevistas de emprego. Atualmente, entrevistadores gostam de questionar sobre a diferença entre frameworks e bibliotecas para testar a profundidade de conhecimento.
Pode-se definir uma biblioteca como sendo uma coleção de funções organizadas e empacotadas de forma a que possam ser executadas por vários programas que não têm conexão entre si.
Por outro lado, frameworks, que representam, atualmente, uma parte essencial do desenvolvimento front-end da Web moderna, fornecem código pré-desenvolvido, um esqueleto, e convida o desenvolvedor a preenchê-lo, permitindo desta forma, a criação de aplicações Web.
Por outras palavras, de uma maneira mais simples, que quando se usa uma biblioteca, inserimo-la no código, e chamamo-la nos locais apropriado. Enquanto uma framework, torna-se o “centro do universo” e oferece “slots” para o nosso código.
React
O que é?
O React é uma biblioteca Javascript com foco na construção de UI complexos, constituídas por peças de código pequenas e isoladas chamadas "componentes". Foi criada por Jordan Walke, Engenheiro de Software do Facebook, e a primeira versão foi usada pelo próprio Facebook, no seu feed de notícias, em 2011, com o intuito de otimizar a atualização e sincronização de atividades simultâneas, e melhorar a manutenção de código. A sua intenção passa também por fornecer o máximo de controlo possível ao desenvolvedor e deixar a comunidade tratar das várias peças importantes que fazem uma aplicação ser facilmente construída: router, data fetching, autenticação…
Hello world mais pequeno em React:
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);Algumas das aplicações Web mais populares que utilizam esta biblioteca são, por exemplo: Netflix, Facebook, Twitter, PayPal, Instagram, WhatsApp, entre outras…
Vantagens
- Tecnologia desenvolvida pelo Facebook
React conseguiu provar a sua fiabilidade ao ser desenvolvido por uma empresa da dimensão do Facebook. - Documentação detalhada
É fornecida documentação com soluções detalhadas para problemas comuns. O design é simples e a personalização pode ser feita rapidamente. - Grande comunidade
A biblioteca é usada em todo o mundo e há uma enorme comunidade de programadores por trás do React, incluindo o próprio Facebook. - Virtual DOM
Permite realizar alterações na interface sem realmente enviar essas para renderização permanente. Isto possui a vantagem de ter carregamentos mais rápido que o DOM “real”. - Desenvolvimento para iOS e Android
Não há necessidade de fazer desenvolvimento separado para iOS e Android. - Component-Based
Usa uma arquitetura baseada em componentes, separando assim grandes blocos de código em componentes menores.
Desvantagens
- Aplicações costumam ser mais pesadas
- Flexibilidade
A liberdade oferecida pode levar à perda de tempo na decisão sobre a melhor abordagem para diferentes tarefas. - Documentação desatualizada
Atualizações e ferramentas são publicadas regularmente, mas muitas vezes falta a documentação associada. - Desempenho
Como todas as ações em um aplicativo React passam por bibliotecas intermediárias, elas ficam um pouco mais lentas.
Vue
O que é?
Vue (pronuncia-se /vjuː/, como view ) é uma framework de JavaScript, criado por Evan You e lançado pela primeira vez em fevereiro de 2014, com a finalidade de construir User Interfaces. Baseia-se em HTML, CSS e JavaScript padrão e fornece um modelo de programação declarativo e baseado em componentes, por forma a aumentar eficiência da criação de interfaces. Esta framework foi concebida com o intuito de combinar os melhores recursos de Angular e React, para ser rápido e developer friendly. É uma ferramenta excecional, com “bateries included”, como o router pré-incluído. Ao contrário de React, que utiliza JSX como template engine, Vue tem a sua própria sintaxe super developer friendly, denominada de Template Syntax.
Hello world mais pequeno em Vue:
<div id="app">
{{ message }}
</div>new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})Algumas das aplicações Web mais populares que utilizam esta framework são, por exemplo: Adobe, Behance, Nintendo, GitLab, NASA, Worten, Louis Vuitton, entre outras…
Vantagens
- Lightweight Design
Esta framework tem um tamanho inferior a 18KB, o que é excelente em comparação com outros frameworks com maior complexidade. - Ligação de dados bidirecional
A manipulação do DOM é um evento bidirecional. O que acontece na view afeta o model e vice-versa. - Virtual DOM
Permite realizar alterações na interface sem realmente enviar essas para renderização permanente, à semelhança do React. - vue-router
A navegação entre as páginas é realizada com a ajuda do vue-router. - Component-Based
À semelhança do React, esta framework também é baseada na construção de componentes. - Sistema sólido de Tooling
Oferece suporte a várias ferramentas de desenvolvimento de front-end prontas para uso com pouca ou nenhuma configuração. - Curva de aprendizagem
Tudo o que é necessário para começar é possuir conhecimento básico de HTML, CSS e JavaScript. Não requer conhecimento profundo de bibliotecas e tecnologias adicionais. - Boa documentação
Existe uma documentação consideravelmente melhor e mais completa para Vue.
Desvantagens
- Mais recente
Comparativamente com React esta tecnologia é mais recente, implicando que a sua comunidade seja menor. - Recursos limitados
Não possui tantos plug-ins ou componentes quanto outros frameworks. - Excesso de flexibilidade
A reclamação mais comum sobre o Vue é ser muito flexível, ou pelo menos mais flexível do que o necessário. - Barreira linguística
Inicialmente, foi adotado por chineses, com grandes empresas , isto fez com que fóruns, canais de discussão e afins estivessem escritos principalmente em chinês, dificultando a adoção por desenvolvedores não nativos.
React vs Vue
Popularidade
npm trends — contagem de downloads
Neste gráfico, é possível verificar uma evolução linear, no que toca ao download de packages, correspondentes a cada uma das tecnologias, mas sempre com supremacia por parte do React. Já no final do ano de 2022, existe um aumento exponencial de instalação de packages de Vue, de forma inusitada, mas que se pode refletir no aumento da popularidade desta tecnologia. No início de 2023, pode-se verificar, novamente, a regularização do número de downloads de cada tecnologia.
Github Star-History
Outra das comparações entre as duas tecnologias que é possível ser realizada, é relativa às Github Stars atribuídas ao repositório de cada uma das ferramentas no Github. Pode-se verificar uma paridade, neste aspeto, ao longo dos anos.
Stack Overflow Developer Survey 2022
Nas imagens seguintes, estão presentes dados retirados do Stack Overflow Developer Survey, um site de perguntas e respostas para programadores profissionais e entusiastas.
Realizando uma análise detalhada de cada gráfico, pode-se afirmar que React, atualmente, é mais popular que Vue. Há um grande nome por trás do React, o Facebook, que o torna bastante popular.
Realidade no mundo profissional
A realidade é que ambas as tecnologias estão com muita oferta no mundo profissional, mas, atualmente, desenvolvedores de React são vistos como mais valiosos devido a, claramente, existirem cada vez mais empresas a seguir o que é mais reliable e usado pelas maiores empresas.
Hoje em dia, Vue está a aproximar-se desta realidade cada vez mais, como se pode verificar também através dos gráficos acima mostrados, e diversas são as companhias de renome a aderir a tecnologias baseadas em Vue.
Principais diferenças do ponto de vista técnico
Um dos aspetos fundamentais do React, é o JSX que combina HTML, CSS e JavaScript numa única linguagem. Vue usa HTML, CSS e JavaScript separadamente, tornando mais fácil a aprendizagem para um iniciante.
React permite, então, manipulação de DOM, arquitetura de componentes e gerenciamento de estado de component-level. Tudo o resto fica por conta da comunidade, oferecendo liberdade para os desenvolvedores. Muitas aplicações React dependem de bibliotecas de terceiros, criadas e suportadas pela comunidade.
Vue vem com um sistema de plugins, diretivas integradas, transições, entre outras coisas. Além disso, para routing e gerenciamento de estado, a própria equipa do Vue criou bibliotecas complementares, junto com outras ferramentas úteis. O principal benefício é que eles são criados e suportados pela equipa própria do Vue, cuidando dessas preocupações comuns e permitindo que a configuração e desenvolvimento sejam mais rápidos.
React em termos técnicos estará sempre na vanguarda, mas Vue normalmente consegue sempre pegar no que o React fez e melhorá-lo. A comunidade de React é maior, como tinha mencionado, e conseguem corrigir bugs e descobrir os mesmo bem mais depressa o que é uma grande vantagem.
Conclusões
Ambas as tecnologias estão, finalmente, num nível considerado bastante bom para serem percebidas e não há falta de recursos online para as aprender.
Para um web developer iniciante, recomendaria o uso do Vue. Olhando para os exemplos demonstados neste artigo, é notório que o Vue tem uma sintaxe mais developer friendly, mais fácil de entender, para além da sua curva de aprendizagem ser mais curta, tornando-a mais acessível em relação à outra tecnologia. Porém, tendo em conta o reconhecimento e posicionamento de destaque no mercado por parte do React, esta passará por ser uma das melhores opções para o ano de 2023, apesar da comunidade do Vue estar a aumentar e ganhar mais peso no mercado, constituindo desta maneira uma excelente alternativa ao React.
