Menu

Angular VS React

17 Julho, 2017

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!

Leave a comment