Tabela de comparação entre Angular, React + Redux e Vue.js

Escolher o framework JS certo se tornou uma escolha muito difícil. Não só por que existem muitos frameworks, mas também pela velocidade que as coisas mudam.

Por isso gastei semanas estudando a fundo 3 frameworks a fim de conhecer a fundo e escolher apropriadamente. Depois de terminar de estudar escolhi alguns parâmetros que valem apena ser comparados. são eles:

1. Curva de Aprendizado / pré-requisitos. É fácil utilizar o FW? preciso ter muitos conhecimentos prévios além de HTML e JS?
2. Preparação Ambiente de desenvolvimento / Instalação. O que preciso para começar a programar?
3. Construção dos Templates. Como é a construção dos templates para aplicação
4. Integração com Logica. Como é adicionar lógica dentro dos componentes
5. Gerenciador de Formulários. É fácil gerenciar formulários ?
6. Comunicação Cliente Servidor. É fácil obter e enviar dados para o servidor?
7. Simplicidade. Quantidade de código que você tem que escrever para fazer uma tarefa
8. Recursos. O que o framework pode fazer out of the box.
9. Facilidade no Desenvolvimento. É fácil desenvolver, como prevenir erros ? Deploy, Debug, Test etc…
10. Flexibilidade. Como posso usar o FW?
11. Tamanho para carregamento / load. Tempo de carregamento no cliente
12. Desempenho da aplicação final. Como fica a aplicação final?

Os parâmetros são comparados com base no que o framework foi criado para fazer. Está certo que existem formas de torcer e dar um jeitinho de utilizar ele de forma diferente, mas não é o caso aqui.

Se voce quiser pode pular direto para a Tabela de comparação.

Angular

É uma evolução do AngularJS, mas já não tem nada a ver com ele. Estamos falando aqui do Angular 4.3.

Seu propósito e ser um framework SPA (single page applications). Ele foi criado para gerenciar totalmente a página. Ele faz tudo, gerencia componentes, roteamento, requests e tudo mais. As aplicações Angular são monolíticas.

Curva de Aprendizado / pré requisitos

Angular é um framework muito complexo. Para começar a utiliza-lo é preciso ter conhecimento sobre: WebPack; Configurar Módulos Node.js; NPM; e TypeScript que é relativamente fácil.

Tendo esse pré conhecimento a curva de aprendizagem ainda é alta, A complexidade do Angular exige bom conhecimento da ferramenta.

Preparação Ambiente de desenvolvimento / Instalação

Graças ao Angular CLI (command line interface) preparar o ambiente de desenvolvimento é super simples. Basta instalar o pacote @angular\cli que possui comandos para criar uma aplicação, rodar servidor de testes, criar componentes, fazer o deploy final e tudo mais. Nesse caso só precisamos de um editor de código como VS Code, Atom, Sublime etc. Dessa forma o conhecimento sobre WebPack é quase desnecessário.

Construção dos Templates

Construir templates é muito fácil com Angular. Os templates são arquivos HTML comuns. As diretivas de templates do angular como if , for, integração com variáveis, são todas simples e intuitivas.

Integração com Logica

Também muito simples. Cada componente tem uma classe as quais as funções são visíveis aos templates. Basta criar uma função com a lógica desejada e utiliza-la.

Gerenciador de Formulários

Angular permite gerenciar formulários de 3 formas: NgForm, Reactive Forms e atribuindo variáveis aos inputs que é o jeito mais simples e fácil.

Comunicação Cliente Servidor

Angular 4.3 possui um componente chamado HttpClient que concentra a lógica de comunicação com servidor via HTTP e faz todo o trabalho sujo de gerenciar requisições e suas respostas, deixando o desenvolvedor bem tranquilo

Simplicidade

Angular não é um framework simples. primeiro por que precisa de um ambiente inteiro para gerar uma aplicação e também precisa de um módulo e um componente para gerar um simples “hello world”. Considero o Angular bem complexo.

Recursos

Já vem com muitos recursos “out of the box” como injeção de dependência, http client, roteamento etc…

Facilidade no Desenvolvimento

TypeScript merece destaque aqui. Graças a uma linguagem tipada é possível prevenir a grande maioria de erros durante a codificação, ou seja, sem precisar rodar a aplicação para ver que você passou um parâmetro errado para a função, ou digitou errado o nome de uma variável. E o intelisense do TypeScript permite desenvolver muito rápido. Algumas pessoas acham ruim usar o TypeScript, eu adorei. Vários pontos positivos pra ele!

E rodar a aplicação, debugar, testar e criar pacote final, são tarefas que são resolvidas facilmente com o Angular CLI sem dor de cabeça.

Flexibilidade

É muito difícil utilizar o Angular de uma forma diferente para qual ele foi criado. ou seja, um SPA monolítico.

Tamanho para carregamento / load

Os arquivos principais gerados pelo Angular são grandes (500KB) mas. Também deve se tomar cuidado para que a aplicação não fique gigante e carregada toda de uma vez (sintomas de SPA).

Desempenho da aplicação final

Assim como todos, ótimo desempenho !

React + Redux

O próximo candidato é o React. Infelizmente o react não é bom o suficientemente sozinho por isso a maioria dos desenvolvedores utilizam ele em conjunto com o Redux para gerenciar o estado da aplicação.

Curva de Aprendizado / pré-requisitos

Para utilizar React você precisa conhecer: Node.js, módulos NPM, dezenas de módulos para auxiliar a aplicação, saber previamente configurar bem o WebPack, conhecer JSX. Depois disso aprender a programar com react e redux. O maior problema não é só aprender a utilizar o react, mas sim as dezenas de componentes que você precisa para auxilia-lo a fazer tarefas simples. Também deve estar atento a vários detalhes de implementação de cada módulo utilizado para fazer sua aplicação roda. Eu, particularmente, achei a curva de aprendizado altíssima!

Preparação Ambiente de desenvolvimento / Instalação

A preparação do ambiente é uma tarefa custosa por que a configuração é manual. E não existe nenhuma convenção de componentes como no Angular, então não existe um ‘best way’ para começar a fazer as coisas. Também precisa saber meio que “de cabeça” todos os componentes NPM que você vai precisar para configurar o WebPack e suas dependências. Também achei a preparação do ambiente muito trabalhosa.

Construção dos Templates

Os templates são construídos através de classes dentro de um método return() . O template não é HTML e sim JSX, uma notação JavaScript que parece HTML mas tem muitas diferenças. Tarefas simples como copiar um exemplo de HTML e colar em uma classe react não funcionam bem. É preciso alterar várias coisinhas para se adequar ao JSX.

para if e for não existem uma sintaxe para templates. Loops são complicados, o jeito mais fácil de se utilizar é através do operado mapde um array. Como é tudo JavaScript seve se utilizar os operadores do JavaScript, o que deixa o template bem “feio” e difícil de entender. e bem diferente de um HTML comum.

Integração com Logica

Os componentes são classes JavaScript, então qualquer função JavaScript pode ser adicionada.

Gerenciador de Formulários

Para gerenciar forms é preciso uma extensão chamada Redux-Forms para trabalhar junto com o redux, mas é horrível trabalhar com isso. Não é nada fácil nem intuitivo. Pelo menos 2 middlewares devem ser aplicado a classe para poder começar a trabalhar com forms em uma classe.

Um ponto negativo é que o estado da aplicação é controlado pelo JavaScript. inclusive a digitação de caracteres no campo, então quando você digita uma letra o loop de estado do JavaScript é disparado para adicionar a letra. Quando a página está pesada acaba criando um delay entre a digitação e as letras.

Comunicação Cliente Servidor

Normalmente usa-se o modulo Axios para fazer a comunicação HTTP. é um módulo baseado em promisses. para se integrar bem com os estados do redux é preciso alguns middlewares também.

Simplicidade

Definitivamente React não é nada simples. Para cada tarefa básica, por exemplo: controlar um formulário, é necessário escrever MUITO código e também utilizar vários middlewares para tentar “automatizar” alguma coisa.

Recursos

A maioria dos recursos são relacionados aos módulos node instalados de terceiros, porem tem muitos recursos.

Facilidade no Desenvolvimento

Semelhante ao tópico acima e pela complexidade de detalhes é muito trabalhoso programar em react sem problemas. Um ponto bom é que a maioria dos erros comuns que acontecem são mostrado no console com possíveis soluções.

Flexibilidade

Ok, ai temos uma grande vantagem. O react é muito flexível. Podemos usar ele de várias formas, entre elas: SPA monolítico; Uma pequena “mágica” em javascript em uma única página; utilizar React Native, onde ao invés de renderizar HTML são renderizado componentes nativos. Enfim, há uma grande variedade de meios muito bem suportados de utilizar o React.js

Tamanho para carregamento / load

Os arquivos necessários para carregamento são médios (200KB), porem deve ter cuidado para não obrigar o cliente carregar muitas classes de uma vez só deixando o load mais pesado

Desempenho da aplicação final

O desempenho da aplicação final é muito bom! o único ponto negativo é se o loop de estado for muito pesado ou o dispositivo for lentinho, o input do usuário fica com delay.

Vue.js

Finalmente o Vue.js. Diferentemente dos outros, ele foi feito para ser utilizado como uma biblioteca, não um SPA monolítico. isso é bom para integrar um algo a mais em páginas já existente. Ele também pode ser utilizado de forma monolítica sendo compilado através de WebPack e tal, Mas não é seu uso primário, vamos focar no uso primário aqui.

Curva de Aprendizado / pré-requisitos

Pré requisitos? Nenhum! não precisa saber node, modules, NPM, nada. Como o Vue é simples ele não tem muitas funcionalidades e detalhes que você precisa estar atento. Então a curva de aprendizado é bem pequena.

Preparação Ambiente de desenvolvimento / Instalação

Só incluir a referencia da script uma página HTML existente.

Construção dos Templates

Os templates são componentes escritos HTML. As vezes nem precisa de template as vezes, só adicionar as diretiva nas tags HTML já existentes.

Integração com Logica

Através do template pode acessar variáveis e funções de um objeto JSON de forma bem tranquila.

Gerenciador de Formulários

Particularmente achei o mais simples de gerenciar formulários. Se relaciona os campos de um formulário à variáveis de um objeto JSON, então o binding é feito automaticamente.

Comunicação Cliente Servidor

Existe uma outra biblioteca baseada em promisses que se integra com o vue para realizar requisições HTTP.

Simplicidade

Simplesmente o mais simples de todos. As diretivas e a lógica são muito intuitivas. e ficam no próprio HTML. a quantidade de código para executar tarefas é mínima.

Recursos

Como o Vue é bem simples ele não tem muitos recursos como os outros frameworks. porem existem ferramentas de terceiros para suprir essa falta.

Facilidade no Desenvolvimento

Como o Vue é simples e não tem muitos segredos então é bem fácil desenvolver aplicações com ele.

Flexibilidade

É muito fácil desenvolver coisas pequenas utilizando Vue. Ele foi feito pra isso. Quando a aplicação começa a ficar grande as coisas começam a complicar. Ele possui capacidade para gerenciar componentes reutilizáveis e até fazer aplicações monolíticas, mas o seu forte mesmo é coisas pequenas e simples. Ele também não tem muitos componentes nativos, em comparação ao angular. Se voce quiser usar rotas, requisições HTTP etc precisará de mais bibliotecas.

Tamanho para carregamento / load

Minúsculo, toda a biblioteca tem apenas 20KB.

Desempenho da aplicação final

O desempenho da aplicação final é bem rápido também, assim como os outros.

Tabela final

Com tudo isso posso montar essa tabelinha com pontos bons e pontos ruins.

Tabela comparativa entre os frameworks

Conclusão

Na minha opinião o Angular é definitivamente o melhor para fazer aplicações SPA monolíticas. Sua curva de aprendizado e facilidade em codificar valem muito apena.

Para fazer coisas mais simples ou dar uma “modernizada” em uma página existente com certeza iria utilizar o Vue. Ele é o melhor framework para realizar essa tarefa.

É interessante ver que o Vue é quase complementar ao Angular. Onde o angular tem seus pontos fracos, o Vue se destaca e vice versa.

React + Redux eu não usaria mais. Só se for para utilizar o react-native.