JavaScript

Angular 2 vs React: Haverá Sangue

O Angular 2 alcançou o Beta e parece estar pronto para se tornar o novo cenário de 2016. É hora de um confronto. Vamos ver como se compara com o amor de 2015: Reaja .

Disclaimer: Eu gostei de trabalhar em Angular 1, mas mudei para o React em 2015. Eu publiquei os cursos da Pluralsight em React e Flux and React e Redux em ES6 ( free trial ). Então sim, sou parcial. Mas eu estou atacando os dois lados.

Tudo bem, vamos fazer isso. Haverá sangue.

 
Crédito da foto: @jwcarrol

Você está comparando maçãs e orangotangos!

Suspiro. Sim, o Angular é um framework, o React é uma biblioteca. Alguns dizem que essa diferença faz com que eles sejam ilógicos. De modo nenhum!

Escolher entre o Angular e o React é como escolher entre comprar um computador de prateleira e montar o seu próprio com peças prontas para uso.

Este post considera os méritos dessas duas abordagens. Eu comparo a sintaxe e o modelo de componente do React com a sintaxe e o modelo de componente do Angular. Isso é como comparar a CPU de um computador pronto para uso a uma CPU simples. Maçãs para maçãs.

Vantagens Angulares 2

Vamos começar considerando as vantagens do Angular 2 em relação ao React.

Fadiga de Decisão Baixa

Como o Angular é uma estrutura, ele fornece significativamente mais opiniões e funcionalidades prontas para uso. Com o React, você geralmente extrai várias outras bibliotecas para criar um aplicativo real. Você provavelmente desejará bibliotecas para roteamento, impondo fluxos unidirecionais, chamadas de API da web, testes, gerenciamento de dependências e assim por diante. O número de decisões é muito grande. É por isso que o React tem muitos kits iniciais (eu publiquei dois ).

O Angular oferece mais opiniões prontas, o que ajuda você a começar mais rapidamente sem se sentir intimidado pelas decisões. Essa consistência reforçada também ajuda os novos contratados a se sentirem em casa mais rapidamente e torna mais fácil a troca de desenvolvedores entre equipes.

Admiro como a equipe principal do Angular adotou o TypeScript, o que leva à próxima vantagem…

TypeScript = Limpar Caminho

Claro, o TypeScript não é amado por todos, mas o Angular 2 opinou sobre qual sabor do JavaScript usar é uma grande vitória. Exemplos de reação em toda a web são frustrantemente inconsistentes - são apresentados em ES5 e ES6 em números aproximadamente iguais e atualmente oferecem três maneiras diferentes de declarar componentes . Isso cria confusão para os recém-chegados. (Angular também abraça decoradores em vez de se estender - muitos considerariam isso um plus também).

Embora o Angular 2 não exija o TypeScript, a equipe central do Angular certamente o abraça e usa como padrão o TypeScript na documentação. Isso significa que exemplos relacionados e projetos de código aberto têm mais probabilidade de parecerem familiares e consistentes. Angular já fornece exemplos claros que mostram como utilizar o compilador TypeScript . (apesar de admitir que nem todos estão adotando o TypeScript ainda, mas eu suspeito que logo após o lançamento ele se tornará o padrão de fato). Essa consistência deve ajudar a evitar a confusão e a sobrecarga de decisões que acompanham o início do React.

Churn Reduzido

2015 foi o ano do cansaço do JavaScript . Embora se espere que o próprio React seja bastante estável com a versão 15 em breve , o ecossistema do React agitou-se a um ritmo acelerado, particularmente em torno da longa lista de sabores e rotas do Flux . Portanto, qualquer coisa que você escreva no React hoje pode parecer desatualizada ou exigir a interrupção de mudanças no futuro se você se apoiar em uma das muitas bibliotecas relacionadas.

Em contraste, Angular 2 é uma cuidadosa e metódica reinvenção de uma estrutura madura e abrangente. Portanto, é menos provável que Angular se revolva de maneiras dolorosas após o lançamento. E como uma estrutura completa, quando você escolhe Angular, você pode confiar em uma única equipe para tomar decisões cuidadosas sobre o futuro. No React, é sua responsabilidade reunir um monte de bibliotecas de código aberto diferentes, rápidas, em um todo abrangente que funciona bem em conjunto. É um trabalho demorado, frustrante e sem fim.

Suporte amplo de ferramentas

Como você verá abaixo, considero o JSX do React uma grande vitória. No entanto, você precisa selecionar ferramentas que suportem JSX. O React se tornou tão popular que o suporte a ferramentas raramente é um problema hoje, mas é improvável que novas ferramentas, como IDEs e linters, suportem JSX no primeiro dia. Os modelos do Angular 2 armazenam marcações em uma string ou em arquivos HTML separados, portanto, não requer suporte especial a ferramentas (embora pareça que ferramentas para analisar inteligentemente modelos de string do Angular estejam a caminho).

Componente Web amigável

O design do Angular 2 abrange o padrão do componente da web. Sheesh, estou envergonhado por ter esquecido de mencionar isso inicialmente - eu publiquei recentemente um curso sobre componentes da web ! Em suma, os componentes que você constrói no Angular 2 devem ser muito mais fáceis de converter em componentes da Web simples e nativos do que os componentes do React. Claro, o suporte ao navegador ainda é fraco , mas isso pode ser uma grande vitória a longo prazo.

A abordagem da Angular vem com seu próprio conjunto de dicas, o que é um bom exemplo para discutir as vantagens do React…

Reagir Vantagens

Tudo bem, vamos considerar o que diferencia o React.

JSX

JSX é uma sintaxe semelhante a HTML que é compilada em JavaScript. Marcação e código são compostos no mesmo arquivo. Isso significa que a conclusão de código lhe dá uma mão enquanto você digita referências às funções e variáveis ​​de seu componente. Em contraste, os modelos baseados em strings do Angular vêm com as desvantagens habituais: Nenhum código colorido em muitos editores, suporte de conclusão de código limitado e falhas de tempo de execução. Normalmente, você também esperaria mensagens de erro insatisfatórias, mas a equipe do Angular criou seu próprio analisador de HTML para corrigir isso . (Bravo!)

Se você não gosta de modelos baseados em strings angulares, pode mover os modelos para um arquivo separado, mas então volta ao que chamo de “os velhos tempos”: conectando os dois arquivos juntos em sua cabeça, sem código suporte de conclusão ou verificação em tempo de compilação para ajudar. Isso não parece grande coisa até que você aproveite a vida no React. Compor componentes em um único arquivo verificado em tempo de compilação é uma das grandes razões pelas quais o JSX é tão especial.

 
Contrastando como o Angular 2 e o React lidam com uma tag de fechamento ausente

Para saber mais sobre por que o JSX é uma grande vitória, veja JSX: The Other Side of the Coin .

Reagir falha rápida e explicitamente

Quando você faz um erro de digitação no JSX do React, ele não compila. Isso é uma coisa linda. Isso significa que você sabe imediatamente qual linha tem um erro. Ele informa imediatamente quando você se esquece de fechar uma tag ou fazer referência a uma propriedade que não existe. Na verdade, o compilador JSX especifica o número da linha em que ocorreu o erro . Esse comportamento acelera radicalmente o desenvolvimento.

Em contraste, quando você digitar uma referência de variável em Angular 2, nada acontece. Angular 2 falha silenciosamente no tempo de execução em vez de tempo de compilação . Ele falha lentamente . Eu carrego o aplicativo e me pergunto por que meus dados não estão sendo exibidos. Não tem graça.

Reagir é centrado em JavaScript

Aqui está. Esta é a diferença fundamental entre React e Angular. Infelizmente, o Angular 2 permanece centrado em HTML e não centrado em JavaScript . O Angular 2 falhou em resolver seu problema de projeto mais fundamental:

Angular 2 continua colocando “JS” em HTML. Reagir coloca "HTML" em JS.

Eu não posso enfatizar o impacto desse cisma o suficiente. Isso impacta fundamentalmente a experiência de desenvolvimento. O design centrado em HTML do Angular continua sendo sua maior fraqueza. Como eu falo em " JSX: O outro lado da moeda ", o JavaScript é muito mais poderoso que o HTML. Portanto, é mais lógico melhorar o JavaScript para suportar a marcação do que aprimorar o HTML para suportar a lógica . HTML e JavaScript precisam ser colados de alguma forma, e a abordagem centrada em JavaScript do React é fundamentalmente superior à abordagem centrada em HTML do Angular, Ember e do Knockout.

Aqui está o porquê…

Design centrado em JavaScript do React = simplicidade

Angular 2 continua a abordagem de Angular 1 ao tentar tornar o HTML mais poderoso. Então você tem que utilizar a sintaxe exclusiva do Angular 2 para tarefas simples como looping e condicionais. Por exemplo, o Angular 2 oferece ligações unidirecionais e bidirecionais por meio de duas sintaxes que, infelizmente, são bem diferentes:

{{myVar}} // Ligação 
unidirecional ngModel = "myVar" // Ligação bidirecional

No React, a marcação de ligação não muda com base nessa decisão (ela é tratada em outro lugar, como eu diria que deveria ser). Em ambos os casos, parece assim:

{myVar}

O Angular 2 suporta modelos mestres em linha usando esta sintaxe:

<ul> 
<li * ngFor = "# herói dos heróis">
{{hero.name}}
</ li>
</ ul>

O snippet acima faz um loop sobre uma série de heróis. Eu tenho várias preocupações:

  • Declarar um "modelo mestre" através de um asterisco anterior é enigmático.
  • O sinal de libra na frente do herói declara uma variável de modelo local. Este conceito-chave parece um ruído desnecessário (se preferir, você pode usar o `var`).
  • O ngFor adiciona semânticas em loop ao HTML através de um atributo específico do Angular.

Compare a sintaxe do Angular 2 acima com o JS * puro do React: (reconhecidamente, a propriedade-chave abaixo é específica do React)

<ul> 
{heroes.map (herói =>
<li key = {hero.id}> {hero.name} </ li>
)}
</ ul>

Como o JS suporta looping nativamente, o JSX do React pode simplesmente alavancar todo o poder do JS para essas coisas e fazer muito mais com map, filter, etc.

Basta ler a folha de dicas do Angular 2 . Isso não é HTML. Isso não é JavaScript. É angular .

Para ler o Angular: Aprenda uma longa lista de sintaxe específica do Angular.
Para ler Reagir: Aprenda JavaScript.

O React é único em sua simplicidade sintática e conceitual. Considere iterar nos populares frameworks / bibliotecas JS de hoje:

Ember: {{# each}} 
Angular 1: ng-repeat
Angular 2: ngPara
Knockout: data-bind = "foreach"
Reagir: APENAS USE JS. :)

Todos, exceto o React, usam substituições específicas do framework para algo que é nativo e trivial em JavaScript: um loop . Essa é a beleza do React. Ele abrange o poder do JavaScript para lidar com marcações, portanto, nenhuma nova sintaxe estranha é necessária.

As esquisitices sintáticas do Angular 2 continuam com a vinculação de cliques:

(clique) = "onSelect (hero)"

Em contraste, o React usa novamente JavaScript simples:

onClick = {this.onSelect.bind (isso, herói)}

E como o React inclui um sistema de eventos sintéticos (como o Angular 2), você não precisa se preocupar com as implicações de desempenho de declarar os manipuladores de eventos como este.

Por que encher sua cabeça com a sintaxe exclusiva de um framework se você não precisa? Por que não simplesmente abraçar o poder do JS?

Experiência de desenvolvimento luxuosa

O suporte à conclusão de código do JSX, verificações em tempo de compilação e mensagens de erro avançadas já criam uma excelente experiência de desenvolvimento que economiza digitação e tempo. Mas combine tudo isso com o recarregamento a quente com viagens no tempo e você terá uma experiência de desenvolvimento rápido como nenhuma outra.

 

Preocupações de tamanho

Aqui estão os tamanhos de alguns frameworks e bibliotecas populares, minificados ( fonte ):

Angular 2: 566k (766k com RxJS) 
Ember: 435k Angular 1 : 143k Reagir + Redux: 139k

Edit : Desculpe, eu tinha números incorretos anteriores que eram para aplicativos ToDoMVC simples em vez dos quadros brutos. Além disso, espera-se que o número Angular 2 caia para a versão final. Os tamanhos listados são para o framework, minificado, no navegador (nenhum gzip é fatorado aqui).

Para fazer uma comparação real, criei o aplicativo Tour of Heroes do Angular 2 em Angular 2 e React (usei o novo kit inicial do React Slingshot ). O resultado?

Angular 2 : 764k minificado
Reagir + Redux : 151k minificado

Então Angular 2 é atualmente mais de quatro vezes o tamanho de um aplicativo React + Redux de simplicidade comparável . (Novamente, espera-se que o Angular 2 perca algum peso antes do lançamento final).

Agora dito isso, admito que as preocupações com o tamanho dos frameworks podem ser exageradas:

Os aplicativos grandes tendem a ter um mínimo de várias centenas de kilobytes de código - geralmente mais -, sejam eles construídos com uma estrutura ou não. Os desenvolvedores precisam de abstrações para criar softwares complexos e, independentemente de serem oriundos de uma estrutura ou serem escritos à mão, causam um impacto negativo no desempenho dos aplicativos.
Mesmo se você eliminasse completamente os frameworks, muitos aplicativos ainda teriam centenas de kilobytes de JavaScript. - Tom Dale em JavaScript Frameworks e Mobile Performance

Tom está certo. Estruturas como Angular e Ember são maiores porque oferecem muitos outros recursos prontos para uso.

No entanto, minha preocupação é a seguinte: muitos aplicativos não precisam de tudo que esses grandes frameworks colocam na caixa. Em um mundo que adota cada vez mais pacotes de microsserviços, micro aplicativos e de responsabilidade única , o React oferece a você o poder de “dimensionar corretamente” seu aplicativo, selecionando cuidadosamente apenas o que é necessário . Em um mundo com mais de 200.000 npm , esse é um lugar poderoso para se estar.

Reaja Abraça a Filosofia Unix .

Reagir é uma biblioteca. É precisamente a filosofia oposta de estruturas amplas e abrangentes como Angular e Ember. Então, quando você selecionar React, você está livre para escolher as melhores bibliotecas modernas que resolvem melhor o seu problema. O JavaScript move-se rapidamente e o React permite que você troque pequenos pedaços de seu aplicativo por melhores bibliotecas, em vez de esperar e esperar que seu framework inove.

O Unix resistiu ao teste do tempo. Aqui está o porquê:

A filosofia de ferramentas pequenas, compostas e de propósito único nunca sai de moda.

O React é uma ferramenta de finalidade única, composta e concentrada, usada por muitos dos maiores sites do mundo . Isso é um bom augúrio para o futuro (Dito isso, o Angular também é usado por muitos grandes nomes ).

Resumo do Showdown

O Angular 2 é uma grande melhoria em relação à versão 1. O novo modelo de componente é mais simples de entender que as diretivas da v1, ele suporta renderização isomórfica / universal e usa um DOM virtual oferecendo melhorias de 3 a 10x no desempenho. Essas mudanças tornam o Angular 2 muito competitivo com o React. Não há como negar que sua natureza plena de opiniões oferece alguns benefícios claros ao reduzir a “fadiga do JavaScript”.

No entanto, o tamanho e a sintaxe do Angular 2 me dão uma pausa. O compromisso da Angular com o design centrado em HTML torna-o complexo em comparação com o modelo centrado em JavaScript mais simples da React. No React, você não aprende shims HTML específicos de framework como ngWhatever. Você gasta seu tempo escrevendo JavaScript simples. Esse é o futuro em que acredito.

Compartilhe

Ebrahim P. Leite

Ebrahim P. Leite

Escreva aqui uma descriçao breve sobre você...

Veja também

Comentários (0)