Novidades do Angular 7: Melhor Performance e Drag and Drop

A nova vers�o do Angular trouxe melhorias de desempenho e mudanças interessantes no Angular CLI, a sua principal interface de linha de comando. Neste artigo falaremos sobre as principais novidades do Angular 7.

Melhor performance

Uma aplicaç�o SPA consiste de alguns poucos arquivos, ap�s ser constru�da para publicaç�o. Nesses arquivos � concentrado/compactado todo o c�digo necess�rio para fazer o cliente funcionar. Assim, no primeiro acesso precisamos aguardar que tudo seja baixado de uma �nica vez para que a aplicaç�o possa ser utilizada. Isso pode ser um problema quando lembramos que grande parte do tr�fego na internet vem de dispositivos m�veis que, em geral, costumam acessar a internet em baixa velocidade de conex�o.

Para mantermos o tamanho da nossa aplicaç�o sobre controle, o Angular conta com a funç�o de Bundle Budgets. Isto �, quando constru�mos nossa aplicaç�o, recebemos alertas quando o seu tamanho excede um limite pr�-determinado. Este recurso j� existia no Angular e agora se tornou padr�o. Na construç�o de uma aplicaç�o que ultrapasse 2 MB receberemos um alerta e em aplicaç�es que ultrapassem 5 MB seremos impedidos de prosseguir com a construç�o. � claro que esses valores s�o personaliz�veis, e podemos modific�-los no arquivo angular.json do nosso projeto:

"budgets": [
 {
   "type": "initial",
   "maximumWarning": "2mb",
   "maximumError": "5mb"
 }
]

maximumWarning: Tamanho da aplicaç�o que, se excedido, disparar� um alerta.
maximumError: Tamanho da aplicaç�o que, se excedido, causar� um erro e interromper� a construç�o.

Novidades para templates

Embora pouca coisa tenha mudado no Angular Material, a biblioteca de componentes que implementa o Material Design, alguns novos elementos interessantes foram adicionados ao CDK da biblioteca.

O CDK, ou kit de componente, possui diversos componentes que oferecem funcionalidades para nossas aplicaç�es sem a definiç�o de estilos, como textareas que s�o redimensionados automaticamente e ferramentas de acessibilidade para o uso de teclas de atalho e mais.

Com o Angular 7 foram lançados outros dois componentes: Drag and Drop e Virtual Scrolling, que veremos com mais detalhes a seguir.

Drag and Drop

O novo componente de Drag and Drop facilita o desenvolvimento de funcionalidades �arrasta e solta�. Com ele podemos criar desde elementos que podem ser arrastados livremente a listas verticais e horizontais reorden�veis, como vemos na Figura 1.

Figura 1. Componente de Drag and Drop do Angular Material CDK

E a implementaç�o � t�o simples quanto qualquer outro componente:

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let filme of filmes" cdkDrag>{}</div>
</div>

Linha 1: Com o atributo (cdkDropListDropped) podemos executar o m�todo drop sempre que um item da lista for arrastado para outra posiç�o.
Linha 2: Identificamos os atributos como �arrast�veis� com o atributo cdkDrag.

Dessa forma, na classe drop podemos capturar a posiç�o do item antes e depois de ter sido arrastado:

drop(event: CdkDragDrop<string[]>) {
  console.log(event.previousIndex)
  console.log(event.currentIndex)
}

Virtual Scrolling

Com o componente de Virtual Scrolling podemos construir grandes listas rol�veis sem nenhuma perda de desempenho. Para isso, o componente renderiza apenas os elementos que est�o na parte vis�vel da lista e destr�i aqueles que j� sa�ram da parte vis�vel, como vemos na Figura 2.

Figura 2. Componente de Scroll do Angular Material CDK

Podemos utilizar o componente diretamente no template das nossas p�ginas:

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item">{}</div>
</cdk-virtual-scroll-viewport>

Angular CLI

A ferramenta de linha de comando tamb�m mudou. Agora, sempre que criamos um novo projeto, o CLI pergunta se desejamos adicionar o m�dulo de rotas e se desejamos utilizar algum processador CSS, como SASS ou LESS. Veja a seguir o processo de criaç�o de uma aplicaç�o.

1. Instalando o Angular CLI

Para instalar o Angular CLI utilizamos o NPM, o gerenciador de pacotes de Node.js:

npm install -g @angular/cli

2. Criando um projeto Angular utilizando o CLI

Ap�s a instalaç�o j� poderemos utilizar o CLI para criar nosso projeto:

ng new meu-projeto

3. Criando o m�dulo de rotas automaticamente

O Angular CLI perguntar� se desejamos utilizar o m�dulo de rotas do Angular. Se dissermos que sim, o CLI far� toda a configuraç�o necess�ria e n�o precisaremos ter esse trabalho:

? Would you like to add Angular routing? (y/N)

4. Escolhendo o pr�-processador CSS

Na segunda pergunta escolhemos o processador de CSS que queremos utilizar ou se desejamos utilizar CSS puro no nosso projeto. Para responder utilize as setas do teclado e aperte enter:

? Which stylesheet format would you like to use?
> CSS
  SCSS   [ http://sass-lang.com   ]
  SASS   [ http://sass-lang.com   ]
  LESS   [ http://lesscss.org     ]
  Stylus [ http://stylus-lang.com ]

O Angular CLI ficar� respons�vel por criar a estrutura inicial da aplicaç�o.

Depend�ncias

Algumas depend�ncias utilizadas pelo Angular tamb�m foram atualizadas:

TypeScript: A vers�o do TypeScript, o Superset do JavaScript utilizado pelo Angular foi atualizada para a vers�o 3.1, que conta apenas com algumas pequenas mudanças em relaç�o a declaraç�o de propriedades em funç�es.
RxJS: O RxJS, a biblioteca que provem ao Angular, dentre outras coisas, Observables, foi atualizada para a vers�o 6.3. Essa nova vers�o implementou apenas correç�es.
NodeJS: Agora � poss�vel utilizar o Angular e o Angular CLI na vers�o 10 do Node.js, embora ainda seja totalmente compat�vel com a vers�o 8.

Curtiu este artigo e quer ler mais sobre as novidades do mundo da tecnologia? Deixe um joinha! Se voc� j� utilizou o Angular, deixe nos coment�rios como foi sua experi�ncia. =)

Novidades do Angular 7

E não é que saiu uma nova versão do Angular?! O Angular 7 está aqui com melhor performance e algumas novidades, tais como o componente de Drag and Drop, Virtual Scrolling e mudanças no Angular CLI.