Angular vs. React vs. Vue: uma comparação de 2017

Decidir em um framework de JavaScript para seu aplicativo web pode ser irresistível. Angular e Reagente são muito populares nos dias de hoje, e há um upstart que tem recebido muita tração ultimamente: VueJS . Além disso, estas são apenas algumas das novas crianças no bloco .

Javascripts em 2017 – as coisas não são fáceis nos dias de hoje!

Então, como é que devemos decidir? Uma lista de pros e contras nunca dói. Vamos fazer isso no estilo do meu artigo anterior, " 9 Passos: Escolhendo uma pilha de tecnologia para sua aplicação web ".

Antes de começar – SPA ou não?

Você deve primeiro tomar uma decisão clara sobre se você precisa de uma aplicação de página única (SPA) ou se preferir fazer uma abordagem de várias páginas. Leia mais sobre isso na postagem do meu blog, " Aplicações de página única (SPA) vs. Aplicações de páginas múltiplas (MPA) " (em breve, siga-me no Twitter para obter atualizações ) .

Os iniciadores de hoje: Angular, Reagir e Vue

Primeiro, gostaria de discutir o ciclo de vida e as considerações estratégicas. Então, nos moveremos para os recursos e conceitos das três estruturas javascript. Finalmente, chegaremos a uma conclusão .

Aqui estão as questões que abordaremos hoje:

  • Quão maduras são as estruturas / bibliotecas ?
  • Os quadros provavelmente estarão por perto ?
  • Quão extensas e úteis são as comunidades correspondentes ?
  • Quão fácil é encontrar desenvolvedores para cada uma das estruturas?
  • Quais são os conceitos básicos de programação dos frameworks?
  • Quão fácil é usar os frameworks para aplicações pequenas ou grandes ?
  • Qual é a curva de aprendizagem para cada quadro?
  • Que tipo de desempenho você pode esperar dos frameworks?
  • Onde você pode olhar mais de perto sob o capô ?
  • Como você pode começar a desenvolver com o framework escolhido?

Pronto, conjunto, GO!

1. Ciclo de vida e considerações estratégicas

Reagir vs. Angular vs. Vue

1.1 Algum histórico

Angular é um framework JavaScript baseado em TypeScript. Desenvolvido e mantido pelo Google, é descrito como um " Framework Superheroic JavaScript MVW ". Angular (também "Angular 2+", "Angular 2" ou "ng2") é o sucessor reescrito, principalmente incompatível para AngularJS (também "Angular.js" ou "AngularJS 1.x"). Enquanto o AngularJS (o antigo) foi inicialmente lançado em outubro de 2010, ainda está recebendo correções de erros , etc. – o novo Angular (sans JS) foi introduzido em setembro de 2016 como a versão 2. A versão mais recente é a versão 4, como A versão 3 foi ignorada . Angular é usado pelo Google, Wix, weather.com, healthcare.gov e Forbes (de acordo com madewithangular , stackshare e libscore.com ).

Reagir é descrito como " uma biblioteca de JavaScript para criar interfaces de usuário ". Inicialmente lançado em março de 2013, o React foi desenvolvido e mantido pelo Facebook, que usa componentes React em várias páginas (não como um aplicativo de uma única página, no entanto). De acordo com este artigo de Chris Cordle , o React é usado muito mais no Facebook do que Angular está no Google. Reagir também é usado por Airbnb, Uber, Netflix, Twitter, Pinterest, Reddit, Udemy, Wix, Paypal, Imgur, Feedly, Stripe, Tumblr, Walmart e outros (de acordo com o Facebook , stackshare e libscore.com ).

O Facebook está trabalhando no lançamento da React Fiber . Isso irá mudar Reagir sob o capô – a renderização deve ser muito mais rápida como resultado – mas as coisas serão compatíveis com versões anteriores após as mudanças. O Facebook falou sobre as mudanças em sua conferência de desenvolvedores em abril de 2017, e um artigo não oficial sobre a nova arquitetura foi lançado. React Fiber foi lançado com o React 16 em setembro de 2017.

O Vue é um dos frameworks JS mais avançados em 2016. O Vue se descreve como um MVVM intuitivo, rápido e composto para a construção de interfaces interativas . Foi lançado pela primeira vez em fevereiro de 2014 pelo ex-colaborador do Google Evan You (BTW: Evan escreveu uma postagem de blog interessante sobre as atividades de marketing e números na primeira semana no passado). Tem sido bastante um sucesso, especialmente porque Vue está recebendo tanta força como um show de um homem sem o apoio de uma grande empresa. Evan atualmente tem uma equipe de dezenas de desenvolvedores principais. Em 2016, a versão 2 foi lançada. Vue é usado por Alibaba, Baidu, Expedia, Nintendo, GitLab – uma lista de projetos menores pode ser encontrada em madewithvuejs.com .

Todos os três Frameworks estão disponíveis sob a licença MIT.

Reagir com uma licença BSD3 especial até setembro de 2017. Houve muitas discussões sobre o arquivo de patentes . Se você está interessado no histórico disso, você pode ler essa discussão de questões de Github , os motivos e a história por trás do arquivo de patente (pelo engenheiro do ex-Facebook James Ide ), por que você não deveria ter medo (por Dennis Walsh ), o aviso contra o uso para startups (por Raúl Kripalani ) e uma declaração anterior do Facebook sobre este tópico: Explicando a licença do React . De qualquer forma – tudo não deve importar mais como o Facebook finalmente anunciou, que o React receberá a licença do MIT .

1.2 Desenvolvimento do núcleo

Como já observamos, Angular e React são suportados e usados ??por grandes empresas. Facebook, Instagram e Whatsapp estão usando isso para suas páginas. O Google usa isso em muitos projetos: por exemplo, a nova interface do usuário do Adwords foi implementada usando o Angular & Dart . Mais uma vez, o Vue é realizado por um grupo de indivíduos cujo trabalho é apoiado através de Patreon e outros meios de patrocínio. Você pode decidir por si mesmo se este é positivo ou negativo. Matthias Götzke acha que a pequena equipe do Vue é um benefício porque leva a um código / API mais limpo e menos engenhoso .

Vamos dar uma olhada em algumas estatísticas: listas angulares 36 pessoas na página da equipe, Vue lista 16 pessoas e Reagir não possui uma página da equipe. Em Github, Angular tem> 25.000 estrelas e 463 contribuidores, React tem> 70.000 estrelas e> 1.000 contribuidores, e Vue tem quase 60.000 estrelas e apenas 120 contribuidores. Você também pode verificar o Github Stars History para Angular, React e Vue . Mais uma vez, o Vue parece estar muito bem. De acordo com bestof.js , nos últimos três meses Angular 2 tem recebido uma média de 31 estrelas por dia, Reagir 74 estrelas e Vue.JS 107 estrelas.

A Github Stars History para Angular, React & Vue ( Fonte )

Atualização: Obrigado a Paul Henschel por apontar as tendências da npm . Eles mostram o número de downloads para os pacotes npm fornecidos e são ainda mais úteis como um olhar puro sobre as estrelas de Github:

Os números de downloads npm para os pacotes npm fornecidos nos últimos 2 anos.

1.3 Ciclo de vida do mercado

É difícil comparar Angular, React e Vue no Google Trends por causa dos vários nomes e versões. Uma maneira de se aproximar poderia ser a busca na categoria "Internet e tecnologias". Aqui está o resultado:

Ah bem. O Vue não foi criado antes de 2014 – então, algo está aqui mal. La Vue é o francês para "view", "sight" ou "opinion". Talvez seja isso. Uma comparação de "VueJS" e "Angular" ou "Reagir" também não é justa, pois o VueJS quase não tem resultados comparados aos outros.

Vamos tentar outra coisa, então. O Technology Radar da ThoughtWorks dá uma boa impressão de como as tecnologias evoluem ao longo do tempo. O Redux está na fase de adoção (a ser adotado em projetos!), E foi inestimável em vários projetos da ThoughtWorks. O Vue.js está no estágio de teste (experimente!). É descrito como uma alternativa leve e flexível ao angular com uma menor curva de aprendizado. O Angular 2 está na fase de avaliação – é usado com sucesso pelas equipes do ThoughtWork, mas ainda não é uma recomendação forte.

De acordo com a última pesquisa da Stackoverflow 2017 , o React é amado por 67% dos desenvolvedores pesquisados ??e AngularJS em 52%. "Nenhum interesse em continuar desenvolvendo" registra números maiores para AngularJS (48%) vs. Reagir (33%). O Vue não está no Top 10 em nenhum dos dois casos. Depois, há a pesquisa statejs.com que compara " frameworks finais ". Os fatos mais interessantes: React e Angular têm 100% de consciência, e Vue é desconhecida de 23% das pessoas pesquisadas. Quanto à satisfação, o React obteve 92% para "usar novamente", Vue 89% e Angular 2 apenas 65%.

E quanto a outra pesquisa de satisfação do cliente? Eric Elliott começou um em outubro de 2016 para avaliar Angular 2 e Reagir. Apenas 38% das pessoas pesquisadas usariam o Angular 2 novamente, enquanto 84% usariam o React novamente.

1.4 Suporte e migrações de longo prazo

As APIs de reação são bastante estáveis, como o Facebook declara nos seus princípios de design . Há também alguns scripts para ajudá-lo a passar da sua API atual para uma nova: verifique o reagmodel-codemod . As migrações são bastante fáceis e não há tal coisa (necessária) como uma versão de suporte a longo prazo. Nesta publicação Reddit, as pessoas observam que as atualizações nunca foram realmente um problema . A equipe do Reactor escreveu uma postagem no blog sobre o seu esquema de versão . Quando eles adicionam um aviso de desaprovação, eles o mantêm no restante da versão atual antes que o comportamento seja alterado na próxima versão principal. Não há alterações planejadas para uma nova versão principal – o v14 foi lançado em outubro de 2015, v15 foi publicado em abril de 2016 e v16 ainda não possui uma data de lançamento. A atualização não deve ser um problema, como recentemente notado por um desenvolvedor do núcleo React .

Em relação a Angular, há uma postagem de blog sobre o controle de versão e a liberação do Angular começando com a versão v2. Haverá uma atualização importante a cada seis meses, e haverá um período de desaprovação de pelo menos seis meses (dois lançamentos principais). Existem algumas APIs experimentais marcadas na documentação com períodos de desaprovação mais curtos. Ainda não há anúncio oficial, mas, de acordo com este artigo , a equipe Angular anunciou versões de suporte a longo prazo começando com Angular 4 . Aqueles serão suportados por pelo menos um ano além do próximo lançamento da versão principal. Isso significa que o Angular 4 será suportado até pelo menos setembro de 2018 com correções de erros e patches importantes. Na maioria dos casos, atualizar Angular de v2 para v4 é tão fácil como atualizar as dependências Angulares. Angular também oferece um guia com informações sobre se outras mudanças são necessárias.

O processo de atualização para o Vue 1.x para 2.0 deve ser fácil para um pequeno aplicativo – a equipe do desenvolvedor afirmou que 90% das APIs permaneceram as mesmas. Existe uma boa ferramenta de migração de migração de atualização trabalhando no console. Um desenvolvedor notou que a atualização de v1 para v2 ainda não era divertida em um grande aplicativo. Infelizmente, não existe um roteiro (público) claro sobre a próxima versão principal ou informações sobre planos para versões LTS.

Mais uma coisa: Angular é uma estrutura completa e oferece muitas coisas agrupadas. Reagir é mais flexível do que o Angular, e você provavelmente terminará usando bibliotecas mais independentes, instáveis ??e de rápido movimento – isso significa que você precisa cuidar das atualizações e migrações correspondentes por conta própria. Também pode ser prejudicial se determinados pacotes não forem mantidos ou algum outro pacote se torne o padrão de facto em algum momento.

1.5 Recursos humanos e recrutamento

Se você tem desenvolvedores de HTML internos que não querem aprender mais Javascript, é melhor escolher Angular ou Vue. Reagir implica mais Javascript (falamos sobre isso mais tarde).

Você tem designers trabalhando perto do código? O usuário "pier25" anota no Reddit que Reagir faz sentido se você estiver trabalhando para o Facebook, onde todos são desenvolvedores de super-heróis . No mundo real, você nem sempre encontrará um designer que possa modificar o JSX – como tal, trabalhar com modelos HTML será muito mais fácil.

A coisa boa sobre o quadro angular é que um novo desenvolvedor Angular 2 de outra empresa se familiarizará rapidamente com todas as convenções necessárias. Os projetos de reação são diferentes em termos de decisões arquitetônicas, e os desenvolvedores precisam se familiarizar com a configuração específica do projeto.

Angular também é bom se você tiver desenvolvedores com um fundo orientado a objetos ou quem não gosta de Javascript. Para dirigir esse ponto para casa, aqui está uma citação de Mahesh Chand :

Eu não sou desenvolvedor de JavaScript. Meu plano de fundo é a construção de sistemas corporativos de grande escala usando plataformas de software "reais". Comecei em 1997 criando aplicativos usando C, C ++, Pascal, Ada e Fortran. (…) Posso dizer claramente que o JavaScript é apenas um gibberish para mim. Sendo um MVP da Microsoft e especialista, tenho uma boa compreensão do TypeScript. Eu também não vejo o Facebook como uma empresa de desenvolvimento de software. No entanto, a Google e a Microsoft já são as maiores inovadoras de software. Eu me sinto mais confortável trabalhando com um produto que tem um forte apoio do Google e da Microsoft. Além disso (…) com meus antecedentes, eu sei que a Microsoft tem planos maiores para o TypeScript.

Bem, então … Provavelmente devo mencionar que Mahesh é Diretor Regional da Microsoft.

2. Comparação de React, Angular & Vue

2.1 Componentes

Os frameworks em questão são todos baseados em componentes. Um componente obtém uma entrada, e depois de algum comportamento / computação interna, ele retorna um modelo de UI representado (uma área de login / desconectado ou um item de lista de tarefas) como saída. Os componentes definidos devem ser fáceis de reutilizar na página da Web ou em outros componentes. Por exemplo, você poderia ter um componente de grade (consistindo em um componente de cabeçalho e vários componentes de linha) com várias propriedades (colunas, informações de cabeçalho, linhas de dados, etc.) e ser capaz de reutilizar o componente com conjuntos de dados diferentes em outra página. Aqui está um artigo abrangente sobre componentes , no caso de você querer saber mais sobre isso.

Reagir e Vue se distinguem por manipular componentes estúpidos: funções pequenas, sem estado que recebem elementos de entrada e retorno como saída.

2.2 Tipografia vs. ES6 vs. ES5

Reagir concentra-se no uso do Javascript ES6. Vue usa Javascript ES5 ou ES6.

Angular conta com TypeScript . Isso oferece mais consistência em exemplos relacionados e projetos de código aberto (exemplos de Reagentes podem ser encontrados em ES5 ou ES6). Isso também introduz conceitos como decoradores e tipos estáticos. Os tipos estáticos são úteis para ferramentas de inteligência de código, como refatoração automática, pular para definições, etc. – eles também devem reduzir a quantidade de bugs em um aplicativo. No entanto, certamente não há consenso sobre este tópico. Eric Elliott discorda em seu artigo " O segredo chocante sobre tipos estáticos ". Daniel C Wang diz que o custo da utilização de tipos estáticos não faz mal e que é bom ter tanto o desenvolvimento orientado a testes (TDD) e tipagem estática.

Você provavelmente também deve saber que você pode usar o Flow para habilitar a verificação de tipo no React . É um verificador de tipo estático desenvolvido pelo Facebook para JavaScript. O fluxo também pode ser integrado ao VueJS .

Se você estiver escrevendo seu código em TypeScript, você não está escrevendo JavaScript padrão mais. Embora esteja crescendo, o TypeScript ainda possui uma pequena base de usuários em comparação com a linguagem de JavaScript completa. Um risco pode ser que você está se movendo na direção errada, porque o TypeScript pode, embora seja improvável, também desaparecer ao longo do tempo. Além disso, o TypeScript acrescenta muita sobrecarga (aprendendo) aos projetos – você pode ler mais sobre isso na comparação Angular 2 vs Reagente de Eric Elliott .

Atualização : James Ravenscroft escreveu em um comentário para este artigo, que o TypeScript tem suporte de primeira classe para os componentes JSX podem ser verificados de forma transparente. Então, se você gosta do TypeScript e deseja usar o React, isso não deve ser um problema.

2.3 Modelos – JSX ou HTML

Reagir com as melhores práticas de longa data. Durante décadas, os desenvolvedores estavam tentando separar os modelos de UI e a lógica de Javascript embutida, mas com o JSX, estes são misturados novamente. Isso pode parecer terrível, mas você deve ouvir a conversa de Peter Hunt " Reagir: repensar as melhores práticas " (a partir de outubro de 2013). Ele ressalta que a separação de modelos e lógica é apenas uma separação de tecnologias e não preocupações. Você deve construir componentes em vez de modelos. Os componentes são reutilizáveis, composáveis ??e controláveis ??em unidade.

O JSX é um préprocessador opcional para sintaxe de tipo HTML que será compilado no Javascript mais tarde. Tem algumas peculiaridades – por exemplo, você precisa usar className em vez de classe, porque o último é um nome protegido em Javascript. O JSX é uma grande vantagem para o desenvolvimento, porque você tem tudo em um só lugar, e as verificações de conclusão de código e compilação funcionam melhor. Quando você cria um erro de digitação no JSX, o React não compila e ele imprime o número da linha onde o erro de digitação ocorreu. Angular 2 falha silenciosamente em tempo de execução (este argumento é provavelmente inválido se você usar AOT com Angular).

O JSX implica que tudo no React é o Javascript – ele é usado tanto para os modelos JSX quanto para a lógica. Cory House aponta isso em seu artigo de janeiro de 2016: " Angular 2 continua a colocar" JS "em HTML. Reagir coloca HTML em JS. ". Isso é bom, porque o Javascript é mais poderoso que o HTML.

Os modelos angulares são HTML aprimorado com linguagem angular especial (coisas como ngIf ou ngFor ). Enquanto o React requer conhecimento de JavaScript, Angular obriga você a aprender a sintaxe Angular-específica .

Características do Vue " componentes do arquivo ingle ". Isso parece um trade-off com relação à separação de preocupações – modelos, scripts e estilos estão em um arquivo, mas em três seções diferentes e ordenadas. Isso significa que você obtém destaque de sintaxe, suporte CSS e uso mais fácil de pré-processadores como o Jade ou o SCSS. Eu li em outros artigos, que o JSX é mais fácil para depuração porque o Vue não mostrará erros de sintaxe HTML ruins. Isso não é verdade porque o Vue converte o HTML para renderizar funções – então os erros são mostrados sem problemas (Graças ao Vinicius Reis para comentar e corrigir!).

Nota lateral: se você gosta da idéia do JSX e deseja usá-lo no Vue, você pode usar o babel-plugin-transform-vue-jsx .

2.4 Framework versus biblioteca

Angular é uma estrutura, em vez de uma biblioteca, pois fornece opiniões fortes sobre como sua aplicação deve ser estruturada e também possui mais funcionalidades fora da caixa. Angular é uma "solução completa" – baterias incluídas e prontas para lhe proporcionar um bom começo. Você não precisa analisar bibliotecas, soluções de roteamento ou similares – você pode começar a trabalhar.

React e Vue, por outro lado, são universalmente flexíveis. Suas bibliotecas podem ser emparelhadas com todos os tipos de pacotes (há bastante para Reagir npm , mas o Vue tem menos pacotes porque ainda é bastante jovem). Com o React, você pode até trocar a biblioteca por alternativas compatíveis com API como Inferno . No entanto, com grande flexibilidade vem grande responsabilidade – não há regras e orientação limitada com o React. Todo projeto requer uma decisão sobre sua arquitetura, e as coisas podem dar errado com mais facilidade.

Angular, por outro lado, vem com um ninho confuso de ferramentas de construção, boilerplate, linters e time-sinks para lidar. Isso também é verdade para Reagir se kits de iniciação ou placas de caldeira forem usadas. Eles são naturalmente muito úteis, mas Reagir funciona fora da caixa, e essa é provavelmente a maneira como você deve aprender. Às vezes, a variedade de ferramentas necessárias para um trabalho em um ambiente Javascript é referida como "cansaço Javascript". Há um artigo sobre isso por Eric Clemmons , que tem isto para dizer:

Ainda há um monte de ferramentas instaladas, você não está acostumado, ao começar com a estrutura. Estes são gerados, mas provavelmente muitos desenvolvedores não entendem, o que está acontecendo sob o capô – ou leva muito tempo para eles fazer.

Vue parece ser o mais limpo e leve dos três quadros. GitLab tem uma postagem no blog sobre sua decisão sobre o Vue.js (outubro de 2016):

O Vue.js vem com o equilíbrio perfeito do que fará para você e o que você precisa fazer você mesmo. (…) O Vue.js está sempre ao alcance, uma rede de segurança robusta e flexível pronta para ajudá-lo a manter sua programação eficiente e seu sofrimento infligido por DOM a um mínimo.

Eles gostam da simplicidade e facilidade de uso – o código fonte é muito legível e nenhuma documentação ou bibliotecas externas são necessárias. Tudo é muito direto. Vue.js "não faz grandes suposições sobre muito de qualquer coisa". Há também um podcast sobre a decisão do GitLab .

Outro post do blog sobre uma mudança para Vue vem de Pixeljets. Reagir " foi um grande passo em frente para o mundo JS em termos de consciência estatal , e mostrou muitas pessoas a programação funcional real de uma maneira boa e prática ". Um dos grandes contras do React vs. Vue é o problema de dividir componentes em componentes menores por causa das restrições do JSX. Aqui está uma citação do artigo:

Para mim e minha equipe, a legibilidade do código é importante, mas ainda é muito importante que escrever código seja divertido. Não é divertido criar 6 componentes quando você está implementando um widget de calculadora muito simples. Em muitos casos, também é ruim em termos de manutenção, modificações ou aplicação de revisão visual em algum widget, porque você precisa pular vários arquivos / funções e verificar cada pequeno fragmento de HTML separadamente. Mais uma vez, não estou sugerindo escrever monólitos – sugiro usar componentes em vez de microcomponentes para o desenvolvimento do dia-a-dia.

Há discussões interessantes sobre a publicação do blog sobre as notícias do Hacker e Reddit – há argumentos de dissidentes e adeptos do Vue semelhantes.

2.5 Gestão de estado e ligação de dados

Criar UIs é difícil, porque existem estados em todos os lugares – a mudança de dados ao longo do tempo implica complexidade. Os fluxos de trabalho de estado definidos são de grande ajuda quando os aplicativos crescem e se tornam mais complexos. Para aplicações limitadas, isso provavelmente é exagerado e algo como Vanilla JS seria suficiente.

Como funciona? Os componentes descrevem a IU em qualquer momento. Quando os dados mudam, o framework re-renderiza todo o componente de interface do usuário – os dados exibidos estão sempre atualizados. Podemos chamar esse conceito "UI como função".

Reagir muitas vezes funciona em conjunto com o Redux. Redux se descreve em três princípios fundamentais :

  • Única fonte de verdade
  • O estado é somente leitura
  • As mudanças são feitas com funções puras

Em outras palavras: o status do aplicativo completo é armazenado em uma árvore de objetos dentro de uma única loja. Isso ajuda a depurar o aplicativo e algumas funcionalidades são mais fáceis de implementar. O estado é somente leitura e só pode ser alterado através de ações para evitar condições de corrida (também ajuda na depuração). Os redutores são escritos para especificar como os estados podem ser transformados por ações.

A maioria dos tutoriais e das placas de controle já foram integradas pela Redux, mas você pode usar Reagir sem ela (e talvez não seja necessário o Redux no seu projeto). Redux introduz complexidade e restrições bastante fortes em seu código. Se você está aprendendo Reagir, você deve pensar em aprender a reagir antes de se dirigir para o Redux. Você definitivamente deve ler " Você pode não precisar do Redux " por Dan Abramov .

Alguns desenvolvedores sugerem o uso do Mobx em vez do Redux . Você pode pensar nisso como um "Redux automático", o que torna as coisas muito mais fáceis de usar e entender desde o início. Se quiser dar uma olhada, você deve começar com a introdução . Você também pode ler esta comparação útil entre o Redux & MobX by Robin. O mesmo autor também oferece informações sobre como mudar de Redux para MobX . Esta lista é útil se você deseja verificar outras bibliotecas do Flux. E se você vier de um mundo MVC, você quer ler o artigo " Pensando no Redux (quando tudo o que você conhece é MVC) " por Mikhail Levkovsky .

Vue pode fazer uso do Redux – mas oferece Vuex como sua própria solução.

Uma grande diferença entre React e Angular é uma via versus ligação bidirecional . A ligação bidirecional de Angular muda o estado do modelo quando o elemento UI (por exemplo, uma entrada do usuário) é atualizado. Reagir apenas vai de um jeito: ele atualiza o modelo primeiro e depois torna o elemento de UI. O método Angular é mais limpo no código e é mais fácil para o desenvolvedor implementar. A maneira de reagir resulta em uma melhor visão geral dos dados, porque os dados só flutuam em uma direção (isso facilita a depuração).

Ambos os conceitos têm seus prós e contras. Você precisa entender os conceitos e determinar se isso influencia sua decisão de estrutura. O artigo " Ligação de dados de duas vias: Angular 2 e Reagir " e esta pergunta de Stackoverflow oferecem uma boa explicação. Aqui você pode encontrar alguns exemplos de código interativo (3 anos, somente para Angular 1 e Reagente). Por último, mas não menos importante, o Vue oferece suporte tanto de ligação única como de ligação bidirecional (one-way por padrão).

Há um longo artigo sobre diferentes tipos de estados e o gerenciamento do estado em aplicações Angulares (por Victor Savkin ) se você deseja ler mais.

2.6 Outros conceitos de programação

Angular inclui injeção de dependência, um padrão no qual um objeto fornece as dependências (um serviço) a outro objeto (um cliente). Isso leva a mais flexibilidade e código mais limpo. O artigo " Compreensão da injeção de dependência " explica este conceito com mais detalhes.

O modelo-view-controller pattern (MVC) divide um projeto em três componentes: modelo, exibição e controlador. Angular como MVC-framework possui MVC fora da caixa. Reagir apenas tem o V – você precisa resolver o M e C por conta própria.

2.7 Flexibilidade e downsizing para microservices

Você pode trabalhar com React ou Vue simplesmente adicionando a biblioteca de Javascript ao código-fonte. Isso não é possível com o Angular devido ao uso do TypeScript.

Agora estamos nos movendo mais para microservices e microapps. Reagir e o Vue oferecem mais controle para dimensionar um aplicativo, selecionando apenas as coisas que são realmente necessárias. Eles oferecem mais flexibilidade para mudar de um SPA para microservices usando partes de uma aplicação anterior. Trabalho angular melhor para SPA, pois provavelmente é muito inchado para ser usado para microservices.

Como observa Cory House :

O JavaScript se move rápido e o Reagente permite que você troque pequenas peças de sua aplicação para melhores bibliotecas em vez de esperar e que sua estrutura inovará. A filosofia das ferramentas pequenas, composáveis ??e de propósito único nunca sai de moda.

Algumas pessoas usam React para sites não-SPA também (por exemplo, para formulários complexos ou assistentes). Mesmo o Facebook usa Reagir – não para a página principal, mas sim para páginas e recursos específicos.

2.8 Tamanho e desempenho

Há um flip-side para toda a funcionalidade: o quadro angular é bastante inchado. O tamanho do arquivo gzip é de 143k, em comparação com 23K para Vue e 43k para React.

Reagir e Vue têm um DOM virtual, que é suposto melhorar o desempenho. Se você está interessado nisso, você pode ler sobre as diferenças entre o DOM virtual e DOM , bem como os benefícios reais do Virtual DOM em react.js . Além disso, um dos autores do Virtual-DOM responde uma questão relacionada ao desempenho no Stackoverflow.

Para verificar o desempenho, eu verifiquei o excelente js-framework-benchmark . Você pode baixá-lo e executá-lo, ou veja a tabela de resultados interativa . Antes de verificar os resultados, você deve saber, que as estruturas estão traçando benchmarks – tal verificação de desempenho não deve ser usada para tomar decisões.

O desempenho da alocação de memória Angular, React e Vue ( Origem ) em MB ( Origem )

Para resumir: o Vue tem um ótimo desempenho e a alocação de memória mais profunda, mas todas essas estruturas são realmente muito próximas umas das outras quando comparadas a estruturas particularmente lentas ou rápidas (como o Inferno ). Mais uma vez: os benchmarks de desempenho só devem ser considerados como nota lateral, não como um veredicto.

2.9 Teste

O Facebook usa Jest para testar seu código de Reacção. Aqui está uma comparação entre Jest e Mocha – e há um artigo sobre como usar Enzyme with Mocha . Enzyme é um utilitário de teste de JavaScript usado no Airbnb (em conjunto com Jest, Karma e outros corredores de teste). Se você quiser ler mais, há alguns artigos mais antigos no teste em React ( aqui e aqui ).

Depois, há Jasmine como um quadro de teste em Angular 2. Há um artigo de Eric Elliott que diz que Jasmine " resulta em milhões de maneiras de escrever testes e afirmações, precisando ler cuidadosamente cada um para entender o que está fazendo". O resultado também é muito inchado e laborioso para ler. Existem alguns artigos informativos sobre a integração do Angular 2 com Karma e Mocha . Aqui está um vídeo antigo (a partir de 2015) sobre as estratégias de teste com Angular 2 .

Vue não tem orientação de teste, mas Evan escreveu em sua pré-visualização de 2017 que a equipe planeja trabalhar nisso . Eles recomendam o uso de Karma . O Vue trabalha junto com o Jest , e também há avoriaz como um utilitário de teste .

2.10 Aplicações universais e nativas

Aplicativos universais estão introduzindo aplicativos na web, na área de trabalho e no mundo dos aplicativos nativos, também.

Reagindo e Angular, ambos apoiam o desenvolvimento nativo. Angular possui NativeScript (suportado pela Telerik) para aplicativos nativos e Ionic Framework para aplicativos híbridos. Com o React, você pode verificar o reagente-nativo-renderizador para criar aplicativos iOS e Android do cross-plattform, ou reativo-nativo para aplicativos nativos. Muitos aplicativos (incluindo o Facebook, verificam o Showcase para mais) são criados com recurso reativo nativo.

Os frameworks de Javascript renderizam páginas no cliente. Isso é ruim para desempenho percebido, experiência geral do usuário e SEO. O pré-renderização do lado do servidor é uma vantagem. Todos os três frameworks têm bibliotecas para encontrar ajuda com isso. Para Reagir há next.js , Vue tem nuxt.js , e Angular tem … Angular Universal .

2.11 Curva de aprendizado

Existe definitivamente uma curva de aprendizado íngreme para Angular. Possui documentação abrangente, mas às vezes você pode se sentir frustrado com isso porque as coisas são mais difíceis do que soam . Mesmo quando você tem uma compreensão profunda do Javascript, você precisa aprender o que está acontecendo sob o capô da estrutura. A instalação é mágica no início, e oferece muitos pacotes e códigos incluídos. Isso pode ser visto como um negativo porque existe um ecossistema grande e pré-existente que você precisa aprender ao longo do tempo. Por outro lado, pode ser bom em uma dada situação porque muitas decisões já foram feitas. Com o React, você provavelmente precisará tomar muitas decisões imponentes em relação a bibliotecas de terceiros. Existem 16 pacotes de fluxo diferentes para gerenciamento de estado para escolher em Reagir sozinho.

Vue é muito fácil de aprender. As empresas mudam para o Vue porque parece ser muito mais fácil para os desenvolvedores júnior. Aqui você pode ler sobre alguém descrevendo o movimento de sua equipe de Angular para Vue . De acordo com outro usuário , o aplicativo Reagir em sua empresa era tão complexo que um novo desenvolvedor não conseguia acompanhar o código. Com Vue, o fosso entre desenvolvedores júnior e senior encolhe, e eles podem colaborar mais facilmente e com menos erros, problemas e tempo para se desenvolver.

Algumas pessoas afirmam que as coisas que fizeram no React teriam sido melhor escritas no Vue. Se você é um desenvolvedor Javascript inexperente – ou se você trabalhou principalmente com o jQuery na última década – você deveria pensar em usar o Vue. A mudança de paradigma é mais pronunciada quando se move para Reagir. O Vue parece mais com Javascript simples, enquanto também apresenta algumas idéias novas: componentes, um modelo orientado a eventos e fluxo de dados unidirecional. Ele também tem uma pequena pegada.

Enquanto isso, Angular e React têm sua própria maneira de fazer as coisas. Eles podem entrar no seu caminho, porque você precisa ajustar suas práticas para fazer as coisas funcionarem . Isso pode ser prejudicial porque você é menos flexível, e há uma curva de aprendizado mais íngreme. Também pode ser um benefício porque você é forçado a aprender os conceitos corretos enquanto aprende a tecnologia. Com o Vue, você pode fazer as coisas da maneira antiga-definida. Isso pode ser mais fácil no início, mas pode se tornar um problema a longo prazo se as coisas não forem feitas corretamente.

Quando se trata de depuração, é uma vantagem que React e Vue têm menos magia. A busca por erros é mais fácil, porque há menos lugares para procurar e os traços de pilha têm melhores distinções entre seu próprio código e o das bibliotecas. As pessoas que trabalham com o React informam que nunca precisam ler o código-fonte da biblioteca. No entanto, ao depurar o seu aplicativo Angular, você geralmente precisa depurar os internos do Angular para entender o modelo subjacente. No lado positivo, as mensagens de erro devem ser mais claras e informativas, começando com Angular 4.

2.12 Angular, Reagir e Vue sob o capô

Você quer verificar o código-fonte você mesmo? Você quer ver como as coisas se sentem ?

Você provavelmente deseja verificar os repositórios do Github primeiro: Reagir ( github.com/facebook/react ) , Angular ( github.com/angular/angular ) e Vue ( github.com/vuejs/vue )

Como a sintaxe parece? O ValueCoders compara a sintaxe para Angular, React e Vue .

Também é bom ver as coisas em produção – em conjunto com o código-fonte subjacente. TodoMVC lista dúzias do mesmo aplicativo Todo, escrito com frameworks Javascript diferentes – você pode comparar as soluções Angular , React e Vue . O RealWorld cria uma aplicação do mundo real (um Medium-clone), e eles têm soluções para Angular (4+) e Reagir (com Redux) pronto. Vue é um trabalho em progresso.

Há também alguns aplicativos do mundo real que você poderia ver. Aqui estão as soluções para React:

Existem alguns aplicativos para Angular:

Existem também soluções para o Vue:

Conclusão

Decidir sobre um quadro agora

Reagir, Angular e Vue são bastante legais, e nenhum deles fica claramente acima dos outros. Confie em seu intuito. Este último tipo de cinismo divertido pode ajudar sua decisão:

O pequeno segredo sujo é que a maioria dos "desenvolvimento moderno de JavaScript" não tem nada a ver com realmente a criação de sites – é construir pacotes que podem ser usados ??por pessoas que criam bibliotecas que podem ser usadas por pessoas que criam estruturas que as pessoas que escrevem tutoriais e ensinam cursos pode ensinar. Não tenho certeza de que alguém esteja construindo algo para que os usuários reais interajam.

Isso é um exagero, é claro, mas provavelmente há um grão de verdade. Sim, um monte de zumbido no ecossistema Javascript. Você provavelmente encontrará muitas outras alternativas atraentes durante sua busca – tente não ser cegado pelo mais novo e mais brilhante quadro.

O que devo escolher?

Se você trabalha no Google: Angular

Se você gosta de TypeScript: Angular ( ou Reagir )

Se você gosta de programação orientada a objetos (OOP): Angular

Se você precisar de orientação, estrutura e mão amiga: Angular

Se você trabalha no Facebook: Reagir

Se você gosta de flexibilidade: Reagir

Se você ama os grandes ecossistemas: Reagir

Se você gosta de escolher entre dezenas de pacotes: Reagir

Se você ama a JS & a abordagem "everything-is-Javascript": Reagir

Se você gosta de um código realmente limpo: Vue

Se você quiser a curva de aprendizado mais fácil: Vue

Se você quer a estrutura mais leve: Vue

Se você deseja separação de preocupações em um arquivo: Vue

Se você está trabalhando sozinho ou tem uma equipe pequena: Vue (ou Reagir)

Se o seu aplicativo tende a ficar realmente grande: Angular (ou Reagir)

Se você quiser criar um aplicativo com recurso reativo-nativo: Reagir

Se você quiser ter muitos desenvolvedores no pool: um ngular ou Reagir

Se você trabalha com designers e precisa de arquivos HTML limpos: Angular ou Vue

Se você gosta do Vue, mas tem medo do ecossistema limitado: Reagir

Se você não pode decidir, primeiro aprenda Reagir , depois Vue e depois Angular .

Então, você tomou sua decisão?

Yeeesss, você fez isso!

Bem feito! Leia sobre como começar a desenvolver em Angular, React ou Vue (em breve, siga-me no Twitter para obter atualizações).

Mais recursos

Obrigado pelo seu interesse. Eu esqueci algo importante? Você tem uma opinião diferente? Estou sempre feliz em receber comentários.

Siga-me no Twitter para obter atualizações e mais: @jensneuhaus – ?

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *