Qué hay de Nuevo en Angular 7

Novedades en la versión 7 de Angular

Ignacio Buioli
- 22/10/2018

No será una versión recordada como una en la que se introdujeron grandes features, sin embargo es una versión muy importante para el rendimiento general de Angular de cara al futuro. Hicimos un video para las novedades de Angular 6, lamentablemente Angular 7 no nos merece lo mismo. No obstante, traemos una lista en nuestro blog con las funcionalidades más importantes de esta nueva versión.

Soporte para TypeScript 3.1

Angular 7 se actualiza con soporte de TypeScript 3.1. A principio de año, la implementación de TypeScript 2.7 en Angular 6 se hizo muy sonante como un gran paso del framework. Que decir ahora que Angular 7 soporta TS 3.1, la última versión estable del momento y con cara para empezar a sincronizarse las versiones de Angular con las de TS.

Angular-CLI con Prompt

Esta es una de las cosas que mayor sorpresa nos dio al probarla. Si nuestro Angular-CLI está actualizado a la versión 7.0.0, al crear un nuevo proyecto de Angular tendremos un pequeño Prompt en nuestra terminal con algunas opciones de configuración inicial, lo que nos ahorrará tiempo a la hora de generar una nueva app. Por ejemplo, nos preguntará configuraciones rápidas como si queremos crear el sistema de Routes, lo que antes debía hacerse de forma manual; o que sistema de Estilos queremos utilizar (CSS, SASS, SCSS, LESS, Stylus), lo cual también teníamos que configurar manualmente.







Opciones de Compilación

Por fin podremos configurar de forma sencilla opciones de compilación modificando el archivo tsconfig.json, mediante los bloques "compilerOptions" y "angularCompilerOptions". Dentro de las opciones se incluye la perseverancia de los espacios en blanco, el uso de decoradores experimentales, o chequeos de templates, entre otras opciones.

Novedades en Angular Elements

Angular Elements trae algunas pequeñas novedades, una especialmente centrada en la seguridad. Angular 7 soporta protección de contenido empleando los estándares web actuales en los Custom Components. Otro agregado muy interesante, que se suma al ShadowDom de Angular 6.1, es el uso de <slot> en Elements, un standard para la construcción de templates en Web Components.

Motor de Render Ivy ¿de nuevo se retrasa?

Lamentablemente, el motor de render Ivy que ya había sido anunciado en Angular 6 y que se iba a retrasar hasta la versión 7 sigue con el mismo criterio. Se puede acceder a dicho motor cambiando la configuración de forma manual, como ya hemos explicado, pero no está por defecto en Angular 7. Sin embargo, hay cambios en la estructura interna de Ivy:

  • ngtsc: Se trata del compilador que compila los templates HTML a JavaScript.

  • ngcc: Una herramienta que explora todas las dependencias del proyecto, convirtiéndolas en código compatible con Ivy. Se encuentra en un estado de desarrollo muy temprano, aún así puede utilizarse para probar.

Al parecer estas nuevas implementaciones, sumado al poco convencimiento del equipo de desarrollo de Angular respecto a Ivy, son las razones del retraso. ¿Lo veremos en una versión de Angular 8? No me arriesgaría a dar una fecha de salida de Ivy. Sin embargo, para quienes deseen testear el motor Ivy pueden generar de la siguiente forma (recordar compilar con AoT):

ng new ivy-test --experimental-ivy

Angular Material y CDK

El mundo de Material y el Component Development Kit no para de crecer. A pesar de tratarse de un desarrollo independiente, lo cierto es que aprovecha la salida de versiones mayores de Angular para introducir mejoras sustanciales. En Material tenemos cambios menores, centrados en mejoras gráficas menores (como el uso de tipografías más limpias o contenedores con mejor alineación). En el caso de CDK, nuevos componentes prediseñados con mucha potencia para las distintas apps: Virtual Scroll y Drag-Drop. Poco a poco este proyecto que inició hace poco más de un año comienza a tomar forma.

Rendimiento General

Existe una notoria mejora en el hot reload de las App, sumado a la posibilidad usar un sistema de advertencias con un tamaño mínimo y máximo de los bundles. Como siempre, los bug-fixes contribuyen al rendimiento general, a pesar de la poca cantidad de features de esta versión en particular.

Este tipo de versiones son necesarias para poder mejorar el rendimiento y organizar las features de una versión futura. Todo pinta que la versión de Angular 8 traerá novedades mucho más intensas y, esperemos, el nuevo motor de render Ivy de forma nativa.