Table of contents
Hoje minha ideia nesse post é falar sobre algumas novidades que chegaram no angular 17.
O Angular 17 chega repleto de novas funcionalidades e aprimoramentos, projetados para elevar o desenvolvimento de aplicações a um novo patamar de desempenho e eficiência. Ao longo deste artigo, exploraremos algumas dessas atualizações de maneira aprofundada, enquanto compartilho meu ponto de vista sobre como essas mudanças podem impactar positivamente o desenvolvimento de aplicações web.
Recentemente, o Angular 17 trouxe inovações significativas, especialmente em relação à manipulação de condicionais e loops no código. As conhecidas diretivas ngIf, ngFor, e ngSwitch receberam atenção especial, levantando a questão: estaria próximo o fim dessas diretivas tradicionais?
O Avanço das Condicionais e Loops
Vamos explorar as mudanças introduzidas e compreender melhor os motivos por trás delas.
*ngIf: Uma Abordagem Antiga
Vamos entender um pouco melhor sobre o que mudou e o motivo dessas mudanças.
Antes do Angular 17, as condicionais eram frequentemente implementadas da seguinte maneira, utilizando o *ngIf:
<div *ngIf="isValid; else notvalid">
Essa é uma informação válida
</div>
<ng-template #notvalid>
Essa não é uma informação válida
</ng-template>
@ If
No entanto, é crucial entender como as recentes alterações impactaram essa abordagem e o que isso significa para o desenvolvimento Angular. Vamos analisar essas mudanças mais de perto.
@if (isValid) {
<span> Essa é uma informação válida </span>
} @else {
<span> Essa não é uma informação válida </span>
}
Já podemos notar uma considerável diferença na sintaxe entre as duas abordagens para resolver o mesmo problema. Ao utilizar o @ If, observamos uma simplificação notável, especialmente em casos que envolvem condições alternativas, como o uso do else. Na abordagem anterior, era comum recorrer ao ng-template para lidar com situações de else, tornando o código mais complexo.
Com a introdução do @ If no Angular 17, lidar com situações de else tornou-se muito mais simples e direto. Além disso, essa atualização nos concede a flexibilidade de utilizar a cláusula else if, uma funcionalidade que não era tão facilmente implementada na versão anterior.
Essa simplificação da sintaxe não apenas torna o código mais legível, mas também proporciona uma experiência de desenvolvimento mais eficiente, especialmente ao lidar com lógicas condicionais complexas.
ngSwitch
O ngSwitch também passou por transformações notáveis, trazendo uma abordagem renovada para lidar com situações de switch-case. Abaixo, apresento um exemplo comparativo entre a versão antiga e a nova:
<div [ngSwitch]="level">
<level-one *ngSwitchCase="one"/>
<level-two *ngSwitchCase="two"/>
<level-three *ngSwitchDefault/>
</div>
Agora utilizando a nova versão para resolver o mesmo problema.
@switch (level) {
@case ('one') { <level-one /> }
@case ('two') { <level-two /> }
@default { <level-three/> }
}
Particularmente, percebo que esta nova versão nos proporciona uma visão mais clara da estrutura do switch. A sintaxe, agora mais próxima do que é geralmente utilizada em linguagens como JavaScript e TypeScript, reflete uma abordagem mais intuitiva e familiar.
Ao alinhar-se com as práticas habitualmente adotadas na programação, o Angular 17 busca proporcionar uma experiência mais coesa e amigável para os desenvolvedores. A semelhança com as estruturas de controle de fluxo em outras linguagens não apenas facilita a transição para o Angular, mas também promove uma compreensão mais rápida e eficaz do código.
Essa harmonização entre o Angular 17 e padrões de programação amplamente adotados contribui para a legibilidade do código e a redução da curva de aprendizado.
ngFor vs. @ For
Comparando as estruturas de repetição entre ambas as versões, até a chegada desta nova versão do Angular, as iterações eram feitas com a conhecida diretiva *ngFor.
Vamos comparar essas duas versões:
<div *ngFor="let item of [1,2,3]; trackBy:trackByItem">
<span> {{item}} </span>
</div>
Agora vamos usar um exemplo para resolver o mesmo problema, porém utilizando a nova versão dessa estrutura de repetição.
@ for
@for (item of [1,2,3];track trackByItem){
<span> {{item}} </span>
}@empty {
<span> Lista Vazia </span>
}
Podemos observar uma expressiva diferença na sintaxe entre as duas versões do "for". Novamente, destaco que a segunda versão se aproxima mais do que é geralmente utilizado em outras linguagens de programação.
No entanto, essa mudança vai além da mera questão de sintaxe ou “efeitos visuais”. A nova sintaxe para o "for" introduz um algoritmo de diferenciação mais otimizado, proporcionando uma melhoria notável na eficiência. Estudos indicam que essa abordagem é até 90% mais rápida, conforme evidenciado por métricas disponíveis aqui
Essas são apenas algumas das muitas atualizações e melhorias que vêm sendo implementadas no Angular. A framework passou por mudanças significativas em diversos aspectos, tornando-se fundamental a exploração mais aprofundada dessas transformações.
Acredito que novas melhorias significativas estão a caminho, e é essencial mantermo-nos atualizados sobre o que há de novo no mercado e nas tecnologias que utilizamos diariamente.
O objetivo hoje foi destacar algumas das inovações que a equipe do Angular está trazendo para a comunidade. Na minha perspectiva, essas mudanças são significativas, elevando o Angular a um patamar ainda mais avançado do que antes.