Entenda de uma vez por todas o que é React.JS, Angular 2, Aurelia e Vue.JS

Vinicius Reis
Aug 17, 2016 · 12 min read
Image for post
Image for post

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

Todas essas quatro ferramentas são baseadas em web-components, então vamos do começo.

Web Components

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

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

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

Sem ele o código ficaria assim:

Então o trabalho dele é ajudar. Eu sei isso, é muito estranho!

Afinal o que é ReactJS?

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

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

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

Legado

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

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

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

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

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

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

Recentemente saiu sua versão 1 então ele é uma opção completamente viável para projetos não pessoais.

Vue.JS

Biblioteca para criar componentes

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

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.

Image for post
Image for post
my-component.vue

Além disso, a template é escrita em html, sendo simples a sua adaptação para desenvolvedores novos.

Vue e V-DOM

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

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.

Image for post
Image for post

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?

TypeScript

Router

ES6 e/ou ES2015. O que é EcmaScript?

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

by Vinicius Reis

Meus posts

Vinicius Reis

Written by

Fiquei sem meus peões, meu cavalo, minha torre, meu bispo… E até a rainha… Mas ainda é muito cedo para um xeque-mate. Roy Mustang — Fullmetal Alchemist

by Vinicius Reis

Meus posts

Vinicius Reis

Written by

Fiquei sem meus peões, meu cavalo, minha torre, meu bispo… E até a rainha… Mas ainda é muito cedo para um xeque-mate. Roy Mustang — Fullmetal Alchemist

by Vinicius Reis

Meus posts

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store