Angular vs React vs Vue.js
Frameworks Javascript
O Front-end nunca esteve tão aquecido, e isso se reflete nos principais frameworks disponíveis: Angular, React e Vue.js, mas qual escolher? Tudo depende do conhecimento prévio.
Uma progressão natural na carreira Front-end é ir de HTML, CSS e JavaScript puros para abstrações, como frameworks. Essas três linguagens que compõem a web foram desenvolvidas em outra época, um passado em que a web era muito diferente.
Os frameworks são soluções desenvolvidas por equipes que enfrentaram problemas com o uso, principalmente, do JavaScript puro para trabalhar com aplicações web complexas. Com empenho, conhecimento técnico e investimento, qualquer pessoa pode desenvolver um framework, principalmente com o auxílio das comunidades de Código Aberto (Open Source).
Frameworks não são ferramentas mágicas que geram apreensão. Entender que algumas pessoas simplesmente criaram uma ferramenta para facilitar o desenvolvimento é o primeiro passo para entender um framework.
Por que aprender um framework?
A maior parte do que é desenvolvido em front-end se relaciona com:
- Manipulação da DOM;
- Comunicação com API.
O JavaScript faz essas duas coisas muito bem, o problema é que usá-lo por si só não é escalável a longo prazo. Gerenciar tudo pode ficar complicado e, se você precisa fazer a mesma coisa em diferentes aplicações, é inviável.
Qual a melhor forma para aprender Framework? Com Alberto Souza | #HipstersPontoTube
Frameworks focam em criar aplicações que:
- São escaláveis;
- Reusam código, geralmente trabalhando com componentes;
- São performáticas e seguras;
- Lidam bem com interação do usuário e atualização dinâmica da DOM;
Aprender ou trabalhar com um framework não é limitante. Em uma carreira longa é normal trabalhar com mais de uma tecnologia. Afinal, essas ferramentas possuem conceitos e objetivos similares, mesmo que se diferenciem em outros pontos.
Angular: o framework da Orientação a Objetos
O Angular está fundamentado em Orientação a Objetos, um paradigma de programação expressivo, testado e usado universalmente. Com isso, o framework trabalha com uma arquitetura similar ao MVC.
Para quem nunca viu MVC, é importante entender que ele é um padrão de projeto baseado em modelos (os formatos dos dados), views (a representação dos dados que no front-end pode ser relacionada ao HTML) e controladores (entidades que funcionam como "gerentes", controlando os comportamentos baseado no que é solicitado).
No Angular trabalhamos com componentes que são, essencialmente, uma mistura de TypeScript e HTML que resulta em um código independente, isolado e reutilizável. Pense em componentes como elementos HTML com super-poderes. Um botão personalizado, uma tabela, um cabeçalho, e várias estruturas comuns podem ser componentes.
A síntese do MVC com componentes resulta na seguinte estrutura:
- Um template, que é a linguagem de marcação, geralmente HTML. Representa a parte visual de um componente e pode ser entendida como a View;
- A classe principal do componente, que é de fato o componente, todas as suas propriedades e seus métodos. No Angular, essa estrutura é criada com TypeScript.
Design Systems, Angular e open source na TOTVS – Hipsters On The Road #21
Exemplo: Componente de Botão com Angular
Um componente de botão pode conter:
1) Template
<button [title]="titulo" (click)="aoClicar()">
<ng-content></ng-content>
</button>No template podemos misturar HTML com algumas propriedades do próprio Angular: diretivas, atributos que implementam comportamentos, e ligação de dados, maneiras de passar dados dinâmicos como valores de atributos e conteúdo.
A propriedade title do botão, por exemplo, pode receber um valor dinâmico (variável), para isso usamos os colchetes ([title]).
Eventos podem receber métodos e são marcados com parênteses ((click)). Já <ng-content> é um elemento especial do Angular que não possui nenhuma representação visual, mas serve para criar trechos HTML dinâmicos. Nesse caso, será substituído pelo que for passado dentro do componente (processo chamado de Projeção de Conteúdo).
2) Componente
O componente é um arquivo à parte. É uma classe que usa TypeScript. Esse arquivo é carregado de código adicional para funcionar. Então vamos primeiro focar no essencial (que por si só não é funcional):
export class BotaoComponent {
titulo = '';
aoClicar = () => {};
constructor() {}
ngOnInit() {}
}Temos uma classe com o nome BotaoComponent, duas propriedades e dois métodos. Tanto a classe, quanto às propriedades e os métodos possuem comportamentos especiais.
Usando o Angular, teremos o seguinte:
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-botao',
templateUrl: './botao.component.html',
styleUrls: ['./botao.component.css'],
})
export class BotaoComponent implements OnInit {
@Input() titulo = '';
@Output() aoClicar = new EventEmitter<string>();
constructor() {}
ngOnInit() {}
}@Input, @Output e @Component são decorators do TypeScript e adicionam comportamentos aos dados que os usam. O @Component recebe a configuração do componente. Perceba o selector (como o componente será referenciado), e os caminhos para o template e estilos.
O @Component também pode receber o código HTML diretamente, como string, mas separá-los é mais legível.
Além da classe principal e do template, também temos arquivos de testes, auxiliares e módulos. Dentre estes, os módulos são importantes no Angular, pois componentes não importam outros componentes diretamente, mas importam via módulos.
Angular é uma plataforma de desenvolvimento completa que oferece tanto uma abstração para seu código quanto uma caixa de ferramentas. Formulários, rotas, classes comuns para o desenvolvimento (como Services), entre outros estão disponíveis em um projeto Angular sem nenhuma instalação adicional.
O framework incentiva a criação de código robusto (e consequentemente extenso), o Angular CLI oferece uma maneira prática de criar componentes, módulos, serviços e outros em um único comando.
Principais características do Angular
Pré-requisitos:
- JavaScript avançado;
- Orientação a Objetos e padrões comuns desse paradigma, como Services;
- TypeScript ou alguma linguagem estaticamente tipada.
Pontos positivos:
- Várias implementações prontas que facilitam o processo de aprendizado e desenvolvimento;
- Usado por grandes empresas. Criado e mantido pela Google que garante bom suporte e comunidade ativa.
Pontos negativos:
- Verboso e os pré-requisitos são mais extensos do que as alternativas;
- Pouco flexível, como possui uma estrutura sólida, é difícil desviar disso.
Casos de uso:
- Aplicações grandes que requerem manutenção contínua.
React: a Biblioteca entre os Frameworks
React é uma ferramenta popular para começar no universo de frameworks, mas não é um framework. Isso significa que, diferente de Angular, não possui ferramentas próprias que juntas oferecem uma solução completa para o desenvolvimento front-end. Pelo contrário, o React é apenas uma base, uma coleção de funções que cria elementos reutilizáveis. A biblioteca auxiliar React DOM permitindo a inserção desses elementos em páginas web.
Bibliotecas externas criadas por pessoas ativas na comunidade complementam as funcionalidades, adicionando a capacidade de criar Single-Page Aplications (SPAs), com React Router, por exemplo. Além disso, ferramentas como Create React App, e o framework baseado em React Next.js, permitem criarmos projetos com todas as ferramentas e estruturas comuns no desenvolvimento.
O que é uma Single-Page Application? (SPA) #HipstersPontoTube
React é mais ligado à programação funcional. Dessa forma, as boas práticas de React são bem diferentes de boas práticas de Angular. Um dos principais pontos é que React não possui uma divisão clara de partes de um componente.
Possui uma estrutura mais simples: um componente pode ser tanto uma classe como uma função. Se Angular é semelhante ao MVC, React foca apenas no "V" (view).
Geralmente, trabalhamos com funções que retornam um código especial, uma linguagem de marcação: o JSX, uma extensão do JavaScript que adiciona a sintaxe do HTML, permitindo que páginas dinâmicas sejam criadas facilmente.
Exemplo: Componente de Botão com React
Um componente React pode ser pequeno graças ao JSX. Teremos uma função chamada Botao e a maior parte do seu dinamismo é resultante do parâmetro props (nome que vem de propriedades).
Todo componente React pode receber propriedades que se assemelham a atributos do HTML. Além disso, children é um atributo especial que contém o conteúdo que foi passado dentro do componente (nesse caso, será o texto do botão).
No JSX, JavaScript pode ser passado dentro de chaves ({}) e será interpretado.
export default function Botao(props) {
return (
<button title={props.titulo} onClick={props.aoClicar}>
{props.children}
</button>
);
}Apesar do componente ser estruturado com JSX, isso é apenas um facilitador para a escrita do código. O código é traduzido para JavaScript puro quando processado.
Manipular a DOM é uma ação feita puramente com código JavaScript e essa é uma característica importante do React: pouca sintaxe própria significa que muito do trabalho é feito em JavaScript puro, e assim um conhecimento avançado da linguagem facilita o trabalho.
Por ser flexível, ainda há muito debate de como é a estrutura de uma aplicação React, quando deve se dividir código em componentes e quais ferramentas usar para cenários como formulários. Como iniciante, é importante não se confundir com isso, pois é normal encontrar arquiteturas diferentes.
Ciclo de vida de componentes React.js | #AluraMais
Principais características do React JS
Pré-requisitos:
- JavaScript avançado;
- Conceitos de programação funcional podem ajudar.
Pontos positivos:
- Flexibilidade para criar aplicações pequenas ou grandes;
- Liberdade de trabalhar como preferir, inclusive podendo usar JavaScript ou TypeScript;
- Comunidade muito ativa e preocupação com iniciantes. Criada e mantida pelo Facebook, usada por plataformas como Twitter e Netflix.
Pontos negativos:
- A flexibilidade pode ser prejudicial pois não ajuda quem desenvolve a manter uma boa organização;
- Como evita assumir muitas responsabilidades, o uso de outras bibliotecas é constante e, além de aprender a desenvolver com React, também é importante aprender bibliotecas específicas.
Casos de uso:
- Aplicações pequenas e grandes, mas quanto menor a aplicação, mais simples é estruturar.
Vue.js: o meio-termo
O Vue.js foi inspirado em versões iniciais do Angular, e possui vários pontos semelhantes na forma de se trabalhar, principalmente com a manipulação da DOM, pois ambos usam diretivas e ligações de dados. Além disso, o Vue também separa a estrutura de um componente em template, lógica interna e estilo, mas a boa prática não é separar em arquivos diferentes, como o Angular, nem misturar template e lógica, como React.
Um arquivo .vue possui três seções:
- Template: o código HTML;
- Script: a lógica do componente, com código JavaScript/TypeScript;
- Style: o estilo do componente, em que as definições podem ser limitadas ao escopo.
O que for definido no script pode ser usado no template para manipular a DOM, e vice-versa.
Essa estrutura não é obrigatória e, como React, Vue é flexível quanto a isso porque trabalha muito próximo da pessoa que desenvolve, permitindo que componentes sejam criados e manipulados pelas próprias funções.
Exemplo: Componente de Botão com Vue
Similar ao Angular, um componente pode receber propriedades (props, como no React) usando diretivas. Entretanto, no Vue temos sintaxes menores, como os dois pontos : que permite atribuir valores dinâmicos a propriedades/atributos. No caso dos eventos, podemos usar o arroba (@) e passar uma função para ser executada.
Temos elementos especiais que podem ser usados para manipulação, como o slot, que tal como o ng-content, faz a projeção do conteúdo passado dentro do componente quando usado.
A configuração é feita dentro do script, exportando um objeto com alguns atributos, como o name e as props.
<template>
<button :title="titulo" @click="aoClicar">
<slot></slot>
</button>
</template>
<script>
export default {
name: "Botao",
props: {
titulo: String,
aoClicar: Function,
},
};
</script>
<style>
</style>O Vue possui várias características de Angular e de React, e é uma excelente opção para quem não tem os pré-requisitos de Angular, mas também não se interessa pelo estilo de desenvolvimento que o React oferece.
A curva de aprendizado é intermediária e o framework oferece algumas soluções próprias, mas também deixa muitas responsabilidades para outras bibliotecas. A própria documentação do Vue.js define esse comportamento como "incrementável", enquanto define o Vue como um "framework progressivo", permitindo que se comporte como biblioteca ou framework, dependendo da necessidade. Bibliotecas oficiais, como Vue Router (rotas) e Vuex (gerenciamento de estado), também estão disponíveis.
Similar ao React, essa flexibilidade também trouxe frameworks baseados na biblioteca que implementam funcionalidades comuns em projetos. O principal framework baseado em Vue, o Nuxt, possui funcionalidades como rotas e renderização do lado do servidor (SSR) implementadas e prontas para o uso, similar ao Next, baseado em React.
Principais características do Vue JS
Pré-requisitos:
- JavaScript avançado.
Pontos positivos:
- Versátil;
- Curva de aprendizado baixa;
- Comunidade ativa e interessada, e também aberta a melhorias.
Pontos negativos:
- Sua popularidade é mais recente, e por isso é menos adotado no mercado.
Casos de uso:
- Aplicações pequenas e grandes.
Conclusão
Escolher um framework ou biblioteca é importante para dar continuidade ao desenvolvimento front-end, mas não precisa ser uma tarefa estressante. Experimentar faz parte, e as ferramentas estão prontas para isso com documentações completas.
Muitas vezes o conhecimento é transferível e conceitos presentes em um framework podem ser aplicados em outro.
O importante é buscar a tecnologia que traga mais conforto se encaixe melhor com os seus pré-requisitos e objetivos, e aprender a fundo o seu funcionamento.
React pode ser confuso para quem vem do back-end, enquanto Angular pode ser mais claro. Por outro lado, sem os pré-requisitos de Angular a pessoa pode se sentir perdida com a quantidade de informações, nesse caso React e Vue oferecem trilhas mais flexíveis.
Vale ressaltar que a diferença entre as aplicações feitas com essas tecnologias não são expressivas do ponto de vista do cliente ou do usuário. Por isso, a questão é mais sobre qual é o melhor framework para o contexto do que qual é o melhor.
Mergulhe aprendendo alguma dessas tecnologias de Front-End com a Alura: