Categorías
Articulos Desarrollo web

Angular 9 : Todas sus novedades

Todo lo que necesitas saber acerca de Angular

En este artículo, hablaremos sobre las novedades de Angular 9. Aunque el cambio de versiones de 8 a 9 parece un gran paso, v9 es una versión evolutiva (e incluye principalmente correcciones de errores). Sin embargo, hay varias características nuevas e interesantes de Angular 9.

Siguenos en INSTAGRAM La comunidad de los verdaderos programadores.

Angular es uno de los framework de código abierto más destacados para crear aplicaciones web y móviles. Desarrollado por Google, Angular ha evolucionado a lo largo de los años en un marco de desarrollo integral que incluye todas las herramientas y componentes necesarios para crear una aplicación web.

Angular sigue una hoja de ruta clara, con una nueva versión principal de Angular lanzada cada seis meses. El equipo de Angular trabaja cuidadosamente para que la API no necesite cambiar (o al menos no tan drásticamente como lo hizo de Angular 1 a 2). Esto es bueno, mantiene las cosas actualizadas con las mejores prácticas y las últimas funciones compatibles con TypeScript o JavaScript.

La gran característica nueva en la que nos sumergiremos es el compilador Ivy. Explicaremos qué hace Ivy y por qué en realidad es una característica importante para el futuro de Angular.

angular 9

Tocaremos algunas otras características nuevas, incluidos enlaces sin selector y soporte de internacionalización. Verás por qué llamamos a esto un lanzamiento evolutivo en lugar de revolucionario.

Paquetes de Javascript y rendimiento

Uno de los problemas actuales con versiones anteriores de Angular es el tamaño de archivo relativamente grande de la aplicación, más precisamente, el tamaño de archivo de los paquetes de JavaScript generados. Si comparas Angular con otras bibliotecas como React o Vue.js, la aplicación Angular es significativamente más grande.

En tiempo de ejecución, probablemente no sienta la diferencia. Si bien el rendimiento de tiempo de ejecución angular es bueno, la carga puede llevar más tiempo porque incluso una aplicación simple puede ser relativamente grande.

El tamaño de los paquetes de JavaScript también sugiere otro problema: hay más que aprender con Angular porque Angular es un marco completo con muchas herramientas de desarrollador integradas, mientras que otras bibliotecas de JavaScript se centran más en los componentes.

Entonces, ¿qué podría hacer el equipo de Angular para mitigar los problemas derivados de los grandes paquetes de archivos en versiones anteriores de Angular?

Hablemos de Angular ViewEngine

Angular ViewEngine

Antes de Angular 8, el framework se basaba exclusivamente en ViewEngine (a veces denominado «VE») para construir y renderizar código en los navegadores. Los componentes angulares se escriben usando el lenguaje TypeScript.

TypeScript es un superconjunto de JavaScript, y utilizamos un compilador o «transpiler» para convertir TypeScript en un dialecto de JavaScript que se ejecuta en el navegador. Históricamente, Angular ha confiado en ViewEngine para hacer esta transposición del código TypeScript a JavaScript.

Angular ViewEngine toma las plantillas y los componentes y los traduce a HTML y JavaScript normales para que el navegador pueda interpretarlos y mostrarlos.

Los Beneficios de Angular Ivy

Una de las características más importantes que se incluyó con Angular 8 fue la vista previa opcional de Ivy. Ivy es la nueva tubería interna de construcción y renderizado de Angular.

El procesador es el motor que toma las instrucciones que ingresa en los componentes Angulares con las plantillas y luego las traduce en instrucciones que cambian el DOM (Modelo de Objetos del Documento).

El compilador Ivy está oculto, y reemplazar ViewEngine con Ivy no cambia la forma en que trabaja con Angular. Pero este cambio tiene un impacto significativo en el código que se está generando.

La vista previa de Angular 8 permite a los usuarios jugar con Ivy. Con Angular 9, Ivy es el renderizador estándar. Si un renderizador es más eficiente o más fácil de implementar, eso significa que puede enviar menos código porque se requieren menos instrucciones, y ese es el propósito de Ivy.

Ivy produce paquetes de JavaScript mucho más pequeños, por lo que Ivy resuelve las debilidades del paquete de Angular. Ivy cambiará el juego porque lleva las aplicaciones angulares a un nivel completamente nuevo en términos de rendimiento y tamaño.

Angular Ivy

Ivy no cambia la forma en que se usa Angular, pero sí cambia la forma en que se genera la aplicación. El equipo de Angular se ha centrado en iniciativas como la carga diferencial de JavaScript moderno, que se envió con Angular.

Esto significa que se crean e implementan diferentes paquetes de polyfill juntos. En tiempo de ejecución, solo se cargan los polyfills que se requieren para el navegador específico, por lo que se descarga menos código.

Aplicaciones móviles más rápidas con Angular Ivy

Aplicaciones móviles angular

Los teléfonos inteligentes y otros dispositivos móviles representan aproximadamente la mitad del tráfico del sitio web en todo el mundo . Un porcentaje considerable de estos dispositivos móviles accede a páginas web desde ubicaciones que sufren de conexiones lentas a Internet.

Los desarrolladores pueden rediseñar las aplicaciones existentes para reducir el tamaño de los activos descargables y mejorar la experiencia del usuario móvil, pero estos cambios pueden ser difíciles, costosos e introducir riesgos imprevistos en sus proyectos.

Al reducir el tamaño de los paquetes de JavaScript, Ivy se convierte en una mejora bienvenida para los desarrolladores que intentan acelerar el inicio de la aplicación.

Directivas sin selector

Una característica que faltaba en la vista previa de Angular 8 Ivy que había estado disponible en ViewEngine era la capacidad de usar directivas sin selector como clases base.

Con Angular 9, esta característica se ha agregado a Ivy para que los desarrolladores obtengan las ventajas de la compilación de Ivy, pero no se pierdan la funcionalidad anterior.

Diagnósticos mejorados

Anteriormente, el compilador angular generaba diagnósticos nativos de TypeScript y sus propios diagnósticos internos de API. Pero los diagnósticos de TypeScript se han beneficiado de las mejoras recientes, ninguna de las cuales se implementó en los diagnósticos de API.

En lugar de admitir múltiples formatos, Angular 9 simplificará el proceso al convertir todos los diagnósticos del Compilador de TypeScript Angular (ngtsc) al mismo formato de Diagnóstico de TypeScript.

La versión 9 también evitará que las aplicaciones se encuentren con posibles problemas de enlace mediante el uso del registro de esquema para verificar los enlaces DOM. Además, se utilizarán diagnósticos de plantilla consistentes para respaldar la generación de mensajes de error altamente descriptivos.

Internacionalización con Angular Ivy

Otra mejora de Ivy se relaciona con la internacionalización.

Puede usar la CLI angular para generar la mayor parte del código estándar necesario para crear archivos para traductores y publicar su aplicación en varios idiomas.

Por ejemplo, considere una aplicación con este título HTML en inglés:

<h1>Hello world!</h1>

Puedes agregar el atributo i18n para marcar «¡Hola, mundo!» como texto traducible («i18n» es una abreviatura de «internacionalización» – «i», 18 letras intermedias y «n»):

<h1 i18n>Hello world!</h1>

Después de configurar tu aplicación para usar i18n, puede ejecutar el comando xi18n para extraer el texto localizable en un archivo . Puede ver un fragmento de un mensaje generado. Xlffile a continuación:

<trans-unit id=»a05c3a315a6ee3e6ad4733a1f72e8d16775810ca» datatype=»html»> <source>Hello World!</source> <target/> </trans-unit>

Luego, puede copiar el archivo messages.xlf en el archivo messages.es.xlf a continuación y cambiarlo para crear la aplicación para ubicaciones en español con el contenido traducido:

<trans-unit id=»a05c3a315a6ee3e6ad4733a1f72e8d16775810ca» datatype=»html»> <source>Hello World!</source> <target>¿hola, qué tal?</target></trans-unit>

En Angular 9, el código i18n ha sido refactorizado para proporcionar una mejor plataforma para agregar en línea en tiempo de compilación.

Inyección de dependencia y cambios en Angular Core

Ahora echemos un vistazo a algunos más pequeños, pero no menos bienvenidos, actualizaciones y mejoras que veremos en Angular 9.

Angular Core también tiene algunas mejoras. Por ejemplo, Angular 9 agrega soporte de inyección de dependencia para el valor proporcionado:

@Injectable({ providedIn: ‘platform’ }) class MyService {…}

Angular 9 amplió el vocabulario de la propiedad proporcionadaIn para incluir también los ámbitos ‘plataforma’ y ‘cualquier’.

Cambios de tipo seguro en Angular Core

Angular 9 ofrece TestBed modificado (la API de prueba de unidad principal para aplicaciones angulares) para reemplazar la antigua función get con el nuevo método de inyección. 

El método get todavía funciona, pero está en desuso. TestBed.inject es la opción preferida que comienza con Angular 9:

// This code still works, but it’s deprecated: TestBed.get(ChangeDetectorRef) // returns any

// inject() now replaces get(): TestBed.inject(ChangeDetectorRef) // returns ChangeDetectorRef

Actualmente, TestBed.get no es de tipo seguro. Arreglar TestBed.get introduciría un cambio de ruptura masivo, por lo que el equipo de Angular decidió reemplazarlo con TestBed.inject.

Mejoras en el servicio de idiomas

Angular 9 Language Service para Visual Studio Code y WebStorm se beneficiarán de algunas mejoras. Por ejemplo, la definición de URL será más consistente. 

Las URL de estilo se verificarán de la misma manera que las URL de plantilla.

Dado que la creación es una tarea costosa y no debe incluirse con scripts de prueba, Angular 9 presentará un script conveniente para que la distribución no tenga que ocurrir en la raíz del repositorio. 

Las pruebas de integración de Language Service deben reinstalar la distribución angular cada vez que se construye.

Los diagnósticos también se mejorarán en el Servicio de lenguaje angular. Por ejemplo, TypeScriptHost podrá diferenciar el registro de gravedad por métodos de registro, error y depuración. 

Además, las URL de plantilla y las URL de estilo que no apuntan a archivos reales ahora serán diagnosticadas como tales por Language Service.

En el futuro, la implementación del servicio de idiomas se puede mejorar aún más al enumerar las propiedades de la directiva y unificar la lógica común.

Mejoras en API Extractor

Angular depende de muchas bibliotecas de software que evolucionan por separado. Los usuarios angulares pueden perderse cuando se resuelven posibles errores y se implementan nuevas características en estas bibliotecas.

En respuesta, Angular 9 actualizará API Extractor a la versión más nueva. Angular utiliza Bazel, una herramienta de código abierto que permite la automatización de edificios y las pruebas de software. 

Bazel hace referencia a API Extractor, una herramienta invocada en tiempo de construcción por la cadena de herramientas Angular. Aprovecha el motor del compilador TypeScript para detectar la superficie API exportada del proyecto, produce un informe de contratos, señala exportaciones faltantes y visibilidad inconsistente, y genera documentación API.

Tal vez no sea la actualización más emocionante, pero en realidad son los detalles, como las mejoras regulares del Servicio de idiomas y el Extractor de API, lo que hace que un marco sea productivo y eficiente cuando codificamos aplicaciones.

El futuro de angular

Con Angular 9, la comunidad puede beneficiarse de aplicaciones más pequeñas y de alto rendimiento, y una mejor experiencia de desarrollador.

Los programadores ahora también tienen una sintaxis clara y una estructura clara del proyecto.

¿Qué cambios se incorporarán a Angular en el futuro?

El equipo de Angular ha indicado que no hay necesidad de cambios drásticos en la API. ¿Habrá más desaprobaciones y tal vez una forma alternativa de crear componentes?

Una experiencia de desarrollador mejorada siempre es algo que esperar. En el futuro, quizás pasaremos más tiempo desarrollando componentes y directivas y menos tiempo tratando de unirlos.

Entradas relacionadas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

7 − uno =