Skip to main content

Novidades 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.




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.




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 CLIA 

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.

Quer entender mais sobre Desenvolvimento web? Aqui estão algumas indicações de livros:



Comments

Popular posts from this blog

Criando um filtro de busca customizável com JavaScript funcional

Tutoriais utilizando bibliotecas e frameworks para state management se tornaram comuns. Apesar disso, já que muita gente usa muitos frameworks diferentes, muitas vezes precisamos falar sobre a plataforma que permite isso tudo: a odiadíssima ferramenta que é o JavaScript, na sua forma mais pura — conforme descrito com documentações excelentes como a da MDN . Esse tutorial também pode ser útil para quem está iniciando em JavaScript e desenvolvimento em geral já começar com alguma ideia do que é programação funcional. O termo está se tornando popular e quem não subir nesse barco pode ficar para trás em pouco tempo. Não vamos adentrar nos detalhes do que é programação funcional neste artigo — isso é assunto para outras horas de conversa. Aqui, ficaremos no rápido e simples: alcançar nosso objetivo, evitando mutações dos dados e estado global. Iniciando o projeto Pelo bem da simplicidade, vamos manter tudo num único arquivo, que vai ter essa cara: <!DOCTYPE HTML> ...

Vue.js, React.js ou angular. O que escolher?

As estruturas JavaScript estão se desenvolvendo em um ritmo extremamente rápido, o que significa que hoje temos versões atualizadas frequentemente do Angular, ReactJS e de outro player neste mercado - Vue.js. Analisando o número de posições abertas em todo o mundo que exigem um conhecimento específico de um determinado framework. Como fonte, Indeed.com  chegando a seguinte distribuição de acordo com mais de 60.000 ofertas de emprego. Levando em conta os dados a seguir, será apresentado as principais vantagens e desvantagens de cada framework frontend para ajudar os profissionais de tecnologia ou engenheiros a escolher o melhor para suas necessidades de desenvolvimento. Prós e contras do angular Angular é uma estrutura de MVVM super-heróica de JavaScript, fundada em 2009, que é incrível para a criação de aplicativos da Web altamente interativos. Benefícios do Angular  Novos recursos como RXJS aprimorado, compilação mais rápida (em menos de 3 segundos),...

Como filtrar consultas no firebase

Para filtrar dados, combine um dos métodos de limite ou de intervalo com um método de ordenação ao criar uma consulta. Método Uso limitToFirst() Definir o número máximo de itens para retornar a partir do início da lista ordenada de resultados. limitToLast() Definir o número máximo de itens para retornar a partir do fim da lista ordenada de resultados. startAt() Retornar itens maiores ou iguais à chave ou ao valor especificado, dependendo do método de ordenação escolhido. endAt() Retornar itens menores ou iguais à chave ou ao valor especificado, dependendo do método de ordenação escolhido. equalTo() Retornar itens iguais à chave ou ao valor especificado, dependendo do método de ordenação escolhido. Ao contrário dos métodos de ordenação, você pode combinar várias funções de limite ou   de   intervalo. Por exemplo, combine os métodos startAt() e endAt() para limitar os resultados a um intervalo especificado de valores. Mesmo quando há apenas uma correspond...