No nosso último artigo “O que precisas de saber para programar a próxima app”, abordámos de forma muito leve estas duas tecnologias.

Se já leste o artigo referido, sabes que tanto Angular como React são tecnologias muito populares no mundo do web development neste momento.
O que esperar deste artigo:

• Intro: Porquê usar frameworks e bibliotecas mais vocacionadas para o front-end;
• Compreender o que é Angular 2 e React;
• Algumas diferenças entre os dois

Este artigo destina-se a pessoas iniciantes que querem perceber melhor para que serve Angular e React. Se já és um ninja da programação és bem-vindo na mesma, afinal, há sempre qualquer coisa a aprender.

Porquê usar frameworks?

Nas últimas décadas, dezenas de frameworks, bibliotecas e outras ferramentas mais vocacionadas para o front-end surgiram - Angular, React, Backbone, Vue, Ember, Polymer, Dojo, etc. A lista é longa. Mas qual é a razão da sua popularidade e da cada vez maior adesão a este tipo de ferramentas?

Se já tens alguma experiência em programação e crias software na web com apenas HTML, CSS e Js (+ jQuery possivelmente) certamente te estás a perguntar: "para quê usar essas tecnologias se tenho jQuery ou as APIs do browser?".

Vamos responder a essa questão de seguida.

Single Page Applications (SPA)

As aplicações modernas necessitam de uma performance elevada com UIs fluídas. Não queremos que cada vez que um utilizador mude de categoria na nossa app, se mude de página, fazendo um novo pedido a um servidor que devolve uma nova página com novo conteúdo, com o tempo que isso acarreta (load time).

O Gmail é um exemplo óbvio de uma SPA que usamos frequentemente. Quando mudamos de categoria, a mudança é quase instantânea, não existe load time. Isto porque temos um load time maior quando abrimos o gmail pela primeira vez mas depois disso é muito rápido, sem ser preciso renderizar toda a página novamente.

Se queremos que o layout mude sem a página mudar, isso fará com que o utilizador não consiga navegar de forma tradicional, guardar a página ou retroceder, porque todas as secções estão na mesma página. Isso resolve-se implementando ao mesmo tempo um "routing interno" da página.

Exemplo: www.aminhaapp.com/books/buy está na mesma página que www.aminhaapp.com/books mas com este routing é possivel diferenciar em dois URLs diferentes sem se sair da mesma página. Estas frameworks vêm facilitar a criação deste routing como dos dinamismos dos layouts.

Modularização e componentes

Outra razão para se ter começado a utilizar estas ferramentas é o facto de terem uma estrutura muito mais organizada com modularização dos vários componentes visuais das UIs da nossa app. Usando jQuery ou mesmo plain js, o código seria mais difícil de manter que usar uma framework, especialmente num contexto de big entreprise. O uso de templates é outro factor que permite ter um código DRY.

Segurança

Manipular a UI com strings pode gerar alguns problemas de segurança, razão que levou o Facebook a criar o React. "Cross Site Scripting" é uma técnica muito utilizada por hackers, que consiste em colocar código em inputs numa app. Se esse bloco de texto for lido pelo software, irá executar a instrução maliciosa. Se tiveres curiosidade sobre o tema, lê este artigo.

Player 1: Angular 2

O Angular 2 é uma framework que facilita o desenvolvimento web. Combina declarative templates, dependency injection, end to end tooling, entre outras ferramentas de forma a dar mais poder aos Developers para criar as suas apps.

É importante saber que há 2 versões desta Framework. AngularJS foi a 1ª versão e teve algum sucesso, contudo, houve algum descontentamento por parte de utilizadores e dos criadores, o que levou a um shift bastante grande dando origem ao Angular 2. Apesar de ambos se chamarem Angular, eles não são o mesmo produto. Tudo o que foi feito com AngularJS deixou de ser compatível com Angular 2.

É bastante frequente as empresas perguntarem qual dos Angular é que o programador sabe. Se for Angular 1, por norma, vai fazer a manutenção dos produtos, caso saiba Angular 2, o mais certo é ser contratado para criar novos produtos.

Recomendamos a leitura desta resposta no Stack Overflow para se entender melhor as vantagens em relação a tecnologias do passado.

MVC framework

Angular 2 é um full/traditional MVC (Model-View-Controller). O que é que isto quer dizer…? Significa que a aplicação está pidida em 3 componentes interligados, podendo tocar tanto no front-end como no back-end.

O MVC é popular porque isola a lógica da aplicação da camada da interface, implementando uma das guidelines da programação: "separation of concerns".

Angular 2 Templates

Se já estás familiarizado com Bootstrap podes imaginar os templates de Angular 2 algo desse género. Como podes imaginar isto poupa imenso tempo ao programador.

Componentes em Angular 2

Eventos em Angular 2

Os eventos são declarados no HTML e o seu handler definido no componente

Player 2 - React.JS

Esta tecnologia criada pelo Facebook é uma JavaScript library construída para criar user interfaces. A melhor forma para se pensar nesta tecnologia é vê-la como um lego. Tal como nos legos verdadeiros, quando queremos construir um castelo precisamos de juntar outras peças.

Com React passa-se exactamente o mesmo. Por si só, esta tecnologia não permite fazer muito, é apenas um renderizador de UIs no cliente mas juntando outros pacotes torna-se uma solução bastante poderosa.

Componentes e JSX

React não usa qualquer tipo de template por default. Toda a lógica pode ser escrita em JavaScript, o que dá uma flexibilidade bastante grande aos programadores. Tal como no Angular 2, toda a estrutura é pidida em componentes.

Apesar de não ser obrigatório, um padrão muito utilizado é JSX, que é uma forma de escrever HTML dentro de Javascript.

Como podemos ver na imagem, é possível escrever componentes em HTML e, através de Javascript, renderizá-los na página com total liberdade.

Eventos em React

Um exemplo de um evento de click implementado em react.

Let the fighting begin!

Round 1: Estrutura e metodologia

Pode ser visto como uma vantagem ou desvantagem, mas é facto que frameworks como o Angular 2 já vêm com um modelo fechado. React.js é apenas um render engine. Para se criar algo mais complexo com o ecossistema React temos de juntar outros pacotes (ex: Redux) e criar nós a nossa estrutura, o que pode ser um risco, mas ao mesmo tempo faz com que as suas possibilidades sejam ilimitadas, sendo maleável.

"When comparing it (React) to a monolithic framework such as AngularJS, you will find that there is no predefined way to structure your app (such as services, controllers & views in Angular). This means that it is the responsibility of the developer to find his/her own ways to effectively manage several parts of the application without a predefined structure. This can lead to significant overhead and long development times when the devised structure is bad or ineffective." Fonte: quora

Winner: Angular 2

Round 2: Learning Curve

É um pouco injusto comparar React.js com Angular 2 neste ponto porque React é apenas um render engine (como referido anteriormente), enquanto o Angular 2 já traz tudo, é uma caixa enorme.

Em angular temos de saber Typescript e em React, apesar de ser plain javascript, a grande utilização de ES6+ pela comunidade React é algo que também dificulta a learning curve.

Tendo em conta que React está mais próximo do javascript comum e que têm uma estrutura mais flexível e menos monolítica que Angular 2, fazendo com que seja mais rápido criar coisas simples, declaramos o vencedor:

Winner: React

Round 3: Development time

Depende do tipo de projeto e complexidade. React pode ser uma melhor escolha para se construir algo rápido.

Angular 2 têm um padrão muito definido, o que pode facilitar a comunicação dos developers em grandes projetos, obtendo-se ganhos de produtividade.

Winner: Empate

Round 4: Flexibilidade

"We’re now moving more towards microservices and microapps. React and Vue give you more control to size an application by selecting only the things which are really necessary. They offer more flexibility to shift from an SPA to microservices using parts of a former application. Angular work best for SPA, as it is probably too bloated to be used for microservices.

As Cory House notes: JavaScript moves fast, and React allows you to swap out small pieces of your application for better libraries instead of waiting around and hoping your framework will innovate. The philosophy of small, composable, single-purpose tools never goes out of style."Fonte: medium

Winner: React

And the Winner is....

React!!

Estamos com aquele dilema onde a resposta é: ambas são boas. Não há propriamente nenhuma melhor que outra. "It's about using the right tool for the right job and knowing when to use each!" O critério para a decisão baseou-se na comunidade, que está a adotar React cada vez mais, já ultrapassando Angular no ano passado.

Para uma leitura mais aprofundada - aqui.

Faz sequer sentido compará-los? - aqui.