Comparação com Outros Frameworks

Esta é definitivamente a página mais difícil de ser escrita do guia, mas sentimos que é importante. É muito provável que você já teve problemas, tentou resolvê-los e já usou outra biblioteca para resolvê-los. Você está aqui pois quer saber se Vue pode resolver seus problemas específicos de uma forma melhor. É isto que esperamos lhe responder.

Nós também tentamos arduamente evitar arbitrariedade. Como a equipe responsável, obviamente gostamos muito do Vue. Há problemas que acreditamos que ele resolva melhor do que qualquer outra opção existente. Se não acreditássemos nisso, não estaríamos trabalhando nele. Entretanto, queremos ser justos e precisos. Nos esforçamos para listar também onde outras bibliotecas oferecem vantagens significativas, como o vasto ecossistema React de renderizadores alternativos ou o suporte retroativo do Knockout até IE6.

Nós também gostaríamos de sua ajuda para manter este documento atualizado, afinal o mundo JavaScript se move rápido! Se você perceber alguma inconsistência ou algo que não parece estar certo, por favor, nos mantenha a par informando um problema.

React

React e Vue compartilham muitas similaridades. Ambos:

Sendo tão similares em escopo, desprendemos mais tempo para refinar esta comparação em relação às outras. Queremos garantir não somente precisão técnica, mas também equilíbrio. Apontamos onde React supera Vue, por exemplo, na riqueza de seu ecossistema e na abundância de renderizadores personalizados.

Com isso dito, é inevitável que a comparação pareça tendenciosa ao Vue para alguns usuários do React, pois muitos dos assuntos explorados são de certo modo subjetivos. Reconhecemos a existência de variadas preferências técnicas, e esta comparação tem como objetivo principal delinear as razões pelas quais Vue poderia ser uma escolha melhor se suas preferências coincidirem com as nossas.

A comunidade React tem sido fundamental para nos ajudar a alcançar esse equilíbrio, com agradecimentos especiais a Dan Abramov da equipe React. Ele foi extremamente generoso com seu tempo e considerável experiência para nos ajudar a refinar este documento até que ambos ficassem felizes com o resultado final.

Desempenho

Tanto React quanto Vue oferecem desempenho equivalente na maioria dos casos que encontramos, eventualmente com Vue um pouco à frente por causa de sua implementação Virtual DOM mais leve. Se você está interessado em números, pode dar uma olhada neste comparativo independente que foca no desempenho bruto de renderização/atualização. Observe que não se leva em conta estruturas complexas de componentes, portanto encare-o apenas como uma referência e não um veredito.

Esforços de Otimização

No React, quando o estado de um componente muda, ele aciona também a renderização de toda a árvore de componentes filhos. Para evitar renderizações desnecessárias de componentes filhos, você precisa utilizar um PureComponent ou implementar shouldComponentUpdate sempre que puder. Você também pode precisar utilizar estruturas de dados imutáveis para tornar suas mudanças de estado mais amigáveis a otimizações. Entretanto, em certos casos pode não ser possível se apoiar nestas otimizações, pois PureComponent e shouldComponentUpdate assumem que o resultado da renderização de toda a árvore interna sempre é determinado pelas propriedades do componente corrente. Se este não for seu caso, tais otimizações podem levar a estado inconsistente no DOM.

No Vue, as dependências de um componente são automaticamente observadas durante sua renderização, desta forma o sistema sabe precisamente quais componentes precisam ser renderizados quando o estado muda. Pode-se considerar que cada componente já tem shouldComponentUpdate automaticamente implementado para você, e sem os problemas com componentes filhos.

De forma geral, isto remove a necessidade de conhecimento de toda uma gama de otimizações de desempenho das responsabilidades do desenvolvedor, permitindo-o focar mais em construir a aplicação em si enquanto ela cresce.

HTML & CSS

No React, tudo é exclusivamente JavaScript. Não apenas as estruturas HTML são expressas através de JSX, mas tendências recentes também apontam para colocar o gerenciamento CSS dentro do JavaScript. Esta abordagem tem seus próprios benefícios, mas também vem com várias contra-partidas que podem não aparecer de cara para todos os desenvolvedores.

Vue abraça as tecnologias Web clássicas e constrói em cima delas. Para mostrar o que isso significa, mergulharemos em alguns exemplos.

JSX vs. Templates

No React, todos os componentes expressam sua interface com funções render usando JSX, uma sintaxe declarativa estilo XML, embutida dentro do JavaScript.

A utilização de render functions com JSX oferece algumas vantagens:

No Vue, também temos funções de renderização e até mesmo suporte a JSX, afinal às vezes você precisa deste poder. Entretanto, oferecemos para a experiência padrão o uso de templates como uma alternativa mais simples. Qualquer HTML válido é um template Vue válido, o que leva a algumas vantagens próprias:

Alguns argumentam que é preciso aprender uma nova sintaxe específica de um único domínio para ser capaz de escrever templates - nós acreditamos que este argumento é superficial. Primeiramente, usar JSX não significa que o desenvolvedor não precisa aprender algo - sendo uma sintaxe adicional por cima do JavaScript puro, pode ser fácil de aprender para aqueles familiarizados com JavaScript, mas ainda assim há uma curva de aprendizado. Similarmente, usar templates também é apenas uma sintaxe adicional por cima do HTML puro, inclusive com uma curva de aprendizado bem menor para aqueles familiarizados com HTML. E com este novo conhecimento “específico”, ajudamos os desenvolvedores a fazer mais com menos código (por exemplo, modificadores v-on). A mesma tarefa pode envolver muito mais código quando usamos JSX ou funções de renderização.

Em um nível mais alto, podemos dividir componentes em duas categorias: de apresentação ou de lógica. Recomendamos utilizar templates para componentes de apresentação e funções de renderização ou JSX para componentes de lógica. O percentual destes componentes depende do tipo de aplicação que você está construindo, mas normalmente observamos que componentes de apresentação são muito mais comuns.

CSS com Escopo por Componente

A menos que distribua componentes entre vários arquivos (por exemplo, com CSS Modules), usar CSS com escopo no React frequentemente se baseia em soluções CSS-no-JS. Há muitas soluções por aí, cada qual com seus contratempos. Um problema comum é que recursos como estados :hover, media queries e pseudo-seletores exigem dependências pesadas para reinventar o que o CSS já faz - ou por vezes nem são suportados. Se não otimizado com cautela, CSS-no-JS também pode introduzir problemas de desempenho não triviais. E o mais importante, isto desvia da experiência normal de autoria de CSS.

Vue, por outro lado, proporciona acesso completo ao CSS com componentes single-file:

<style scoped>
@media (min-width: 250px) {
.list-container:hover {
background: orange;
}
}
</style>

O atributo opcional scoped automaticamente cria escopo ao CSS de seu componente adicionando um atributo único (por exemplo, data-v-21e5b78) aos elementos e compilando .list-container:hover para algo como .list-container[data-v-21e5b78]:hover.

Se você já está familiarizado com CSS Modules, os componentes single-file do Vue também possuem suporte de primeira classe para isso.

Finalmente, assim como no HTML, você também tem a opção de escrever seu CSS utilizando qualquer pré-processador (ou pós-processador) de sua preferência, permitindo-o se apoiar em bibliotecas existentes neste ecossistema. Você pode realizar operações centradas no design, como manipulação de cores durante o processo de build, ao invés de precisar importar bibliotecas JavaScript especializadas que aumentariam o tamanho de seu pacote compilado e a complexidade de sua aplicação.

Escalabilidade

Ampliando a Escala

Para aplicações grandes, tanto Vue quanto React oferecem soluções de roteamento robustas. A comunidade React também tem sido muito inovadora em termos de soluções de gerenciamento de estado (com Flux/Redux). Esses padrões de gerenciamento de estado e até o próprio Redux podem ser integrados facilmente em aplicações Vue. Na verdade, neste modelo, Vue até deu um passo adiante com o Vuex, uma solução de gerenciamento de estado ispirada em Elm, que se integra profundamente com o Vue, a qual nós acreditamos que oferece uma experiência de desenvolvimento superior.

Outra importante diferença entre os dois ecossistemas é que as bibliotecas companheiras do Vue para gerenciamento de estado e roteamento (dentre outras preocupações) são oficialmente suportadas e mantidas sempre atualizadas em relação à biblioteca principal. Ao contrário disso, React escolhe deixar tais preocupações para a comunidade, criando um ecossistema mais fragmentado. Por outro lado, por ser mais popular, o ecossistema React é consideravelmente mais rico do que o do Vue.

Por fim, Vue oferece um CLI gerador de projetos que torna trivialmente simples iniciar um novo projeto usando o sistema de build de sua escolha, incluindo webpack, Browserify, ou mesmo nenhum. React também está fazendo avanços nesta área com o create-react-app, mas atualmente tem algumas limitações:

É importante notar, no entanto, que muitas dessas limitações são decisões de projeto intencionais tomadas pela equipe do create-react-app, as quais têm suas vantagens. Por exemplo, enquanto as necessidades de seu projeto são bem simples e você não precisa “ejetar” para customizar o processo de build, é possível mantê-lo atualizado como uma dependência. Você pode ler mais sobre esta filosofia diferente aqui.

Reduzindo a Escala

React é conhecido por sua curva de aprendizado. Antes que você possa realmente começar, você precisa saber sobre JSX e provavelmente ES2015+, uma vez que muitos exemplos React usam sintaxe de classes. Você também precisa aprender sobre processos de transpilação, pois embora você possa tecnicamente usar Babel para compilar código em tempo real diretamente no navegador, não é algo recomendado para a produção.

Enquanto Vue escala ascendentemente tão bem quanto, se não até melhor que o React, ele também é capaz de reduzir a escala tão bem quanto jQuery. É isso mesmo - tudo que você precisa fazer é colocar uma única tag <script> na página:

<script src="https://unpkg.com/vue"></script>

Então você pode começar a escrever código Vue e ainda distribuir a versão minificada em produção sem se sentir culpado ou ter que se preocupar sobre problemas de performance.

E já que você não precisa obrigatoriamente saber sobre JSX, ES2015 ou sistemas de build para começar com o Vue, leva tipicamente menos de um dia para os desenvolvedores lerem os pontos mais importantes no guia e aprenderem o suficiente para criar aplicações não triviais.

Renderização Nativa

ReactNative lhe permite escrever aplicativos nativamente renderizados para iOS e Android usando o mesmo modelo de componentes do React. É ótimo que, como desenvolvedor, você possa aplicar o conhecimento de um framework entre múltiplas plataformas. Nesta frente, Vue possui uma colaboração oficial com Weex, um framework de UI multiplataforma desenvolvido por Alibaba Group, o qual utiliza Vue como seu JavaScript framework runtime. Isso significa que, com Weex, você pode utilizar a mesma sintaxe de componentes Vue para criar componentes que podem ser renderizados não apenas no navegador, mas também nativamente em iOS e Android!

No presente momento, Weex ainda é um projeto em desenvolvimento ativo e não está tão maduro e testado na prática quanto o ReactNative, mas o desenvolvimento é dirigido às necessidades de produção do maior negócio de comércio eletrônico do mundo, e a equipe Vue colaborará ativamente com a equipe Weex para garantir a experiência mais suave possível aos desenvolvedores Vue.

React + MobX

MobX se tornou bem popular na comunidade React e, de fato, utiliza um sistema de reatividade quase idêntico ao Vue. De forma simplista, o fluxo de trabalho React + MobX pode ser pensado como um Vue com código mais prolixo. Por isso, se você estiver usando essa combinação e estiver gostando, saltar para o Vue é, provavelmente, o próximo passo lógico.

AngularJS (Angular 1)

Um pouco da sintaxe Vue é muito similar ao Angular (por exemplo, v-if vs. ng-if). Isto ocorre pois acreditamos que há muitas coisas que o AngularJS resolveu corretamente, as quais serviram de inspiração para o Vue bem no início de seu desenvolvimento. Entretanto, também há muitas dores que vêm com o AngularJS, onde o Vue tentou oferecer melhorias significativas.

Complexidade

Vue é muito mais simples que o AngularJS, tanto em termos de API quanto de design. Aprender o suficiente para construir aplicações não triviais tipicamente leva menos de um dia, o que não é verdade para o AngularJS.

Flexibilidade e Modularidade

AngularJS tem fortes opiniões sobre como as aplicações devem ser estruturadas, enquanto Vue é uma solução mais flexível e modular. Ainda que isto torne Vue mais adaptável a uma ampla variedade de projetos, reconhecemos que às vezes é útil ter algumas decisões já tomadas para você, para que possa simplesmente sair codificando.

É por isso que oferecemos o modelo de projeto com webpack que você pode configurar dentro de poucos minutos, ainda assim concedendo-lhe acesso a recursos avançados como hot module reloading, linting, extração de CSS, e muito mais.

Interligação com Dados

AngularJS adota a abordagem de two-way binding entre escopos, enquanto Vue força um fluxo de dados de mão única entre componentes. Isto permite que o fluxo de dados seja mais compreensível em aplicações não triviais.

Diretivas vs. Componentes

Vue possui clara separação entre diretivas e componentes. Diretivas são feitas exclusivamente para encapsular lógica de manipulação do DOM, enquanto componentes são unidades auto-contidas que possuem sua própria lógica de dados e de apresentação. Com AngularJS, existe uma confusão considerável entre os dois.

Desempenho

Vue tem melhor desempenho e é muito, muito mais fácil de otimizar, por não utilizar verificação suja de alterações de dados no escopo (dirty checking). AngularJS torna-se lento quando há um grande número de observadores (watchers), pois a cada vez que qualquer coisa muda no escopo, todos esses observadores precisam ser reavaliados. Além disso, este laço de verificação suja (chamado digest cycle), pode ter que executar várias vezes para “estabilizar” se algum observador aciona outra atualização. Usuários do AngularJS por vezes têm de recorrer a técnicas esotéricas para contornar este ciclo e, em algumas situações, não há simplesmente nenhuma maneira de otimizar um escopo com muitos observadores.

O Vue definitivamente não sofre com isso, pois usa um sistema de observação por rastreamento de dependências transparente, com enfileiramento assíncrono - todas as alterações disparam de forma independente, a menos que tenham dependências explícitas.

Curiosamente, há algumas semelhanças na forma como Angular 2 e Vue estão lidando com estes problemas existentes no AngularJS.

Angular (previamente denominado Angular 2)

Temos uma seção separada para Angular por ser, de fato, um framework completamente diferente do AngularJS. Por exemplo, possui um sistema de componentes de primeira classe, muitos detalhes de implementação foram totalmente reescritos, e a API também mudou drasticamente.

TypeScript

Angular essencialmente requer a utilização de TypeScript, dado que quase toda sua documentação e recursos de aprendizado são baseados nesta linguagem. TypeScript tem seus benefícios óbvios - checagem estática de tipos pode ser muito útil para aplicações de larga escala, e pode ser um grande bônus de produtividade para desenvolvedores acostumados com Java e C#.

Entretanto, nem todo mundo quer TypeScript. Em muitos casos de menor escala, introduzir um sistema de tipagem pode resultar em mais sobrecarga do que ganho de produtividade. Nestes casos você estaria melhor seguindo com Vue, afinal utilizar Angular sem TypeScript pode ser desafiador.

Por fim, ainda que não tão profundamente integrado com TypeScript quanto Angular, Vue também oferece tipagem oficial e decorador oficial para aqueles que desejarem utilizar TypeScript com Vue. Também estamos ativamente colaborando com os times do TypeScript e do VSCode da Microsoft para melhorar a experiência TS/IDE para os usuários Vue + TS.

Tamanho e Desempenho

Em termos de desempenho, ambos os frameworks são excepcionalmente rápidos e não há dados suficientes a partir de casos do mundo real para oferecer um veredito. No entanto, se você está determinado a ver alguns números, Vue 2.0 parece estar à frente do Angular de acordo com este comparativo independente.

Versões recentes do Angular, com compilação AOT (Ahead-Of-Time) e tree-shaking, tem sido capazes de derrubar o tamanho do pacote consideravelmente. No entanto, um projeto Vue 2 cheio de recursos com Vuex + vue-router incluídos (~30kb gzip) ainda é significativamente mais leve do que uma aplicação padrão com AOT gerada pelo angular-cli (~130kb gzip).

Flexibilidade

Vue é muito menos opinativo que Angular, oferecendo suporte oficial a vários sistemas de build, sem restrições sobre como você estrutura sua aplicação. Muitos desenvolvedores gostam desta liberdade, enquanto outros preferem ter somente “O Jeito Certo” de construir qualquer aplicação.

Curva de Aprendizado

Para começar com Vue, tudo que você precisa é familiaridade com HTML e JavaScript versão ES5 (ou seja, JavaScript puro). Com estas habilidades básicas, você pode começar a construir aplicações não triviais com menos de um dia de leitura do guia.

A curva de aprendizado do Angular é muito mais acentuada. A superfície da API do framework é simplesmente enorme e o usuário precisará se familiarizar com muito mais antes de se tornar produtivo. Obviamente, a complexidade do Angular deve-se em grande parte ao seu objetivo de projetar somente aplicações grandes e complexas - mas isso torna o framework muito mais difícil para desenvolvedores menos experientes começarem.

Ember

Ember é um framework completo projetado para ser altamente opinativo. Ele fornece uma série de convenções estabelecidas e, uma vez que você fique bastante familiarizado com elas, pode se tornar muito produtivo. No entanto, também significa que a curva de aprendizado é elevada e a flexibilidade é sofrível. É uma escolha para você colocar na balança entre adotar um framework fortemente opinativo ou uma biblioteca com um conjunto de ferramentas de baixo acoplamento que funcionam em conjunto. Este último cenário lhe dá mais liberdade, mas também requer que você tome mais decisões arquitetônicas.

Com isto dito, seria provavelmente mais adequado uma comparação entre o núcleo do Vue e as camadas de templates e de modelo de objetos do Ember:

Knockout

Knockout foi um pioneiro nas áreas de MVVM e rastreamento de dependências e seu sistema de reatividade é muito semelhante ao Vue. O suporte a navegadores é muito impressionante considerando tudo o que faz, suportante retroativamente até o IE6! Vue, por outro lado, suporta apenas IE9 e superiores.

Com o tempo, porém, o desenvolvimento do Knockout começou a diminuir e está começando a dar sinais de sua idade. Por exemplo, seu sistema de componentes carece de um conjunto completo de eventos de ciclo de vida e, embora seja um caso muito comum, a interface para passagem de elementos filhos a um componente pai se mostra um pouco desajeitada em comparação com o Vue.

Nos parece que existem também diferenças filosóficas na concepção da API que, se você estiver curioso, podem ser demonstradas pela forma como cada um lida com a criação de uma lista de tarefas simples. É definitivamente um tanto subjetivo, mas muitos consideram a API do Vue menos complexo e melhor estruturada.

Polymer

Polymer é outro projeto patrocinado por Google e, de fato, também foi uma fonte de inspiração para o Vue. Componentes Vue podem ser vagamente comparados com elementos customizados Polymer, e ambos fornecem um estilo de desenvolvimento semelhante. A maior diferença é que o Polymer é construído sobre os mais recentes recursos de Web Components e, portanto, requer polyfills não triviais para funcionar (com um desempenho degradado) em navegadores que não suportam esses recursos de forma nativa. Em contraste, Vue funciona sem qualquer dependência externa ou polyfills até o IE9.

No Polymer 1.0, a equipe fez também um sistema de data-binding muito limitado, a fim de compensar o desempenho. Por exemplo, as únicas expressões suportados em templates Polymer são de negação booleana e chamadas simples de métodos. Sua implementação de propriedades computadas também não é muito flexível.

Elementos customizados do Polymer são autorados em arquivos HTML, o que limita a JavaScript/CSS puro (e a recursos suportados pelos navegadores atuais). Em comparação, single-file components Vue permitem facilmente usar ES2015+ e pré-processadores HTML/CSS.

Ao publicar em produção, Polymer recomenda o carregamento de tudo sob demanda com HTML Imports, o que assume navegadores adequados a esta especificação e suporte HTTP/2 tanto no servidor quanto no cliente. Isto pode ou não ser viável, dependendo de seu público-alvo e ambiente de implantação. Nos casos em que não é desejável, você terá que usar uma ferramenta especial chamada Vulcanizer para agrupar seus elementos Polymer. Nesta frente, Vue pode combinar sua característica de componentes assíncronos com o recurso de code-splitting do webpack para dividir facilmente a aplicação em partes, com pacotes carregados somente quando requeridos. Isso garante compatibilidade com navegadores mais antigos, mantendo excelente desempenho no carregamento.

Também é totalmente viável oferecermos integração mais profunda entre o Vue e as especificações de Web Componentes, como elementos customizados e encapsulamento de estilos com Shadow DOM - no entanto, neste momento, estamos esperando as especificações amadurecerem e se tornarem amplamente implementadas em todos os navegadores convencionais antes de nos comprometermos a fundo com isso.

Riot

Riot 2.0 fornece um modelo de desenvolvimento baseado em componentes muito similar (os quais são chamados de tag no Riot), com uma API mínima e bem concebida. Riot e Vue provavelmente compartilham muitas filosofias de design. No entanto, apesar de ser um pouco mais pesado que Riot, Vue oferece algumas vantagens significativas: