Comparação dos frameworks JavaScript definitivos: Angular vs React

Uma pergunta que me fazem quase diariamente é se devo começar com ReactJS ou Angular? No entanto, antes de prosseguir, deixe-me dar-lhe um aviso.

Não é um blog onde vou criticar um ou outro ou dizer que você deve sempre usar um em detrimento do outro. Cada desenvolvedor e cada projeto são completamente diferentes e eles têm um conjunto diferente de requisitos, então dizer que você sempre deve usar ReactJS ou sempre usar Angular é muito estúpido.

O Argumento Lógico

Você pode argumentar que o Angular é uma estrutura e o React é tecnicamente uma biblioteca por si só. Não estou negando esse fato, mas esse é o argumento no qual não quero entrar agora. Existem pacotes que você pode adicionar ao React que o transformarão em uma estrutura que compete diretamente com o Angular. Estamos comparando os dois ecossistemas, não a estrutura exata versus a biblioteca exata.

A curva de aprendizado

Vamos começar com Angular. Ainda outro aviso: quando digo Angular, estou falando de Angular 4, não de AngularJS.

Angular é um grande framework, o que significa que é poderoso e inclui muito. Há muito a aprender. Você vai ouvir um monte de novo vocabulário intimidador como injeção de dependência, decoradores de diretivas, pipes, etc. Então você tem que lidar com Typescript, que é JavaScript mais um monte de outros recursos, incluindo digitação estática.

O Angular é mais opinativo do que o React, o que é uma das vantagens na minha opinião porque com o React você pode fazer a mesma coisa de um milhão de maneiras diferentes. Com o Angular, geralmente há uma ou duas maneiras de fazer certas coisas, o que facilita o acompanhamento e fornece instruções muito mais claras sobre o que você deve fazer.

Mas, novamente, tudo se resume à preferência. Você pode gostar da flexibilidade de fazer as coisas de maneiras diferentes. Como mencionei, o ReactJS é uma biblioteca se estivermos falando apenas da biblioteca principal, é muito menor e muito mais fácil de aprender do que o framework Angular. Você pode dizer que aprenderá React em um período de tempo menor. O React é uma ótima biblioteca de visualização em si, mas não é nem de longe tão poderoso para aplicativos grandes. Se você deseja roteamento, validação e solicitações HTTP no React, precisará instalar outros pacotes e isso aumenta a curva de aprendizado.

Se você observar o código React de dois desenvolvedores diferentes, eles provavelmente parecerão completamente diferentes, estejam fazendo solicitações HTTP ou manipulando o estado e as propriedades. Tudo isso pode ser tratado de maneira muito diferente e, muitas vezes, pode ser feito da maneira errada.

Você encontra as melhores práticas e todos os problemas desaparecem, mas isso aumenta a curva de aprendizado.

Ao contrário do Angular, o React não usa templates. Ele usa algo chamado extensão JSX ou JavaScript ou extensão de sintaxe JavaScript, que nos permite incorporar HTML no JavaScript. A princípio, isso pode parecer um pouco peculiar. Especialmente, quando provavelmente você foi ensinado a separar sua marcação e seu JavaScript.

Pense nisso como colocar HTML dentro do JavaScript com algumas mudanças diferentes: você não pode usar o atributo class e precisa usar o nome da classe.

Por último, temos o Redux. React é frequentemente usado com Redux ou Flux, que são gerenciadores de estado de nível de aplicativo. Na minha opinião, o Redux é muito difícil, apenas configurá-lo e aprender os conceitos dele é difícil.

Acho que é usado em demasia. Acho que muitos desenvolvedores usam redux onde não é necessário. Você não precisa dele para aplicativos menores, mas muitos desenvolvedores insistem em usá-lo. Isso novamente se resume à preferência. Redux é muito poderoso, não quero tirar isso. Ao falar sobre a curva de aprendizado, é muito difícil de entender.

Características	Reagir	Angular
Linguagem de programação	JavaScript	TypeScript
Estrutura de Código	Opinativo	Flexível
Biblioteca Central	Pequena	Muito grande
Modelagem	JSXGenericName	HTML
Competência	Pequenas Aplicações	Aplicações em Grande Escala

Vencedor: é um empate

atuação

Não é justo comparar diretamente o desempenho do Angular com o React. Angular é um framework front-to-back completo que inclui roteamento, ferramentas de formulário, biblioteca HTTP, extensões reativas, etc. Todos esses recursos incham o framework e o tornam mais lento. No entanto, o React por si só é apenas uma biblioteca de visualização, que é muito menor e mais rápida.

Uma vez que você começa a adicionar pacotes como o roteador, cliente HTTP ou o que quer que você vá adicionar ao seu aplicativo React, ele começa a aparecer um pouco mais onde o Angular está e então você pode começar a compará-los de forma justa, mas mesmo depois disso o React ainda ganha o departamento de desempenho. É uma tecnologia muito rápida em geral.

A mudança de Angular 2 para Angular 4 sob o capô fez bastante para aumentar o desempenho. O Angular 4 tem desempenho melhor que o Angular 2. No entanto, o React ainda vence no departamento de desempenho.

Angular vs Reagir. Fonte: Academind.com

Vencedor: Reagir

Características

Ambos os frameworks têm muitos dos mesmos recursos e vantagens gerais: eles organizam seu código, são baseados em componentes, oferecem marcação dinâmica, etc. Eles são usados ​​para fazer muitas das mesmas coisas e compartilham uma muitos dos mesmos recursos.

Características	AngularJS	Reagir
Data de lançamento	2009	2013
Linguagem	TypeScript, JavaScript	JavaScript
Quota de mercado	0,3%
Modelo	Sim	Não
Visão	Sim	Sim
Controlador	Sim	Não
Curva de aprendizado	Complexo	Fácil
Modelagem	Sim	Não
Falha	Tempo de execução	tempo de compilação
Renderização do lado da exibição	Não	Sim
DOM	Sim	Virtual
Suporte móvel	Sim	Sim
Renderização do lado da exibição	Não	Sim

Veremos alguns dos recursos individuais. O Angular obviamente tem muito mais recursos do que o React em seu núcleo. Deixe-me lembrá-lo de que estamos falando de dois ecossistemas e pacotes comuns usados ​​com o React.

Angular é uma estrutura com tudo incluído. Ele vem com roteador de componentes, extensões reativas para observáveis, um cliente HTTP, um módulo de formulário para validação e a lista continua. Além disso, oferece ligação de dados bidirecional de uma forma que nenhuma outra estrutura realmente oferece. A vinculação de dados da exibição ao modelo é extremamente fácil usando a diretiva de modelo ng.

Angular também suporta MVC (Controlador de exibição de modelo) ou pelo menos aspectos diferentes desse padrão de design. ele também vem com recursos que permitem implementar testes facilmente: tanto o teste de unidade quanto o teste de ponta a ponta. O Angular está repleto de recursos para criar aplicativos front-end de nível empresarial. O React, por outro lado, não inclui muito em seu núcleo. No entanto, coisas podem ser adicionadas para fornecer os recursos que o Angular inclui prontos para uso, além de alguns adicionais.

O React usa um DOM virtual que é muito poderoso. Ele cria sua própria versão leve do Dom real e inclui e atualiza apenas o que é necessário, em vez de atualizar tudo. O DOM virtual é uma das principais razões pelas quais o React é incrivelmente rápido.

O React usa JSX, que é mais poderoso que os modelos padrão, porque você pode colocar absolutamente qualquer tipo de JavaScript que desejar. O JSX não é necessário para usar o React, mas torna as coisas muito mais fáceis. Não consigo pensar em nenhum motivo para você não usar JSX com Angular também. O React também faz um ótimo trabalho ao gerenciar o estado e as propriedades do componente. Isso torna os dados realmente fáceis de trabalhar e passar entre os componentes. Passar dados entre componentes, Angular é muito mais difícil do que fazê-lo no React.

O Core React é difícil de manter o estado do nível do aplicativo. O estado do componente é fácil, mas se você deseja um verdadeiro gerenciamento de estado no nível do aplicativo, precisará do Redux ou do Flux, que eu disse antes que é muito confuso de aprender. Pacotes externos que são frequentemente usados ​​como o novo roteador React versão 4 são um pouco difíceis de entender, mas também são muito poderosos quando você aprende a executá-lo e configurá-lo. Existem muitas maneiras diferentes de usá-lo também. O React não possui um componente HTTP principal como o Angular, mas você pode usar o Fetch ou o Axios, que é um cliente HTTP externo e o Enzyme é popular para atestar o React. Existem alguns dos diferentes pacotes que são comumente usados ​​com o React, mesmo que não façam parte da biblioteca real.

Embora ambas as tecnologias compartilhem um bom número de recursos, se você estiver apenas comparando as principais tecnologias, o Angular é o vencedor.

Vencedor: Angular

ferramentas

Angular e React têm algumas interfaces de linha de comando muito boas. O Angular CLI e o aplicativo Create React são ótimos e realmente nos permitem simplificar o desenvolvimento. O Angular CLI é um pouco mais poderoso porque podemos gerar rapidamente coisas como componentes e serviços. Create React não pode fazer isso. Você tem que criar tudo sozinho, tanto quanto os arquivos e a estrutura básica. Ambos os sistemas usam web pack, possuem seus próprios servidores de desenvolvimento de carregamento automático e ferramentas de compilação e construção. Obviamente, Angular tem a tarefa adicional de transpilar Typescript. A CLI tem um script para isso quando executamos ng serve. Tudo isso aconteceu nos bastidores. Ele usa algo chamado TSC ou Typescript Compiler para isso e ambos têm ferramentas de teste também.

Características	Angular	Reagir
Interface da Linha de comando	Angular CLI	Criar Reagir
Tarefas adicionais	Transpilando texto datilografado	Nenhum
teste	jasmim e carma	É

Se for um aplicativo de pilha completa, eles são realmente importantes. Você não precisa usá-los. Você pode criar um aplicativo React desde o início com o pacote da web. Isso torna muito mais fácil não apenas construir o aplicativo, mas também compilá-lo e desenvolvê-lo para produção.

Ambos são bonitos, mesmo nesse departamento.

Vencedor: Angular

Ecossistema

Como eu disse, ambas as tecnologias têm seus próprios ecossistemas que agora se espalham muito além do navegador da web.

Ionic é uma estrutura híbrida popular que é um aplicativo Angular executado dentro de um wrapper nativo para aplicativos móveis. Você pode criar aplicativos móveis usando Angular. Os aplicativos híbridos podem ser um pouco desajeitados em comparação com os aplicativos nativos. A experiência do usuário pode não ser tão boa às vezes, nem tão rápida e responsiva. Entre os vários frameworks híbridos, o Ionic 3 é o melhor. Há também o NativeScript, que nos permite criar verdadeiros aplicativos nativos para iOS e Android com Angular e JavaScript.

Características	Angular	Reagir
Desenvolvimento de aplicativos híbridos	iônico	*Não requerido
Desenvolvimento de aplicativos nativos	NativeScript	Reagir nativo
Renderização no lado do servidor	Angular Universal	ESTE
Biblioteca de gerenciamento de estado	Loja NgRx	Reax Redux, MobX
Biblioteca de IU de materiais	material angular	Material-UI
Realidade virtual	RV reativa	ESTE

No entanto, o NativeScript não parece ser tão bom quanto o React Native do Facebook, pelo menos neste ponto. O Angular também possui uma biblioteca de componentes de design de material, se você for um fã de design de material. Angular Universal é um projeto inicial que pode ser usado para renderizar Angular no lado do servidor. Há também a loja NgRx, que é uma biblioteca de gerenciamento de estado inspirada no Reax redux. É baseado no estado mutado por redutores de mesmo nível. Também possui integração com extensões reativas.

Você teria notado. Uma vez, um deles faz algo que o outro copia de maneira diferente. React e Angular tornaram-se Microsoft e Apple de frameworks JavaScript.

React tem um ecossistema e tanto. Possui React nativo, que é popular. É a melhor maneira de criar aplicativos móveis com tecnologias da web. O React Native é rápido e muitos dos aplicativos, se construídos corretamente, estão lá em cima com aplicativos nativos que são construídos em Swift ou Java. O React tem uma biblioteca de design de material chamada Material-UI, muito parecida com o componente de design de material do Angular, mas mais madura. JS é uma estrutura para renderizar aplicativos React do lado do servidor. Ele visa fazer isso da maneira mais simples possível, para que possa ser comparado ao Angular Universal. MobX é outra maneira de gerenciar o estado. Funciona um pouco diferente do que o redux. Ele fornece um conjunto de decoradores para definir observáveis ​​e observadores e introduz a lógica reativa em seu estado.

Storybook é um ambiente de desenvolvimento para React. Ele permite que você navegue em uma biblioteca de componentes, visualize diferentes estados de cada componente e desenvolva e teste componentes de forma interativa. A RV reativa está levando o React para a realidade virtual. React desktop é uma biblioteca JavaScript construída sobre a biblioteca Reacts que supostamente traz uma experiência nativa de desktop para a web, apresentando muitos componentes macOS e Windows 10. O ecossistema React é extremamente grande e poderoso. O React está entrando em todos os aspectos da tecnologia e é um claro vencedor.

Vencedor: Reagir

As pessoas de terno e gravata estão usando Angular e os hipsters com barbas desgrenhadas estão usando React.

	AngularJS	Reagir
Principais desenvolvedores	Google	Facebook+Instagram
Era	6 anos	2 anos
Extensibilidade	Sim	Sim
Velocidade*	1,35 segundos	310 milissegundos
DOM	Navegador	Virtual; apenas reprocessa dados alterados com mecanismo de correção
Arquitetura	Estrutura MVC completa	Apenas o componente de exibição
Curva de aprendizado	Difícil no início; requer conhecimento de conceitos específicos, como diretivas DOM, filtros e fábricas.	Mais fácil de começar; contém uma API e sintaxe simplificadas
Estrutura e Componentes	HTML,JS e CSS	Mesmo; mas pode integrar HTML com JS, usando JSX

Resumindo: é um empate

Se você está decidindo entre essas estruturas, observe as diferentes categorias e veja o que lhe interessa. Experimente os dois e veja qual você pega mais rápido. Faça mais algumas pesquisas mais do que este blog. Você nunca obterá todas as informações de que precisa em um blog, então leia um pouco mais.

Se você estiver procurando por um ecossistema maior que inclua o desenvolvimento de aplicativos móveis nativos, escolha React sem pensar duas vezes. Se você procura recursos, o Angular é enorme. Existem mais recursos do que você precisa.