Agora disponível na versão BETA, Angular JS 2 está prestes a se tornar a nova estrutura em alta em 2016. Agora é a hora da avaliação. Vamos ver como ele se sai contra o queridinho de 2015: ReactJS.
Disclaimer : Gostei muito de trabalhar com a versão 1 do AngularJS mas mudei para o ReactJS em 2015. Posso não ser totalmente objetivo, mas acredite, ataco dos dois lados.
Vamos, vamos sangrar!

Crédito da foto: @jwcarrol

Não tente comparar frutas e legumes

Sim, o AngularJS é um framework enquanto o ReactJS é uma biblioteca. Para alguns, isso torna impossível uma comparação objetiva. Essa não é minha opinião!

Escolher entre AngularJS e ReactJS é um pouco como escolher entre comprar um computador pronto para começar ou comprar peças de reposição para construir o seu próprio.

Este artigo dá especial atenção a ambas as abordagens, considerando suas respectivas vantagens e desvantagens. Comparei a sintaxe e o modelo de componentes do ReactJS e do AngularJS. Isso corresponde, portanto, a comparar um processador de computador montado com um processador comprado no varejo, uma comparação viável.

As vantagens do AngularJS 2

Vamos começar com as vantagens do AngularJS 2 sobre o ReactJS.

Nenhuma decisão complicada

AngularJS é um framework, o que significa que fornece um grande número de opções e recursos nativos. Com o ReactJS, é necessário adicionar bibliotecas de componentes externos para ter a mesma quantidade de funcionalidade. Você precisará adicionar elementos para “roteamento”, forçar fluxos unidirecionais, chamar APIs, configurar testes, gerenciar dependências, etc. O desenvolvedor decide tudo e a menor evolução tecnológica é baseada em suas escolhas.
O AngularJS permite que diversas opções sejam utilizadas diretamente, o que possibilita iniciar um projeto mais rapidamente sem se intimidar com as escolhas a serem feitas na inicialização. Essa padronização também facilita muito a mudança de desenvolvedores, pois os projetos são baseados em componentes padrão incorporados e de fato, facilitando também o trabalho em equipe.
Também admiro a adoção do TypeScript pela equipe de desenvolvimento do AngularJS, isso nos leva à segunda vantagem importante do AngularJS.

TypeScript = ClearPath

TypeScript não é unânime. AngularJS 2 tem a essência do JavaScript mesmo que não seja apenas JavaScript. Por sua vez, os exemplos apresentados de ReactJS são ora em ES5, ora em ES6 nas mesmas proporções. E o ReactJS agora permite que você use três declarações diferentes para a mesma ação: a declaração do componente. Isso tem o efeito de confundir os recém-chegados.
Mesmo que o AngularJS 2 não restrinja o uso do TypeScript, o núcleo duro dos desenvolvedores do AngularJS empurra fortemente nessa direção, especialmente através da documentação. Isso significa que a maioria dos exemplos disponíveis em projetos Open Source oferecerá uma sintaxe familiar aos desenvolvedores que seguem esse padrão, já que a maioria segue esse padrão. O AngularJS tem exemplos que demonstram como usar o compilador TypeScript (essas demonstrações são admiráveis, aliás, nem todo mundo usa TypeScript hoje em dia, mas estou disposto a apostar que logo se tornará padrão). Esta forma de trabalhar evita qualquer erro relacionado a uma má decisão que possa ocorrer no ReactJS.

Reduzir Churn

2015 foi o ano em que alguns JavaScript de baunilha ficaram sem força. O ReactJS foi um dos atores dessa mudança. enquanto o React está na versão A 1.0, mais mudanças devem vir no futuro. O ecossistema em torno do ReactJS continua a sofrer com um fenômeno de churn, particularmente em torno dos componentes usados no Flux. Isso significa que qualquer coisa escrita em ReactJS hoje provavelmente ficará obsoleta quando o ReactJS 1 for lançado ou exigirá pelo menos uma grande reescrita.
Por outro lado, o AngularJS 2 é uma reinvenção metodológica e cuidadosa da versão anterior. Esta versão é mais madura, mais compreensível. Então, sim, as atualizações para uma versão posterior do AngularJS serão muito menos dolorosas do que as do ReactJS. E como um framework completo, quando decidimos trabalhar com AngularJS, sabemos que os elementos embutidos e disponíveis nativamente funcionam bem juntos porque foram escolhidos para trabalhar juntos. No ReactJS, é sua responsabilidade escolher os componentes que em alguns casos podem apresentar problemas de compatibilidade, desempenho etc. As atualizações de componentes também podem gerar dificuldades e depuração adicionais. Todos sabemos que essas fases são frustrantes, podem ser demoradas e parecem realmente intermináveis.

Uma ampla gama de ferramentas suportadas

Como você pode ver abaixo, considero o React JSX um grande avanço, embora seja necessário escolher componentes que suportem JSX. O React se tornou tão popular que o suporte para uma ferramenta específica raramente é um problema, apenas seja paciente. De fato, novas ferramentas raramente têm suporte a JSX quando são lançadas (exemplos: IDEs, linters, etc.). Os modelos AngularJS 2 e sua marcação de string são armazenados em arquivos HTML separados. Na verdade, esse método não requer nenhuma ferramenta específica para facilitar sua leitura.

Compatível com Web Components

O design do AngularJS 2 respeita os padrões de Web Components. Em poucas palavras, os componentes que você cria no AngularJS 2 devem ser muito mais fáceis de converter em componentes puros do que os produzidos no ReactJS. O suporte do navegador permanece limitado, mas isso pode ser um acelerador de longo prazo durante suas migrações, por exemplo.
Agora que entendemos melhor os destaques do AngularJS 2, é hora de revisar os destaques do ReactJS.

Os benefícios do ReactJS

Então, o que realmente diferencia o React?

Jsx

JSX é uma pseudo-linguagem com uma sintaxe próxima ao HTML compilado por JavaScript. A marcação e o código do aplicativo são compostos no mesmo arquivo. A vantagem é que essa arquitetura permite um preenchimento automático eficiente durante o desenvolvimento, principalmente ao inserir uma variável, uma palavra-chave, etc. Esta é uma diferença importante com o AngularJS 2. Como resultado, o ReactJS tem realce de sintaxe bom, consistente e completo na maioria dos editores, muitas vezes além disso com pelo menos autocompletar parcial e a habilidade de identificar erros. ). Dito isso, o AngularJS oferece um analisador caseiro superar essa dificuldade (bravo!).
Se você é alérgico a templates baseados em strings como no AngularJS, também é possível dividir o conteúdo em vários arquivos, mas ao custo de retornar a uma arquitetura de arquivos “antiquada”.

ReactJS identifica erros rapidamente

Quando cometemos um erro de sintaxe no ReactJS, ele não compila. É uma grande coisa. Isso significa que você pode identificar imediatamente qual linha tem um erro. O compilador JSX imediatamente nos diz quando um elemento não é fechado, por exemplo, ou quando uma propriedade é mal utilizada ou não existe no contexto da página. Essa abordagem agiliza consideravelmente as fases de desenvolvimento.
Em contraste, quando um erro de tipo de referência de variável ruim é cometido no AngularJS 2, não há indicação… AngularJS 2 trava silenciosamente, mas ainda compila. O erro é identificado durante o lançamento. Isso tem o efeito de retardar o desenvolvimento. Carregamos o aplicativo e depois temos que nos perguntar por que os dados não estão carregando, por exemplo…

ReactJS é centrado em Javascript

Aqui está, a diferença fundamental entre ReactJS e AngularJS 2. Infelizmente, o AngularJS 2 permanece centrado em HTML em vez de centrado em JavaScript.. Este é realmente um problema de design fundamental:

AngularJS 2 continua a adicionar JavaScript ao HTML. ReactJS coloca HTML no JavaScript.

Isso afeta fundamentalmente a experiência de desenvolvimento. A abordagem centrada em HTML é a maior fraqueza do AngularJS. JavaScript é muito mais poderoso que HTML. Deste modo, parece mais lógico para JavaScript suportar marcação HTML do que não. HTML e javascript precisam trabalhar juntos, eles estão relacionados. A abordagem javascript do ReactJS é, portanto, fundamentalmente superior à abordagem do AngularJS, EmberJS ou Knockout, que é baseada no paradigma oposto.
aqui está o porquê

ReactJS: design centrado em JavaScript = simplicidade

AngularJS 2 é a continuidade da abordagem AngularJS. A abordagem é sempre dar mais poder ao HTML. Portanto, usamos a sintaxe AngularJS 2 para processamento simples, como loops, condições, etc. Infelizmente, isso não tem padrão. Por exemplo, o AngularJS 2 oferece dois métodos de vinculação (simples ou bidirecional) com uma sintaxe diferente:

{{myVar}} //One-way binding
ngModel="myVar" //Two-way binding

No ReactJS, ambos aceitam o mesmo tipo de sintaxe.

{myVar}

AngularJS 2 suporta uma sintaxe 'inline' diretamente no elemento:

&lt;ul&gt;
&lt;li *ngFor="#hero of heroes"&gt;
    {{hero.name}}
  &lt;/li&gt;
&lt;/ul&gt;

O exemplo de código acima faz um loop em uma matriz chamada 'heroes'. Tenho várias perguntas neste momento:

Um modelo 'mestre' deve ser declarado por meio de uma instrução anterior.
o hash (#) antes do hero declarar uma variável local. Esse conceito-chave no AngularJS soa como ruído desnecessário. Você também pode usar var se preferir.
A instrução ngFor adiciona semântica de loop ao HTML por meio de atributos específicos do AngularJS.

Existe um contraste importante entre a sintaxe do AngularJS 2 acima e a do ReactJS que está em javascript puro (abaixo).

&lt;ul&gt;
  { heroes.map(hero =&gt;
&lt;li key={hero.id}&gt;{hero.name}&lt;/li&gt;
  )}
&lt;/ul&gt;

Como o JavaScript basicamente suporta loops, o JSX do ReactJS reutiliza todo o poder do JavaScript diretamente para esse tipo de operação, e muitos outros, como mapas, filtros, etc.

Para ler o AngularJS: é essencial conhecer um grande número de palavras-chave específicas do AngularJS.
Para ler ReactJS: você só precisa saber JavaScript.

A sintaxe do ReactJS é, portanto, uma sintaxe conceitualmente bastante simples em comparação com outros frameworks que oferecem especificidades.

Brasa: {{# cada}}
Angular 1: repetição ng
Angular 2: ngFor
Nocaute: data-bind=”foreach”
Reagir: APENAS USE JS. 🙂

Todos, exceto ReactJS, usam palavras-chave específicas substituindo as instruções nativas disponíveis em JavaScript: um loop. Aqui está a beleza do ReactJS. Isso respeita as convenções do JavaScript e mantém seu poder. Não há surpresas desagradáveis ou gramática questionável.
As peculiaridades do AngularJS 2 continuam com a ligação de cliques:

(click)=”onSelect(hero)"

Em contraste com a naturalidade do javascript nativo no ReactJS

onClick={this.onSelect.bind(this, hero)}

O ReactJS também inclui um sistema de eventos (como o AngularJS 2). Portanto, declarar eventos não representa um problema de desempenho ao declarar ouvintes.
Por que aprender uma sintaxe e gramática de código específica do framework quando é possível manter apenas o javascript puro em mente?

Uma experiência de desenvolvimento luxuosa

O suporte de preenchimento automático para JSX, validação em tempo real e uma variedade de mensagens de erro podem acelerar consideravelmente o desenvolvimento.

A questão do peso

Aqui está o peso dos frameworks mais populares (fonte)
Angular 2: 566k (766k com RxJS)
Angular2 : 764k minificados
Brasa : 435k
Angular1: 143k
Reagir + Redux : 151k minificados
Portanto, o AngularJS 2 é 4 vezes mais pesado que o ReactJS + Redux, que são de simplicidade comparável. O AngularJS 2 provavelmente perderá peso nos próximos meses e antes do lançamento final da versão oficial, mas ainda assim!
Frameworks como AngularJS ou EmberJS são mais pesados em termos de peso porque existem muitos outros recursos disponíveis nativamente.
Isso levanta questões. Muitos aplicativos não precisam de todos esses elementos oferecidos nesses frameworks. No mundo em que cada vez mais microsserviços ou microaplicativos estão surgindo, o ReactJS oferece uma boa capacidade de potência, permitindo que você incorpore apenas as necessidades básicas. Em um mundo que conhece mais de 200.000 módulos do tipo NPM, esse é um posicionamento interessante.

ReactJS respeita a filosofia do mundo UNIX

Lembre-se, ReactJS é uma biblioteca. Isso é exatamente o oposto da filosofia de frameworks maiores como AngularJS e EmberJS. Ao selecionar ReactJS você fica livre para escolher a melhor biblioteca complementar moderna para resolver esta ou aquela dificuldade. Javascript está avançando rapidamente, e React torna possível ir de um pequeno pedaço de código para um aplicativo que incorpora bibliotecas maiores em um piscar de olhos.

Resumo

AngularJS 2 é uma melhoria considerável em relação ao que foi oferecido em sua primeira versão. O novo modelo de componentes é mais fácil de entender e integrar do que as diretivas da versão 1. Esta versão suporta isomorfismo / renderização universal e usa uma versão DOM virtual oferecendo um desempenho de 3 a 10 vezes melhor. Essas mudanças fazem do AngularJS 2 um framework que não precisa se envergonhar quando comparado ao ReactJS. Não podemos negar que os recursos oferecidos pelo AngularJS 2 são completos e oferecem benefícios significativos ao reduzir a escrita de JavaScript.
No entanto, o peso do AngularJS 2 e sua sintaxe levantam questões. O fato de o AngularJS ser centrado em HTML torna complexo comparar com o ReactJS que é centrado em JavaScript. No React, não há necessidade de aprender uma linguagem específica para usar o framework. Você só precisa saber JavaScript. No entanto, o ReactJS não escreve nada para o desenvolvedor, então há muito mais código para escrever em geral, mesmo que seja apenas JavaScript. Este é o futuro em que acredito.
Artigo original de Casa cori, publicado em medium.freecodecamp.com
Traduzido do inglês por Matheus Breton - CTO República JS
[separator type=”” size=”” icon=”star”] [actionbox color=”default” title=”” description=”JS-REPUBLIC é uma empresa de serviços especializada em desenvolvimento JavaScript. Somos um centro de treinamento aprovado. Encontre todos os nossos treinamentos técnicos em nosso site de parceiros dedicado ao Treinamento” btn_label=”Nosso treinamento” btn_link=”http://training.ux-republic.com” btn_color=”primary” btn_size=”big” btn_icon=”star” btn_external ="1″]

Angular 2 contra ReactJS: haverá sangue!