Por serem frameworks de desenvolvimento web, algumas noções de tecnologias web se fazem necessárias para compreender seu funcionamento. Alguns frameworks também requerem conceitos mais avançados de sua utilização como veremos a seguir.
Quadro 1 - Conhecimentos necessários para utilizar cada framework.
Framework Conhecimentos necessários para utilizá-los. Começando pelo menos disruptivo em relação a conceitos web, o Vue utiliza HTML para sua composição de interface de usuário e CSS para customização de aparência. O framework recomenda o uso e utiliza conceitos de versões mais recentes de JavaScript como ES6, mas versões mais antigas como ES5 são suportadas. Conceitualmente, Vue é o framework com mais familiaridade em relação às tecnologias tradicionais de web, por exemplo, todos os seus templates são HTML válidos podendo ser executados nativamente por navegadores. Apesar disso, ele oferece sintaxes customizadas através de atributos e componentes web, permitindo criar estruturas de controle, inserir componentes, realizar
data-binding e outras funcionalidades. Outra sintaxe disponível e bastante usada em seus templates é a “Mustache”, que permite a execução de qualquer JavaScript válido no contexto de seu componente, além de permitir também o acesso a variáveis disponíveis em seu contexto.
Figura 6 – Código fonte de uma aplicação web construída com React que renderiza o texto
“Hello World!”, escrita em JSX
Fonte: Elaboração do autor, 2021.
O React utiliza vários conceitos de versões recentes de ES, como módulos, interpolação de string, arrow functions etc., além de requerer que o desenvolvedor utilize ES6 ou superior.
O aspecto mais notável do React é o JSX, uma extensão de sintaxe da linguagem JavaScript que incorpora a fácil criação de elementos e a funcionalidade estrutural presente no HTML com a dinamicidade do JS, sua sintaxe pode ser vista na Figura 6. Embora React não requeira o uso de JSX, suas documentações, tutoriais e códigos exemplo são majoritariamente escritos utilizando-a.
Outro aspecto bastante popular no ecossistema do React é o conceito de CSS-in-JS, que incorpora a estilização CSS na linguagem JS, visando eliminar problemas presentes no CSS vanilla, como a falta de módulos, escopo de estilos e otimização. O uso de bibliotecas que implementam este conceito ficou bastante popular, e por consequência várias bibliotecas e plugins do ambiente de desenvolvimento do React o utilizam, tornando quase indispensável que seja estudado por quem deseja desenvolver e aprender o framework.
Apesar de ser considerado um framework JavaScript, Angular é escrito inteiramente em TypeScript e aproveita vários conceitos da linguagem em seu ambiente de desenvolvimento,
como decorações e static typing. Angular também usa uma sintaxe de template customizada, mas diferente do Vue, seus templates não são HTML válido para a executados em navegadores e várias limitações são impostas na execução de expressões JavaScript.
Enquanto desenvolvedores confortáveis com uma linguagem static-typed como Java e C# terão mais familiaridade, outros podem considerar esses conceitos uma sobrecarga.
Vue apresenta a menor curva de aprendizagem, oferecendo uma ótima documentação mantida com a ajuda da comunidade e focando em práticas já consolidadas no ambiente web, sendo recomendado para usuários que preferem uma abordagem mais tradicional no desenvolvimento web. JSX é a principal linguagem usada pelo React, sendo recomendado que seus usuários possuam experiência ou maior conhecimento dos conceitos de JS.
Angular apresenta uma curva de aprendizagem mais abrupta, pois apesar de seus conceitos fundamentais serem fáceis de aprender, a sua lógica fica rapidamente complexa.
Enquanto alguns desenvolvedores confortáveis com linguagens static-typed como Java e C#
terão mais familiaridade com Angular pelo seu uso da linguagem TS e seus conceitos, outros usuários podem considerá-los uma sobrecarga. Várias empresas também podem achar conveniente as convenções e padrões presentes no ambiente do framework, como injeção de dependências, serviços e interceptadores.
4.5 DESEMPENHO
4.5.1 Projeto
A aplicação de testes foi implementada com o mesmo visual e lógica entre os três frameworks, compartilhando os mesmos estilos CSS e estrutura HTML apresentados na Figura 7. O projeto das aplicações está hospedado no GitHub no endereço https://github.com/Azganoth/angular-react-vue-benchmark.
Figura 7 - Tela da aplicação de testes após a execução da ação “Criar 1,000 linhas” com a primeira linha selecionada
Fonte: Elaboração do autor, 2021.
As três aplicações compartilham o mesmo código que gera os dados fictícios, sendo importado por elas como uma biblioteca. Os dados são gerados a partir de dois pequenos dicionários, como mostra na Figura 8. A função generateData gera n objetos, cada um com duas chaves: id, que guarda o identificador como um número inteiro, e text, que guarda o texto como uma string. O texto de cada objeto é gerado a partir de duas palavras selecionadas aleatoriamente, através da função pickRandomWord, dos arrays dictionary_1 e dictionary_2.
Figura 8 - Código usado para geração de dados fictícios
Fonte: Elaboração do autor, 2021.
4.5.2 Resultados
4.5.2.1 Angular
Para o Angular a aplicação foi construída usando a ferramenta de suporte oficial
@angular/cli, com o Angular na versão 12.2.9. Os resultados dos testes realizados na aplicação são apresentados na Tabela 4.
Tabela 4 - Resultados dos testes feitos na aplicação desenvolvida no Angular.
Para o desenvolvimento da aplicação no React foi usada a ferramenta de suporte oficial create-react-app, e o React na versão 17.0.2. A execução dos testes na aplicação produziu os resultados apresentados na Tabela 5.
Tabela 5 - Resultados dos testes feitos na aplicação desenvolvida no React.
Tentativa 1
4.5.2.3 Vue
No Vue foi usado a ferramenta @vue/cli para o desenvolvimento da aplicação, que é a ferramenta de suporte oficial do framework, com o Vue na versão 3.2.19. Os resultados obtidos na execução dos testes na aplicação são apresentados na Tabela 6.
Tabela 6 - Resultados dos testes feitos na aplicação desenvolvida no Vue.
Tentativa 1 (ms)
Tentativa 2 (ms)
Tentativa 3 (ms)
Tentativa 4 (ms)
Criação de 1000 linhas 117 124 120 116
Criação de 10000 linhas 678 679 594 704
Inserção de 1000 linhas 296 316 228 321
Atualização parcial 60 62 65 60
Troca de linhas 54 47 55 52
Remoção de linhas 101 102 98 106
Remoção de linha 67 79 75 71
Seleção de linha 38 40 40 35
Fonte: Elaboração do autor, 2021.
4.5.3 Análise
Os resultados dos vários testes realizados serão comparados e discutidos a seguir. Para a comparação será calculada e utilizada a média das quatro tentativas executadas em cada teste.
Gráfico 2 - Comparação de desempenho nos testes 1, 2 e 3 entre os frameworks, apresentando a média dos resultados de cada teste
Fonte: Elaboração do autor, 2021.
Analisando o Gráfico 2, podemos observar resultados intrigantes, pois cada framework lidera em diferentes situações na inserção de elementos no DOM. No primeiro teste, que insere 1000 linhas em uma tabela vazia, o React fica à frente do Vue por 8ms, concluindo a tarefa em 111ms, enquanto o Vue leva 119ms. O Angular fica um pouco atrás de seus adversários, levando 153ms para finalizar a tarefa, 34ms a mais que Vue. Apesar das diferenças de tempo, todos os frameworks performaram muito bem no primeiro teste.
No segundo teste, que exagera o teste anterior, inserindo 10000 linhas em uma tabela vazia. Desta vez o Vue toma a liderança, sendo necessário apenas 663ms para concluir as operações, ficando com 284ms a frente do Angular, que agora levou 947ms. React demorou quase o dobro de tempo que Vue, levando 1182ms para completar as operações.
O terceiro teste insere 1000 linhas em uma tabela com 10000 linhas. Neste teste o Angular mostra uma grande vantagem entre seus adversários, com 107ms requeridos, 133ms a menos que React, que levou 240ms. Vue demorou 290ms para terminar as operações, levando 50ms a mais que React.
0 200 400 600 800 1000 1200 1400
Teste 1
Teste 2
Teste 3
MILISSEGUNDOS (MS)
Angular React Vue
Gráfico 3 - Comparação de desempenho nos testes 4 e 5 entre os frameworks, apresentando a média dos resultados de cada teste
Fonte: Elaboração do autor, 2021.
O Gráfico 3 mostra os resultados dos testes de operações de edição no DOM.
Começando pelo quarto teste, onde é feita uma atualização no texto da primeira linha a cada 10 linhas em uma tabela com 1000 linhas, o Angular lidera requerendo apenas 17ms completar a tarefa, 43ms a menos que React seu adversário mais próximo, sendo até três vezes mais performático que seus competidores. React e Vue se mantém equiparados na tarefa, levando 60ms e 61ms para completá-la, respectivamente.
Já no quinto teste, onde a posição da primeira e última linha em uma tabela com 1000 linhas é trocada, o Vue demonstra mais desempenho que seus competidores, levando 52ms, 68ms a menos que Angular, que levou 120ms para completar. React fica em último com 152ms necessários para finalizar.
17
120,25 60,5
150 61,75
52
0 20 40 60 80 100 120 140 160
Teste 4
Teste 5
MILISSEGUNDOS (MS)
Angular React Vue
Gráfico 4 - Comparação de desempenho nos testes 6 e 7 entre os frameworks, apresentando a média dos resultados de cada teste
Fonte: Elaboração do autor, 2021.
A comparação agora se volta ao desempenho dos frameworks em operações de remoção no DOM, com os resultados apresentados no Gráfico 4. No sexto teste, que remove todas as linhas da tabela com 1000 linhas, o React oferece o maior desempenho com 81ms necessários para finalizar a tarefa, seguido de Vue com 101ms. Angular fica um pouco atrás de Vue levando 110ms para concluir a tarefa.
O sétimo teste, que remove apenas uma linha da tabela com 1000 linhas, o Angular abre uma vantagem enorme, necessitando apenas 13ms para completar a tarefa, obtendo até cinco vezes mais performance que seus adversários. React e Vue ficaram equiparados em mais um teste, levando 72ms e 73ms para concluir a tarefa, respectivamente. A enorme vantagem do Angular neste teste se dá pelo fato de ser uma tarefa que se beneficia da manipulação direta no DOM real, enquanto os outros frameworks utilizam um DOM virtual.
110,75
13,5
81
72,25
101,75
73
0 20 40 60 80 100 120
Teste 6
Teste 7
MILISSEGUNDOS (MS)
Angular React Vue
Gráfico 5 - Comparação de desempenho no teste 8 entre os frameworks, apresentando a média dos resultados de cada teste
Fonte: Elaboração do autor, 2021.
No Gráfico 5 é apresentado os resultados da última comparação de desempenho, que avalia a performance de manipulação de estado dos elementos no DOM. No oitavo e último teste, onde é selecionado uma linha na tabela com 1000 linhas, o Angular lidera, requerendo apenas 7ms para realizar a tarefa, novamente sendo cinco vezes mais performático que seu adversário mais próximo, o Vue, que levou 38ms. React mostrou a pior performance entre os competidores, sendo necessário 65ms para concluir a tarefa. Neste teste, além do Angular demonstrar mais desempenho em seu gerenciamento de estados, ele também se beneficia novamente da manipulação direta do DOM real.
O Angular obteve liderança com bastante vantagem na maioria dos testes, enquanto React e Vue dividiram a liderança igualmente no restante dos testes. A abordagem de não utilizar um DOM virtual e realizar as manipulações diretamente no DOM real pode ser o motivo de seu alto desempenho em operações simples de manipulação e gerenciamento de estados. E apesar de não liderar nos outros testes, seu desempenho ainda foi satisfatório. Vue também demonstrou um bom desempenho em comparação com seus adversários em operações que manipulam vários elementos, obtendo altas vantagens nos dois testes em que ele lidera. Apesar de também liderar em dois testes, React não apresenta muita vantagem, muitas vezes ficando lado a lado com Vue em termos de desempenho.
5 CONCLUSÃO
A decisão de um framework dependerá de vários fatores: importância do desempenho, escala do projeto, conhecimento da equipe, experiências anteriores etc., e como não existe um
7,5
framework que resolva todos os problemas serão feitas algumas recomendações para certos casos de uso baseadas nos resultados das comparações feitas neste trabalho.
Os três frameworks são recomendados para aplicações de larga escala, sendo que escalabilidade foi um dos objetivos na criação e desenvolvimentos de Angular, React e Vue. O Angular é recomendado para equipes que tenham histórico ou experiência com linguagens orientadas a objetos, ou até apreciação pela linguagem TypeScript. Angular também é recomendado para empresas ou equipes que preferem uma ênfase na estrutura entre vários projetos. Em contraponto, React e Vue oferecem mais flexibilidade na estrutura, organização e desenvolvimento de aplicações web, o que pode ser benéfico em alguns projetos.
React é recomendado para quem busca um grande ecossistema, com uma comunidade gigante e grande variedade de soluções para problemas web. Também é recomendado para equipes com um grande foco ou experiência em JavaScript. Para designers que precisem trabalhar com código HTML, Angular e Vue são facilmente adotáveis. Por fim, Angular é recomendado para aplicações que buscam alto desempenho.
É importante lembrar que essas são apenas recomendações e que cada framework deve ser cuidadosamente avaliado no contexto em que ele vai ser usado, dando o devido peso a cada métrica aqui apresentada.
REFERÊNCIAS
ANGULAR. Introduction to the Angular Docs. Disponível em: https://angular.io/docs. [S.
l., 2021a]. Acesso em: 23 mai. 2021.
ANGULAR. Angular contributors. Disponível em: https://angular.io/about?group=Angular.
[S. l., 2021b]. Acesso em: 18 set. 2021.
ANGULAR. Angular. Disponível em: https://angular.io/. [S. l., 2021c]. Acesso em: 19 set.
2021.
BLACKWOOD, Benjamin; RAMBEAU, Michael. 2020 JavaScript Rising Stars.
Disponível em: https://risingstars.js.org/2020/en#section-framework. Osaka, Japan, 2020.
Acesso em: 23 mai. 2021.
CROMWELL, Vivian. Between the Wires: An interview with Vue.js creator Evan You.
Disponível em: https://www.freecodecamp.org/news/between-the-wires-an-interview-with-vue-js-creator-evan-you-e383cbf57cc4/. [S. l.], 2017. Acesso em: 23 mai. 2021.
ECMA INTERNATIONAL. ECMAScript ® 2021 Language Specification. Disponível em:
https://262.ecma-international.org/12.0/. [S. l., 2021]. Acesso em: 22 ago. 2021.
GITHUB. About. Disponível em: https://github.com/about. [S. l., 2021a]. Acesso em: 14 ago.
2021.
GITHUB. Saving repositories with stars. Disponível em: https://docs.github.com/en/get-started/exploring-projects-on-github/saving-repositories-with-stars. [S. l., 2021b]. Acesso em:
14 ago. 2021.
GITHUB. About issues. Disponível em: https://docs.github.com/en/issues/tracking-your-work-with-issues/about-issues. [S. l., 2021c]. Acesso em: 14 ago. 2021.
GORE, Anthony. What's The Deal With Vue's Virtual DOM?. Disponível em:
https://vuejsdevelopers.com/2017/02/21/vue-js-virtual-dom/. [S. l.], 2017. Acesso em: 22 ago.
2021.
GUDELLI, Arunkumar. History of AngularJs. Disponível em:
https://www.angularjswiki.com/angular/history-of-angularjs/. [S. l.], 2019. Acesso em: 23 mai. 2021.
NPM. About npm. Disponível em: https://docs.npmjs.com/about-npm. [S. l., 2021]. Acesso em: 14 ago. 2021.
OCCHINO, Tom. React.js Conf 2015 Keynote - Introducing React Native. Disponível em:
https://youtu.be/KVZ-P-ZI6W4. [S. l.], 2015. Acesso em: 23 mai. 2021.
STACKSHARE. Why developers like AngularJS. Disponível em:
https://stackshare.io/angularjs. [S. l., 2021a]. Acesso em: 23 mai. 2021.
STACKSHARE. Why developers like Angular 2. Disponível em:
https://stackshare.io/angular-2. [S. l., 2021b]. Acesso em: 23 mai. 2021.
STACKSHARE. Why developers like React. Disponível em: https://stackshare.io/react. [S.
l., 2021c]. Acesso em: 23 mai. 2021.
STACKSHARE. Why developers like Vue.js. [S. l., 2021d]. Disponível em:
https://stackshare.io/vue-js. Acesso em: 23 mai. 2021.
STACKOVERFLOW. Stack Overflow company page. [S. l., 2021]. Disponível em:
https://stackoverflow.com/company. Acesso em: 14 ago. 2021.
STATISTA. Global digital population as of January 2021. Disponível em:
https://www.statista.com/statistics/617136/digital-population-worldwide/. [S. l.], 2021.
Acesso em: 22 mai. 2021.
REACTJS. Tutorial: Intro do React. Disponível em:
https://reactjs.org/tutorial/tutorial.html#what-is-react. [S. l., 2021a]. Acesso em: 23 mai. 2021.
REACTJS. Team. Disponível em: https://reactjs.org/community/team.html. [S. l., 2021b].
Acesso em: 18 set. 2021.
REACTJS. React – A JavaScript library for building user interfaces. Disponível em:
https://reactjs.org/. [S. l., 2021c]. Acesso em: 19 set. 2021.
ROBIE, Jonathan; RESEARCH, Texcel. What is the Document Object Model?. Disponível em: https://www.w3.org/TR/WD-DOM/introduction.html. [S. l., 1998]. Acesso em: 22 ago.
2021.
VUEJS. Meet the team. Disponível em: https://v3.vuejs.org/community/team.html. [S. l., 2021a]. Acesso em: 18 set. 2021.
VUEJS. Sponsor Vue.js Development. Disponível em: https://v3.vuejs.org/support-vuejs/#current-premium-sponsors. [S. l., 2021b]. Acesso em: 19 set. 2021.
VUEJSBR-DOCS-NEXT. Introdução | Vue.js. Disponível em: https://vuejsbr-docs-next.netlify.app/guide/introduction.html. [S. l., 2021]. Acesso em: 23 mai. 2021.
WHATWG. DOM Standard. Disponível em: https://dom.spec.whatwg.org. [S. l.], 2021.
Acesso em: 22 ago. 2021.