AngularJS 1.x ou Angular 2? Qual utilizar? Vale a pena migrar ou aprender?
O Angular 4 é um novo (novo) Angular? Vamos passar a confusão a limpo!

Angular é o framework SPA mais utilizado do mundo, disto não temos dúvidas.
Escrevo este post para inaugurar minha série sobre Angular e para passar a limpo a grande confusão que este tema gerou com a chegada das novas versões.

AngularJS vs Angular 2, 4, etc…

It’s just “Angular”

Vamos começar esclarecendo uma das maiores confusões:

• AngularJS – Primeira versão do Angular (1.x)
• Angular – (apenas Angular) nova versão do Angular

Quando quiser se referir a versão 1.x chame de AngularJS, para a nova versão chame apenas de Angular. Vejo muitas pessoas ainda chamando de Angular 2 (eu mesmo fazia isto) mas o problema é que o versionamento do Angular está sendo feito de forma diferente e estes números estão mudando bem rápido, afinal já estamos no Angular 4.

Novo Versionamento

Assim como a maioria dos projetos sérios, o time do Angular adotou o versionamento SemVer a partir desta nova versão. É por isto que não existe um Angular 3 😉

Para levar a sério o versionamento é necessário trocar o número da versão a cada Breaking Change que surgir, ou seja, se algo for deixar de funcionar ao atualizar para a próxima versão, então esta nova versão deve ganhar um novo Major.

O que explica o salto de 2 para 4 é o pacote @angular/router que já estava na versão 3.3.x enquanto os demais estavam na 2.3.x, logo para termos uma nova versão (utilizando o SemVer de forma séria) foi necessário alinhar todos os pacotes para a versão 4.x.x

O time do Angular planeja soltar 2 major versions a cada ano, então podemos esperar um Angular 6 em 2018. Outro detalhe importante é que será garantida a retrocompatibilidade a cada salto, ou seja, a versão 5 será compatível com a 4, porém com a 6 não é garantido.

Como se prevenir?
Quando houver um break change a classe será marcada como “deprecated” e será mantida na próxima versão, no ciclo seguinte será removida e assim o desenvolvedor ao compilar a aplicação conseguirá identificar as mudanças necessárias para que o código nunca quebre durante as atualizações.

Grandes mudanças

Acredito não ser correto considerar o Angular apenas uma nova versão do AngularJS, pois é basicamente um novo framework com uma nova arquitetura, novo paradigma e praticamente incompatível com a versão 1.x.

Esta incompatibilidade na migração para o novo Angular causou muitas frustrações na comunidade técnica e entre a maioria dos desenvolvedores, inclusive durante um tempo deixou a adoção do Angular numa posição delicada, afinal quem gostaria de escolher um framework que não garante retrocompatibilidade com as versões anteriores?

Após os abalos emocionais as coisas ficaram mais claras, as mudanças foram realmente necessárias! O AngularJS apesar de muito popular e muito amado, possuía muitos problemas entre outros detalhes que desagradavam muitos desenvolvedores (inclusive eu).

Listei algumas grandes mudanças que valem muito serem comentadas:

Component-Based

O Angular é totalmente baseado em componentes. Controllers e o $scope não são mais utilizados e foram substituidos por componentes e diretivas.

Os web-components não são uma novidade, desde 2012 o W3C já possuía um rascunho sobre esta possibilidade. O Angular também não é o único framework que entrega web-components, temos também o Vue.JS, React, Aurelia e etc.

Um componente encapsula uma estrutura (html), estilo (css) e comportamento (javascript) e podem ser utilizados como Tags HTML customizadas. Veja isto como uma grande oportunidade de reaproveitamento de código e padronização de desenvolvimento.

Note que um componente Angular possui uma tag própria (selector) e define o HTML e CSS que utilizará. Como o componente é uma classe é nele que são definidos os comportamentos.

Directives

O Angular fornece uma série de diretivas e também é possível escrever diretivas customizadas.

Podemos dizer que um componente é uma diretiva que possui template (html, css).

As diretivas manipulam o DOM, possuem um papel muito importante e dão muito poder ao framework. Pretendo dedicar um post inteiro sobre funcionamento e detalhes das diretivas.

TypeScript

Foi possível notar que os códigos de exemplo estão um pouco diferentes?

É possível escrever uma aplicação em Angular utilizando TypeScript. Caso não conheça o TypeScript entenda que trata-se de um superset de JavaScript dando superpoderes a linguagem. O TypeScript foi desenvolvido pela Microsoft (o mesmo criador do C#). Leia meu post sobre esta linguagem.

Eu como desenvolvedor C# adoro o TypeScript, pois a linguagem me permite escrever código JavaScript com muitos conceitos de OOP, muito mais organizado e fácil de entender. É possível utilizar expressões lambda, generics, heranças, interfaces e etc.

No final tudo vira JavaScript de novo!
Quando uma aplicação Angular é compilada ocorre um processo chamado de “Transpile” que transforma o TypeScript para JavaScript, mas não se engane! É possível debugar um código JavaScript olhando para o source original em TypeScript!

É possível utilizar também JavaScript ou Dart para escrever aplicações em Angular, apesar de que existe uma forte preferência ao TypeScript pela grande maioria dos desenvolvedores.

Outros pontos interessantes

Além destes diferenciais apresentados existem muitos outros que eu acho muito relevantes como o mecanismo de injeção de dependência (DI) nativo, o ferramental do Angular CLI, WebPack, Reactive Forms entre outros. Pretendo detalhar cada um deles nos próximos posts desta série.

Um outro detalhe que vale muito a pena ser lembrado é a facilidade de criar aplicações híbridas para Mobile utilizando Angular e Ionic.

Vale a pena migrar para o Angular?

Eu diria que sim! O Angular é um framework completo, possui muitos componentes disponíveis para diversas necessidades e já está pronto! Além disso temos uma certa segurança que é o Google por trás disto tudo.

Migrar ou não migrar pode ser mais uma restrição financeira ou de prazo do que realmente técnica. Certamente um projeto escrito em AngularJS que está em perfeito funcionamento não precisaria ser migrado para o Angular.

Eu tomaria a decisão de migrar quando o projeto tem ainda muito a crescer e no futuro a manutenção se tornará mais vantajosa com o Angular (considere também um bom ganho de performance). A curva de aprendizado é pequena na minha opinião, eu aprendi Angular em 3 dias.

Qual devo aprender primeiro? AngularJS ou Angular?

Depende para qual finalidade deseja aprender!

Se for para atuar no mercado como desenvolvedor, obviamente existem muito mais projetos escritos em AngularJS, sendo assim, seria muito vantajoso dominar o AngularJS e a curva de aprendizado para o Angular seria bem mais tranquila.

Se for para estudos ou futuros projetos com certeza vá de Angular! Não é necessário conhecer AngularJS antes, vá direto para a novidade do momento.

E sobre o React, Vue.JS e etc?

Eu considero o React e Vue.JS bibliotecas, não chegam a ser frameworks. Não que isto seja ruim, mas é diferente! Claro que é possível escrever aplicações maravilhosas com eles, não é este o ponto.

Profissionalmente devido a demanda de mercado eu recomendaria aprender Angular e após adquirir domínio pleno, partir para estudar React, Vue.JS e etc.
É apenas a minha opinião e existem outras que diferem da minha.

Resumindo

Espero ter esclarecido a grande confusão causada pelas versões, novidades e incompatibilidades entre AngularJS e Angular, deixo também algumas referências para enriquecer mais o assunto:

Site oficial do Angular
https://angular.io

Documentação do Angular
https://angular.io/docs

---

Caso esteja interessado em conhecer mais sobre Angular, ASP.NET, DDD, Padrões de Arquitetura e boas práticas de desenvolvimento não deixe de conferir as ementas dos meus cursos:

• Cursos de Desenvolvimento e Arquitetura

Vamos continuar a troca de experiências, deixe seu comentário abaixo. Se gostou e concorda com o artigo, compartilhe com seus colegas para transmitirmos o conhecimento para o máximo de pessoas possíveis.