(+34) 673 566 782 - (+34) 960 653 052 formacion@imaginagroup.com

Angular 9 ya ha llegado y estas son sus novedades

Angular 9: Novedades

 

Angular es uno de los frameworks de código abierto líderes en el mercado para el desarrollo de aplicaciones, tanto web como móvil. Y no podría ser de otra manera, pues el equipo de Angular (perteneciente a Google) nos tiene acostumbrados a una versión mayor cada 6 meses, incluso manteniendo la API estable desde el lanzamiento de Angular 2.

Este año contamos con una actualización centrada en mejoras técnicas de Angular. Puede que a la hora de programar no se añada nada nuevo, pero vamos a ver una gran reducción del tamaño de los proyectos y una mejora del rendimiento.

El compilador Ivy

Hasta la salida de Angular 8, el framework dependía exclusivamente de su “ViewEngine” para montar y renderizar las aplicaciones en el navegador. Sin entrar mucho en detalles, el VE se encargaba de coger las plantillas y los componentes y transformarlos en código HTML y Javascript (recordad que Angular se programa en TypeScript), para que asi el navegador pudiera interpretarlos y mostrarlos por pantalla.

Sin embargo, con la introducción de Ivy en Angular 8, y al fin su lanzamiento oficial en esta versión 9 del framework, contamos con un compilador más eficiente que, aunque no afecte en nuestra forma de programar, veremos como cambia totalmente la forma en que nuestras aplicaciones se generan.

Puesto que se generarán proyectos mucho más ligeros, sobretodo en aplicaciones móviles (prácticamente la mitad del tráfico global de la red) notaremos un aumento considerable de la velocidad de carga.

 

Como decíamos, en Angular 8 este compilador era opcional. Si quisiéramos activarlo, tendríamos que ir al archivo tsconfig.json de nuestro directorio raíz y escribir lo siguiente:

 

"angularCompilerOptions": {

"enableIvy": true

}

 

Con la llegada de Angular 9, el compilador estará activado por defecto.

Directivas sin selector

Una característica que se perdió con el lanzamiento del compilador Ivy de la versión de Angular 8 era el uso de las directivas sin selector. Consideremos el siguiente código:

export class BaseDir {

constructor(@Inject(ViewContainerRef) protected vcr: ViewContainerRef) {}

}

@Directive({

selector: '[child]',

})

export class ChildDir extends BaseDir {

// constructor heredado de BaseDir

} 

 

Angular VE sí que soporta este patrón, pero sín la notación @directive identificando la clase de BaseDir como una directiva, el compilador Ivy no interpretaba la información sobre los parametros del constructor.

Ahora, con la versión 9, esta característica ya está de nuevo disponible.

Cambios en la inyección de dependencias y “type-safe”

 

La puesta en marcha del compilador Ivy es una gran mejora, pero en esta versión se han añadido otras características, y algunas previas han sufrido cambios. Es el caso de la inyección de dependencias. Por ejemplo, Angular 9 añade soporte al valor providedIn de la siguiente manera:

@Injectable({

  providedIn: 'platform' 

})

class MyService {...}

 

En Angular 9, ahora se puede incluir como valores a este parámetro ‘platform’ y ‘any’.

 

 

También nos encontramos con una modificación en TestBed, la API principal de testing de Angular, en la que se reemplaza una antigua función con el nuevo método de inyecciones. El antiguo método sigue funcionando, pero está ‘deprecated’, lo que implica que en futuras versiones podría desaparecer.

 

// Código antiguo 

TestBed.get(ChangeDetectorRef) // devuelve ‘any’

 

// inject() sustituye a get()

TestBed.inject(ChangeDetectorRef) // devuelve ChangeDetectorRef

 

Puesto que TestBed.get no es type-safe, el equipo de angular decidió reemplazarlo por TestBed.inject.

Mejoras en el Language Service

 

El Language Service de Angular 9 para Visual Studio Code y WebStorm va a recibir varias actualizaciones. Por ejemplo, la definición de URLs va a pasar a ser más consistente. El estilo de URLs se verificará del mismo modo que si de plantillas URL se tratara.

Desde que el montaje o building es una tarea costosa y, por tanto, no debería hacerse con scripts de prueba, Angular 9 introducirá un script que permitirá que e; building de distribución no tenga que hacerse en el repositorio raíz. Los tests de integración con el Language Service deberían reinstalar la distribución de Angular cada vez que esta se monta.

Los diagnósticos también se mejorarán con el Angular Language Service. Por ejemplo, el TypeScriptHost será capaz de diferenciar los registros por los métodos de ‘log’, ‘error’ y ‘debug’ que hagamos. Además, las plantillas URL y las URL de estilo que no apuntan a los archivos reales se diagnosticarán como tales por el Language Service.

Mejoras  en el API Extractor

La última, pero no menos importante, de las actualizaciones que vamos a comentar en este post serán la mejora que ha recibido el API Extractor; puesto que Angular, como cualquier otro framework o librería, depende de muchas otras librerías que evolucionan por separado, Angular 9 actualizará su API Extractor a la última versión.

Si quieres aprender más recuerda que tiene estos cursos con nosotros…

Uso de cookies: Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies

ACEPTAR
Aviso de cookies