Angular vs React: qual escolher e aplicações práticas?

Por Diogo Salaberri, Technical Project Manager @ Xpand IT

Depois de vários anos em que o JavaScript era usado para fazer pequenas animações ao mover elementos no ecrã ou a mudar a cor de componente de HTML, chegámos até aqui! Vivemos num momento em que o JavaScript é soberano na Web. Talvez ainda não seja a tecnologia mais usada, pois ainda temos muito código legacy escrito em PHP, mas já estamos num período onde temos uma grande gama de soluções JavaScript, nomeadamente React, React Native, Angular, Ionic , VueJS, dentre outras. É difícil imaginar desenvolvimento para Web sem pensar em JavaScript. Temos várias opções em termos de ferramentas, inúmeras opções para styling, bundling, packaging, etc. Vivemos para ver o JavaScript romper a barreira do Frontend e chegar, com força e robustez, ao Backend. Que altura para ser Web Developer, meus amigos!

Antes, as aplicações Frontend cresciam e em complexidade. Falava-se em micro frontends, web components, etc. Agora, temos mais escolhas do que nunca – mais opções do que dedos das mãos para enumerá-las. E isso trouxe, além deste mundo de possibilidades, um dilema levantado também pelo Uncle Ben, nos filmes do Spider-Man.

E é aqui, , que vamos confrontar, no melhor sentido possível da palavra, os dois gigantes da Web: Angular vs React. Estes dois titãs dividem opiniões e fan bases. Este blog post tem como objetivo traçar um paralelo entre as duas ferramentas: React como livraria e Angular como framework. Vamos passar pelo básico, dando um pouco de foco à conceção de cada um, passando por comparações em campos mais específicos, assim como falar sobre projetos e estrutura das mesmas tecnologias.

Disclaimer: Este texto não vai te dizer o que fazer e nem dizer o que não fazer. Não tem a mínima intenção de gerar polémica ou até criar atrito entre as ferramentas. Quem gosta de React, deve seguir com isso, quem morre de amores por Angular, faça o mesmo. Queremos criar aqui um paralelo saudável e fazer pensar sobre as abordagens, poderes e fraquezas dos nossos “super heróis”.

O que é Angular?

A framework para desenvolvimento Web, o senhor da estrutura, o mestre na organização.

Angular é uma framework/plataforma open-source baseada em TypeScript, para desenvolvimento web. Foi criado pela equipa de Angular do Google, que continua responsável pela sua gestão. O Angular (leia-se versão 2 ou superior) é um completa reprodução do seu antecessor AngularJS. Por ser uma framework, Angular traz consigo uma série de normas e packages incorporados, como um solução http para chamadas a APIs, , rotas, etc.

O que é React?

A livraria da liberdade, onde eu monto o meu projeto conforme as minhas necessidades.

React, por sua vez, é uma livraria que tem como principal tarefa facilitar a criação de interfaces web. Por ser apenas uma simples (e poderosa) livraria, React trabalha num modelo de composição, através do qual podemos agregar livrarias conforme as nossas necessidades. A liberdade define esta opção, não temos muitas regras rígidas escolhendo React. Temos opções, muitas opções.

Comparações gerais

• Propósito:

– Angular tem o propósito de atuar como uma solução completa (framework). Trazendo consigo pequenas livrarias para suportar o desenvolvimento, também estabelece a sua própria organização

– React tem como propósito ser uma solução para gerar interfaces. Atuando com um conceito de composição, onde novas livrarias são adicionadas conforme as necessidades

• DOM [Document Object Model]

– Angular usa uma estratégia de DOM incremental, sendo que quando um novo DOM é criado, este é comparado com o anterior. As diferenças são aplicadas ao DOM real, alocando memória se necessário

– React, por sua vez, usa uma estratégia de DOM virtual. Sempre que o DOM mudar, um novo DOM virtual é criado, comparado com o anterior. As diferenças são apenas aplicadas no DOM real

• Data Binding

– Angular faz uso de One ou Two Way Data Binding, o model atualiza a UI e a UI atualiza o Model

– React usa apenas One Way Data Binding, onde o Model (State) atualiza a UI, mas a UI não afeta o Model (State)

• SSR (Server Side Rendering)

– Angular tem a opção do Angular Universal para realizar SSR

– React pode ser configurado para obter SSR ou mesmo usar Next.JS

• TypeScript

– Angular tem TypeScript por defeito, o que por si só traz grandes vantagens

– O uso de TypeScript em React é opcional

• Separação de conceitos

– Angular tem, e até impõe, uma certa organização de código,em que o JavaScript, template (HTML) e Styling (CSS) têm arquivos separados

– React, por sua vez, tem um conceito em que o template HTML é trazido para dentro do JavaScript, através do uso de JSX [JavaScript Syntax Extension]

Comparações práticas

Até este ponto do texto, apontei várias comparações que podem facilmente ser encontradas na internet. Há muitos bons textos que falam sobre estes mesmos tópicos. A partir daqui, apresento algumas comparações práticas, muito baseadas nas experiências que tive com as duas opções. Aqui a discussão fica um tanto subjetiva, mas vamos lá.

• Tamanho do Projeto

– Angular faz mais sentido quando o projeto é grande em quantidade de arquivos e em complexidade. Por ter esta estrutura de framework, com muita coisa já definida desde o início, mantém a organização do projeto durante o seu crescimento

­- React por sua vez, não é uma má solução. Porém, depende fortemente de uma definição de padrões. Por oferecer liberdade, se esta estrutura não for extensível e ajudar no crescimento do projeto, isso pode tornar-se um problema em aplicações maiores

• Tamanho da equipa

– Angular, pelo mesmo motivo da estruturação nativa de framework, ajuda quando o código é partilhado por equipas muito grandes. Quando desenvolvemos num repositório no qual várias pessoas desenvolvem código, as regras ajudam a manter o projeto em pé.

– React vai ter de estabelecer regras para proteger a sua liberdade. Regras estas que permitirão manter o projeto nos trilhos durante múltiplos drops de código por  pessoas diferentes, que provavelmente pensam de maneiras distintas.

• Curva de aprendizagem

– Angular, naturalmente, tem uma curva de aprendizagem maior, especialmente por ter muitas pequenas livrarias dentro do seu package inicial

– React já é muito mais direto ao assunto. Com poucos dias já é possível começar um projeto e criar componentes

• Administração do State

– Angular faz uso do NgRx, que é biblioteca de gerenciamento de estado, permitindo que este gerenciamento seja reativo. O uso de tal solução em projetos de Angular é um pouco mais raro, pois normalmente faz-se uso dos Services ou até de local/session storage como muletas

– Já em React, cada componente tem o seu State individual. Para além disto, o uso de Redux [biblioteca JavaScript de código aberto], para gerir o estado global é bastante comum em aplicações React

Considerações finais – Angular vs React

Para quem convive no mundo onde as duas soluções estão presentes, e se já puderam experimentar projetos de tamanhos distintos usando React ou Angular, fica bastante claro que a escolha certa aqui depende sempre da situação.

React vai ser a melhor escolha para determinados cenários e Angular vai ser melhor para outros. Portanto, ambos são vencedores, e se usados com sabedoria vão sempre trazer grandes resultados. Para finalizar, neste duelo de gigantes Angular vs React quem ganha é a Web. Nós, que gostamos de código, temos sempre a ganhar com opções de tão grande valor e poder à nossa disposição.