Artigos Angular Novidades do Angular 7

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.

Componente de Drag and Drop do Angular Material CDK
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>{{filme}}</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.

Componente de Scroll do Angular Material CDK
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">{{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. =)

Confira também

O que é Angular?

O que é Angular?

Curso
Angular

Guia de Referência do Angular

Guia