Angular VS React

Quem é que não gosta de uma boa luta?

Videogame fight

Street Fighter, Mortal Kombat, Virtua Fighter, Tekken… Trazem-nos boas memórias. Estamos a assumir que a vocês também.

As personagens que escolhíamos, em cada jogo, eram quase os nossos melhores amigos.

Deixemos o mundo dos videojogos para entrar no mundo do development e iniciar uma batalha entre Angular e React!

“Uma batalha entre Angular e React? Mas isso faz sentido?”

E porque não? Vamos transformar este combate num ringue técnico entre estas 2 tecnologias.

Do you want to play this game?

Play a Game

A KWAN apresenta:
Do lado esquerdo do ringue, Angular! Do lado direito do ringue, o voraz adversário React!
Representado por Jefferson Ferreira Representado por Pedro Luís
Angular React



Atributos Angular React
Autor Google Facebook
Linguagem Typescript JSX
Tipo framework Biblioteca
Tamanho 764k 151k
Pontuação Github 26.8k ⭐ 73.2k ⭐
Contribuidores Github 495 1.042


Que comece o combate…

Round 1: Curva de Aprendizagem

Curva de Aprendizagem

Angular 🔴
“Todas as frameworks recentes, bem como diversos processos ou ferramentas, exigem uma curva de aprendizagem acentuada no início. No entanto, a médio e longo prazo, os benefícios acabam por ser brutais, o que justifica o tempo e energia despendidos durante esta aprendizagem.”
Jefferson Ferreira

React 🔵
“Tratando-se de uma tecnologia apenas associada à camada de apresentação e não uma framework mais completa, a sua curva de aprendizagem torna-se bastante mais reduzida. A apresentação dos dados é feita recorrendo à manipulação de tags HTML, não sendo deste modo necessário dedicar tempo a aprender uma nova tecnologia de templating.”
Pedro Luís

Vencedor: React 🎖️

Round 2: Escalabilidade

Escalabilidade

Angular 🔴
“O Angular baseia-se em alguns pilares muito interessantes da computação, formando um ambiente composto por uma framework, com base em conceitos que evoluíram ao longo dos anos. Podemos citar:

  • Filosofia da programação declarativa ao invés da tradicional programação imperativa, sendo esta uma excelente abordagem no que toca ao desenvolvimento web dinâmico e SPA (Single Page Application).

  • ngModules, o que garante o mindset de modularização por padrão, o baixo acoplamento e a facilidade com testes.

  • Templates, DataBinding, Directives, BootStraping, Model, Views, HttpHandlers e API´s. Alguns exemplos dos conceitos que compõem a framework e que garantem agilidade no IO de eventos e a comunicação com servidores modernos.

  • Compilação JIT e AoT com base na moderna e prática linguagem TypeScript.

  • Compatível com múltiplas instâncias e containers como NGINX, Docker, arquitecturas CLOUD, etc.”
    Jefferson Ferreira

React 🔵
“Devido ao facto de a gestão de informação apresentada ao utilizador ser feita recorrendo a uma DOM virtual, criada e gerida pelo próprio React, o potencial de optimização torna-se extremamente elevado. Conseguimos deste modo criar aplicações com um estado interno bastante complexo mas cujas actualizações não implicam um impacto acentuado na sua performance.”
Pedro Luís

Vencedor: Angular 🎖️

Round 3: Popularidade

Popularidade

Angular 🔴
“Hoje, a popularidade do Angular, juntamente com o seu grau de utilização, é considerada mundial e está a tornar-se cada vez mais comum em pequenas, médias e grandes empresas. O Angular possui quase 27 mil estrelas no GitHub e praticamente 500 contribuidores que utilizam esta tecnologia. No Stack Overflow, são cerca de 65 mil perguntas e os números não param de aumentar, principalmente nos sites de emprego onde existe a procura desta tecnologia.”
Jefferson Ferreira

React 🔵
“React é uma tecnologia muito popular, encontrando-se actualmente no topo das tecnologias de
front-end mais usadas
juntamente com Angular.

Além do facto de ter sido criada e activamente desenvolvida pela empresa Facebook, um factor que contribui bastante para a subida da sua adopção consistiu na ruptura que a equipa de Angular 2 fez com a sua versão anterior. Angular 1 iria então deixar de ser suportada após o lançamento da sua versão 2, deixando esta de ser compatível com código desenvolvido anteriormente e deixando os developers presos.”
Pedro Luís

Vencedor: ¯\_(ツ)_/¯ As 2 tecnologias são igualmente populares, apesar das diferentes necessidades e preferências de cada developer… Por isso, vamos assumir que são ambas vencedoras! 🎖️🎖️

Round 4: Empregabilidade

Empregabilidade

Nota: Não há ninguém melhor que os nossos ambassadors para falar do estado actual do mercado. Por isso, neste round, convidámos a Cátia Diogo para representar o Angular e a Ana Belo (ou Belinha para os amigos) para representar o React. Os nossos developers voltam à carga no próximo round.

Angular 🔴
“Para dar uma ideia, nos últimos 6 meses, tivemos 22 ofertas de trabalho na KWAN onde o Angular era mencionado. Seja pela proximidade com o mundo Google e Microsoft ou pelo facto de ser uma tecnologia ensinada na faculdade, a verdade é que podemos considerar que actualmente há muita procura por Angular.” - Cátia Diogo

React 🔵
“No mundo KWAN, nos mesmos 6 meses, tivemos 13 ofertas de trabalho para esta tecnologia. Apesar de ser um número inferior, é importante dizer que tem havido um crescimento da procura, muito à pala do React Native, que permite criar aplicações nativas em todas as plataformas iOS, Android e Windows.” - Ana Belo

Vencedor: ¯\_(ツ)_/¯ Na verdade não existe uma resposta definitiva. O mercado tem mostrado alguma volatilidade na procura destas tecnologias, tanto uma como outra são bastante valorizadas actualmente. Aliás, só o facto de estarmos a fazer esta battle com estas 2 tecnologias já te diz isso mesmo.

Final Round: Tamanho do código

Tamanho do código

Angular 🔴
“É muito comum nos projectos iniciais, o developer não conseguir optimizar o código da melhor forma, acabando por criar mais código do que é necessário para criar a melhor solução, pelo menos nos projectos iniciais.

Contudo, sabemos que o principal foco do Angular está na modularização e na forma como a sua framework trabalha o conceito Model-View-View-Model, estimulando a construção de soluções altamente modularizadas, com base no baixo acoplamento e no uso de templates altamente reutilizáveis.”
Jefferson Ferreira

React 🔵
“A estrutura de uma aplicação React é baseada na distribuição de código por diversos componentes associados entre si. Esta natureza modular torna o desenvolvimento de código bastante DRY (don’t repeat yourself) e permite manter a complexidade da aplicação a um nível bastante mais acessível.”
Pedro Luís

Vencedor: React 🎖️

E agora, quem vai ser o vencedor desta batalha tão renhida?

Vencedor da batalha

Este não é propriamente o desfecho que conhecemos das “lutas” da nossa infância mas a verdade é que neste confronto não há vencedores nem vencidos… 😓 😱 😳

Antes de começares a ter suores frios e a preparar os punhos para iniciar um round connosco, passamos a explicar-te:

Não existe uma solução perfeita que possa servir para todos os problemas. Cada caso é um caso e vais ser tu a decidir qual a tecnologia que se aplica melhor aos teus projectos. Mais importante do que escolher entre a tecnologia mais acertada para cada contexto, é não ficares no “limbo” da indecisão.

O conselho que temos para te dar é que te mantenhas informado, apostes em formação e explores todas as opções que tens. Tudo isto vai dar-te uma bagagem de aprendizagem cada vez maior.

Não há certo nem errado. O único vencedor possível desta luta és tu. Tu é que escolhes o que melhor se adequa às necessidades que vives no momento!

ricardo
Published 17-07-2017
Margarida Barata

Completamente viciada em viagens, animais e boa comida. O resto do tempo, está a aprender sobre as tendências digitais no mundo do Marketing e da Publicidade.


Toma controlo da tua carreira.

Fica a par de todas as novidades.

Subscreve.