Hoje, ao iniciar um projeto de front-end temos que escolher qual ferramenta iremos usar, e essa é uma decisão sem volta.
Dificilmente um projeto após iniciado muda de framework. A mão de obra e esforço necessário para essa mudança são maiores do que refazer o projeto do zero.
Hoje, os top três frameworks de front-end são React (não é um framework em si, mas eu já explico), Angular e Vue js.
Mas a pergunta que muitos fazem é: React, Vue ou Angular?
Nós trabalhamos usando essas ferramentas como sendo o núcleo da lógica de negócio e, o back-end, como sendo um manipulador de banco de dados na maioria dos projetos.
Toda a informação do projeto é processada, filtrada e entregue ao usuário por meio do front-end da melhor maneira possível para aquele dispositivo em particular.
Não importa se está em um desktop, tablet ou smartphone, será entregue a melhor experiência para ele.
Para isso acontecer um fator que levamos muito em conta é a performance.
“ … pronto, agora na tela vocês irão ver escrito ‘Hello World”
10° aula do curso de front-end, 50Mb de arquivos, 6 desistências na turma
>> Leitura recomendada:
Linha do tempo: a origem e o futuro do front-end.
Angular.js (primeira versão)
A primeira versão do Angular foi algo que mudou o desenvolvimento, os princípios de componentes e props surgiram com ele.
Também foi o surgimento do conhecido two way data bind, que mantinha o model e a view sincronizadas, o problema do Angular era seu peso.
Muitas vezes não chegamos a usar nem um terço de todos as suas funcionalidades.
O Angular era tão completo que dentro dele vinha um jQuery lite. Isso tornava a aplicação muito pesada, e a sua manipulação do DOM era lenta e muito custosa para dispositivos móveis.
O Angular.js abriu caminhos para Front-end
A primeira versão do Angular já está em desuso. Ela foi muito importante para abrir o mercado que temos hoje.
Foi essa primeira versão que fez o front-end se popularizar entre os desenvolvedores e fundou vários conceitos que são utilizados até hoje.
Se aparecer para você um trabalho grande e legado para dar manutenção para um projeto em Angular.js (primeira versão), você vai encontrar provavelmente um emaranhado de ng-alguma-coisa, $scope e cascatas de ifs.
E, claro, também o caótico loop do $digest. Prepare-se psicologicamente antes, se despeça da família e tente não surtar, porque você vai.
Angular 2+ (Atual)
“Sua mega corporação sinistra precisa de um framework gigante e robusto? Faça como a Umbrella Corporation, LexCorp, Aperture Laboratories e várias outras. Use Angular”
Anúncio do Angular em neon, Tokyo, 2055
Quais as vantagens do Angular 2+?
O Angular.js é mantido pelo Google, o que traz uma suposta segurança para empresas de grande porte, então ele é muito adotado para projetos corporativos e empresas financeiras.
Ele também adotou o TypeScript que é uma versão tipada do ECMA Script, isso atraiu muita atenção dos desenvolvedores C#/.Net, que também é uma linguagem/framework muito utilizado no meio front-endier (rs).
O Angular atual (2+) foi reescrito do zero e desde o começo usou o TypeScript. Ele não tem absolutamente nada a ver com a primeira versão.
Isso fez com que muitos desenvolvedores da primeira versão de Angular migrassem para o React, e também fez novos desenvolvedores e back-ends se tornarem front-end.
Aqui o duelo React vs Angular tornou-se uma realidade.
Diferente do React, o Angular é um framework completo com todas as ferramentas para se criar uma aplicação.
maaaaaas…
Quais as ‘peculiaridades’ do Angular 2+?
O fato de ser um framework completo também faz com que seja muito pesado, mas geralmente ele é usado para projetos grandes e que necessitam de um ambiente completo.
Não creio que o Angular seja adequado para coisas mais simples.
Além de sua curva de aprendizado ser maior, se você deseja trabalhar ou já trabalha com esse tipo de projeto (grandes e muitas regras de negócios) aprender Angular pode te ajudar a conseguir vários trabalhos com essas empresas.
React.js
React.js: as vantagens
A primeira versão do Angular tinha vários problemas como já citado. Já o React.js, por sua vez, trazia um poderoso algoritmo de manipulação do DOM, o que já era um grande diferencial.
Além de seu tamanho, que é extremamente leve (react + react-dom v16.0 49.8 kb gzipped) ele trouxe a total integração com as versões modernas do ECMA Script, dando suporte às classes e modularização.
Isso traz um desenvolvimento web equivalente às linguagens clássicas de programação como Java, Python e C++. Usar React também deixa a aplicação mais robusta e fácil de implementar novas funcionalidades.
Ferramentas de teste como o Jest, garantem que a aplicação funcione antes mesmo de ser feito um deploy para produção.
>> Leitura recomendada:
Leia nosso artigo sobre criação de componentes no React
“React.js não é um framework”
“Que?”
Sim, isso mesmo que estou falando.
O React não é um framework e todas as coisas que você quiser fazer, que não tenha a ver com a renderização do front-end, você terá que instalar uma biblioteca de terceiros.
Isso é uma vantagem, pois você só instala o que é necessário para a aplicação, deixando ela mais leve.
>>Leitura Recomendada:
Um guia para usar React JS
E os contras do React.js? Existem?
A renderização do template é toda feita em JavaScript então não temos loops, ifs, classes, inline no template.
Essa falta de suporte nativo às ferramentas de templates criaram algumas bizarrices como, por exemplo, o react-if, ou o classnames.
A maior questão do React.js é que, em outras bibliotecas, essas coisas já vem nativas, como no vue com v-if e :class ou Angular com *ngIf e [ngClass], e várias outras.
Se não tiver cuidado, com o React, você pode ter várias dependências pequenas espalhadas por toda a aplicação, que no bundle final, deixa a aplicação muito pesada e lenta.
Isso acontece pois cada uma dessas libs são feitas por programadores diferentes, e nem sempre é feito com o melhor desempenho e da maneira correta.
E a sua principal ferramenta de gerenciamento global de estado, o Redux, que é usada na maioria dos projetos, torna a aplicação bem complexa.
Para fazer uma coisa simples você tem que seguir uma série de padrões e normas que se não forem feitas estritamente dentro do padrão você pode se perder facilmente.
O React em si é uma ferramenta simples e fácil de se programar, mas à medida que você vai adicionando funcionalidades e libs, sua complexidade aumenta muito.
E aí, quando isso acontece, é necessário bastante conhecimento técnico, tanto do próprio React como do JavaScript, para manter e desenvolver uma aplicação complexa em React.
>> Leitura recomendada:
Tudo sobre React Native
E o Vue.js?
“JavaScript só serve basicamente para validar formulários.”
“Programador de verdade não usa plugins, faz tudo do zero.”
“O site tem que funcionar no IE6.”
Jorge, dono da JorgeTech®, desenvolvedora do jERP em SAP, ABAP, COBOL e Asp.net, 2019
O Vue.js foi criado com base no template do Angular, porém usando algumas das coisas do React, como a componentização e controle do DOM.
Vamos falar a verdade? O Vue.js une o melhor dos dois mundos.
O Vue.js é amplamente divulgado pela comunidade como uma boa alternativa ao React e ao Angular.
O Vue tem sua ferramenta de configuração de projetos, o Vue Cli, que ajuda e muito a começar um projeto. Com a ferramenta é possível só ir escolhendo o que você quer ou não no projeto.
O Vue Cli também tem uma interface gráfica, facilitando ainda mais o trabalho.
O template engine do Vue é muito fácil e intuitivo, se você já tiver o mínimo conhecimento com Angular ou React, você não terá dificuldade nenhuma em fazer um projeto em Vue.
A versão 2 do Vue trouxe os Vue files que são arquivos que contém o template, Javascript/TypeScript e css/sass/postcss em um só lugar, todo o component em um único arquivo.
Ele é absurdamente leve (cerca de 20.9K Gzipped), isso já com todas as ferramentas básicas para iniciar o projeto.
O “Redux do Vue”, o Vuex, que é usado para o gerenciamento do estado global da aplicação, é muito simples e fácil de usar, mesmo mantendo toda a arquitetura proposta pelo Flux. Aliás, temos uma artigo aqui sobre arquitetura de React com Flux, que acho que será útil também.
>>Leitura Recomendada:
Leia nosso artigo sobre as novidades do TypeScript 3.4
Ok, mas e as desvantagens do Vue.js?
O ponto fraco do Vue é que ele ainda é novo, e a versão 2, que se consolidou entre os grandes frameworks, é mais recente ainda, isso traz insegurança aos clientes.
O Vue também não tem nomes como Facebook e Google em seu rodapé, o que o torna “menos seguro” aos clientes.
Mas entre os desenvolvedores Front-end, o Vue se destaca na frente dos outros:
Fonte: Best of JavaScript
Será só uma questão de tempo até que o Vue esteja no mesmo patamar de popularidade, também com os clientes.
Então se você já trabalha com front-end e ainda não fez nada com Vue, aproveite para conhecê-lo e estar preparado para quando essa demanda chegar até você.
React vs Vue vs Angular: qual a conclusão? O que é melhor?
Independente da ferramenta o melhor programador front-end é aquele que domina o JavaScript, que se vira com o que tem e não tem medo de aprender coisas novas e mudar.
A melhor ferramenta é sempre aquela que está por vir. No decorrer do texto você pode perceber que todas tem pontos fortes e pontos fracos.
A gente vai pegando o que é melhor em uma, coloca na próxima, melhora e adiciona coisa nova.
Sempre esteja um passo à frente da demanda atual dos clientes e do mercado, por que quando ela chegar, você já vai estar com uma imensa vantagem e conhecimento nunca é desperdiçado.
Mas, Vue.js <3
Hoje a minha preferência pessoal sem dúvidas é o Vue, sempre é minha primeira escolha para qualquer projeto que eu vou implementar. Ele é leve, simples e eficaz.
Então, hoje, se você me questionar “React, vue ou angular?“, eu te direi Vue.js. Mas, novamente, esse é o meu cenário. É a minha necessidade.
Se você está começando agora aprenda React. Para front-end, a grande maioria das vagas de trabalho são para entendidos de React, então sua chance de conseguir entrar no mercado é maior com ele.
Se você tem o perfil mais corporativo você pode se dar bem com Angular, que é o que a maioria desse mercado usa.
Mas se você não quer ter dor de cabeça use Vue. É isto.
“Usamos o jERP há 25 anos. Esse ano a JorgeTech® vai instalar aqui um mainframe IBM z900, grande avanço para nós.”
Papeis Pereira, primeiro cliente da JorgeTech, ainda usam o Windows XP e IE6, porque se for atualizar, o jERP não funciona mais, 2019
>>Leitura Recomendada:
Leia nosso artigo sobre o Svelte, o framework JavaScript que não é um framework.
Crie um perfil na GeekHunter e receba propostas alinhadas ao seu perfil. São mais de 1000 vagas abertas, inclusive Vagas para Desenvolvedor JavaScript, Vagas para Desenvolvedor React e Vagas para Desenvolvedor AngularJS e Vagas para Desenvolvedor TypeScript.
