Comparação de Frameworks JavaScript para Desenvolvimento Web

Prévia do material em texto

COMPARAÇÃO DOS PRINCIPAIS FRAMEWORKS JAVASCRIPT PARA 
DESENVOLVIMENTO WEB 
COMPARISON OF THE MAIN JAVASCRIPT FRAMEWORKS FOR WEB 
DEVELOPMENT 
 
Ademir José Ferreira Júnior 
 
Resumo: A quantidade de opções de frameworks web disponíveis é enorme, a todo momento 
um novo framework é criado com o objetivo de resolver problemas encontrados no 
desenvolvimento web, cada um com escopos e abordagens diferentes. Em meio a tantas opções 
a tarefa de escolher o framework certo para o seu tipo de aplicação ou para começar o 
aprendizado pode se tornar difícil, vários aspectos devem ser considerados: popularidade, 
comunidade, desempenho etc. Para auxiliar na escolha, os principais frameworks web 
disponíveis no mercado submetidos a uma análise comparativa, onde foram avaliados sob 
diversas métricas, tiveram seus resultados discutidos e recomendações foram formuladas para 
alguns objetivos e contexto. 
 
Palavras-chave: Desenvolvimento web. JavaScript framework. Análise comparativa. 
 
Abstract: The amount of web frameworks options available is huge, every moment a new 
framework is created to resolve problems encountered in web development, each with its own 
scopes and approach. Among so many options the task of choosing a fitting framework for your 
application or to start learning can be difficult, various aspects must be considered: popularity, 
community, performance etc. To help making the choice, the leading web frameworks available 
in the market are subjected to a comparative analysis, where they were evaluated through 
several metrics, had their results discussed and recommendations were made to some objectives 
and context. 
 
 
 
 Artigo apresentado como requisito parcial para a conclusão do curso de Graduação em Ciência 
da Computação da Universidade do Sul de Santa Catarina – UNISUL. Orientador: Prof. 
Clávison M. Zapelini 
 Acadêmico do curso Ciência da Computação da Universidade do Sul de Santa Catarina – 
Unisul. E-mail: ademirj.ferreirajunior@gmail.com 
 2 
Keywords: Web development. JavaScript framework. Comparative analysis. 
1 INTRODUÇÃO 
Segundo o site de estatísticas Estatisca (2021), mais da metade da população mundial, 
59.5%, tem acesso à Internet por conexão móvel ou banda larga em 2021, e com a quantidade 
de usuários aumentando a cada ano, a Internet fica cada vez mais presente no cotidiano da nossa 
sociedade. Os navegadores são a principal via de interação entre o usuário e a Internet, eles 
permitem navegar e acessar documentos e recursos disponíveis no sistema de informações 
World Wide Web (WWW). Essas informações são acessadas na forma de sites/aplicações web, 
construídas com tecnologias que podem ser interpretadas pelos navegadores: HTML, CSS e JS. 
HyperText Markup Language (HTML) é usada para definir a estrutura de uma aplicação 
web, utilizando elementos de marcação para anotar textos, imagens, links etc., para exibição no 
navegador, além de ser responsável pela gerência de dependências da aplicação. Cascading 
Style Sheets (CSS) é usada para descrever a apresentação dos elementos anotados em HTML, 
definindo aparências e posições. JavaScript (JS) é uma linguagem de programação usada para 
criar e manipular o conteúdo da aplicação dinamicamente. HTML e CSS são tecnologias 
relativamente simples, elas servem majoritariamente para construir o conteúdo estático da 
aplicação. Já o JS é uma tecnologia mais complexa, sua função na aplicação possui um escopo 
maior, o que reflete na quantidade de ferramentas, bibliotecas e frameworks criadas para 
gerenciá-la. 
Tradicionalmente, as aplicações web eram servidas como aplicações de múltiplas 
páginas (MPA), onde o documento HTML, que contém todo o código do aplicativo, é carregado 
toda vez que o usuário troca de página. Este modelo de aplicação, apesar de ainda ser usado em 
aplicações com bastante conteúdo estático, vem perdendo popularidade para uma alternativa 
mais rápida, o modelo de aplicações de página única (SPA). Diferente do modelo tradicional, 
o modelo SPA carrega o documento HTML uma única vez, e conforme o usuário interage com 
a aplicação apenas partes necessárias são carregadas e modificadas dinamicamente, reduzindo 
bastante o tempo de carregamento e tornando a experiência do usuário mais fluida. 
Com a popularidade do modelo SPA cada vez maior, ferramentas para auxiliar no 
desenvolvimento de aplicações dentro desse modelo começaram a ser criadas. Uma das 
ferramentas mais importantes no desenvolvimento web são os frameworks JavaScript, que 
auxiliam o desenvolvedor oferecendo várias soluções para problemas comumente encontrados 
no ambiente web. A comparação destas ferramentas será o foco deste trabalho. 
 3 
 
1.1 OBJETIVOS 
Este trabalho propõe uma análise comparativa entre os três principais frameworks 
JavaScript disponíveis, avaliando-os sob várias métricas, discutindo seus resultados e 
concluindo com recomendações para alguns objetivos e contextos. Os frameworks foram 
escolhidos por critério de popularidade, e de acordo com Blackwood e Rambeau (2020) na 
quinta edição do JavaScript Rising Stars, os três frameworks JavaScript que mais cresceram 
em 2020 são: Vue, React e Angular. 
Os resultados deste trabalho são de interesse especialmente para desenvolvedores web 
que precisam escolher um framework JavaScript para o desenvolvimento de um projeto web 
ou para a iniciação de aprendizado. Também pode servir como referência para profissionais ou 
empresas na área preocupados com o desempenho e eficiência de aplicações construídas nesses 
frameworks. 
1.1.1 Objetivo geral 
Comparar os frameworks JavaScript: React, Vue e Angular, avaliando suas vantagens e 
desvantagens para o desenvolvimento web. 
1.1.2 Objetivos específicos 
• Definir métricas de avaliação e comparação; 
• Definir ferramentas de desenvolvimento, testes e avaliação; 
• Definir e desenvolver um ou mais projetos para medição das métricas em cada 
framework; 
• Medir e avaliar as métricas; 
• Avaliar as vantagens e desvantagens de cada framework. 
2 FRAMEWORKS 
Os Frameworks são ferramentas que oferecem soluções para problemas encontrados em 
um ambiente de desenvolvimento, provendo funções de ajuda e tomando decisões que facilitem 
 4 
o trabalho do desenvolvedor. No ambiente web eles oferecem soluções para problemas como 
estratégias de roteamento, compilação, gerenciamento de estados etc., além de estruturar e gerar 
arquivos e configurações do projeto. 
Frameworks e bibliotecas são termos muitas vezes usados de maneira intercambiável, o 
React, por exemplo, se define como uma biblioteca, mas é muitas vezes referenciado e utilizado 
como um framework. Uma biblioteca é simplesmente uma coleção de códigos que pode ser 
facilmente integrada em um projeto já existente para agilizar o seu desenvolvimento, 
oferecendo classes, funções, scripts etc. Um framework pode utilizar bibliotecas, tanto para uso 
interno em seu ambiente como também pode deixá-las disponíveis para serem utilizadas pelo 
desenvolvedor. Como React será analisado como um framework neste trabalho e não como uma 
biblioteca, ele será chamado de framework. 
Os três frameworks que serão analisados neste trabalho utilizam a arquitetura Modelo-
Visão-Controle (MVC), onde cada componente descreve a sua própria interface de usuário (UI), 
atualizando a UI conforme os seus dados internos mudam. 
2.1 ANGULAR 
Entre 2008 e 2009, três desenvolvedores da Google estavam a 6 meses construindo uma 
aplicação de feedback utilizando o Google Web Toolkit, um framework interno da Google 
escrito em Java. Ao longo do desenvolvimento da aplicação ficou evidente que o framework 
não escalava muito bem, como é dado em um exemplo, para um label HTML ser testado ele 
precisava ser escrito em Java depois compilado e transformado em HTML e JS para que o 
navegador pudesse executar o código resultante, o que acabava dificultando o desenvolvimento 
e a execução de testes. Diantedeste problema, Misko Hevery, um dos desenvolvedores, 
desafiou seu superior a deixá-lo escrever a aplicação sozinho em duas semanas, utilizando uma 
ferramenta que ele e seu amigo Adam Brons haviam construído. O superior de Misko, Brad 
Green, aceitou o desafio, mas só recebeu a aplicação três semanas depois, mesmo assim ficou 
impressionado com o resultado de Misko. Apesar de Brad Green já ter publicado uma API 
estável do Angular em agosto de 2010, somente em maio de 2011 a ferramenta foi oficialmente 
publicada no GitHub como software de código aberto sobe o nome de AngularJS, segundo 
Adam, “Angular” vem do fato do HTML utilizar bastante colchetes angulares (<>) em sua 
sintaxe (GUDELLI, 2019). 
Em 2014, o framework foi reescrito do zero para se adequar aos novos padrões que 
estavam surgindo no ambiente de desenvolvimento web, com a mudança radical de várias APIs 
 5 
e conceitos, ele ficou incompatível com versões anteriores, para amenizar a confusão essa nova 
versão foi lançada como Angular. 
Em sua documentação, o Angular (2021a) se descreve como um framework e plataforma 
de desenvolvimento para criação de aplicações de única página de maneira eficiente e 
sofisticada. Segundo o site Stackshare (2021a, 2021b). Angular é utilizado por mais de 7 mil 
empresas, incluindo Google, Nike e HBO. 
2.2 REACT 
Em 2011 o aplicativo Facebook Ads estava sendo desenvolvido por uma equipe interna 
do Facebook, com a escala do aplicativo aumentando a sua manutenção foi ficando cada vez 
mais difícil. Para minimizar este problema, Jordan Walke, um engenheiro de software que 
trabalhava no Facebook, desenvolveu uma biblioteca protótipo chamada FaxJS. A biblioteca 
tornou o desenvolvimento do aplicativo mais eficiente, cumprindo seu objetivo a biblioteca 
começou a ser aprimorada (OCCHINO, 2015). Em 2012 ela foi utilizada para implementar o 
Instagram e em maio de 2013 ela foi publicada no GitHub como software de código aberto sob 
o nome de React. 
Atualmente, em sua documentação React se define como: “O React é uma biblioteca 
JavaScript declarativa, eficiente e flexível para criar interfaces com o usuário. Ele permite 
compor UIs complexas a partir de pequenos e isolados códigos chamados ‘componentes’.” 
(REACTJS, 2021a). Mais de 9 mil empresas, incluindo Facebook, Uber, e Netflix, utilizam o 
framework segundo o site Stackshare (2021c). 
2.3 VUE 
Ethan You trabalhava na Google com prototipagem de interfaces para web, em vários 
projetos era utilizado o framework Angular. Apesar de reconhecer várias vantagens, Ethan 
considerava o Angular um framework muito pesado e restritivo. Então, extraindo partes que 
gostava da ferramenta, Ethan desenvolveu um framework mais leve e flexível. Em fevereiro de 
2014 o framework foi publicado no GitHub como software de código aberto sob o nome de Vue 
(CROMWELL, 2017). 
Em sua documentação, Vue se descreve como: 
 
Vue [...] é um framework progressivo para a construção de interfaces de usuário. [...] 
Vue foi projetado desde sua concepção para ser adotável incrementalmente. A 
 6 
biblioteca principal é focada exclusivamente na camada visual (view layer), sendo 
fácil adotar e integrar com outras bibliotecas ou projetos existentes. Por outro lado, 
Vue também é perfeitamente capaz de dar poder a sofisticadas Single-Page 
Applications quando usado em conjunto com ferramentas modernas e bibliotecas de 
apoio. (VUEJSBR-DOCS-NEXT, 2021) 
 
De acordo com o site Stackshare (2021d) mais de 3 mil empresas, incluindo Xiaomi, 
Alibaba e 9GAG utilizam Vue em suas aplicações. 
3 METODOLOGIA 
Para realizar a análise comparativa os frameworks serão medidos sob várias métricas, 
tendo seus resultados avaliados e discutidos. Na análise serão empregados tanto o método 
quantitativo, para métricas mais técnicas como popularidade e desempenho, como o método 
qualitativo, para métricas subjetivas como curva de aprendizagem e documentação. O trabalho 
concluirá com recomendações feitas com base nas discussões e resultados que podem auxiliar 
na escolha de um framework ideal para algumas situações. 
3.1 MÉTRICAS 
3.1.1 Popularidade 
Popularidade é um indicativo direto da utilização do framework em aplicações do 
mundo real, uma popularidade alta pode demonstrar que as necessidades de organizações e/ou 
indivíduos estão sendo atendidas por ele. Aplicações populares lançadas por grandes 
organizações, especialmente organizações que compartilham a mesma linha de mercado que 
você ou sua empresa, devem ser consideradas cuidadosamente. 
Para avaliar essa métricas serão coletados e analisados vários dados das principais 
plataformas na indústria de desenvolvimento, como NPM, GitHub e Stack Overflow. Além de 
serem mencionadas algumas empresas e aplicações do mundo real que utilizam os frameworks. 
3.1.1.1 NPM 
O Node Package Manager (NPM) é o maior gerenciador de softwares do mundo, 
permitindo que desenvolvedores do mundo todo compartilhem e utilizem vários pacotes de 
código aberto, além de também ser usado por várias organizações como gerenciador de projetos 
 7 
privados (NPM, 2021). A plataforma serve como a principal maneira de se obter várias 
bibliotecas e frameworks de desenvolvimento web. 
Analisando a quantidade de downloads mensais dos últimos dois semestres de cada 
framework na plataforma NPM é possível obter algumas informações sobre suas tendências. 
3.1.1.2 GitHub 
O Github (2021a) se apresenta como a plataforma de desenvolvimento mais avançada 
do mundo, tendo mais de 65 milhões de usuários, mais de 3 milhões de organizações, e 
hospedando mais de 200 milhões de repositórios. A grande comunidade diversificada de 
desenvolvedores faz do GitHub uma fonte confiável e única para se analisar a popularidade de 
várias tendências na área de desenvolvimento. 
Usuários da plataforma podem marcar repositórios que lhe interessam com estrelas para 
tornar mais fácil achá-lo no futuro, além de mostrar interesse e apreciação no trabalho dos 
colaboradores. Ao marcar o repositório, o usuário também começa a receber recomendações de 
projetos similares na plataforma (GITHUB, 2021b). 
O GitHub também oferece um rastreador de bugs integrado, chamado Issues, ele facilita 
na manutenção de tarefas e compartilhamento com toda a equipe (GITHUB, 2021c). A 
quantidade de problemas abertos no Issues pode indicar a complexibilidade e escala do projeto, 
assim como o suporte da comunidade. 
3.1.1.3 Stack Overflow 
Stack Overflow é uma plataforma de perguntas e respostas que conecta a comunidade 
global de desenvolvedores, permitindo que desenvolvedores compartilhem código e ajudem 
uns aos outros. A plataforma obtém mais de 100 milhões de visitas mensalmente, com mais de 
21 milhões de perguntas respondidas (STACKOVERFLOW, 2021). 
Analisando a quantidade de perguntas feitas para cada framework pode indicar qual é 
mais usado e discutido, mas é importante levar em consideração que frameworks mais 
complexos podem ter mais questões. 
 8 
3.1.2 Comunidade 
Um framework pode ser bem popular, mas sua comunidade pode ser pequena ou estar 
em declínio, o que pode indicar que ele está evoluindo em uma direção não desejada ou não 
está evoluindo. Ao adotar um framework o indivíduo ou organização corre vários riscos, um 
deles é o abandono pelos seus criadores e/ou comunidade, deixando-os com poucas opções. 
Portanto, deve servir como um bom indicador quando uma empresa oferece apoio financeiro a 
um framework, pois isso ajuda a manter seus colaboradores envolvidos e diminui os riscos que 
ele apresenta. 
Nesta métrica será analisado alguns fatores que colaboram para o tamanho da 
comunidade do framework, um deles é a quantidade de pacotes dependentes disponíveis no 
NPM, que podem ser bibliotecas ou plugins, outro é o tamanho da equipe principal. Também 
será documentado quais os incentivos e suporte financeiro que cada framework obtém. 
3.1.3 Recursos, Flexibilidade e Suporte 
Os três frameworksa serem analisados aqui foram criados para resolver problemas, com 
objetivos específicos que influenciaram em suas evoluções ao longo dos anos. Cada um tem 
um escopo, com algumas funcionalidades incluídas nativamente, e outras deixadas para serem 
incluídas como extensão. A automatização de tarefas de desenvolvimento também é importante 
ao utilizar um framework, ela permite ao desenvolvedor abstrair partes do processo de 
desenvolvimento, aumentando sua produtividade. 
Nesta métrica será documentado o escopo do framework, suas funcionalidades 
disponíveis, sendo elas nativas ou extensões, assim como sua flexibilidade e ferramentas de 
suporte. 
3.1.4 Curva de aprendizagem e Documentação 
A curva de aprendizagem de um framework pode ser um fator importante a ser 
considerado. Essa curva inclui o nível de conhecimentos previamente necessários para iniciar 
o aprendizado e a complexibilidade dos conceitos utilizados pelo framework. O nível de 
conhecimentos requeridos varia entre conceitos mais simples de desenvolvimento web, como 
HTML, JS e CSS, até conceitos mais avançados, como TypeScript (TS). 
 9 
Essa métrica abordará quais conhecimentos e conceitos são necessários para utilizar o 
framework, analisando as suas documentações disponíveis oficialmente. 
3.1.4.1 Versionamento do JavaScript e TypeScript 
O JavaScript possui várias versões, que se diferenciam entre si pela disponibilidade de 
recursos, funcionalidades e sintaxe. As várias implementações de JavaScript são padronizadas 
pelo ECMA-262, um documento publicado pela organização Ecma International que contêm a 
especificação para linguagens de script, conhecido como ECMAScript (ES) (ECMA 
INTERNATIONAL, 2021). O ES está em desenvolvimento contínuo desde a sua primeira 
edição, em 1997, inicialmente tendo um intervalo entre edições longo, o que contribuiu para 
que a quinta edição (ES5) ficasse bastante popular e consolidada no desenvolvimento web. Em 
2015 a sexta edição (ES6) foi publicada, e dela em diante novas edições passaram a ser 
publicadas anualmente, sendo sua versão mais recente a ES12. 
Quando é preciso manter compatibilidade com navegadores mais antigos, códigos feitos 
em versões mais recentes precisam ser convertidos para código de versões anteriores, esse 
processo é chamado de transpiling. Como o ES5 foi a versão usada por muito tempo, ela acaba 
sendo um alvo frequente de transpilings. 
 
Figura 1 - Relação entre ECMAScript e TypeScript 
 
Fonte: Elaboração do autor, 2021. 
 
Enquanto React e Vue são construídos em volta da linguagem JavaScript, Angular 
utiliza conceitos e é escrito na linguagem TypeScript. A linguagem TypeScript foi criada pela 
Microsoft como um superset de JavaScript, com o objetivo de ser uma linguagem mais robusta 
para aplicações escaláveis. A mudança mais evidente na linguagem é a introdução de um 
sistema de verificação estática de tipos, conhecida como static typing, que adiciona uma camada 
a mais de segurança ao código. Como é representado na Figura 1, o TypeScript é uma extensão 
do ES, portanto também pode ser convertido para várias versões de JavaScript. 
 10 
3.1.5 Desempenho 
O desempenho de uma aplicação pode ser importante para o seu sucesso, pois muitas 
vezes ela precisa ser eficiente o suficiente para ter uma execução fluida em sistemas e/ou redes 
de baixa performance. Enquanto o desempenho de modo geral depende do próprio 
desenvolvimento da aplicação, o framework em que ela é construída pode influenciar. 
Nesta métrica será analisado o desempenho do framework através de vários testes de 
operações no DOM por aplicações desenvolvidas e implementadas igualmente em cada 
competidor. 
3.1.5.1 DOM 
Figura 2 - Relações entre o JS, DOM e HTML 
 
Fonte: Elaboração do autor, 2021. 
 
DOM é uma interface de programação que dá acesso dinâmico a estrutura, estilo e 
conteúdo de um documento web, oferecendo um modelo interativo do documento HTML e 
permitindo que qualquer linguagem compatível possa manipulá-lo. A Figura 2 mostra como 
acontecem as relações entre o JS, DOM e HTML. 
A maioria dos navegadores implementam nativamente o DOM padronizado pela World 
Wide Web Consortium (W3C), onde o DOM é criado a partir do momento que o documento 
HTML é analisado, deixando-o disponível para manipulação (WHATWG, 2021). Através das 
ferramentas de desenvolvedor disponíveis em vários navegadores é possível visualizar o DOM 
atual. No Google Chrome, por exemplo, é possível visualizar uma representação do DOM na 
aba “Elementos” das ferramentas de desenvolvedor, que pode ser aberta clicando com o botão 
 11 
direito do mouse em qualquer elemento da aplicação e selecionando a opção “Inspecionar”, 
dando foco ao elemento inspecionado. 
 
Figura 3 - Representação de como um documento HTML é tratado no DOM 
 
Fonte: Elaboração do autor, 2021. 
 
Como é representado na Figura 3, o DOM trata o HTML como uma coleção de objetos 
organizados em uma estrutura de árvore, onde cada nodo é um objeto que representa um 
elemento HTML, como <html>, <head>, <body>, etc. O documento HTML da aplicação é 
carregado pelo navegador e sua representação no DOM fica disponível através do objeto 
document, que é o principal ponto de acesso do documento para várias linguagens. No objeto 
document ficam disponíveis várias funções interativas que manipulam o documento HTML 
 12 
conforme são utilizadas, permitindo adicionar, remover e alterar os elementos, atributos e 
eventos HTML, além de manipular estilos CSS (ROBIE, RESEARCH, 2021). 
O DOM é bem importante nesta métrica, pois cada framework tem sua própria 
abordagem na implementação de interações com o objeto, portanto ao executar diferentes 
operações no DOM podemos avaliar o desempenho de cada implementação. 
3.1.5.2 Virtual DOM 
Uma implementação de interação com o DOM utilizada e popularizada por vários 
frameworks, incluindo React e Vue, é o Virtual DOM. Nesta implementação é criado um objeto 
representando uma versão leve do DOM que oferece maneiras mais eficientes e simplificadas 
de interação, evitando que o desenvolvedor interaja manualmente com DOM real. 
O principal motivo da utilização de um DOM virtual é mitigar o custo de atualizações, 
evitando atualizações frequentes diretamente no DOM real. Quando o conteúdo do DOM 
virtual é modificado ele é comparado com o conteúdo do DOM real e então o DOM real atualiza 
apenas os nodos modificados de maneira eficiente (GORE, 2017). 
3.1.5.3 Projeto 
Para medir o desempenho dos frameworks será projetado uma aplicação, que permitirá 
a execução intencional de várias operações no DOM. Essa aplicação será desenvolvida em 
todos os frameworks com a mesma lógica e visual. 
 
Figura 4 - Protótipo da aplicação para testes 
 
Fonte: Elaboração do autor, 2021. 
 13 
 
Como é apresentado na Figura 4, a aplicação possuirá uma série de ações, que irão 
auxiliar na execução dos testes, e uma tabela, que terá suas linhas modificadas ao longo dos 
testes. Cada linha da tabela representa um elemento das listas de dados fictícios que vão ser 
geradas e modificadas durante os testes, exibindo o identificador e texto do elemento, além de 
uma ação para removê-lo da lista. Também será possível selecionar uma linha da tabela, com 
um efeito visual indicando seu estado de seleção. 
As ações planejadas para a execução dos testes são as seguintes: 
a) criar 1000 linhas na tabela; 
b) criar 10000 linhas na tabela; 
c) inserir 1000 linhas a tabela; 
d) atualizar texto a cada 10 linhas da tabela; 
e) trocar a primeira linha com a última da tabela; 
f) limpar todas as linhas da tabela. 
 14 
3.1.5.4 Testes 
Figura 5 - Especificações do dispositivo e sistema usado para a execução dos testes 
 
Fonte: Elaboração do autor, 2021. 
 
Para a realização dos testes as aplicações serão servidas localmente, e os testes 
executados no navegador Google Chrome. Como mostrado na Figura 5, o dispositivo que será 
usado paraexecutar os testes possui o processador i5 3330 com uma frequência de 3GHz, 8GB 
de memória RAM, e o sistema operacional Windows 10 Pro. 
Os resultados dos testes serão obtidos a partir da ferramenta “Desempenho” das 
ferramentas de desenvolvedor disponíveis no navegador Google Chrome, e serão apresentados 
com unidades de medida em milissegundos (ms). O objetivo é avaliar o desempenho de cada 
framework em operações no DOM, essas operações variam entre criação, atualização, inserção, 
e remoção de elementos. Os testes serão executados quatro vezes após a aplicação carregar 
totalmente, evitando anomalias nos resultados. 
3.1.5.4.1 Teste 1: Criação de 1000 linhas 
 15 
Cria 1000 linhas na tabela vazia. Neste teste é possível avaliar o desempenho do 
framework ao criar e configurar os 8000 elementos no DOM. 
3.1.5.4.2 Teste 2: Criação de 10000 linhas 
Cria 10000 linhas na tabela vazia. Uma versão mais pesada do teste anterior, onde o 
framework tem que criar e configurar 80000 elementos no DOM. Apesar de ser um número 
exagerado de elementos, esse teste pode ser útil para mostrar a eficiência do framework 
conforme o número de elementos criados no DOM aumenta. 
3.1.5.4.3 Teste 3: Inserção de 1000 linhas 
Insere 1000 linhas na tabela com 10000 linhas. Este teste avalia o desempenho do 
framework ao processar a inserção e configuração de 8000 elementos no DOM quando já se 
tem vários elementos montados. 
3.1.5.4.4 Teste 4: Atualização parcial 
Modifica o texto de uma linha a cada 10 linhas de uma tabela com 1000 linhas. Neste 
teste é possível avaliar o desempenho do framework ao alterar os 100 elementos no DOM. 
3.1.5.4.5 Teste 5: Troca de linhas 
Troca a primeira linha pela última linha na tabela com 1000 linhas. Avalia o 
desempenho do framework ao verificar a diferença entre duas listas de elementos e atualizar no 
DOM apenas os elementos modificados. 
3.1.5.4.6 Teste 6: Remoção de linhas 
Remove todas as linhas da tabela com 1000 linhas. Testa o desempenho do framework 
em identificar os elementos que precisam ser removidos e removê-los. 
3.1.5.4.7 Teste 7: Remoção de linha 
 16 
Remove a linha 500 da tabela com 1000 linhas. Testa o desempenho do framework em 
identificar o elemento que precisa ser removidos e removê-lo. 
3.1.5.4.8 Teste 8: Seleção de linha 
Seleciona a linha 500 no meio da tabela com 1000 linhas. Este teste avalia o desempenho 
do framework na checagem e atualização de estados em diferentes elementos. 
4 COMPARAÇÃO 
4.1 POPULARIDADE 
Algumas das primeiras dúvidas antes de começar a aprender ou usar um framework são: 
o quão usado é o framework? quais aplicações do mundo-real estão o utilizando? quais 
empresas investiram no seu uso? Para esclarecer estas dúvidas serão analisados alguns dados 
referentes a popularidade de cada framework, além de serem mencionadas aplicações e 
empresas que os utilizem. 
 
 17 
Gráfico 1 - Quantidade de downloads no NPM por mês, dos últimos dois semestres até junho 
de 2021 
 
Fonte: Elaboração do autor, 2021. 
 
Podemos ver no Gráfico 1, os três frameworks são bem populares, acumulando milhões 
em downloads mensais no NPM, fica evidente que o React é o líder em adoção pública, estando 
a frente de seus adversários por mais de 30 milhões de downloads mensais. Angular e Vue estão 
competindo lado a lado acumulando em volta de 10 milhões de downloads mensais cada. 
A imensa vantagem do React pode ter relação com a grande quantidade de bibliotecas 
disponíveis para o framework, que adicionam funcionalidades extras ao seu fluxo de 
desenvolvimento, enquanto o Angular oferece várias destas funcionalidades embutidas, mas, 
sem dúvidas, o React mostra uma vantagem significativa a frente de seus adversários. 
 
Tabela 1 - Estatísticas do repositório de cada framework no GitHub, de 2021. 
 Angular React Vue 
Estrelas ~76k ~175k ~188k 
Problemas abertos ~1930 ~830 ~530 
Fonte: Elaboração do autor, 2021. 
 
0
10
20
30
40
50
M
IL
H
Õ
ES
Angular React Vue
 18 
Observando a Tabela 1, podemos ver uma diferença de liderança do último resultado, 
Vue lidera no número de estrelas, com 188 mil estrelas, um pouco à frente do React, com 175 
mil, enquanto Angular fica bem atrás, com 76 mil estrelas, mais da metade a menos de estrelas 
que seus adversários. Já na questão de problemas abertos, o Angular acumula 1930 problemas 
abertos, mais que o dobro do React, com 830, e o Vue ficando apenas com 530. 
Deve ser considerado que os dados do GitHub podem ter um pequeno viés, pois 
frameworks mais complexos podem ter mais problemas abertos enquanto os mais antigos 
tiveram mais tempo de acumular seguidores. 
Angular sendo o mais antigo pode explicar a grande quantidade de problemas abertos 
em seu repositório, mas observando os dados podemos concluir que o Angular é o menos 
popular no GitHub e o mais problemático, enquanto Vue é o mais popular e o menos 
problemático, seguido do React. 
 
Tabela 2 - Quantidade de questões feitas no Stack Overflow para cada framework, de 2021. 
 Angular React Vue 
Questões ~260k ~330k ~83k 
Fonte: Elaboração do autor, 2021. 
 
Com 330 mil questões feitas no Stack Overflow, React lidera em popularidade na 
plataforma dentre seus competidores, seguido de Angular com 260 mil e Vue com apenas 83 
mil questões feitas, conforme demonstra a Tabela 2. 
4.1.1 Uso corporativo 
Os frameworks também são usados por pequenas, médias e grandes empresas, o que 
pode indicar uma preferência na área em que essas empresas atuam. Por fim, será citado 
algumas empresas que utilizam cada framework, e consequentemente seus aplicativos. 
Segundo o Stackshare (2021a, 2021b) as seguintes empresas utilizam o Angular: 
a) Google; 
b) Forbes; 
c) Backbase; 
d) NetApp; 
e) Beam. 
 19 
De acordo com o Stackshare (2021c), React é usado por: 
a) Facebook; 
b) Uber; 
c) Pinterest; 
d) Instagram; 
e) Twitter; 
f) LinkedIn; 
g) Netflix. 
Segundo o Stackshare (2021d), Vue é usado por: 
a) Alibaba; 
b) Trivago; 
c) 9GAG; 
d) GitLab; 
e) Stack. 
4.2 COMUNIDADE 
Tabela 3 - Quantidade de pacotes dependentes disponíveis no NPM para cada framework, de 
2021. 
 Angular React Vue 
Quantidade de pacotes ~12k ~78k ~47k 
Fonte: Elaboração do autor, 2021. 
 
Analisando a Tabela 3 percebemos que existe uma diferença discrepante entre os 
competidores, embora nem todos sejam pacotes que agregam ao ambiente de desenvolvimento 
do framework, como agregam as bibliotecas e plugins, é possível saber o tamanho de cada 
ecossistema. Com 78 mil pacotes disponíveis no NPM, mais que seus dois adversários juntos, 
React obtém o maior ecossistema, seguido do Vue com 47 mil pacotes e Angular com apenas 
12 mil pacotes. 
Uma equipe principal grande que mantém o framework pode indicar que seus membros 
estão envolvidos em ajudar e dar suporte a comunidade. Angular possui uma equipe principal 
de 30 pessoas, a do React é composta por 9 pessoas, enquanto o Vue dispõe uma equipe 
principal de 19 pessoas (ANGULAR, 2021b; REACTJS, 2021b; VUEJS, 2021a). Considerando 
 20 
que o tamanho da equipe depende também do tamanho e escopo do framework, é natural que o 
Angular tenha a maior equipe. 
4.2.1 Suporte financeiro 
Os três frameworks possuem várias formas de apoio financeiro, porém apenas o Angular 
e o React possuem apoio de grandes empresas na área de tecnologia. Angular é administrado e 
mantido por desenvolvedores do Google e React por desenvolvedores do Facebook 
(ANGULAR, 2021c; REACTJS, 2021c). O apoio dessas empresas pode oferecer um maior 
conforto e suporte a longo prazo, mas é importante lembrar que elas tomam a maioria de suas 
decisões priorizando o lucro, fazendo com que suas preocupações nem sempre estejam 
alinhadas com as necessidades dos usuários. O Vue obtém seu suporte da comunidade open 
source, onde desenvolvedores e pequenas/médias organizações oferecem apoio financeiro 
através do Patreon, uma plataforma de financiamentocoletivo, além de contribuírem na 
manutenção do framework através do GitHub (VUEJS, 2021b). Como o apoio financeiro vem 
da comunidade, as preocupações do Vue têm mais chances de estarem alinhadas com as de seus 
usuários. 
Também é importante lembrar que o Google e Facebook já abandonaram vários 
produtos bem populares no passado, e poderia o fazer novamente caso seus objetivos de 
negócios mudem. 
4.3 RECURSOS, FLEXIBILIDADE E SUPORTE 
É importante documentar o escopo da criação de cada framework para entender melhor 
seus objetivos. O Angular foi criado para ajudar equipes e organizações em seus obstáculos na 
construção de SPAs, seu objetivo é abordar o máximo desses obstáculos possíveis de maneira 
eficiente e escalável. 
Já o React foi criado para ajudar desenvolvedores a criar interfaces de usuário 
escaláveis, simples e eficientes para aplicações web complexas. E o Vue foi criado para ser uma 
alternativa leve, incremental e progressiva ao Angular, a intenção do autor era um framework 
simples de começar a desenvolver e que escale junto a complexibilidade do aplicativo. 
Angular é o framework mais completo, oferecendo várias funcionalidades como 
roteamento e gerenciamento de estados de forma nativa e integrada com o seu ambiente de 
desenvolvimento. Esse aspecto também o torna o mais rígido, impondo suas próprias estratégias 
 21 
de desenvolvimento sobre o projeto, deixando pouco poder de decisão para o desenvolvedor. 
Em contraponto, o React e Vue são mais flexíveis, impondo apenas a estratégia de como 
renderizar a aplicação e deixando funcionalidades como roteamento para bibliotecas externas. 
Todos os frameworks possuem uma ferramenta oficial para o gerenciamento do projeto, 
com a quantidade de funcionalidades variando entre eles. React e Vue oferecem as ferramentas 
create-react-app e @vue/cli, respectivamente, elas permitem a criação e configuração inicial 
de projetos. No Angular a ferramenta @angular/cli é disponibilizada, além de permitir a criação 
e configuração de um projeto, ela oferece vários comandos que tornam o desenvolvimento no 
framework mais eficiente como o ng generate que permite a criação e configuração de serviços, 
componentes, módulos etc. para a aplicação. 
4.4 CURVA DE APRENDIZAGEM E DOCUMENTAÇÃO 
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 
Angular HTML, CSS, TypeScript 
React JS (ES6+), JSX, CSS-in-JS 
Vue HTML, CSS, JS (ES5+) 
Fonte: Elaboração do autor, 2021. 
 
Como mostra no Quadro 1 os frameworks variam bastante nos 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-
 22 
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, 
 23 
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. 
 
 24 
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. 
 
 25 
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 Angularna versão 12.2.9. Os resultados dos testes realizados na aplicação 
são apresentados na Tabela 4. 
 
 26 
Tabela 4 - Resultados dos testes feitos na aplicação desenvolvida no Angular. 
 
Tentativa 1 
(ms) 
Tentativa 2 
(ms) 
Tentativa 3 
(ms) 
Tentativa 4 
(ms) 
Criação de 1000 linhas 144 165 150 156 
Criação de 10000 linhas 1010 884 995 900 
Inserção de 1000 linhas 103 115 107 104 
Atualização parcial 16 17 19 16 
Troca de linhas 118 126 120 117 
Remoção de linhas 105 119 114 105 
Remoção de linha 12 15 14 13 
Seleção de linha 7 8 7 8 
Fonte: Elaboração do autor, 2021. 
4.5.2.2 React 
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 
(ms) 
Tentativa 2 
(ms) 
Tentativa 3 
(ms) 
Tentativa 4 
(ms) 
Criação de 1000 linhas 117 110 108 110 
Criação de 10000 linhas 1480 1059 1111 1080 
Inserção de 1000 linhas 236 238 263 224 
Atualização parcial 55 63 61 63 
Troca de linhas 148 151 153 148 
Remoção de linhas 83 84 83 74 
Remoção de linha 75 79 67 68 
Seleção de linha 68 66 64 65 
Fonte: Elaboração do autor, 2021. 
 27 
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. 
 
 28 
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. 
 
153,75
947,25
107,25
111,25
1182,5
240,25
119,25
663,75
290,25
0 200 400 600 800 1000 1200 1400
Teste 1
Teste 2
Teste 3
MILISSEGUNDOS (MS)
Angular React Vue
 29 
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
 30 
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
 31 
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
65,75
38,25
0 10 20 30 40 50 60 70
Teste 8
MILISSEGUNDOS (MS)
Angular React Vue
 32 
frameworkque 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. 
 
 33 
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. 
 
 34 
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. 
 
	1 Introdução
	1.1 Objetivos
	1.1.1 Objetivo geral
	1.1.2 Objetivos específicos
	2 Frameworks
	2.1 Angular
	2.2 React
	2.3 Vue
	3 Metodologia
	3.1 Métricas
	3.1.1 Popularidade
	3.1.1.1 NPM
	3.1.1.2 GitHub
	3.1.1.3 Stack Overflow
	3.1.2 Comunidade
	3.1.3 Recursos, Flexibilidade e Suporte
	3.1.4 Curva de aprendizagem e Documentação
	3.1.4.1 Versionamento do JavaScript e TypeScript
	3.1.5 Desempenho
	3.1.5.1 DOM
	3.1.5.2 Virtual DOM
	3.1.5.3 Projeto
	3.1.5.4 Testes
	3.1.5.4.1 Teste 1: Criação de 1000 linhas
	3.1.5.4.2 Teste 2: Criação de 10000 linhas
	3.1.5.4.3 Teste 3: Inserção de 1000 linhas
	3.1.5.4.4 Teste 4: Atualização parcial
	3.1.5.4.5 Teste 5: Troca de linhas
	3.1.5.4.6 Teste 6: Remoção de linhas
	3.1.5.4.7 Teste 7: Remoção de linha
	3.1.5.4.8 Teste 8: Seleção de linha
	4 Comparação
	4.1 Popularidade
	4.1.1 Uso corporativo
	4.2 Comunidade
	4.2.1 Suporte financeiro
	4.3 Recursos, Flexibilidade e Suporte
	4.4 Curva de aprendizagem e Documentação
	4.5 Desempenho
	4.5.1 Projeto
	4.5.2 Resultados
	4.5.2.1 Angular
	4.5.2.2 React
	4.5.2.3 Vue
	4.5.3 Análise
	5 Conclusão