Novidades do Angular 13
Olá caros Padawans! A rotina não tem me permitido escrever muito, mas ainda estou vivo, firme e forte (: Vamos falar do Angular e suas novidades?
Tópicos das novidades
- Melhorias no motor de visualização
- Alterações feitas no formato do pacote APF
- Melhorias na API interna do Angular
- Adeus ao IE11
- Possibilidade de habilitar cache de compilação persistente
- Suporte a versões mais atuais de bibliotecas importantes
- Melhorias nos testes unitários
- Melhorias de acessibilidade
- Melhorias para fontes embutidas
- Diversas contribuições da comunidade
Resumo mais detalhado das novidades
Melhorias no motor de visualização — Na versão 12 do Angular foram realizadas algumas alterações importantes, a principal delas foi a respeito do pipeline de renderização e compilação, agora padrão do Angular, o Ivy. Você pode ler mais a respeito dessas atualizações na postagem oficial do Angular 12 aqui no Medium.
Resumidamente, o Ivy permite muitas melhorias de desempenho para nossas aplicações feitas em Angular. Por exemplo, o View Engine não estará mais disponível na versão 13 do Angular. Isso reduz por exemplo a necessidade de dependência do compilador ngcc, reduzindo consequentemente o tempo de compilação, pois alguns metadados e arquivos de resumo não serão mais necessários.
Alterações feitas no formato do pacote APF — Já que a View Engine não faz mais parte da versão, alguns metadados da View Engine também saíram da APF (Angular package format). Foram realizadas modernizações com ES2020 e foi removido a exigência de usar o ngcc. Assim quem desenvolve bibliotecas receberá de brinde um pacote melhor e mais rápido de ser executado. Agora também há suporte ao Node Package Exports.
Melhorias na API interna do Angular — Também graças ao Ivy (viu como é importante?) a criação de componentes dinâmicos ficou bem mais enxuta. A necessidade de usar o ComponentFactoryResolver foi removida. O resultado é que antes um código que era assim:
@Directive({ … })
export class MyDirective {
constructor(private viewContainerRef: ViewContainerRef,
private componentFactoryResolver:
ComponentFactoryResolver) {}
createMyComponent() {
const componentFactory = this.componentFactoryResolver.
resolveComponentFactory(MyComponent);
this.viewContainerRef.createComponent(componentFactory);
}
}Passa a ser dessa forma:
@Directive({ … })export class MyDirective {
constructor(private viewContainerRef: ViewContainerRef) {} createMyComponent() {
this.viewContainerRef.createComponent(MyComponent);
}
}
Bem melhor não é?
Adeus ao IE11
É isso mesmo, possibilidade de modernização, usar APIs nativas mais eficientes, variáveis do CSS, e um monte de polyfills desnecessárias removidas. Só alegria aqui.
Possibilidade de habilitar cache de compilação persistente — Para habilitar esse recurso no seu Angular CLI, você precisa apenas adicionar isso no seu arquivo angular.json:
"cli": {
"cache": {
"enabled": true,
"path": ".cache",
"environment": "all"
}
}De acordo com a postagem oficial do Angular a respeito das novidades do Angular 13, isso pode melhorar em até 68% a velocidade de compilação. Incrível não?
Suporte a versões mais atuais de bibliotecas importantes — Agora o padrão é usar o RxJS 7.4. Se você criar um projeto do zero essa versão será já a utilizada. Caso você esteja dando um upgrade em sua aplicação já existente, precisará fazer isso manualmente.
O TypeScript 4.4 ganhou suporte definitivamente.
Melhorias nos testes unitários — Para reduzir o gasto de memória dentre outros probleminhas, o DOM agora será limpo a cada ciclo de teste. Você pode habilitar isso por exemplo dessa forma:
beforeEach(() => {
TestBed.resetTestEnvironment();
TestBed.initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting(), {
teardown: { destroyAfterEach: true }
}
);
});Mas você também pode inserir a opção “teardown: { destroyAfterEach: true }” diretamente no “configuringTestingModule” também.
Melhorias de acessibilidade — Se você utiliza Angular Material, vai gostar de saber que a equipe do Angular trabalhou muito na melhoria de vários componentes para você! Você pode ver exemplos no artigo oficial do Angular 13.
Melhorias para fontes embutidas — Agora há, suporte para o inlining Google Fontes. Também foi expandido o suporte para o Adobe Fonts. Usar inlining fonts pode ajudar no desempenho do seu projeto também.
A comunidade também trabalhou muito, trazendo algumas melhorias como habilitar e desabilitar validadores dinamicamente e restaurar o histórico depois de cancelar uma navegação. Você poderá verificar isso também no artigo oficial do Angular 13 e na documentação oficial do Angular.
Conclusão
Agora você tem uma versão novinha para começar a experimentar ai no seu projeto! O Angular vem crescendo muito em desempenho.
Procurei trazer um resumo rápido e em bom português para que você fique inteirado do assunto, mas nada substitui uma leitura adequada das documentações oficiais.
