Entenda de uma vez por todas o que é React.JS, Angular 2, Aurelia e Vue.JS
Depois de muita confusão e contendas resolvi escrever este artigo, para explicar de modo simples e direto quais as principais características dessas quatro ferramentas.
Disclaimer
Este não é um post de comparação, é um artigo que visa apresentar de maneira resumida o que cada uma dessas ferramentas é e quais suas principais características.
Todas essas quatro ferramentas são baseadas em web-components, então vamos do começo.
Web Components
Em primeiro lugar, web-components não é uma novidade. Mesmo antes do primeiro draft da especificação em 2012 já se falava e estudava tais possibilidades.
O objetivo do post é ser direto então vamos a explicação.
É a capacidade de criar custom tags html que encapsulam estrutura (html), estilo (css) e comportamento (JavaScript). Entenda como trechos de html reaproveitáveis.
Sem entrar em detalhes técnicos, isso é algo oficial, e padronizado pela w3c.
Mesmo sendo algo padronizado, não é uma tarefa simples. Existem ferramentas que tentam facilitar sua criação. E outras que usam o conceito, porém não como está na especificação, em alguns momentos aproveitando apenas o conceito e em outras usando técnicas possibilitadas pela especificação. É nesse contexto que entram Vue.JS, React, Angular 2, Aurelia e qualquer outra ferramenta com o propósito de criar web-components.
ReactJS
Será o primeiro a ser falado porque foi o primeiro a popularizar-se.
React é uma ferramenta somente para criar componentes. Criada pela equipe do Instagram (isso mesmo, antes do Facebook comprar) entrou para o “guarda chuva” de projetos open-source do Facebook, impulsionando mais ainda sua adoção. O grande “boom” do React é o Virtual-DOM.
Virtual-DOM
v-dom é uma técnica simples e complexa ao mesmo tempo. Simples no conceito e complexa na aplicação.
Simples porque ela é apenas uma representação em JavaScript puro (memória) do DOM “real”. Se você sabe o que é DOM, sabe que a manipulação dele não é algo “produtivo”, é extremamente lento e causa vários problemas a sua aplicação.
Então com v-dom você passa a manipular esse objeto e não o DOM de verdade. Quando o objeto v-dom é atualizado um algoritmo calcula a diferença entre o v-dom e o DOM real, alterando então pedaços de DOM.
Sempre foi de conhecimento comum que é mais produtivo você criar os elementos DOM no JavaScript, processar eles e “aplicar eles de uma vez” na Arvore DOM do navegador. React veio entre outras coisas e um delas é facilitar isso.
JSX
O herói e o vilão da história. Amado por uns, odiado por muitos (?).
Na verdade JSX é uma especificação de sintaxe para escrever JavaScript como se estivéssemos escrevendo XML
Sem ele o código ficaria assim:
Então o trabalho dele é ajudar. Eu sei isso, é muito estranho!
Afinal o que é ReactJS?
Como eu disse, coloquei ele como primeiro da lista porque é ele que é o precursor de uma nova tendência e entendendo ele você vai entender as outras ferramentas.
Por definição React é uma biblioteca para criar interfaces.
Isso é ótimo, ele vai resolver toda aquele amontoado de código com jQuery que tínhamos para manipular o DOM. Agora podemos criar coisas performáticas e reutilizáveis de verdade.
Ele vai bem em várias situações e tipos de projetos, independente do tamanho.
Agora você vai argumentar: mas como eu posso criar um projeto “grande” com React se ele é só uma biblioteca?
A resposta é: não pode. Isso mesmo, React sozinho não é capaz de te ajudar a criar um projeto SPA complexo. Para isso ele possui um ecossistema de ferramentas para te auxiliar com esse trabalho.
Micro Libs JavaScript
Novamente, isso não é uma “módinha” e sim uma realidade.
A era da internet veio para ficar. E com ela novas demandas, basicamente tudo precisa de uma versão web (ou apenas web), sites agora são sistemas complexos, robustos e poderosos.
A linguagem oficial da web é o JavaScript, se torna necessário que os projetos tenham velocidade e facilidade, tudo precisa funcionar bem e mudar rápido. Acredito que a velocidade como as coisas mudam nunca foi tão grande.
Uma piada recorrente para quem trabalha com JavaScript é: Qual será o novo framework da semana?
Com isso é muito fácil se tornar obsoleto, e se você tentar se manter atualizado de mais pode arriscar a qualidade do software. Um conceito não novo que tem aparecido em destaque nos últimos anos são os micro-serviços. Coisas pequenas e especializadas, que podem parar de funcionar ou serem trocadas com um impacto muito pequeno ou nulo na aplicação.
O mesmo vale para o JavaScript, quanto menor e mais especializado for o módulo que você esta usando ou criando, melhor. Trocar ele ou reutilizá-lo será uma tarefa simples, web-components também compartilham dessa filosofia.
É assim que o ecossistema React funciona, você compõe sua aplicação com outras bibliotecas especializadas.
As mais comuns são react-router e react-redux, com apenas essa duas você já é capaz de criar uma projeto SPA complexo. Porém, o boilerplate de tais aplicações pode não ser agradável, afinal estamos falando de algo que não segue um “padrão oficial” que pode ser feito de dezenas de maneiras diferentes.
Nesse momento o ecossistema se mostra novamente útil. A comunidade possui vários start-kits com várias implementações prontas, tornando o trabalho de criar um projeto novo algo muito simples, criando com basicamente tudo que você vai precisar. Você terá apenas o trabalho de criar seus componentes.
Liberdade e facilidade
Liberdade é algo lindo, porém muitos não estão prontos para ela. É necessário maturidade para saber o que fazer com sua liberdade, essa é a maior dificuldade que React ou similares que trazem ao desenvolvedor.
Verdade seja dita, eu chuto que 65% dos devs que usam essas ferramentas, não sabem JavaScript de verdade. Muitos estão apenas “quebrando um galho”, resolvendo demandas que simplesmente caíram no colo deles. E com isso tem muitas dificuldade em resolver problemas simples.
Outros estão acostumados de mais com muletas proporcionadas por ferramentas mais completas porém restritivas e danosas demais para seus projetos, e com sua falta de maturidade não consegue ver isso.
Para esses eu digo: Corram atrás do prejuízo, a web caminha para um momento onde não se poderá mais fingir saber JavaScript.
A parte do React ficou bem grande, porém se faz necessário para as outras libs, que bebem diretamente dessa fonte.
Angular 2
Da água para o vinho, do fogo para água. Saindo de React temos agora o NG2. Ele é o segundo da lista pelo legado que possui (um baita legado). Mas não deixe o nome dele te enganar, esta é uma ferramenta completamente diferente do seu antecessor.
Legado
Devemos muito ao Angular. Entre inovações e problemas sérios, angular é um acidente que deu certo. Projetado para ser uma lib para criar formulários acabou se tornando o framework JavaScript mais utilizado do mundo. Muito por seu mérito, muito por seu nome, ou melhor pelo nome por trás dele, Google.
Nem tudo eram flores, ele tinha (tem?) vários problemas. E não estava pronto para a revolução que o React e os web-components estavam trazendo. Por isso foi decidido que ele precisava ser refeito, do zero.
Na verdade até seu nome mudou, passou de AngularJS para Angular.
Seu código, filosofia e sua linguagem mudaram completamente. Esqueça tudo que você sabia sobre Angular.
Transição
O anúncio de uma V2 em 2014 foi recebido com muita alegria pela comunidade. Porém de lá para cá as coisas tem se tornado muito confusas.
Passaram a existir dois sites em paralelo, a primeira proposta mudou completamente do que temos hoje (e continua mudando mesmo estando no seu 5º Release Candidate)
Foi adotado a utilização do TypeScript para a escrita do código fonte e dos projetos que utilizariam o framework. Mesmo que seja possível usar NG2 sem usar o TS, no momento não há documentação suficiente que mostre como fazer isso.
Além disso possui um foco muito forte no uso de OO “Clássico”, algo que divide muitas opiniões. Enquanto pode parecer mais atraente para desenvolvedores back-end, devido ao uso do TS e OO, desenvolvedores que usam JavaScript a mais tempo condenam essa prática até mesmo a tipagem.
- Goodbye, Object Oriented Programming.
- A Simple Challenge to Classical Inheritance Fans
- Stop Bringing Type Safety To JavaScript
O depreciamento de ferramentas, sem elas nunca terem entrado em produção, um ecossistema ainda fraco, a inconsistência da documentação, exemplos e a total incompatibilidade com o que foi feito para NG1, pouco a pouco mina a confiança da comunidade.
A verdade é que não se sabe o real futuro do Angular 2, mesmo ele também sendo baseado em componentes ele se difere, e muito, das alternativas como React e Vue.js.
Plataforma fullstack
Não há muito o que dizer sobre o NG2 em seu estado atual, mas há coisas bem claras que posso listar aqui.
Se antes o AngularJS era um framework fullstack agora ele quer ser uma plataforma fullstack. Isso é algo realmente difícil de entender, porém tudo indica que ele quer operar em todas as esferas do projeto, não apenas no front-end.
Infelizmente não há muito que se possa dizer, mas é claro que ele não se vê como uma lib. Então carregará todas as “facilidades” e problemas de uma ferramenta desse porte. Mas é como eu disse, tudo ainda está muito estranho, ele não é uma lib, mas ao mesmo tempo é componetizado, sendo necessário outras libs para fazer determinadas tarefas.
Por exemplo, ele não é “naturalmente reativo” (na verdade o 2-way data-bind foi removido) e usa outras libs como RxJS para ter coisas como, por exemplo, a arquitetura flux. (não colocarei links pois basicamente todos os exemplos disponíveis não funcionam mais devido aos breaking changes na V2.0-RC5)
Isso é legal e estranho ao mesmo tempo. Legal por ver que ele consegue se adaptar e estranho por isso não ser algo oficial.
Promessas
Mesmo com um nome como a Google por trás dele, seu futuro está completamente incerto. Uns ainda apostam em sua (re)ascensão, outros já o abandonaram completamente e muitos só observam sem saber o que fazer.
Eu pessoalmente já desisti dele, trabalhei e trabalho diariamente com Angular V1, já apostando e migrando para outras ferramentas como Vue.JS, espero sinceramente que toda essa confusão seja resolvida. É loucura pensar que um projeto que conta atualmente com 64 pessoas no github possa estar completamente sem rumo.
Aurelia
Falando em confusão… Para quem não sabe o criador do Aurelia é criador do Durandal, que passou para o core-team do angular, afim de alavancar o projeto, porém depois de algum tempo ele saiu do projeto e criou o Aurelia.
Como eu disse antes, todo esse processo do NG2 está sendo bem conturbado. E sendo o Aurelia um filho bastardo do Angular ele é nossa terceira ferramenta da lista.
Framework progressivo
A proposta do Aurelia é no mínimo inovadora de tão simples: Tornar sua aplicação o mais “pura” possível com o passar do tempo.
Quem trabalha com JavaScript já esta acostumado com uma baita sopa de palavras: Babel, webpack, browserify, npm, ES6, ES7, ES-NEXT…
Tudo de mais novo e moderno no que diz respeito as especificações ECMA você encontrará no Aurelia, isso obviamente implica no uso de transpiladores de código. Porém por se tratar da especificação ECMA inevitavelmente se tornará suportada pelos navegadores, eliminando ou diminuindo a necessidade dessas ferramentas.
Ele foca nas especificações W3C, então mais uma vez ferramentas de suporte podem ser removidas gradativamente, assim no lugar de ficar defasado ele seria a ferramenta mais atualizada do mercado.
Isso tem seu preço, já que muita coisa será “nativa”, sendo mais complexo do que muitos gostariam.
Fora isso ele tem suporte ES2015, TypeScript e ESNext, e com uma doc bem completa.
Aurelia Snow
Como eu disse, ele possui fortes influências do Angular. Boas influências, o que torna ele uma escolha produtiva para as pessoas que ainda preferem o angular way sem toda essa confusão que está sendo o NG2.
Com sua documentação bem completa ele vai fazer você esquecer facilmente todos os problemas que as documentações angular possuem.
Recentemente saiu sua versão 1 então ele é uma opção completamente viável para projetos não pessoais.
Vue.JS
Vue.JS está por último por ser a sensação do verão. Brincadeiras a parte, Vue é a ferramenta que tem mostrado grande potencial, conquistando todos que a testaram. Vem criando uma comunidade bem dedicada no Brasil e no mundo.
Biblioteca para criar componentes
Vue e React possuem muitas semelhanças, a principal é o foco, ambas são para criar web-components, sendo assim Vue é leve, objetivo e componetizado.
Sendo uma lib ele não faz todo o trabalho sozinho e, assim como React, possui um ecossistema que te ajuda a construir vários tipos de projetos.
Há o vue-router e vuex, ferramentas indispensáveis na criação de projetos SPA.
Vue.js != React
Eles podem ter muitas semelhanças, porém possuem muitas diferenças também. A sintaxe de um componente React é extremamente livre e pura, podendo ser confusa para muito desenvolvedores. Isso não é algo ruim, porém essa liberdade pode gerar conflitos em equipes e elevar a curva de aprendizado dele.
Vue.JS também é extremamente livre, porém ele possui um estilo de desenvolvimento mais intuitivo e organizado. É muito fácil ler um código feito com ele, os componentes são criados com objetos de configuração, sendo fácil identificar o que são eventos, ações, propriedades…
Outra grande diferença é como o “html” do componente é feito. Vue.js pode ser escrito 100% em JavaScript puro, porém ele disponibiliza ferramentas que ampliam e melhoram o seu workflow. Ele possui um recurso chamado Single File Components.
Além disso, a template é escrita em html, sendo simples a sua adaptação para desenvolvedores novos.
Vue e V-DOM
Vue.JS está em franca evolução e adoção. A partir da versão 2 ele passa a ter suporte a Virtual-DOM assim como o React, e com isso passa a ser 2x a 4x mais rápido que a versão 1.
Para os que estão preocupados (ou traumatizados) com major versions dessas ferramentas, fique tranquilo pois Vue v2 terá uma das migrações mais suaves já relatadas, quase tudo da sintaxe de template foi mantido, e tudo está muito bem documentado e listado aqui e aqui.
E com a nova documentação que está sendo feita, tudo indica que o potencial do Vue está apenas no começo.
Vue vai manter a maneira como você escreve suas templates, além de disponibilizar mais duas maneiras de escrever elas, com JavaScript puro ou JSX. Isso mesmo, Vue tem suporte a JSX e o melhor de tudo: opcional.
Vue.JS e a comunidade
Como dito antes Vue é um concorrente recente. Apesar do projeto já existir a alguns anos, sua versão 1 saiu em Outubro de 2015, e é diferente das outras ferramentas, não possui uma grande empresa apoiando ele.
Porém, ele possui algo mais forte que uma empresa, possui uma comunidade. Em março de 2016 Evan You, criador do Vue.JS, criou uma campanha no Patreon. O objetivo era ficar fulltime no projeto. E com isso ele passou a arrecadar + de 8 mil dólares mensalmente para se manter e focar exclusivamente no projeto.
Pessoalmente acredito muito no potencial do Vue.JS, pois ele é uma ferramenta projetada para desenvolvedores por desenvolvedores.
Ele não veio para reinventar a roda, ele inova em pegar todos os bons conceitos que já possuímos e consolidá-los em uma lib de fácil acesso à todos os níveis de devs. Na comunidade vuejs-brasil costumamos dizer que as pessoas tem mais dúvidas sobre javascript do que sobre Vue.JS.
F.A.Q.
O que é Flux, Redux e Vuex?
Redux e Vuex são implementações do Flux. Flux é um modelo de arquitetura para aplicações component-based. Em aplicações desse tipo é muito fácil cair em algo chamado event-hell, esse modelo visa resolver isso.
Não possui nenhuma ligação com back-end.
TypeScript
TypeScript ou TS é um superset do javascript. Ele estende a linguagem adicionando novas funcionalidade a ela. Entre eles o suporte a tipos.
Router
Aplicações SPA precisam de uma maneira de “trocar de página” chamamos isso de rotas, e o Router é o responsável por isso. Em aplicações component-based as rotas são ligadas a componentes.
Não possui nenhuma ligação com sistemas de rotas do back-end.
ES6 e/ou ES2015. O que é EcmaScript?
EcmaScript pode ser considerado o nome oficial do Javascript. São as especificações Ecma que definem como o javascript deve funcionar em sua sintaxe e funcionalidades.
ES6 era o nome dado a nova versão do EcmaScript, porém com releases anuais o nome correto passou a ser ES2015.
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.
that’s all folks
