Novidades do Angular 7: Melhor Performance e Drag and Drop
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.
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.
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:
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.
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.
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:
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:
console.log(event.previousIndex)
console.log(event.currentIndex)
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:
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:
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:
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:
O Angular CLI ficará responsável por criar a estrutura inicial da aplicação.
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. =)