A comparação final dos frameworks JavaScript: Angular vs React

Uma pergunta que me fazem quase diariamente é que devo começar com ReactJS ou Angular? No entanto, antes de prosseguir, deixe-me dar-lhe uma isenção de responsabilidade.

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

O argumento lógico

Você pode argumentar que o Angular é um framework e o React é tecnicamente uma biblioteca por si só. Eu não estou negando este fato, mas este é o argumento que eu não quero entrar agora. Existem pacotes que você pode adicionar ao React que o transformarão em um framework 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 sobre Angular 4 e não AngularJS.

Angular é um framework grande, o que significa que é poderoso e inclui muito. Há muito o que aprender. Você vai ouvir um monte de vocabulário novo e intimidante 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.

Angular é mais opinativo 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, 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 menos tempo. O React é uma ótima biblioteca de visualização, mas não é nem de longe tão poderosa para grandes aplicativos. Se você quer roteamento, validação, requisições HTTP no React, você vai ter que 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 estado e propriedades. Todas essas coisas podem ser tratadas de maneira muito diferente e muitas vezes pode ser 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 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 você provavelmente 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íveis de aplicativo. Na minha opinião, o Redux é muito difícil apenas configurá-lo e aprender os conceitos dele é difícil.

Acho que está muito usado. Eu 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.

Vencedor: É um empate

atuação

Não é justo comparar diretamente o desempenho do Angular com o React. Angular é uma estrutura completa de frente para trás que inclui roteamento, ferramentas de formulário, biblioteca HTTP, extensões reativas, etc. Todos esses recursos sobrecarregam a estrutura e a tornam mais lenta. 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 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ô eles fizeram um pouco para aumentar o desempenho. O Angular 4 tem um desempenho melhor do que o Angular 2. No entanto, o React ainda ganha 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. muitas das mesmas características.

Veremos algumas das características individuais. O Angular obviamente tem muito mais recursos do que o React em seu núcleo. Deixe-me lembrá-lo, estamos falando de dois ecossistemas e pacotes comuns que são 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, ele oferece vinculação de dados bidirecional de uma maneira que nenhuma outra estrutura realmente oferece. A vinculação de dados da visualização ao modelo é extremamente fácil usando a diretiva de modelo ng.

Angular também suporta MVC (Model View controller) 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. 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 a coisa toda. O DOM virtual é a principal razão pela qual o React é incrivelmente rápido.

O React usa JSX, que é mais poderoso que os templates padrão, porque você pode colocar absolutamente qualquer tipo de JavaScript que desejar. O JSX não é obrigado a usar o React, mas torna as coisas muito mais fáceis. Não consigo pensar em nenhum motivo pelo qual você não usaria JSX com Angular também. O React também faz um bom trabalho gerenciando o estado e as propriedades dos componentes. Isso torna os dados realmente fáceis de trabalhar e passar entre os componentes. Passando dados entre componentes, Angular é muito mais difícil do que fazê-lo em React.

O Core React é difícil de manter o estado do nível do aplicativo. Component State é fácil, mas se você quiser um verdadeiro gerenciamento de estado de nível de aplicativo, precisará de Redux ou 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 é um pouco difícil de entender, mas também é muito poderoso quando você aprende a executá-lo e configurá-lo. Há muitas maneiras diferentes de usá-lo também. O React não possui um componente HTTP central 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 tecnologias principais, 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 Create React App são ótimos e realmente nos permitem agilizar o desenvolvimento. A CLI Angular é um pouco mais poderosa porque podemos gerar rapidamente coisas como componentes e serviços. Create React não pode fazer isso. Você tem que criar tudo sozinho até os arquivos e a estrutura básica. Ambos os sistemas usam web pack, têm seus próprios servidores de desenvolvimento de carregamento automático e têm ferramentas de compilação e construção. Obviamente, o Angular tem a tarefa adicional de transpilar o Typescript. A CLI tem um script para isso quando executamos o ng serve. Tudo o que aconteceu nos bastidores. Ele usa algo chamado TSC ou Typescript Compiler para isso e ambos também possuem ferramentas de teste. O Create React App usa o Jest para teste e, em seguida, uma das partes dessas ferramentas é a capacidade de criar seu aplicativo em produção em ativos estáticos que você pode simplesmente enviar para um servidor ou colocá-lo em sua pasta de cliente back-end.

Se for um aplicativo de pilha completa, isso é realmente importante. Você não precisa usá-los. Você pode construir uma aplicação React apenas do zero com o web pack. Isso torna muito mais fácil não apenas construir o aplicativo, mas também compilá-lo e criá-lo para produção.

Ambos são bonitos mesmo nesse departamento.

Vencedor: Angular

Ecossistema

Como eu disse, essas duas 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 que é executado dentro de um wrapper nativo para aplicativos móveis. Você pode criar aplicativos móveis usando Angular. Aplicativos híbridos podem ser um pouco desajeitados em comparação com aplicativos nativos. A experiência do usuário pode não ser tão boa às vezes – não 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 aplicativos nativos verdadeiros para iOS e Android com Angular e JavaScript.

No entanto, o NativeScript não parece ser tão bom quanto o React Native do Facebook, pelo menos neste momento. O Angular também possui uma biblioteca de componentes de design de materiais, se você for fã de design de materiais. Angular Universal é um projeto semente 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 alterado por redutores de pares. 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 bastante ecossistema. Tem 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 no mesmo nível dos aplicativos nativos criados em Swift ou Java. O React possui uma biblioteca de design de materiais chamada Material-UI, que é muito parecida com o componente de design de materiais 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 isso 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. O Reactive VR está colocando o React em realidade virtual. React desktop é uma biblioteca JavaScript construída sobre a biblioteca Reacts que supostamente traz uma experiência de desktop nativa 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 vencedor claro.

Vencedor: Reagir

As pessoas de terno e gravata estão usando Angular e os descolados com as barbas desalinhadas estão usando React.

Resumindo: é um empate

Se você estiver 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 um pouco mais de pesquisa mais do que este blog. Você nunca vai conseguir todas as informações que precisa em um blog, então leia um pouco mais.

Se você está olhando para um ecossistema maior que inclui desenvolvimento de aplicativos móveis nativos, escolha React sem pensar duas vezes. Se você procura recursos, o Angular é enorme. Há mais recursos do que você precisa.