Qual framework escolher para estudar em 2021: React x Angular x Vue.js

React JS

Qual framework escolher para estudar em 2021: React x Angular x Vue.js

Qual tecnologia javascript escolher para o seu próximo projeto ou para iniciar os estudos em uma nova framework ou biblioteca UI em 2021? Nesse artigo irei falar  sobre os prós e contras e comparar cada uma das Framework/Library.

Sem dúvida nenhuma, Javascript é a melhor linguagem a ser escolhida para o desenvolvimento de um projeto front-end. Existe uma infinidade de funcionalidades que nos permitem criar uma UI com extrema qualidade e da forma que desejamos.

A tecnologia evolui rápido demais e com o javascript não poderia ser diferente, hoje temos uma quantidade enorme de frameworks e bibliotecas para serem usadas em diversos tipos de negócios.

Mas hoje vou falar sobre somente 3 dessas tecnologias javascript:

  • React — Uma biblioteca para criação de interfaces;
  • Vue.js — Um framework para criação de interfaces;
  • Angular — Outra framework javascript baseada em TypeScript;

React

O React é uma biblioteca Javascript de código aberto com em que criar interfaces de usuário em páginas web. É mantido pelo Facebook e por uma comunidade de desenvolvedores individuais. Atualmente é utilizado por todos os produtos do Facebook, como Instagram e WhatsApp e mais uma infinidade de projetos de empresas por todo o mundo.

Vue.js

Vue.js é um framework javascript progressivo, muito conhecido pela sua capacidade de criar interfaces de usuário incríveis. Foi criado por Evan You, um ex-funcionário do Google em 2014.

Mesmo sem o apoio de uma grande empresa, Vue.js é bastante popular e é considerado uma das principais frameworks javascript do mercado para criação de interfaces.

Angular

A história do Angular começa em 2010, quando  o Google fez o seu lançamento. Certamente a mais antiga das tecnologias que iremos abordar neste artigo.

O Angular que uma framework baseado em TypeScript, teve em 2016 o lançamento do Angular 2 e foi retirado do seu nome o termo “JS”. Apesar das vantagens óbvias do Angular 2 sobre o Angular 1 (ou AngularJS) ele ainda é utilizado.

Qual deles eu devo escolher?

Vamos dar uma olhada na pesquisa feita pelo Stack Overflow em 2020, sobre a popularidade das frameworks javascript do mercado.

Popularidade

A popularidade de uma tecnologia nos mostra para onde o mercado está indo e quanto mais popular é uma framework, mais fácil será para obter talentos, recursos, ajuda da comunidade, etc.

Entre várias Web Frameworks, React.js está em segundo lugar com 35,9% de votos, seguido por Angular / AngularJS em terceiro com 25,1% de votos. Vue.js, com 19,1% de votos, está em 7º lugar no gráfico.

Por essa pesquisa, podemos ver que o React e o vencedor no quesito popularidade, ficando acima de Angular e Vue.

Arquitetura

Diferente da popularidade, não pode haver um vencedor direto entre React x Vue x Angular quando se trata da “Arquitetura”.

Isso ocorre, por exemplo, a usabilidade e, portanto, a popularidade do react. Por ser uma biblioteca de UI e não um framework. Basicamente, você pode personalizar os seus componentes da forma que desejar. Diferente de Vue e Angular que são frameworks, Então, não importa quais componentes dessas estruturas você usa, sempre haverá alguns componentes “inúteis”.

Isto posto, vamos analisar a arquitetura de cada um dos nossos competidores.

React

Sendo uma biblioteca, React não impõe um padrão de arquitetura como as outras. Um componente React é essencialmente uma pequena estrutura, tão simples como um botão ou um pouco mais complexo como um perfil de usuário.

Tendo uma arquitetura baseada em componentes, isso significa que quando um usuário interage com algum elemento específico da UI, apenas o estado desse componente específico é atualizado. É isso que torna os elementos do React reutilizáveis e totalmente personalizáveis.

Dito isso, é preciso ter em mente que para criar um aplicativo web comercial, será preciso utilizar dependências de terceiros, como Redux, Axios, etc.

Vue.js

Uma das principais razões do Vue.js estar neste comparativo é o fato de que ele contém o melhor dos dois mundos – React e Angular.

Vue.js usa uma ligação de dados bidirecional – Uma diretiva de modelo V. E como Vue.js se concentra principalmente no modelo View, sua compatibilidade com outras bibliotecas é simplesmente fenomenal.

A arquitetura do Vue.js é projetada de forma que seja adotável de forma incremental.

Angular

O Angular, por ser o mais antigo, possui a arquitetura Model-View-Controller (MVC). A arquitetura MVC é uma maneira clássica e antiga de separar até mesmo as interfaces de usuário mais complexas em três partes. Vamos ver com mais detalhes abaixo.

  • O componente Model armazena dados e a lógica correspondente.
  • O controller interpreta uma ação do usuário como um evento e funciona como um mediador entre View e Model.
  • A View é a parte da UI onde um usuário interage com a UI do seu aplicativo da web.

Sendo baseado em MVC, isso torna a tarefa de modificar e atualizar Views individuais de forma simples, sem precisar reescrever completamente outras Views.

Vue vs Angular vs React: Performance

Quando se fala em performance de uma aplicação web a framework ou a biblioteca tem um grande valor no resultado. Para projetos pequenos, qualquer framework ou biblioteca vai entregar o que você precisa sem muito esforço, mas se você precisa de algo mais robusto e que entregue uma performance com escalabilidade, precisamos escolher com mais atenção.

Quando analisamos a performance precisamos ter atenção a duas coisas que são diferentes para se falar de benchmark – DOM e JS Framework.

O Angular depende muito do DOM real para o seu desempenho, enquanto o Vue.js e o React funcionam usando o DOM virtual. Sem entrar em muitos detalhes técnicos, o DOM virtual evita o trabalho e renderizar o UI a cada alteração de estado. Isso o torna mais rápido, especialmente quando vários estados de componentes são envolvidos.

Quando se trata de requisitos de memória e tempo de inicialização, React & Vue.js mostram resultados superiores ao Angular. O Angular requer mais memória computacional e pode levar até 150ms para inicializar script básico.

https://krausest.github.io/js-framework-benchmark/current.html

O JS Framework Benchmark, mostra que existem pequenas diferenças nos desempenhos, mas isso não é o suficiente para declarar que uma framework é inferior ou que uma biblioteca é superior.

Migrações e atualizações

Não importa o quão popular seja uma framework ou biblioteca, mas uma das questões que devem ser avaliadas é sua prontidão e facilidade para futuras atualizações.

Nesse quesito o React se sobressai, pois é utilizado em grandes nomes da web como twitter e AirBnB e a consistência de suas respectivas plataformas significa muito para essas marcas.

Caso haja uma atualização que quebre ou modifique de forma significativa o uso nessas plataformas, isso seria o suicidio para a biblioteca. Um dos principais pontos que o Facebook ressalta no React é exatamente a sua “estabilidade” como um de seus princípios de design.

Por outro lado, o Angular lança uma atualização importante a cada 6 meses ou mais. Também dá mais 6 meses ou mais antes de descontinuar qualquer API. Dessa forma a equipe do Angular da quase 1 ano para que sejam feitas as atualizações necessárias.

Vue.js é mais fácil quando se trata de migrações para a versão mais recente. Na verdade, quase 90% da API permaneceu igual ao Vue 1.x quando o Vue 2.x foi lançado. E na documentação do Vue 3.x, os fabricantes mencionam – “Embora pareça que muita coisa mudou, muito do que você conhece e ama sobre o Vue ainda é o mesmo.”

Independentemente da biblioteca ou framework, as atualizações têm como objetivo acompanhar os padrões de mercado em evolução em termos de interfaces de usuário. Os conceitos básicos permanecem sempre os mesmos.

Considerações

Tentei abordar vários aspectos referentes a cada uma das frameworks e biblioteca apresentados, para te ajudar a fazer uma boa escolha sobre qual utilizar no próximo aplicativo web. Cada uma tem as suas vantagens e desvantagens que devem ser levadas em consideração, mas o mais importante caso inicie o estudo de alguma delas, e que você deve permanecer fiel a sua escolha, pois somente com a constância e a prática recorrente te tornará fuente nessa nova framework ou biblioteca.

Boa sorte nos estudos e projetos, caso necessite de algum auxílio não deixe verificar os outros posts no blog.

Referência 

Explore mais