18

Novedades en Angular v17: Conoce la nueva sintaxis

33330Puntos

hace 3 meses

Angular, uno de los frameworks más importantes de desarrollo web, lanzó su versión 17 y esta incluye una nueva sintaxis enfocada en mejorar el rendimiento y el tener un código más legible para controlar el flujo en el HTML.

¿Cómo se ve el cambio?

Los cambios los verás en los templates, ya que la lógica sigue siendo la misma. Veamos cómo cambiaría la sintaxis para mostrar un elemento u otro dependiendo de una condición.

Antes:

<h1 *ngIf="age >= 18; else elseBlock">You are over 18h1><ng-template #elseBlock><h1>you are under 18h1>ng-template>

Nueva sintaxis:

@if (age >= 18) {
	<h1>You are over 18h1>
} @else {
	<h1>you are under 18h1>
}

Esta nueva sintaxis es más clara y concisa, reduciendo la necesidad de contenedores adicionales como el ng-template. Además, es más fácil de entender si apenas estás aprendiendo Angular.

¿Y qué sucede con las iteraciones for?

Ahora, en lugar de usar ngFor, se adopta la estructura @for que se asemeja más a declarar directamente un bucle. Además, cuenta con la instrucción @empty para identificar cuando la lista está vacía.

Antes:

<ul><li *ngFor="let task of tasks">
    {{ task.title }} - {{ task.completed }}
  li><ng-container *ngIf="tasks.length === 0"><li>No tasks!li><button (click)="loadTasks()">Load tasksbutton>ng-container>ul>

Nueva sintaxis:

@for (task of tasks; track task.id) {
  <li>
    {{ task.title }} - {{ task.completed }}
  li>
} @empty {
  <li>No tasks!li><button (click)="loadTasks()">Load tasksbutton>
}

¿Y el ngSwitch también cambia?

Si, esta estructura de control también cambia y con la nueva sintaxis estaría representada con @switch.

Antes:

<div [ngSwitch]="name"><p *ngSwitchCase="'nicolas'">yo soy nicolasp><p *ngSwitchCase="'julian'">yo soy julianp><p *ngSwitchCase="'ana'">yo soy anap><p *ngSwitchDefault>yo no soy nadiep>div>

Nueva sintaxis:

@switch (name) {
  @case ('nicolas') { <p>yo soy nicolasp> }
  @case ('julian') { <p>yo soy julianp> }
  @case ('ana') { <p>yo soy anap> }
  @default { <p> yo no soy nadiep> }
}

¿Puedo seguir usando la sintaxis anterior?

Angular es conocido por su compatibilidad retroactiva, y en esta ocasión no es diferente. La nueva sintaxis es una adición, no una sustitución, lo que significa que aún puedes utilizar las sintaxis antigua si lo prefieres. Esto facilita la transición y la adaptación a las nuevas convenciones.

Por ejemplo, en el siguiente código verás como puedes utilizar la nueva sintaxis @if a la par que utilizas ngFor o ngIf, todo en el mismo template.

@if (show) {
	<main ><h1>If Blockh1><ul><li *ngFor="let task of tasks">
	      {{ task.title }} - {{ task.completed }}
	    li><ng-container *ngIf="tasks.length === 0"><li>No tasks!li><button (click)="loadTasks()">Load tasksbutton>ng-container>ul>main>
} @else {
	<h1 >Else Blockh1>
}

ok ¿Pero es solo un cambio de sintaxis?

No es solo un cambio de sintaxis. El equipo de Angular también ha implementado mejoras en el rendimiento que van de la mano. En una prueba de rendimiento, vemos una mejora en comparación con otros frameworks populares.

Performance

También se introduce un nuevo concepto en el cual podríamos realizar lazy loading a nivel de componentes utilizando la instrucción @defer directamente en el template. Esto podría mejorar significativamente el rendimiento de las aplicaciones al cargar componentes de manera diferida según las condiciones.

@defer (conditions) {
  <my-cmp />
} @loading {
  Loading...
} @error {
  Failed to load dependencies
}

¿Cómo usar la nueva sintaxis?

Puedes hacer una migración manual, pero Angular te trae una solución bastante cómoda, ya que con el comando ng g @angular/core:control-flow puedes migrar toda tu aplicación y moverla a la nueva sintaxis.

¿Cuál es la base de esta nueva sintaxis?

En el RFC (Request for Comments) llamado “Built-in Control Flow,” se explica que Angular busca simplificar su sintaxis y mejorar el control de flujo asimilando el de JavaScript. En este RFC, se menciona la inspiración en la sintaxis de Svelte, que se destaca por su rendimiento y su enfoque directo en el control de flujo.

Svelete

Sin embargo, esta no es la primera vez que Angular se inspira en otros frameworks, en el pasado también tomo como referencia el modelo de reactividad de SolidJS.

Esta nueva sintaxis promete hacer que Angular sea más accesible y comprensible, simplificando la escritura de código y mejorando el flujo de trabajo de los desarrolladores. Puedes aprender y trabajar con esta sintaxis en el nuevo Curso de Angular v17 que Platzi tiene para ti.

Nicolas
Nicolas
nicobytes

33330Puntos

hace 3 meses

Todas sus entradas
Escribe tu comentario
+ 2
1
21599Puntos

Hola!

En la versión 17 de Angular, he visto que al momento de activar el servidor (ng serve) y hacer algún cambio en el script no se evidencia de inmediato en el navegador, tengo que parar e iniciar de nuevo. ¿Esto obedece a alguna configuración adicional?

1
46Puntos
2 meses

A seguir, vamos contar-lhe mais sobre as revelações mais mediáticas de jogadores de futebol que apostaram em jogos e eventos, cujo resultado poderiam influenciar em seu benefício https://7gamesbets.com.br

1
4310Puntos

Hola, tengo una pregunta. Siempre me ha gustado aprender HTML5 y CSS3, sin embargo nunca he tomado este camino por una razón. La IA ahora puede realizar sitios web en minutos, entonces, ¿por qué necesitaría una persona a un programador para realizar un sitio web? y ¿no dejará de ser relevante aprender HTML5 y CSS3 al tener a la IA ahora?

2
13773Puntos
3 meses

La IA es otra herramienta para los programadores no un sustituto… aprender los lenguajes en cuestión es para saber si lo esta haciendo bien o no… no he probado a crear un sitio entero con la IA como digo personalmente la uso como complemento pero en estos momentos dudo que pueda realizar un sitio web complejo