Confira as grandes novidades do Angular 17

A equipe do Angular não está medindo esforços para trazer grandes novidades a cada versão lançada. Foi assim nas versões 14, 15 e 16. Agora com a versão 17 não é diferente. O Angular progrediu muito em pouquíssimo tempo.

Como protocolo, uma nova versão do framework é lançada a cada 6 meses e dificilmente haviam mudanças significativas de uma versão pra outra. Isso não acontece mais, visto que as features desta nova versão vão mudar drasticamente a forma como escrevemos nossas aplicações.

Atualizando sua aplicação

Como muitos devem saber, é muito simples atualizar a versão da sua aplicação Angular utilizando o Angular CLI. Para atualizar para a versão 17 basta seguir o passo-a-passo no Guia de Atualização.

Agora que estamos com a aplicação atualizada, vamos conhecer as principais novidades apresentadas nesta versão.

Nova logo!

A equipe do Angular chamou esta versão de "Renascença do framework". Muitas pessoas acharam que seria um novo framework, talvez um Angular 3. Mas a verdade é que a versão 17 continua com grandes features, assim como as versões anteriores, focando principalmente em performance e Developer Experience.

E para concretizar esse momento de evolução, eis que temos a nova logo:

E junto com a logo, temos também uma documentação toda remodelada, com novos conteúdos, guias e apredizados interativos. Acesse em angular.dev.

Nova sintaxe de templates

Vamos iniciar com a mudança mais drástica e que foi bastante controversa na comunidade. Em setembro, foi publicado um post no Blog do Angular que anunciava um novo Control Flow para os templates do framework.

A ideia é substituir algumas diretivas como o *ngIf, *ngFor e *ngSwitch para uma nova abordagem. O motivo dessa mudança vai de encontro com o objetivo de remover por completo a biblioteca zone.js (responsável pela detecção de mudanças até então). Esse objetivo já foi iniciado com a chegada dos Signals na versão 16.

A justificativa da equipe do Angular foi de que se continuássemos usando as diretivas estruturais, seria muito complicado remover por completo o zone.js. Podemos prever que no futuro, todo o sistema de detecção de mudanças será controlado 100% de forma nativa, garantindo assim mais previsibilidade e ganhos de performance.

Resta agora acompanhar como essa grande mudança será recebida pela comunidade.

Carregamento adiado de templates

Em conjunto da nova sintaxe, o Angular apresentou também um outro recurso que será muito benéfico para garantir performance: o bloco defer.

Seu objetivo principal é carregar conteúdo lentamente (Lazy loading). Todo conteúdo que estiver dentro de um bloco defer, só será carregado com base nas condições ou eventos especificados. Isso é muito útil para otimização de desempenho, especialmente quando determinados componentes não são imediatamente necessários ou visíveis para o usuário.

De forma resumido, temos o mesmo comportamento que já conhecemos do Lazy Loading por rotas (utilizando loadChildren ou loadComponent), mas agora por blocos dentro de nossos templates.

Confira este artigo para entender todas as funcionalidades que o bloco defer disponibiliza.

Signal Based Components

Como comentado anteriormente, os Signals chegaram com muita força para manipular a reatividade das aplicações. Na versão 16 aprendemos como eles funcionam, e agora na versão 17 temos algumas evoluções.

Podemos definir que um componente pode ser atribuído como Signal Based. Para isso, passamos a propriedade signal: true dentro do decorator Component.

Ao dizer que um componente é Signal Based, podemos substituir os Decorators de @Input e @Output para uma abordagem mais voltada para os Signals. A grande vantagem é a possibilidade de manipular a reatividade de forma mais simples.

Tendo um Input como Signal, podemos substituir estratégias de verificação de mudanças como o ngOnChanges, uma vez que com Signals temos total controle das mudanças.

View Transitions

O Angular 17 adicionou suporte integrado para a API View Transitions. Com ela, é muito simples criar uma transição animada entre dois estados.

Podemos criar o setup inicial importando a função withViewTransitions.

import { provideRouter, withViewTransitions } from '@angular/router';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(
      ...
      withViewTransitions()
    ),
  ],
})

Somente com essa configuração, temos uma animação suave com fade-in e fade-out na troca de rotas da aplicação. E é claro que podemos customizar as animações utilizando CSS. Para conferir mais sobre este recurso, leia este artigo.

Conclusão

A versão 17 é sem dúvida uma das mais significativas que a equipe do Angular já lançou. Fica claro como o framework vem evoluindo e acompanhando o que há de mais moderno no mercado atual. Muitos outros recursos foram apresentados na versão, veja a lista completa no Blog oficial do Angular.