Uma comparação entre Angular e React e suas linguagens principais

Neste artigo, compararemos duas das tecnologias da web mais populares em 2019 e também abordaremos sua história, principais diferenças, linguagens principais recomendadas (TypeScript e JavaScript) e assim por diante. No geral, essas tecnologias tornaram muito mais fácil para os desenvolvedores reutilizar, refatorar e manter o código, dividindo as coisas em módulos / componentes.

O objetivo deste artigo não é encontrar a melhor tecnologia, mas comparar, destacar e esclarecer alguns equívocos. Também vamos nos concentrar no que é importante, em vez de nos pequenos detalhes que realmente não importam a longo prazo.

Você deve estar ciente de que a comparação entre essas duas tecnologias não pode ser totalmente coberta. O Angular vem com um framework completo (MVC), enquanto o React é uma biblioteca frontal com muitos pacotes de código aberto para integração.

Se você deseja se tornar um desenvolvedor web melhor, começar seu próprio negócio, ensinar outras pessoas ou simplesmente melhorar suas habilidades de desenvolvimento, assine meu boletim informativo para obter as últimas notícias e atualizações da web.

Perguntas a serem respondidas

  • Quais são as principais diferenças entre Angular e React?
  • O que torna o TypeScript tão especial?
  • Quão populares são essas tecnologias?
  • Qual é o status atual do código aberto?
  • Qual tecnologia as empresas mais usam?
  • As linguagens com tipos estáticos influenciam a qualidade do código e o tempo de desenvolvimento?

Seções futuras serão adicionadas com base na demanda dos comentários.

Principais comparações

Aqui está uma rápida comparação lado a lado entre Angular (esquerda) e React (direita).

Uma coisa realmente excelente sobre o React em termos de desempenho é o Virtual DOM, sobre o qual você provavelmente já ouviu falar algumas vezes. Se não, não se preocupe, vou explicar!

Problema

Digamos que você queira atualizar a data de nascimento de um usuário dentro de um bloco de tags HTML.

DOM Virtual

Ele apenas atualiza a parte necessária ao ver as diferenças entre a versão HTML anterior e a atual. É uma abordagem semelhante de como o GitHub opera ao detectar alterações no arquivo.

DOM regular

Ele irá atualizar toda a estrutura de árvore de tags HTML até atingir a data de nascimento.

Por que isso Importa?

Pode não importar para o problema descrito acima. No entanto, se lidarmos com 20-30 solicitações de dados assíncronos na mesma página (e para cada solicitação de página substituímos todo o bloco HTML), isso influenciará o desempenho, bem como a experiência do usuário.

Precisa de mais contexto? Confira o artigo de Dace!

Mas primeiro, de volta ao início ...

História

Precisaremos saber um pouco de história (contexto) porque fornece uma visão de como as coisas podem se formar no futuro.

Não vou entrar em detalhes sobre o que exatamente aconteceu entre o Angular e o AngularJS, e tenho certeza de que há muitos recursos disponíveis que cobrem isso. Resumindo, o Google substituiu o AngularJS pelo Angular e o JavaScript pelo TypeScript.

Tudo bem, então nos dias com ES4 / ES5, a curva de aprendizado para JavaScript era muito alta. Se você veio do mundo do Java, C # ou C ++, um mundo de programação orientada a objetos (OOP), aprender JavaScript simplesmente não era tão intuitivo. Em outras palavras, foi um pé no saco.

Não é porque a linguagem foi mal escrita, mas porque tem um propósito diferente. Ele foi construído para lidar com a natureza assíncrona da web, como interação do usuário, associação de eventos, transições / animações e assim por diante. É um animal diferente com instintos diferentes.

Popularidade

Conforme revelado pelo Google Trends, Angular e React são duas das tecnologias da web mais populares em 2019.

O Angular tem mais resultados de pesquisa do que o React; no entanto, isso não significa necessariamente que um seja melhor do que o outro. Mas isso indica o que as pessoas acham interessante, seja qual for o motivo. É importante estar ciente de que as pessoas podem misturar palavras-chave como AngularJS ou Angular e, assim, levar a resultados de pesquisa maiores.

Uma coisa é certa - ambas as tecnologias estão crescendo e o futuro parece brilhante. Isso significa que você não precisa se preocupar se uma tecnologia irá falhar e deixá-lo para trás.

É importante não negligenciarmos a história em termos do que aconteceu entre o AngularJS e o Angular, porque a história é uma forma de indicação do que pode acontecer no futuro. Mas se você tem alguma experiência com Angular e AngularJS, provavelmente verá por que as decisões foram feitas para melhor. Só para mencionar, essas coisas podem acontecer com qualquer framework por aí, incluindo React.

Código aberto

React tem mais de 100.000 estrelas, juntamente com 1200 colaboradores e cerca de 300 problemas aguardando para serem resolvidos.

O React tem uma vantagem de time-to-market, pois foi lançado 3 anos antes do Angular. E isso significa que enfrentou muitos problemas do mundo real, passou por testes críticos e, no geral, se desenvolveu em uma biblioteca frontal adaptável e flexível que muitos adoram.

Quando se trata do Angular, à primeira vista, podemos ver claramente que o Angular tem 6 vezes mais problemas do que o React (não é bom). No entanto, não devemos esquecer que o Angular é um framework muito maior e também tem menos desenvolvedores usando-o (atualmente) porque foi lançado em 2016.

Estatísticas retiradas da página Angular e Reacts do GitHub.

O que as empresas estão usando

React foi inicialmente desenvolvido no Facebook para Facebook para otimizar e facilitar o desenvolvimento de componentes. Um artigo escrito por Chris Cordle aponta que o React é mais usado no Facebook do que o Angular no Google.

Então, quem usa qual tecnologia?

# Reagir

  • Facebook
  • AirBnb
  • Uber
  • Netflix
  • Instagram
  • Whatsapp
  • Dropbox

# Angular

  • Eat24
  • Loja CVS
  • onefootball
  • Google Express
  • NBA
  • Delta
  • wix.com
Se você conhece alguma empresa grande (bem conhecida) que usa o Angular, compartilhe com um link.

TypeScript e JavaScript (ES6 +)

Como mencionei, pode ser enganoso comparar apenas Angular e React sem focar na linguagem central que cada um enfatiza (de acordo com seus documentos).

Nota! O objetivo desta seção não é decidir se escolheremos Angular ou React. Mas esclareça alguns conceitos errôneos entre linguagens tipadas estaticamente e dinamicamente que vêm acontecendo há algum tempo, com base em pesquisas.

Em termos de base de usuários, JavaScript é superior. Mas o TypeScript está aumentando rapidamente, então, quem sabe o que 10-15 anos trarão.

Popularidade do TypeScript nos últimos 5 anos

Popularidade do JavaScript nos últimos 5 anos

Popularidade do JavaScript vs TypeScript nos últimos 5 anos

TypeScript foi inicialmente desenvolvido pela Microsoft para tornar o JavaScript mais fácil (em outras palavras, para tornar o ES5 mais fácil). Foi lançado em outubro de 2012. E é simplesmente um transpilador que compila TypeScript para código JavaScript, o que também significa que você pode escrever código ES5 em um arquivo TypeScript. TypeScript é conhecido como um superconjunto de JavaScript.

Em geral, o TypeScript fornece uma transição suave para programadores com um plano de fundo de programação orientada a objetos (OOP). É importante notar que o TypeScript foi lançado no período do ES5 e, durante esse tempo, o ES5 não era uma linguagem OOP baseada em classes.

Resumindo, o mais próximo que você poderia chegar das classes e objetos naquela época era através da herança do protótipo. E, como sabemos, esta foi uma transição difícil para a maioria dos desenvolvedores com experiência em OOP. Portanto, a decisão ideal era, claro, escolher algo com o qual se sentisse confortável e familiarizado, que provavelmente era o TypeScript.

No entanto, nos últimos anos, o JavaScript evoluiu e implementou muitas mudanças importantes, como módulos, classes, operadores de propagação, funções de seta, literais de modelo e assim por diante. No geral, permite que os desenvolvedores escrevam código declarativo, ao mesmo tempo que oferece suporte às características de uma verdadeira linguagem OOP (ou seja, incluindo estrutura baseada em classe).

Linguagens digitadas estaticamente e dinamicamente

Uma linguagem com tipagem estática basicamente significa que você pode definir o tipo de variável (string, número ou array, etc.). Você pode perguntar por que isso é importante. Aqui está uma analogia com o mundo real que configurei (criatividade no seu melhor).

Digamos que você queira reabastecer seu carro com gasolina. Uma coisa importante é abastecer com o gás certo - gasolina ou diesel. E se você não sabe, pode precisar comprar um carro novo.

Claro, a gravidade não é assim com a codificação, no entanto, em alguns casos pode ser. Pense nisso. Se você trabalha com um aplicativo grande, gostaria de saber o argumento e o tipo de propriedade que é passado, caso contrário, você pode quebrar o código.

Tudo bem, então se você ainda está confuso sobre o que significa digitado estaticamente, verifique isto:

Propriedade de tipo estático

Argumento estático tipado

Eu aprendi que muitas pessoas acreditam que uma linguagem tipada estaticamente significa código confiável e é mais frequentemente usada como um argumento vencedor sobre linguagens tipadas dinamicamente. E, francamente, é muito difícil refutar essa afirmação porque ela depende fundamentalmente do ambiente de desenvolvimento, da experiência dos programadores e, claro, dos requisitos do projeto.

Felizmente, a pesquisa (tl; dr video) levou isso a sério e colocou esse mito à prova com 49 indivíduos.

As observações da pesquisa são:

  • Linguagem digitada estaticamente requer mais tempo devido à correção de erros de digitação
  • A linguagem digitada dinamicamente é legível e fácil de escrever (código declarativo)

A Figura 5 mostra que, em média, os desenvolvedores reduzem seu tempo de desenvolvimento por um fator de dois ao escrever uma linguagem digitada dinamicamente.

Se você quiser se aprofundar neste tópico, sugiro a leitura deste artigo de Eric Elliott, que afirma que você pode não precisar do TypeScript (ou de linguagens de tipo estático).

O que escolher

Portanto, a questão não é apenas sobre o que Angular ou React oferece, mas também sobre em qual linguagem central você deve investir tempo. E realmente não importa, desde que você escolha algo que atenda aos seus requisitos e complexidade.

Se você não é fã de tipos, não há nada que o impeça de escrever o código ES6 no TypeScript. É só que, se você precisar, ele está lá.

Mas se você construir um aplicativo front-end bastante grande com Angular lidando com muitas solicitações HTTP, ter tipos realmente ajuda com questões como "Que tipo de objeto é este, que campos posso usar e que tipo é este campo etc" . Funciona muito bem para colaboração e esclarecimento de pequenas coisas.

Aqui está uma comparação simples de classe-objeto entre TS e JS (ES6).

IMO

A digitação estática parece estruturada, segura, legível e fácil de colaborar com outras pessoas (evita que as pessoas transmitam valores inesperados). No entanto, ao trabalhar com tipagem dinâmica, tenho a flexibilidade e criatividade para focar mais em criar do que pensar muito sobre tipos, interfaces e genéricos e assim por diante.

E a partir dos aplicativos da web anteriores que criei, não tive grandes problemas por não ter tipos estáticos. Não significa que não goste - só que não preciso, mas talvez precise no futuro.

Aqui está uma atualização - atualmente estou trabalhando com alguns desenvolvedores da Microsoft para construir um aplicativo usando a estrutura Angular. A razão pela qual selecionamos o Angular é porque a maioria dos pacotes já está definida e a documentação para tudo está em um só lugar. Ele também enfatiza o TypeScript, que é uma escolha perfeita porque a maioria dos desenvolvedores já tem muita experiência com programação orientada a objetos.

Por outro lado, eu vi aplicativos semelhantes com os quais estamos trabalhando construídos com React. Portanto, em geral, ambas são ferramentas poderosas e dependem principalmente de como você configura a arquitetura.

Notas para viagem

  • TypeScript é simplesmente um transpiler, pode ser usado com React ou qualquer outro framework JS
  • React lida com gerenciamento de memória de forma eficiente (DOM virtual)
  • React usa JavaScript (ES6), uma linguagem da web reconhecida desde 1995
  • Angular usa TypeScript, lançado em 2012
  • A linguagem digitada estaticamente é ótima, mas não é obrigatória
  • Linguagens digitadas dinamicamente requerem menos tempo para escrever e mais flexibilidade para usar a criatividade
  • Aprender linguagem digitada estaticamente pode ser um desafio, especialmente se você só trabalha com linguagens digitadas dinamicamente
  • ES6 implementou muitos recursos excelentes, como módulos, classes, operador de propagação, funções de seta, literais de modelo que permitem que você escreva menos, mais limpo e mais estruturado (açúcar sintático)
  • TS é simplesmente ES6 + com tipos e muito mais

Conclusão

A estrutura / biblioteca de componentes que você escolher pode influenciar quanto tempo você gasta programando e seu orçamento. Se você tem uma equipe com desenvolvedores C #, Java ou C ++, então provavelmente optaria pelo Angular, já que o TypeScript compartilha muitas semelhanças com essas linguagens.

A melhor recomendação que posso oferecer é configurar um aplicativo básico em Angular e React e, em seguida, avaliar a linguagem e o fluxo de trabalho antes de tomar uma decisão.

Como mencionado anteriormente, ambas as tecnologias têm seu próprio conjunto de vantagens e semelhanças, e isso realmente se resume aos tipos de requisitos que o aplicativo oferece, à complexidade e ao nível de experiência dos desenvolvedores.

Aqui estão alguns artigos que escrevi sobre o ecossistema da web, juntamente com dicas e truques de programação pessoal.

  • Uma mente caótica leva a um código caótico
  • Desenvolvedores que querem aprender coisas novas constantemente
  • Um guia prático para módulos ES6
  • Aprenda estes conceitos básicos da Web
  • Aumente suas habilidades com esses métodos importantes de JavaScript
  • Programe mais rápido criando comandos bash personalizados

Você pode me encontrar no Medium, onde eu publico semanalmente. Ou você pode me seguir no Twitter, onde posto dicas e truques relevantes de desenvolvimento da web junto com histórias pessoais.

PS Se você gostou deste artigo e quer mais, por favor, bata palmas ❤ e compartilhe com amigos que possam precisar, é um bom carma.