Recebo essa pergunta com frequência, porém recentemente me incentivaram a “compilar” minhas respostas em um artigo. Não sou fã de escrever artigos “comparatórios”, porém decidi escrever este para expor minha opinião.

Este não é um artigo puramente técnico, aqui estão expostas minhas opiniões, percepções e experiências. Se você não leu, não perca seu tempo rebatendo ele.

Há uma excelente comparação oficial e técnica aqui, e você pode ler ela se não quiser ler o que eu escrevi.

Antes de entrar no assunto principal, vamos a uma breve análise.

Nível de complexidade (Aka: Nível de Magia Negra)

Na minha palestra Vue.js – O Framework Progressivo (que conta com slides de duas palestras The Progressive Framework & Modern Frontend Development with Vue.js) há o seguinte slide:

A palestra fala um pouco sobre Complexidade Instrumental VS Complexidade Inerente. Onde a Complexidade Instrumental define o quão complexas são ferramentas que o projeto usa, enquanto a Complexidade Inerente é o quão complexo o projeto é por si só.

Não há (nem haverá) uma definição perfeitamente clara de como classificar a complexidade de um projeto, são inúmeras variáveis a se considerar, porém com o passar do tempo um desenvolvedor vai adquirindo a habilidade de “descobrir” o quão trabalhosa determinada tarefa será.

Já a Complexidade Instrumental (mesmo que subjetiva) é mais simples de se detectar. Um dos indicadores que costumo usar é o tempo que demora para que determinado projeto esteja rodando localmente do zero.

Quantos comandos ou configurações foram necessárias para que o projeto esteja rodando localmente? Quanto tempo leva para começar a produzir algo?

E estamos falando apenas do setup, ainda há outros mais específicos.

• Não é simples criar uma nova feature ou tela.
• É preciso dar muitas voltas para entender determinado fluxo.
• Muitas regras em um único lugar.
• Regras iguais em vários locais.
• Erros silenciosos ou difíceis de identificar.
• Muita dificuldade em alterar ou criar novos fluxos.
• Regras de negócio muito amarradas ou dependentes das ferramentas.
• Muito tempo explicando algo para outro membro da equipe.

Estou listando só as que me lembro, com certeza você sera capaz de listar outros elementos que indicam um auto nível de Complexidade Instrumental

Equilíbrio

Ferramentas com alto nível de complexidade “enganam”, pois inicialmente não apresentam essas características, elas aparecem com o decorrer do projeto. Porém, quando a complexidade inerente começa a aparecer, essas ferramentas tendem a prejudicar mais do que ajudar.

Isso acontece pois, visando resolver determinados problemas muito rapidamente, essas ferramentas tem um workflow muito especifico, se você precisa por qualquer motivo sair desse workflow… o caos passa a ser seu colega de trabalho.

Quanto mais a ferramenta faz as coisas por você mais complexa ela tende a ser.

Porém se por um lado você optar por ferramentas com menor complexidade elas podem não atender bem as demandas impostas pela Complexidade Inerente.

Chegamos a um empasse, é preciso escolher a ferramenta certa para o trabalho. Mas isso não é nada fácil. É ai que Vue.js e React entram em cena.

Vue.js e React são extremamente extensíveis, e mesmo que eles sejam simples, tem total capacidade de atender a demandas com alta Complexidade Inerente.

Semelhanças

Já disse em outros artigos e em nosso podcast, que o Vue.js é muito semelhante ao React, tudo que React pode fazer Vue.js também pode fazer, além de outras a mais.

O objetivo primário do Vue.js e o React é criar interfaces reativas usando componentes.

Mesmo com muitas semelhanças, as diferenças são muito significativas e perceptíveis.

Se você leu a seção anterior, percebeu que o Vue.js está na frente do React em complexidade. O motivo é simples: Vue.js Puro faz mais coisas que o React Puro.

Baixo Nível & Alto Nível

Gosto de fazer essa comparação, como se Vue.js e React fossem duas linguagens de programação, onde React é uma linguagem de baixo nível e Vue.js uma linguagem de alto nível. Não entenda isso como algo pejorativo, pois não é.

React é uma lib muito objetiva e flexível, alguns diriam até mesmo que é uma lib um pouco crua. Isso não é algo ruim, pelo contrário, pois você vai poder usar o React em inumeráveis situações, das mais simples até as mais complexas.

Porém, situações onde o uso de alguma lib para facilitar alguma determinada tarefa não é algo raro. Não me refiro a componentes de terceiros, mas a libs que modificam o comportamento do React e seus componentes.

São libs obrigatórias? Não, porém existem e são amplamente usadas.

Nesse momento Vue.js começa a mostrar seu brilho. Pois ele faz as mesmas coisas que o React, tem as mesmas características, é menor, mais rápido e, mesmo assim, faz mais coisas que o React.

Enquanto com React você pode precisar de uma lib ou outra para obter determinado comportamento, com Vue.js você não precisa de nenhuma lib extra. Até mesmo o Redux, não é raro ver o Redux-Saga sendo amplamente usado, para fazer coisas que o Vuex já faz por padrão.

Motivações

Workflow. Essa é a minha principal motivação para usar Vue.js e não React.

O workflow que o Vue.js me oferece é algo que nunca experimentei antes. As coisas simplesmente funcionam como eu desejo que funcionem. O vue-cli me fornece um ambiente pronto para uso.

Ferramentas cli para criar projetos não são novidades, porém assim como o create-react-app ele me entrega uma estrutura pronta e auto-suficiente, não preciso manter ou obrigar os membros da equipe a também ter o vue-cli instalado em suas máquinas.

A principal diferença aqui é que o vue-cli me dá várias opções de templates para projeto.

Performance

Não sou grande apreciador de benchmarks, para mim eles não são o único fator de decisão na hora de escolher uma ferramenta. O que mais pesa para mim é o workflow. Para mim é como se workflow fosse peso 3 e performance fosse peso 2.

Evan You, o criador do Vue.js possui uma excelente palestra sobre o assunto.

Alguém pode dizer: Você fala isso por que a performance do Vue.js deve ser inferior.

Alguém pode argumentar: Esse teste foi feito pelo Vue.js, claro que vai colocar ele em vantagem.

Este é um teste feito e mantido por terceiros, a performance do Vue.js é excepcional. Ainda vale lembrar que Vue.js é uma ferramenta de apenas 18kb min+gzip, com esse tamaninho ele consegue fazer frente em performance e features para muito framework “velho de guerra”.

A revolução que o Vue.js proporciona está em pegar anos de conhecimento acumulado por outras ferramentas e implementar isso tudo de maneira fluida e amigável. A API dele é tão consistente que pouquíssimas coisas foram modificadas na sua atualização para v-dom.

Coisas para aprender

No ecossistema JavaScript é comum o uso de várias libs em um único projeto. Isso é bom pois temos grande reaproveitamento e interoperabilidade, porém são mais coisas para manter e aprender. Sendo assim se você puder fazer mais por menos estará ganhando.

Novamente caímos na questão da Complexidade Instrumental… Se o ideal é fazer mais com menos por que não usar ferramentas mais complexas? Lembre-se: Mais complexo, mais difícil de adaptar e manter.

Além disso não se engane, mesmo que uma ferramenta prometa fazer várias coisas, internamente ela vai ser separada/fragmentada. E você vai aprender várias coisas de qualquer maneira.

Veja o exemplo do AngularJS: modules, routes, IoC, DI, controllers, views, resolver, config, provider, factory, directives, filters, componentes…

Vale mais a pena você ter menos coisas que possam atender a situações diversas, do que ter diversas coisas para poucas situações.

Vue.js fornece 3 libs para a construção de aplicações complexas: vue, vue-router e vuex.

E para consumir recursos http? Novamente Vue.js mostra a que veio. Antes havia a recomendação de usar o vue-resource, porém entenderam que ele era opcional demais e que haviam soluções melhores, como o axios. E com isso vue-resource deixou de ser uma lib oficial.

São 4 libs simples e poderosas que são mais que suficientes para se construir aplicações extremamente complexas.

Além desse quadrado mágico, sempre uso lodash, moment.js e numeral.js. Atualmente minha a lib de UI que uso é o Quasar, capaz de criar aplicações web, desktop e mobile.

Single File Components (SFC)

Single File Components é um grande diferencial, que torna o do Vue.js workflow tão agradável . Há um excelente artigo do Emanuel G de Souza que explica em detalhes como os SFC funcionam. Mesmo assim vou destacar alguns pontos.

SFC é um arquivo com extensão .vue que da uma liberdade absurda na hora de escrever seus componentes.

Você não precisa abrir mão das suas preferencias para criar um componente Vue.js, ele te da liberdade de criar componentes usando Pug, Sass, PostCss, Stylus, CoffeeScript, Babel, TypeScript…

Essa liberdade permite adaptar o Vue.js para vários tipos de equipes e projetos.

Você pode até mesmo separar os “pedaços” do componentes em vários arquivos.

Curva de aprendizagem

React é apenas uma lib, sua API não é grande e ele atua apenas em uma camada da aplicação. Mesmo assim aprender ele pode não ser algo simples para a maioria dos devs.

A maior critica ao React é o boilerplate dele e a quantidade de coisas que você precisa plugar nele. Como dito na seção anterior, essas coisas não são obrigatórias, porém projetos complexos e de nível world class, praticamente exigem isso.

Você não aprende só a API do React, aprende também JSX. O mesmo problema que o Angular passa com TypeScript, porém em uma escala muito menor. Alguns devs tem muita dificuldade em compreender esse tipo de cenário. Onde determinada ferramenta começa e onde outra termina.

Isso não é culpa ou exclusividade do React, na verdade pode ser encarado como um dos seus pontos fortes.

Além disso React se pauta no uso correto do JavaScript, ele realmente exige que você tenha boas habilidades com JavaScript, novamente ele é muito objetivo deixando muita coisa a seu critério.

Por possui uma sintaxe de template, similar e compatível com o HTML “normal”, isso torna o Vue.js muito mais amigável para devs que ainda não possuem grande familiaridade com JavaScript, ou que nunca criaram um SPA.

Além da simplicidade oferecida pelas templates, os componentes do Vue.js são declarados com um objeto de configuração (options), com isso é muito simples entender oque o componente esta fazendo.

Vue.js é extremamente amigável para devs com menos experiência, e muito flexível para devs mais “avançados”. É uma combinação rara de se ver.

Integrar novos desenvolvedores em um projeto feito com Vue.js é simples, e não exige muito tempo, rapidamente o novo membro da equipe estará produzindo.

Virtual-DOM / JSX e Render Functions

Os componentes feitos com React são criados usando JSX. Não é todo dev que gosta do JSX, e as alternativas podem não ser produtivas.

Para quem não sabe JSX é uma sintaxe que permite escrever algo similar ao HTML, que uma vez processado vira uma render function. Isso é necessário pois tanto React quanto Vue.js usam Virtual-DOM (V-DOM) em seus componentes.

De maneira muito resumida, V-DOM é uma representação em memória do DOM Real (R-DOM). No lugar de criar os nós DOM e ir interagindo com eles… adicionando propriedades e eventos, toda a interação acontece com o nó virtual (que esta em memória). Quando o nó V-DOM é atualizado, o nó R-DOM é removido e um novo nó é adicionado na Arvore DOM (DOM Tree)

Não é um processo simples ou algo que você vá entender somente com essas poucas linhas. Porém, esse tipo de técnica não é novidade. Uma recomendação comum era criar todos os elementos DOM via código e só depois que o processamento sobre ele estiver concluído que ele seria inserido no documento.

A motivação para isso esta no que chamamos de repaint e reflow. Com isso atualizações a interações tornam-se muito mais rápidas que o “normal”.

A render function (React / Vue.js) vai retornar um objeto que será a representação do nó DOM do componente. Ela é uma função JavaScript e seu conteúdo é código JavaScript.

Inicialmente pode não ser agradável, porém é senso comum que render functions ou JSX são bem mais eficientes e poderosas que templates. Porém são mais complexas. É toda uma questão de declarativo X imperativo.

Vue.js passou a usar V-DOM na sua V2, e mesmo com uma mudança interna e estrutural tão grande, ele manteve o uso de template. E com isso passou a suportar render functions, não o suficiente também passou a suportar JSX.

Então há 3 maneiras de escrever um componente Vue.js: JSX, render function e template. Sendo possível usar pré-processadores na template, ampliando mais ainda as possibilidades.

Vue.js permite inúmeras combinações diferentes para projetos e situações diferentes. Ele permite que você aponte para um pedaço de HTML (geralmente usando a tag template do html), dando grande organização para projetos que não são SPA.

Lembre-se que no final, tanto JSX quanto template viram código JavaScript dentro da render function.

Ecossistema e Comunidade

Ecossistema e comunidade são fatores decisivos na escolha de uma tecnologia. Atualmente o ecossistema do React é maior, porém dificilmente você sentirá falta de algo que só existe no React.

Figurando entre os primeiros colocados em popularidade no bestof.js.org, Vue.js mostra que essa diferença esta cada dia menor, até o momento onde ele vai ultrapassar React e AngularJS.

Já há um bom número de bibliotecas de UI para Vue.js: Quasar (web, cordova e electron), Element, Vuetify, Vue Material entre outros. Cada dia surgem mais plugins, libs e ferramentas.

Comunidade

Vue.js tem um fórum próprio, por isso não perca seu tempo com comparações de perguntas do StackOverflow. É um local bastante ativo e receptivo, core members e o criador do Vue.js estão sempre interagindo. Além disso as issues sempre são respondidas.

Há ainda um chat no Gitter para quem curte uma vibe IRC, nesse ponto também entra a comunidade brasileira. Além do blog há o facebook, Slack e Telegram.

Todos esses canais são extremamente ativos, sempre há pessoas trocando ideia tirando dúvidas. O grupo do Telegram chega a ser mais movimentado que os grupos de React e Angular. Nos orgulhamos de ser uma comunidade receptiva. Não nos limitamos a dúvidas sobre Vue.js, há uma brincadeira mais-ou-menos assim:

A galera tem mais dúvidas sobre JavaScript do que dúvidas sobre Vue.js

Esse é o espirito da comunidade brasileira de Vue.js.

Da Comunidade para a Comunidade

Vue.js não é uma ferramenta criada ou mantida por uma grande organização, ele era um simples projeto pessoal que devido a sua qualidade e potencial passou a figurar como uma das melhores escolhas para vários tipos de projetos.

Diferente de uma solução criada para atender as demandas internas de uma empresa e que vira open-source, Vue.js atende as demandas da comunidade.

Novas ideias são amadurecidas com a comunidade antes de chegar a um veredito. O anúncio da versão 2 do Vue.js foi um exemplo de respeito e atenção com a comunidade.

Uma issue com todas as mudanças foi aberta, alguns recursos que seriam removidos não foram devido ao feedback da comunidade.

Em resposta a essa atenção e carinho que o patreon do Evan You é um grande sucesso. Atualmente são USD 9.650 arrecadados mensalmente para que ele fique fulltime no projeto.

Esses são os motivos que me motivaram e que ainda me motivam a escolher o Vue.js no lugar do React até mesmo Angular, isso não torna outras soluções ruins. Sua performance, sua flexibilidade, facilidade, clareza, as opções que ele me da, diversidade… comunidade.

Você pode usar Vue.js no mobile com Cordova e Weex (nativo), há planos para uma compatibilidade oficial com NativeScript. Pode usa-lo no desktop com Electron, Server Side Rendering… São inúmeras as possibilidades. Tudo que eu poderia fazer com React eu posso fazer com uma facilidade potencialmente maior com Vue.js.

Ele não é mais um “novo framework JavaScript”.

Acredito que nós que fazemos o mercado, somos nós como desenvolvedores que criamos a demanda por ferramentas. A comunidade brasileira e internacional já esta madura e grande o suficiente para possui demandas de vagas e projetos. Grandes empresas já estão colocando Vue.js como sua stack principal.

Este artigo não foi escrito para que você largue suas ferramentas atuais e reescreva seus projetos. Reescrever por reescrever é burrice. Foi escrito para você entender que Vue.js é sim uma opção viável para seus projetos e que você pode ser muito produtivo se adotar ele como ferramenta.

Não deixe de deixar seu comentário de como foi sua experiência ao usar Vue.js, se você tem planos de usa-lo no futuro… Comente, queremos saber sua opinião.

Se quiser saber mais sobre meu trabalho, visite codecasts.com.br. Lá você vai ver vídeos sobre JavaScript, jQuery, Gulp, ES6, Vue.JS, Docker, e muito mais.

Obrigado ao William e Emanuel G de Souza pela ajuda na revisão.