Front End

21 mai, 2018

O que há de novo no Angular 6?

Publicidade

Diante da vasta quantidade de tecnologias JavaScript disponíveis hoje no mercado, muitos torcem o nariz quando ouvem falar sobre o Angular. Esse preconceito acontece por causa de alguns erros que a Google cometeu no passado, na administração do projeto, como a quebra de compatibilidade entre as versões 1 e 2 do framework.

Isso enfureceu muitos e causou uma grande discussão. No entanto, isso já ficou no passado. O framework continua evoluindo e sendo utilizado no mundo todo (inclusive pela sua própria mantenedora, a Google!) e possui muita força, competindo com bibliotecas como o Vue.js e o React.

Para não ficar para trás nessa corrida, no começo deste mês de maio, a versão 6.0.0 do framework veio trazendo uma série de funcionalidades bacanas, além do cuidado especial com a rapidez, segurança e facilidade de uso. Vamos dar uma olhada nas novidades.

Tudo junto e sincronizado

Como parte dessa versão, a equipe de desenvolvedores está sincronizando as principais versões dos pacotes (@angular/core, @angular/common, @angular/ compiler, etc), o Angular CLI e o Angular Material + CDK. Todos eles saíram como 6.0.0 nesta atualização. Os desenvolvedores afirmam que fizeram essa alteração para “esclarecer a compatibilidade cruzada. Os lançamentos menores e de correção para esses projetos serão emitidos com base nas necessidades do projeto.”

É possível ver a lista completa de alterações nos changelogs: framework, material + cdk e cli.

Novos comandos

Com essa versão nós ganhamos dois novos comandos no CLI: ng update e ng add. O primeiro comando faz com que automaticamente todas as dependências do seu projeto Angular, incluindo a versão do RXJS e TypeScript sejam atualizadas. Se utilizada com o nome de um pacote específico, o Angular atualiza somente ele.

O outro comando novo facilita a adição de novos recursos ao seu projeto. Ao utilizá-lo, o Angular usará seu gerenciador de pacotes para baixar novas dependências e invocar um script de instalação (implementado como um esquema) que pode atualizar o projeto com alterações de configuração, adicionar dependências extras (por exemplo, polyfills) ou código de inicialização específico.

Alguns dos novos tipos que podemos experimentar, são:

  • ng add @angular/pwa: Transforma seu aplicativo em um PWA adicionando um manifest e um service worker.
  • ng add @ng-bootstrap/schematics: Adiciona o ng-bootstrap ao seu projeto.
  • ng add @angular/material: Instala o configura o Angular Material.
  • ng add @clr/angular@next: Instala e configura o Clarity da VMWare

Angular Elements

A primeira versão do Angular Elements está focada em permitir que a gente consiga inicializar os componentes Angular dentro de um aplicativo Angular (ou qualquer outro aplicativo, como por exemplo, feitos em React, Vue.js e Preact) já existentes, registrando-os como elementos personalizados. Para entender como fazer isso, os desenvolvedores deixaram um exemplo neste link.

Essa é uma atualização bem bacana para quem quer começar a trocar a tecnologia atual de seus projetos pelo Angular, já que permite fazer em passos graduais.

CLI Workspaces

O CLI agora tem suporte para espaços de trabalho (workspaces) contendo vários projetos, como aplicativos ou bibliotecas. Os projetos da CLI agora usarão o angular.json em vez de .angular-cli.json para configuração de construção e projeto.

Cada espaço de trabalho do CLI tem projetos, cada projeto tem destinos e cada destino pode ter configurações.

Veja um exemplo abaixo:

{
  "projects": {
	"my-project-name": {
  	"projectType": "application",
  	"architect": {
    	"build": {
      	"configurations": {
        	"production": {},
        	"demo": {},
        	"staging": {},
      	}
    	},
    	"serve": {},
    	"extract-i18n": {},
    	"test": {},
  	}
	},
	"my-project-name-e2e": {}
  },
}

Para saber mais sobre como configurar esse arquivo, confira este link.

RxJS v6

O Angular foi atualizado para usar a versão 6 do RxJS. Para quem ainda não conhece, o RxJS é um projeto independente focado em programação reativa que também lançou a versão 6 recentemente. O RxJS v6 traz consigo várias mudanças importantes, juntamente com um pacote de compatibilidade com versões anteriores, rxjs-compat, que manterá nossos aplicativos funcionando.

Library Support

Uma das funcionalidades mais requisitadas para o Angular CLI finalmente foi atendido: o suporte para criar e construir bibliotecas. Agora é possível fazer isso através de um único comando:

ng generate library <nome>

Este comando criará um projeto de biblioteca no espaço de trabalho da CLI e o configurará para testes e builds. Legal, né? Para saber mais sobre essa funcionalidade, dê uma conferida nesta página.

Conclusão

Essas foram somente algumas das novas funcionalidades mais relevantes da versão 6.0.0 do Angular. Não há dúvidas de que o framework continua mais forte do que nunca e com uma série de preocupações para tornar sua utilização mais simples e completa para os programadores.

Referências