ATENCIÓN: este contenido tiene más de 2 años de antigüedad y, debido a su temática, podría contener información desactualizada o inexacta en la actualidad.
Imagen por Tom Bullock, CC BY, retocada por campusMVP
Nota: Actualmente ya vamos por la versión 6 (también nuestro curso online de Angular) y las novedades de Angular 6 las repasamos en este otro post.
Desde finales de la semana pasada está ya disponible Angular 5, la nueva versión del conocido framework de desarrollo web Front-End.
Esta versión entra dentro del plan de Google de lanzar una nueva revisión "grande" cada 6 meses, aunque a veces las novedades sean más bien escasas. No es lo que ocurre en esta ocasión, en la que la versión 5 trae bastantes cosas nuevas y alguna de ellas de cierta importancia.
Vamos a verlas...
HttpClient
En la versión 4.3 se lanzó HttpClient dentro de @angular/common como una forma más pequeña, sencilla y potente de realizar solicitudes web en Angular. A partir de esta nueva versión Google recomienda utilizar el HttpClient para todas las aplicaciones, y dejar de utilizar la biblioteca "tradicional" @angular/http que queda marcada como obsoleta.
Para actualizar a HttpClient, hay que reemplazar en todos los módulos HttpModule por HttpClientModule (que está en @angular/common/http), inyectar el servicio HttpClient y eliminar todas las llamadas de map(res => res.json()) , que ya no son necesarias.
Este era uno de los grandes cambios ya esperados desde que salió la 4.3 y finalmente hemos visto cómo se ha materializado.
Nuevos eventos del ciclo de vida del enrutador
Se han agregado nuevos eventos de ciclo de vida al router, lo que permite a los desarrolladores rastrear el ciclo del enrutador desde el inicio de la ejecución hasta la finalización de la activación. Estos eventos podrían usarse para cosas tales como mostrar el típico spinner (elemento de progreso) en un enrutador específico cuando un componente hijo se está actualizando, o para medir el rendimiento de la resolución de una ruta.
Los nuevos eventos por orden de lanzamiento son GuardsCheckStart, ChildActivationStart, ActivationStart, GuardsCheckEnd, ResolveStart, ResolveEnd, ActivationEnd y ChildActivationEnd .
Un ejemplo de uso de estos eventos para iniciar/detener un elemento de progreso podría ser:
class MyComponent {
constructor(public router: Router, spinner: Spinner) {
router.events.subscribe(e => {
if (e instanceof ChildActivationStart) {
spinner.start(e.route);
} else if (e instanceof ChildActivationEnd) {
spinner.end(e.route);
}
});
}
}
Mejoras en el compilador
Esta versión mejora el compilador de Angular para admitir la compilación incremental. Esto proporciona re-builds más rápidas de las aplicaciones, especialmente para builds de producción y compilaciones con AOT (Ahead Of Time). También se ha agregado funcionalidad a los decoradores de código, y ahora es posible enviar bundles más pequeños, eliminando espacios en blanco.
Debajo del capó, el compilador de Angular funciona ahora como una transformación de TypeScript, lo que hace que las reconstrucciones incrementales sean mucho más rápidas. Las transformaciones de TypeScript fueron una nueva característica introducida como parte de TypeScript 2.3 que permite engancharse a la pipeline de compilación estándar de TypeScript.
Puedes aprovechar esto ejecutando ng serve con el flag AOT activado:
ng serve --aot
Deberías probarlo ya que esto se convertirá en la acción predeterminada en una versión futura de la CLI. Existen algunos problemas de velocidad conocidos con proyectos con más de mil componentes. Con esto, los proyectos de todos los tamaños experimentarán estas mejoras.
Al realizar una compilación AOT incremental de https://angular.io, el nuevo proceso de compilación disminuye el tiempo de compilación un 95% (de más de 40 segundos a menos de 2 segundos en las máquinas de desarrollo del equipo de Angular).
El objetivo era convertir la compilación AOT en algo lo suficientemente rápido como para poder usarla en tiempo de desarrollo, eliminando las diferencias que a veces se encuentran cuando se ponen las apps en producción por primera vez. Por eso estará activado de forma predeterminada en una versión futura de la CLI.
Como parte de esta transición a las transformaciones, ya no necesitamos genDir, y outDir ha cambiado: ahora siempre estamos emitiendo archivos generados para paquetes en node_modules.
Preservar los espacios en blanco
Hasta ahora el compilador recreaba fielmente los tabuladores, saltos de línea y espacios de las plantillas y los incluía en su compilación. Ahora podemos elegir si deseamos conservar estos espacios en blanco provenientes de nuestros componentes.
Podemos especificar esto como parte del decorador de cada componente, siendo true por defecto su valor:
@Component({
templateUrl: 'about.component.html',
preserveWhitespaces: false
}
export class AboutComponent {}
O podemos especificarlo para toda la aplicación en el archivo tsconfig.json, en donde también está predeterminado como true.
En general, las especificaciones a nivel de componente anulan las especificaciones de toda la aplicación. En el futuro, el equipo de Angular espera establecer el valor predeterminado en false para ahorrarnos esos espacios de forma predeterminada, así que tenlo en cuenta. Eso sí, las etiquetas <pre> se manejan de forma inteligente y no se tocan nunca.
Más información sobre preserveWhitespaces.
Build Optimizer
A partir de esta versión 5.0.0, las compilaciones de producción creadas con la CLI ahora aplicarán el optimizador de compilación de forma predeterminada.
El optimizador de compilación es un añadido a la herramienta de línea de comandos para reducir los paquetes resultantes, utilizando comprensión semántica de tu aplicación angular. El optimizador de compilación tiene dos trabajos principales. En primer lugar, puede marcar partes de la aplicación como "pure", lo cual mejora el "Tree-Shaking" proporcionado por las herramientas existentes, eliminando partes adicionales de la aplicación que no son necesarias.
Lo segundo que hace el optimizador de compilación es eliminar los decoradores de Angular del código de tiempo de ejecución de su aplicación. Los decoradores son utilizados por el compilador, y no son necesarios en el tiempo de ejecución, y por lo tanto se pueden eliminar.
Cada uno de estos trabajos disminuye el tamaño de los paquetes de JavaScript y aumenta la velocidad de inicio de la aplicación.
CLI v1.5
A partir de la v1.5 de la CLI de Angular, se ha agregado soporte para Angular v5.0.0 y generará proyectos v5 de manera predeterminada.
Además en esta nueva versión se ha activado el optimizador de compilación (ver punto anterior) de forma predeterminada, por lo que los desarrolladores pueden beneficiarse de paquetes finales más pequeños.
API Angular Universal State Transfer y soporte DOM
Ahora puedes compartir más fácilmente el estado de la aplicación entre las versiones del lado del servidor y del lado del cliente de la aplicación.
Angular Universal es un proyecto centrado en ayudar a los desarrolladores a realizar la representación del lado del servidor (SSR: Server Side Rendering) de las aplicaciones de Angular. Al renderizar las aplicaciones en el servidor y luego realizar un bootstrapping sobre el HTML generado, podemos agregar soporte para rastreadores que no admiten JavaScript, y puede aumentar el rendimiento percibido de su aplicación.
En 5.0.0, el equipo de Angular ha agregado ServerTransferStateModule y el BrowserTransferStateModule correspondiente. Este módulo permite generar información como parte de la representación en el servidor, y luego transferirla al lado del cliente para que esta información no necesite ser regenerada. Esto es útil para casos como cuando nuestra aplicación obtiene datos a través de HTTP. Al transferir el estado del servidor, esto significa que los desarrolladores no necesitan realizar una segunda solicitud HTTP una vez que la aplicación llega al cliente.
La documentación para esta funcionalidad todavía no está disponible.
Otro cambio que viene del equipo de Angular Universal es la adición de Domino, un simulador del DOM para lado servidor con Node.js. Domino significa que admitimos más manipulaciones de DOM listas para usar en contextos del lado del servidor, mejorando nuestro soporte para bibliotecas JS y bibliotecas de componentes de terceros que no están al tanto del lado del servidor.
Internacionalización de tuberías para números, fechas y monedas
En esta versión se han introducido unas nuevas tuberías (pipes, en la jerga de Angular) para números, fechas y monedas que aumentan la estandarización del proceso de internacionalización entre navegadores y eliminan la necesidad de usar polyfills para conseguirlo.
En versiones anteriores de Angular se utilizaba cada navegador para obtener el formato apropiado para estos tipos de datos, lo cual hacía que los usuarios vieran resultados inconsistentes entre navegadores y, para corregirlo, se hacía necesario usar polyfills que generaran siempre el mismo resultado.
En Angular 5.0.0 se han actualizado las pipes para usar una implementación propia, confiando en el CLDR para proporcionar soporte amplio de configuraciones locales y las configuraciones regionales que puedas necesitar. Aquí tienes una hoja de cálculo que compara el comportamiento de estos pipes entre las versiones 4 y 5.
Si no quieres usar todavía estas nuevas tuberías, puedes importar el módulo DeprecatedI18NPipesModule para tener acceso al comportamiento anterior.
Puedes obtener más detalles sobre los cambios en el changelog de Angular 5.
Se reemplaza ReflectiveInjector con StaticInjector
Para eliminar aún más polyfills, se ha reemplazado el ReflectiveInjector con el nuevo StaticInjector. Este inyector ya no requiere el polyfill Reflect, lo que reduce el tamaño de la aplicación para la mayoría de los casos.
Antes usabas:
ReflectiveInjector.resolveAndCreate(providers);
Ahora:
Injector.create(providers);
Mejoras de velocidad de zonas
En Angular 5.0.0 las zonas son más rápidas por defecto, e incluso es posible evitar completamente algunas zonas en caso de que nuestra aplicación necesite un gran rendimiento.
Para evitar las zonas, podemos iniciar la aplicación con noop como valor para ngZone:
platformBrowserDynamic().bootstrapModule(AppModule, {ngZone: 'noop'}).then( ref => {} );
Puedes ver un ejemplo completo en el proyecto ng-component-state.
exportAs
Se ha añadido soporte para múltiples nombres para un mismo componente o directiva. Esto puede ser muy útil para ayudar a nuestros usuarios a migrar de componente sin que haya rotura de la aplicación.
Esta funcionalidad ya se ha utilizado como parte del proyecto de Angular Material, cuando se cambiaron los prefijos, y también puede ayudar a otros autores de componentes:
@Component({
moduleId: module.id,
selector: 'a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], a[mat-mini-fab]',
exportAs: 'matButton, matAnchor',
.
.
.
}
Los formularios son una parte muy importante de muchas aplicaciones, y si tienen algún tipo de validación que se realiza en el lado del servidor, o las validaciones desencadenan procesos de servidor pesados que sería recomendable ejecutar menos a menudo. Por ello ahora es posible ejecutar validaciones y actualizaciones de valores en el evento blur o ensubmit, en lugar de en cada evento de entrada. De este modo podemos tomar el control de la emporización de las validaciones y del cambio de valores a nivel de control o un formulario completo.
Además, ahora podemos especificar asyncValidators directamente en el objeto de opciones, en lugar de especificarlo como un tercer parámetro.
Antes escribíamos:
<input name="firstName" ngModel>
Ahora podemos escribir:
<input name="firstName" ngModel [ngModelOptions]="{updateOn: 'blur'}">
o incluso:
<form [ngFormOptions]="{updateOn: 'submit'}">
Antes_
new FormGroup(value);
new FormControl(value, [], [myValidator])
Ahora:
new FormGroup(value, {updateOn: 'blur'}));
new FormControl(value, {updateOn: 'blur', asyncValidators: [myValidator]})
RxJS 5.5
Angular ahora utiliza RxJS 5.5.2. Esta versión reciente de RxJS permite evitar los efectos secundarios del mecanismo de importación anterior con una nueva manera de utilizar RxJS llamada "lettable operators". Estos nuevos operadores eliminan los efectos secundarios y los problemas de división de código/tree shaking que existían anteriormente con el método para "parchear" la importación de operadores.
En lugar de:
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
names = allUserData
.map(user => user.name)
.filter(name => name);
Ahora podemos escribir:
import { Observable } from 'rxjs/Observable';
import { map, filter } from 'rxjs/operators';
names = allUserData.pipe(
map(user => user.name),
filter(name => name),
);
Además, RxJS ahora distribuye una versión que hace uso de módulos ECMAScript. La nueva CLI angular incluye esta versión de manera predeterminada, lo que supondrá un ahorro considerable en el tamaño del paquete. Pero incluso si no estamos utilizando la CLI de Angular deberemos apuntar a esta nueva distribución.
La documentación se puede encontrar en la sección Build y Tree-shaking de la documentación.
Ayuda a la migración y precauciones
Angular 5.0.0 es una actualización importante dentro de la biblioteca Front-End, e incluye algunas características importantes, mejoras de rendimiento y algunas funcionalidades que se han marcado como obsoletas.
Tal y como prometieron, la gente de Google ha lanzado una pequeña herramienta de migración que te ayuda en el proceso de pasar una app desde Angular 4.x a 5.0.0. No debería ser muy complicado hacer dicha migración.
También existen algunas incidencias sin resolver que se atajarán en próximos parches. La más importante es que en ocasiones se pueden producir mapas de código fuente (source maps) que pueden producir errores. Pero nada importante y la versión 5.0.0 está lista para ser utilizada en producción.
Y por si no lo sabías, tenemos una buena noticia para ti: nuestro estupendo curso de Angular ya está actualizado a la nueva versión, Angular 5.
Fecha de publicación: