Artigo original: https://www.freecodecamp.org/news/angular-vs-react-what-to-choose-for-your-app-2/
Uma comparação lado a lado e precisa dos aspectos gerais e técnicos de Angular e React
Existem muitos artigos com o título "Angular x React", "React x Angular", "Angular ou React" – é um verdadeiro milagre você ter aberto justamente este! O que esses artigos não têm, no entanto, é uma comparação lado a lado e precisa de Angular e React.
Isto é o que pretendo fazer neste artigo: colocar React e Angular (textos em inglês) em justaposição direta. Revisaremos e faremos o contraste entre os dois frameworks de JavaScript e analisaremos cada característica possível para garantir que não deixamos escapar um dado sequer.
No fim, eu não direi a você qual tecnologia deve escolher, mas darei a você o suficiente para que chegue às próprias conclusões e escolha a tecnologia que melhor se ajusta a você e ao seu projeto.
1. Visão geral resumida
React
O React é uma biblioteca do JavaScript para o desenvolvimento de interfaces de usuário (UIs). Ele é gerenciado pela equipe do Facebook e por uma comunidade de desenvolvedores de código aberto.
O framework veio a público em maio de 2013.
As atualizações mais recentes (versão 18, no momento desta tradução) foram lançadas em 8 de março de 2022 – há cerca de um mês.
Angular
O Angular é um framework de JavaScript em código aberto para desenvolvimento para a web e dispositivos móveis. Ele tem como base o TypeScript e é gerenciado pela equipe do Angular do Google, assim como pela comunidade de desenvolvedores do Angular.
Lançado em setembro de 2016, o Angular (também conhecido como Angular 2.0) é uma reinterpretação completa do AngularJS (Angular 1.0), que foi lançado em 2010.
Já tivemos versões do Angular, tendo a mais recente (versão 13, no momento desta tradução) sido lançada em 3 de novembro de 2021 – há pouco mais de cinco meses.
2. Universalidade
React
O React é um framework usado no desenvolvimento para a web e para dispositivos móveis. No entanto, para o desenvolvimento para dispositivos móveis, ele precisa ser incorporado ao Cordova. Além disso, existe um framework adicional – o React Native.
O React pode ser usado para criar aplicações para a web de página única ou de várias páginas.
Angular
O Angular é adequado para o desenvolvimento para a web e para dispositivos móveis. No desenvolvimento para dispositivos móveis, porém, uma boa parte do trabalho é feito pelo Ionic. Além disso, assim como ocorre com o React, o Angular tem um framework adicional para desenvolvimento para dispositivos móveis. O equivalente do React Native para ele é o NativeScript.
O Angular também pode ser usado para aplicações para a web de página única ou de várias páginas.
3. Autossuficiência
React
O React é um framework para o desenvolvimento de UIs. Desse modo, aplicações escritas em React precisarão de bibliotecas adicionais para serem usadas. Por exemplo, Redux, React Router e Helmet otimizam os processos de gerenciamento de states, roteamento e interação com as APIs. Funções como vinculação de dados, roteamento com base em componentes, geração de projetos, validação de formulários ou injeção de dependências exigem a instalação de módulos ou bibliotecas adicionais.
Angular
O Angular é um framework completo para o desenvolvimento de software, que geralmente não necessita de bibliotecas adicionais. Todas as funções mencionadas acima – vinculação de dados, roteamento com base em componentes, geração de projetos, validação de formulários e injeção de dependências – podem ser implementadas por meio de um pacote do Angular.
4. Curva de aprendizagem
React
O React é minimalista: sem injeção de dependências, sem templates clássicos, sem recursos excessivamente complicados. O framework é de simples compreensão se você já conhece bem o JavaScript.
No entanto, leva algum tempo para aprender como configurar um projeto, já que não há uma estrutura de projeto pré-definida. Você também precisa aprender sobre a biblioteca do Redux, que é usada em mais da metade das aplicações em React para o gerenciamento de states. As atualizações constantes do framework também exigem um esforço extra da parte do desenvolvedor. Além disso, há diversas práticas recomendadas em React, que você precisa aprender para fazer tudo direito.
Angular
O Angular em si é uma biblioteca imensa. Aprender todos os conceitos associados a ele levará muito mais tempo do que aprender sobre o React. O Angular é mais complexo de entender, existe muita sintaxe desnecessária e o gerenciamento de componentes é complicado. Alguns recursos complicados estão integrados ao núcleo do framework, o que significa que o desenvolvedor não pode evitar seu aprendizado e seu uso. Além disso, há muitas formas de se resolver uma única questão.
Embora o TypeScript se pareça muito com o JavaScript, também leva algum tempo para aprendê-lo. Como o framework é atualizado constantemente, o desenvolvedor precisa fazer um esforço de aprendizagem a mais.
5. Comunidade
React
O framework do React é um dos frameworks de JS mais populares em todo o mundo. A comunidade que dá suporte a ele e desenvolve com ele é imensa.
Trabalhando com o React você precisa ser um aprendiz contínuo, já que o framework é atualizado com frequência. Embora a comunidade tente prover a documentação mais recente o mais rápido possível, manter-se atualizado com as mudanças não é fácil. Por vezes, pode não haver documentação, mas a questão é geralmente resolvida pelo apoio da comunidade nos fóruns sobre o tema.
O React é usado ativamente por empresas como o Facebook, Twitter, Netflix, Airbnb, PayPal, The New York Times, Yahoo, Walmart, Uber e Microsoft.
Angular
O Angular é menos admirado que o React e enfrenta muito ceticismo, em parte por causa do fato de o Angular 1.0 ter sido tão impopular. Os desenvolvedores costumavam deixar o framework de lado por ser considerado excessivamente complicado, exigindo muito tempo de aprendizagem. Porém, esse framework foi desenvolvido pelo Google, o que ajuda na credibilidade do Angular.
O Google fornece suporte de longo prazo ao framework e o melhora constantemente. No entanto, as atualizações são tão rápidas que a documentação geralmente fica para trás.
O Angular é usado por empresas como McDonald’s, AT&T, HBO, Apple, Forbes, Adobe, Nike e também pela Microsoft.
6. Desempenho
React
O desempenho do React melhorou sensivelmente com a introdução do Virtual DOM. Como todas as árvores do Virtual DOM são leves e criadas no servidor, a carga no navegador é reduzida. Além disso, como o processo de vinculação de dados é unidirecional, as vinculações não recebem observadores, como no caso do Angular. Em função disso, não são criadas cargas de trabalho adicionais.
Angular
O Angular tem um desempenho pior, especialmente no caso de aplicações da web dinâmicas e complexas.
O desempenho das aplicações em Angular é afetada negativamente pela vinculação de dados bidirecional. Cada vinculação é atribuída a um observador que rastreia as alterações. Cada laço continua até que os observadores e valores associados sejam verificados. Por causa disso, quanto maior o número de vinculações, maior o número de observadores criados e mais pesado se torna o processo.
No entanto, as atualizações mais recentes do Angular melhoraram muito seu desempenho. Ele já não perde mais para o React nesse sentido. Além disso, o tamanho de uma aplicação em Angular é levemente menor que o tamanho de uma aplicação em React.
7. Linguagem
React
O React tem como base o JavaScript ES6+ combinado com scripts de JSX. O JSX é uma extensão da sintaxe, que faz com que o código do JavaScript lembre aquele escrito em HTML. Isso torna o código mais fácil de entender e os erros de digitação mais fáceis de identificar. Para que o código em JSX seja compilado em um navegador, o React precisa do Babel – uma ferramenta de tradução de código.
Angular
O Angular pode usar o JavaScript ou o TypeScript, que é um superconjunto do JS desenvolvido especificamente para projetos maiores. O TypeScript é mais compacto que o JavaScript, é mais fácil de se navegar pelo código e os erros de digitação são facilmente identificados. O processo de refatoração do código também se torna mais simples e mais rápido.
8. Estrutura da aplicação
React
A estrutura do React fornece aos desenvolvedores uma liberdade de escolha. Não existe algo como "a única estrutura certa" para uma aplicação em React. Porém, a necessidade de se criar a estrutura da aplicação no começo de cada projeto o torna mais difícil e mais longo de se iniciar.
Além disso, o React oferece apenas a camada de View, enquanto as de Model e Controller são adicionadas com o uso de outras bibliotecas.
A arquitetura de uma aplicação em React é baseada em componentes. O código é feito de componentes do React, que são renderizados com a biblioteca React DOM e direcionados de duas formas: funcional (com uma função que retorna JSX)...
function Hello(props){
return <div>Hello {props.name}</div>
}...ou com base em classes (com as classes do ES6).
class Hello extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}Angular
A estrutura do Angular é fixa e complexa, adequada para desenvolvedores experientes.
Angular está baseado nas três camadas – Model, Controller e View. Um objeto responsável pelo Model é inicializado pelo Controller e exibido pela View.
O código da aplicação consiste em componentes diferentes do Angular, cada um deles sendo escrito em quatro arquivos separados: um arquivo em TypeScript para implementar o componente, um arquivo HTML para definir a view, um arquivo CSS para definir os recursos estilísticos e um arquivo especial com a finalidade de realizar testes. Os links para esses arquivos são escritos na diretiva da aplicação, que exibe sua lógica estrutural. Assim, os componentes do Angular também são reutilizáveis.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent { }
9. Componentes da UI
React
As ferramentas de UI para o React foram desenvolvidas pela comunidade. Existem vários componentes de UI gratuitos e pagos no portal do React. Para usar os componentes de criação de materiais do React, você precisaria instalar uma biblioteca a mais – Material-UI e suas dependências.
Angular
O Angular tem um conjunto de ferramentas de materiais integrado, oferecendo uma variedade de componentes de criação de materiais pré-construídos. Existem vários botões, layouts, indicadores, pop-ups e controles de formulário. Por causa disso, a configuração da UI se torna mais simples e mais rápida.
10. Diretivas
React
No React, os templates e a lógica são explicados em um lugar – ao final do componente. Isso permite que o leitor entenda rapidamente o significado do código, mesmo que não conheça a sintaxe.
Angular
No Angular, cada template é retornado com um atributo – uma diretiva de como o objeto deve ser configurado. A sintaxe das diretivas do Angular é complexa e sofisticada, o que a torna incompreensível para um leitor sem experiência no trabalho com essa tecnologia.
11. Gerenciamento dos states
React
No React, cada componente tem seu próprio state. Um desenvolvedor em React pode criar componentes especiais para que contenham o state de toda a aplicação ou de uma parte específica da aplicação. A grande desvantagem aqui está no fato de que o state global precisa ser armazenado em várias partes diferentes da aplicação, com os dados sendo passados manualmente pelos diversos níveis da árvore de componentes.
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return (
<div>
<h1>Hello world!</h1>
<h2>Now is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}Para resolver esse problema, existe uma biblioteca especial de gerenciamento de states – o Redux. A ideia dessa biblioteca está no fato de que o state global seja representado como um objeto único com estado (em inglês, stateful), que é alterado em partes diversas da aplicação com a ajuda dos redutores (em inglês, reducers) – funções especiais do Redux.
Outra solução é oferecida pela biblioteca de gerenciamento de states chamada MobX. Diferentemente do Redux, com o state global sendo armazenado em um único objeto com estado e imutável, o MobX oferece o armazenamento apenas do state mínimo exigido, enquanto o resto dele pode ser derivado.
Angular
No Angular, os dados do componente são armazenados nas propriedades do componente. Os componentes pais passam dados para e através dos componentes filhos. O state que se altera em algumas partes da aplicação pode ser identificado e recalculado, mas, em uma aplicação grande, isso pode causar uma série de atualizações multidirecional, o que pode ser difícil de rastrear. Os recursos podem ser melhorados com a ajuda de bibliotecas de gerenciamento de states, como o NgRx ou o RxJS , que garantem que o fluxo dos dados seja unidirecional.
export class HeroListComponent implements OnInit {
heroes: Hero[];
selectedHero: Hero;
constructor(private service: HeroService) { }
ngOnInit() {
this.heroes = this.service.getHeroes();
}
selectHero(hero: Hero) { this.selectedHero = hero; }
} 
12. Injeção de dependências
React
O React não dá suporte total à injeção de dependências, pois não é totalmente compatível com a ideia da programação funcional e da imutabilidade dos dados. Em vez disso, ele tem um state global para todos os componentes.
Angular
A maior vantagem do Angular está no fato de que, diferente do React, ele dá suporte à injeção de dependências. Assim, o Angular permite diferentes ciclos de vida para stores diferentes.
import { Injectable } from '@angular/core';
import { HEROES } from './mock-heroes';
@Injectable({
// we declare that this service should be created
// by the root application injector.
providedIn: 'root',
})
export class HeroService {
getHeroes() { return HEROES; }
}
13. Vinculação dos dados
React
Vinculação dos dados tem a ver com o processo de sincronização dos dados entre o Model e a View. O React precisa ser complementado pelo Redux, que permite que você trabalhe com dados imutáveis e que torna o fluxo de dados unidirecional. A vinculação unidirecional é previsível, o que facilita o processo de depuração.
Angular
O Angular trabalha com vinculação de dados bidirecional e dados mutáveis. Embora as vantagens de dados mutáveis e imutáveis seja uma questão de debates acalorados, é definitivamente mais fácil trabalhar com a abordagem de vinculação de dados bidirecional do que com a vinculação unidirecional. Ao mesmo tempo, a vinculação de dados bidirecional afeta negativamente o desempenho, já que o Angular desenvolve automaticamente um observador para cada vinculação.
As maneiras de vinculação de dados em Angular:
{{expression}} Interpolation
[target]="expression" Property
bind-target="expression" Attribute(target)="statement" Event
on-target="statement" Event[(target)]="expression" Two-way
bindon-target="expression" Two-way
14. Alteração da renderização
React
O React usa um Document Object Model (DOM) virtual, que permite facilmente a implementação de alterações menores nos dados em um elemento sem atualizar a estrutura de toda a árvore. O framework cria um cache da estrutura de dados na memória, calcula as alterações e atualiza com eficiência o DOM exibido no navegador. Dessa maneira, toda a página parece ser renderizada a cada alteração, mas, na verdade, as bibliotecas renderizam novamente somente os subcomponentes alterados.
A equipe do React está melhorando constantemente o Fiber – um mecanismo cujo objetivo é impulsionar a produtividade da renderização das alterações.
Angular
O Angular usa o DOM real, que atualiza toda a estrutura da árvore, mesmo quando as alterações ocorreram em um único elemento. O DOM real é considerado mais lento e menos eficaz que o DOM virtual.
Para compensar essa desvantagem, o Angular usa a detecção de alterações para identificar os componentes que precisam ser alterados. Portanto, o DOM real no Angular tem um desempenho tão eficaz quanto o Virtual DOM do React.
15. Ferramentas
React
O React tem o suporte de diversos editores de código. Por exemplo, o código em React pode ser editado com o Sublime Text, Visual Studio e o Atom. Para fazer o bootstraping de um projeto, você pode usar a ferramenta (CLI) chamada Create React App. Por sua vez, a renderização do lado do servidor é concluída com o uso do framework Next.js.
Para testar uma aplicação inteira escrita em React, você pode precisar de diversas bibliotecas. Por exemplo, a Enzyme para testes de componentes, o Jest para o teste do código em JS, a React-unit para os testes unitários e assim por diante. Para depurar a aplicação no modo de desenvolvedor, você pode usar uma extensão do navegador, as React Dev Tools.
Outra ferramenta interessante é o React 360, uma biblioteca usada para criar aplicações de realidade aumentada e virtual.
Angular
Do mesmo modo que o React, o Angular tem o suporte de uma variedade de ferramentas de edição de código. Por exemplo, você pode trabalhar em Angular com editores de código como o Aptana, o Sublime Text e o Visual Studio. Um projeto pode ser configurado rapidamente com a Angular CLI. A renderização do lado do servidor é concluída com a ajuda do Angular Universal.
Diferente do React, o Angular pode ser testado inteiramente com uma única ferramenta. Para testar o Angular de um extremo a outro, as plataformas são o Jasmine, o Protractor e o Karma. Outra ferramenta que faz a depuração de aplicações em modo de desenvolvimento é a extensão de navegadores Augury.
Conclusão
O Angular é um framework completo para desenvolvimento para a web e para dispositivos móveis. O React é um framework somente para o desenvolvimento de UIs, que pode ser transformado em uma solução completa com o auxílio de bibliotecas adicionais.
O React parece ser mais simples à primeira vista, levando menos tempo para se começar a trabalhar com um projeto em React. Porém, essa simplicidade como vantagem principal do React é neutralizada pelo fato de você ter de aprender a trabalhar com frameworks e ferramentas adicionais em JavaScript.
O Angular em si é mais complexo e leva mais tempo para dominar. Ainda assim, ele é uma ferramenta poderosa que oferece uma experiência geral para o desenvolvimento para a web. Uma vez que se aprende a trabalhar com ele, você já pode colher os frutos.
Não há um framework melhor que o outro. Os dois são atualizados continuamente para acompanhar a concorrência. Por exemplo, enquanto se acredita que o React vença em função do Virtual DOM, o Angular igualou o placar implementando a detecção de alterações. Enquanto se achava que o Angular vencia em função de ser desenvolvido por uma autoridade em termos de empresa como o Google, a imensa e devotada comunidade do React compensou a reputação do Google plenamente tornando o React semelhante ao Angular.
No fim, React x Angular é apenas uma questão de preferência pessoal, uma questão de habilidade e de hábitos. Se você é um iniciante em programação, provavelmente tirará mais benefícios de iniciar com o React. Se você é um desenvolvedor experiente, siga trabalhando com aquilo que você já conhece melhor.
Não se esqueça de se desafiar e de começar a aprender um novo framework, como React ou o Angular. Como gerente de projetos ou como dono de uma empresa que está terceirizando desenvolvedores, você vai querer que sua equipe de desenvolvimento para a web selecione o framework mais adequado para todos vocês, seja o Angular ou o React.
Você tem uma ideia para um projeto em Angular ou em React?
Minha empresa, a KeenEthics, tem experiência no desenvolvimento em React, além de fornecermos desenvolvedores de Angular.js incríveis para seus projetos. Caso precise de um desses serviços, entre em contato.
Se gostou deste artigo, leia também outra comparação incrível de dois frameworks do JS: React x Svelte: como criar componentes de mensagens.
Para encerrar
Eu gostaria de agradecer a todos os que contribuíram com este artigo, incluindo Sergey Gornostaev e Volodya Andrushchak, desenvolvedores de software full-stack da KeenEthics.
O artigo original foi publicado no blog da KeenEthics e pode ser encontrado aqui: Angular vs React: Which One to Choose for Your App.