React, Angular ou Vue?

[kelvinrfr]

Olá,
Estive prestando atenção no mercado e reparei que hoje em dia os frameworks de front end mais famosos (maior número de stars no GitHub) são:

1 - React
2 - Vue
3 - Angular

Com isso em mente gostaria de saber a opinião de vocês sobre os pros e contras desses frameworks, e qual é a sua atual preferência e porque.

Obrigado!

[renanbastos93]

Opa, ao meu ver é o seguinte.
O React tem uma curva de aprendizado altíssima, o Vue ainda não tive uma experiencia para falar do mesmo, agora o AngularJS e tem uma curva de aprendizado muito fácil o Angular 2 pra cima, e pouco mais complexo, mas ele consegue ser mais fácil que o React. Agora de qual tecnologia é melhor depende do seu projeto, tem que analisar qual é ideal para o que for desenvolver.

[hnordt]

React: voltado pra quem prefere programação funcional, declarativa e com pouco estado. Não é um framework, por isso não tenta solucionar tudo pra você. Isso tem o beneficio de não te prender ao mundo do framework, porem vc precisa se esforçar pra encontrar as melhores soluções para seu projeto.

Angular 1: voltado pra quem prefere uma programação menos funcional e mais orientada a objetos. É um framework, e por isso te prende ao seu próprio ecossistema. Conforme expliquei resumidamente acima, isso tem suas vantagens e desvantagens.

Angular 2: nunca usei, não tenho uma opinião formada.

Vue: é um framework "híbrido", implementa muitas boas ideias do React, porem com uma curva de aprendizado menor por manter alguns conceitos do Angular. Tem um ecossistema próprio, mas te permite usar ferramentas de outro ecossistemas.

--

Minha opinião pessoal: Angular ficou no passado. Vue aderiu a ótimas ideias do React e Angular, é um meio termo entre os dois, mas pra quem quer aderir as melhores praticas de programação moderna (FP, stateless, declarativa) e se manter relevante nos próximos anos React ainda é muito superior.

Com certeza React requer uma curva de aprendizado grande. React por si só é uma library muito simples, voce consegue aprender em 1 ou 2 dias, o que gera a curva de aprendizado é o conceito por trás dele, dominar React significa dominar JavaScript moderno, programação funcional, composição e vários outros conceitos de desenvolvimento moderno.

Pra resumir, tenho convicção que o futuro é React e os conceitos por trás dele, a curva de aprendizado é maior, porém no longo prazo, quando você dominar ele, suas aplicações ficarão muito simples de manter, além de que você poderá fazer muito com pouco código.

Minha opinião é baseada em dois anos usando Angular 1, um mês usando Vue e quatro anos usando React. (aprendi Vue recentemente, por curiosidade)

[mahenrique94]

Ja mexi com os três, acredito que o Angular 2 na minha opinião é mais simples e menos burocrático, mas tudo depende do escopo do projeto. React por exemplo é ótimo para trabalhar com estados e atualizações de view.

Cada um tem suas vantagens e desvantagens, para um projeto A o Angular pode ser a melhor solução, para o projeto B talvez seja o React e para o C o Vue, não existe melhor ou pior e sim aquele que mais se adequa a sua necessidade, com os três você terá o mesmo resultado, claro que com o custo de cada um.

[kelvinrfr]

Concordo com o ponto de vista que diz que o AngularJS/Angular2 é mais facil de iniciar porque não precisa de tanta burocracia pra implementar algo, como é no React (não sei como é no Vue), como dito pelo @renanbastos93 e o @mahenrique94 . Na minha prática de React tive bastante dificuldade no inicio pra entender como fazer o React funcionar, e já no angular é só referenciar os .js e a vida segue.

@hnordt valeu pela descrição detalhada! E eu gostei do React justamente por ter um conceito bem simples. Depois que realizei um breve tutorial do site do React já pude entender como ele funciona e achei muito bom o nível de componentização que ele oferece.
Achei legal voce descrever o Vue como um "híbrido" entre React e Angular. Acho que vou pesquisar e fazer uns testes com ele pra poder sentir como é.

---

Mas vejo que todos falam que deve existir uma análise para decidir qual tipo de 'framework' seguir. Poderiam exemplificar esse tipo de análise? Algo mais palpável seria ótimo.

Por exemplo, pra fazer um módulo de chat instantâneo seria ideal utilizar React por causa de X, Y Z.
Não precisa ser nada tão elaborado, nem um sistema mas só um exemplo pra entender o que é considerado nessa análise pra fazer esse tipo de escolha.

[hnordt]

@k30v1n depende do seu objetivo:

• Se seu objetivo é trabalhar para empresas nos EUA, Reino Unido ou Europa vá de React, o mercado de React lá paga muito bem
• Se seu objetivo é trabalhar para empresas no Brasil vá de Angular, em geral o mercado brasileiro sempre está atrasado, vai demorar pra grande massa adotar React ou Vue, apesar de já estar acontecendo
• Se seu objetivo é trabalhar para empresas asiáticas vá de Vue, o mercado de Vue lá é gigantesco
• Se seu objetivo principal não é ganhar dinheiro e é estudar desenvolvimento moderno e ficar preparado para os próximos anos, vá de React
• Se você nao quer investir muito tempo aprendendo desenvolvimento moderno, mas quer ficar no meio termo, ou seja, não vai adotar todas as melhores praticas do desenvolvimento moderno, porem também não vai ficar pra trás, vá de Vue

Lembre-se, frameworks morrem, porque com o tempo eles ficam out-dated. Angular esta morrendo, Vue esta aquecido, mas em algum momento vai morrer. React provavelmente vai morrer também, porem como 90% de React são conceitos e JavaScript puro, 90% do que vc aprender, vc sempre vai poder usar.

[taranttini]

Você já chegou a utilizar os 3? Chegou a fazer alguma linha de código mesmo aquele simples todo, para ver o que gosta e não gosta em cada uma delas?

React - Você vai fazer praticamente Javascript, e somente javascript ao meu ver, mesmo que tenha o HTML inline, mas ele estará dentro de um arquivo javascript. Foi legal ter aprendido e ter feito um projetinho, mas ver tudo aquilo junto também é um pouco desmotivador, será que é tão bom misturar assim o HTML no Javascript? Eu não gostei muito, gera um pouco de confusão, eu estou fazendo HTML ou Javascript, uma salada de frutas, é legal se ter arquivos separados para tratar o formulário e aplicar os campos.

Angular 1, 2, ... - Acredito que foi onde gastei mais tempo aprendendo, e onde fiz talvez o meu projeto mais legal, usando as melhores práticas ou não, saiu meu código e acho que gostei do que fiz, os bind de duas vidas são lindo e maravilhosos? Será? Nossa essa facilidade toda veio como um monstro de performance negativa, pois se fizer isso com muitos resultados, tu vai matar tua aplicação, e se tiver animação junto nessa lista toda, já era ter resultados rápidos em tela. Então você vai ter que apresentar poucos resultados ou ter menos perfumaria em tela para ter um retorno satisfatório. Mas poxa veio como o primeiro grande produto da google sendo disponibilizado para uma grande massa de desenvolvedores fuçar, estudar aprender e aprimorar, e assim eles viram que era melhor partir para o novo Angular, pois aquilo não foi como esperavam. Mas no fim foi a grande escola deles, pois esse novo Angular é tudo de bom, agora é engraçado ver grandes empresas tão rivais hoje sendo amigas e colaboradoras de projetos, o que uma comunidade não faz. O angular também vai lhe obrigar a usar muito TypeScript, para alguns programadores é fazer C# em javascript, acho que gosto mais do javascript simplista, ao menos por enquanto, mas o type script ajuda e muito com um bom editor de textos cheio de plugins que vai apresentar erro, apresentar os autocomplete e tudo mais. Então o angular novo faz as coisas acontecerem e apresentar mais facilidades ao desenvolvedor.

Vue - Esse é o novo amiguinho da vez, ainda está buscando o espaço para dividir de verdade o mercado com o React e Angular, mas ele é mais da comunidade do que uma grande empresa, como os dois outros citados. Nele você faz como bem entender ao meu ver, ele se torna mais fácil, você pode fazer ele de forma muito certa, como de forma muito POG, por eu gostar mais da simplicidade eu acho que ele me agrega mais. O mundo PHP tem aderido mais ao Vue, assim como o Laravel, Yii, até mesmo o WordPress tem começado a cair nas graças do Vue. É com o vue que tenho gostado de estudar meus projetos, e estou até tentando fazer o meu projeto que estava em Angular 1 para Vue Js.

Consideração final - você pode e deve entrar neles e conhecer um pouco de cada, ver qual vai gostar mais e se aplicar neles, só que no final, o projeto da empresa a qual tu vai trabalhar, ou já vai vir decidido em qual tecnologia será feito, ou tu pegará algum sistema já pronto, para corrigir, modificar e aprimorar, ou também ajudar na decisão de qual escolher, por gostar, por ser mais fácil, por ter mais pessoas na equipe que sabem fazer acontecer com tal tecnologia.
Mas onde vamos parar realmente? Temos é que ter ainda mais domínio do Javascript, todos framework/library que surgem ajudam e muito, facilitam, complicam etc..., mas o resultado é JavaScript, ou Vanilla, e então pra fechar, "acho que é mais fácil e rápido o javascript puro e simplista". Mas aquele framework vai me quebra um galho danado. E amanhã teremos outro no mercado para aprender, porque ele vai tentar ser melhor que os outros que existem, hoje as coisas tentam suprir as existentes e será assim sempre.

Desculpe o texto.

[hnordt]

@taranttini o fato de escrever "HTML" dentro de JavaScript é algo bem natural e faz total sentido quando você entende que separar as coisas por tipo de linguagem não é o melhor jeito de estruturar código.

A separação que vai te beneficiar é a separação de conceitos, um conceito pode englobar JavaScript, HTML e CSS, e é altamente benéfico ter acesso ao código inteiro que faz parte desse conceito no mesmo arquivo ao invés de precisar ficar navegando entre arquivos.

PS.: frameworks como Vue aderiram a este conceito, inicialmente criado pelo React, e apesar de não usarem JSX como default (Vue permite que voce use JSX também, apesar de não ser o método default), você escreve JavaScript, CSS e HTML no mesmo arquivo (componente).

[kelvinrfr]

@hnordt ótimas dicas! Realmente a maioria das vagas que vejo pra fora do brasil não incluem Angular.

@taranttini não se preocupe com o texto longo, assim que é bom! 👍
Então, sobre a sua pergunta no inicio, eu uso no meu trabalho o AngularJS. O Angular2 ainda não utilizei, e estou experimentando o React. Vue ainda não experimentei.
Eu até gostei bastante de implementar em React mas a parte de configuração dele que não me deixou muito feliz. Como em meu background eu não tinha conhecimento da configuração de TypeScript e Ecmascript e tal, eu tive bastante dificuldade, mas acabou saindo.
Sobre a sua opinião de ser uma salada mista, ao meu ver (e com experiencia de somente construir uma aplicação de teste e alguns tutoriais), parece ser bom a prática de colocar o código Html dentro dos componentes do React, com isso eu acredito que te força a escrever componentes menores. Se o seu Html do render() tiver mais que umas 5 linhas, já pode avaliar se pode quebrar esse componente em outro.
Mas concordo plenamente com voce sobre a simplicidade, eu também prefiro. E por causa disso com certeza darei uma boa olhada no Vue.
Também concordo que no final das contas teremos que seguir os padrões adotados pela empresa que trabalhamos. Mas pelo menos esse conhecimento adquirido servirá para entrar na discussão desses da decisão destes padrões, e também para melhorar os conhecimentos do Javascript do futuro.

---

@hnordt Acho que ainda é um pouco obscuro pra mim entender isso aqui

separar as coisas por tipo de linguagem não é o melhor jeito de estruturar código

Mas achei bem interessante apontar que separar os conceitos (componentes) em cada arquivo seja mais interessante (e talvez mais produtivo) do que separar as coisas pelo tip de arquivo

[hnordt]

@k30v1n eu quis dizer que se você está criando um botão, não faz sentido criar 3 arquivos: button.css, button.html e button.js, porque voce estaria separando as coisas por linguagem de programação/marcação.

Faz muito mais sentido você colocar tudo dentro do mesmo arquivo, button.js ou button.vue, porque Button é o conceito, se ele precisa de 3 linguagens pra ser implementando, é um detalhe de implementação, voce não ganha beneficio algum separando em 3 arquivos, pelo contrario.

[hnordt]

@k30v1n outro ponto que esqueci de mencionar, hoje em dia voce nao precisa digitar uma linha de configuração pra usar React. Voce pode usar o CRA que faz este trabalho pra voce. Estou usando em producao sem qualquer problema.

TypeScript tambem é opcional, eu nao uso.

[taranttini]

Também não é só a questão da framework/library em si, o uso de boilerplate, angular-cli, vue-cli, react-cli, create-react-app, para auxiliar e muito, tanto em configuração, quanto na geração do código final.

@hnordt Compreendo o fato de estar em um único arquivo todo HTML + JS + CSS, só que no caso do react isso fica dentro do render ( ) o nosso HTML, já no caso do vue, temos o < template > onde fica todo html , temos o < script > onde fica todo o js e tambem o < style > onde ficam os estilos, além de poder importar os mesmo para dentro, como as outras assim o fazem. A separação é mais clara, ou mais simples.

O que eu não gosto no react é mais o fato do HTML estar dentro do render ( ), e trabalhar com JSX direto também não é tão produtivo ao meu ver, deixa que o build faça isso por nós.

Mas todas vão ter sempre o lado bom e o mal, em relação ao que nós vamos gostar ou não. Por isso é importante conhecer um pouco de cada, e assim ver o que é útil para nosso uso.

Estamos citando o Angular, React e Vue, ainda nem chegamos no caso do Redux, Vuex, Nuxt, Next, RxJs e outros tantos.
Não acaba mais o nosso mundo com tantas letrinhas coloridas.

[leandroferreira]

@taranttini Pensa por esse lado: não é o "seu HTML" que está no render, o render apenas retorna uma composição de outros componentes. O HTML mesmo é gerado pelo React (ou nem isso, se for react-native). Isso é um conceito muito poderoso, que te tira a limitação de trabalhar em volta de uma linguagem de template.

Sobre a curva de aprendizado: React é minúsculo, o que deixa mais simples ou complexo são as ferramentas que a gente usa ao redor do React pra criar uma aplicação.

[jaydson]

Oi pessoal, vocês viram que já existem discussões bem recentes e super relevantes sobre este mesmo tópico lá no fórum @frontendbr?

👉 React ou Vue frontendbr/forum#785

👉 Vue, Angular ou React? Qual lib/framewok você usaria para iniciar um projeto do zero? frontendbr/forum#744

👉 Vue.js, vale a pena? frontendbr/forum#732