Angular CLI, se ha convertido en uno de los frontend frameworks más productivos empresarialmente hablando, debido a su amplia documentación y apoyo de la comunidad.
Desde Angular 2, este framework ha tenido un avance progresivo y continuo, posicionándose como uno de los frameworks más importantes en los últimos años. Pero ¿qué beneficios proporciona Angular?
¿Qué beneficios aporta Angular?
Angular aporta muchos beneficios. En esta sección nos centramos en los que, para nosotros, son los más importantes:
- Utiliza TypeScript como base, con las ventajas que esto conlleva. Por un lado, la unificación en los patrones de desarrollo, añadiendo mayor coherencia a la información y a la forma de leer el código. Por otro lado, esta consistencia en la unión ayuda a eliminar la sobrecarga, y las dudas derivadas de empezar con un nuevo framework.
- Estandarizado de Componentes Web, permitiendo crear nuevas etiquetas HTML personalizadas, reutilizables y autocontenidas, que posteriormente pueden ser utilizadas en otras aplicaciones web.
Angular 8: la transición hacia una gran modernización
Angular 8 es una actualización de paso para el gran cambio: Angular 9. En este punto intermedio podemos beneficiarnos de Angular en todo su esplendor, poseyendo un núcleo estable y nuevas características que añaden mejoras a la experiencia de usuario:
- Lazy Loading, o lo que es lo mismo, retrasar la carga o inicialización de un objeto hasta el mismo momento de su utilización. Aunque este patrón es muy usado, Angular nos facilita su uso implementándolo en su núcleo, proporcionando un ahorro de precarga de objetos y mejorando la fluidez tanto para el usuario como para el desarrollador.
- Diferential loading: uno de los mayores cambios en Angular, y una razón de peso por la que migrar un proyecto. Esta característica permite compilar dos paquetes –bundles– a la vez, de manera que en función del navegador que estemos utilizando, se hará uso de un paquete o de otro. Esta característica es un punto a favor en desarrollo que necesitan mantener la compatibilidad entre navegadores antiguos y modernos (es decir, ES5 y ES6 respectivamente), beneficiándonos de una reducción en el peso de los paquetes de entre un 7% y un 20%.
- Web Workers: ¡por fin tenemos minions dentro del núcleo para hacernos el trabajo! 😃 A partir de la versión 8, Angular da soporte de Web Workers, lo que nos permite crear tareas en segundo plano dentro del navegador.
Para los desarrolladores también encontramos una seria de ventajas que mejoran nuestras implementaciones, como pueden ser:
- Nuevas funcionalidades en el routing.
- Mejoras en las dependencias.
- Por fin se renueva la librería HTTP, dándole la bienvenida a HTTPClient.
- Ya no es necesario crear el Browserlist y establecer su ruta, ahora viene configurado por defecto.
Pero el gran cambio viene con IVY, el nuevo motor de renderizado que se ha implementado en posteriores versiones del framework – Angular 9-, y responsable de que se hayan aplicado ciertas mejoras en Angular 8. ¿Cuáles tendrémos disponibles en esta versión?
- Un DOM incremental como estructura principal. Se basa en la creación de un árbol con las instrucciones ya compiladas de cada componente, formando una red o ramas DOM. Con esta nueva estructura, se reduce el tiempo de actualización del DOM, ya que no hace falta contruir el árbol completo, solo crear la rama afectada.
- Tree «shakable»: Método que sacude las ramas del arbol DOM, ignorando las instrucciones que no se van a utilizar en ese momento, disminuyendo el peso de los paquetes y reduciendo el tiempo de carga.
- Load Memory Footprint: Método de carga inteligente que ayuda en el ahorro de memoria de renderizado cuando el árbol DOM no ha cambiado. Ocurre al actualizar un componente sin grandes cambios en su árbol DOM, produciendose una sacudida que ignora gran parte de las ramas del árbol DOM, siendo éstas utilizadas de nuevo sin gastar memoria para su creación. Con Angular 8 nos beneficiamos de las mejoras más importantes que el framework implementa en versiones posteriores, pero manteniendo la estabilidad que proporciona Angular 7. ¿Te animas a migrar tu proyecto?
Cómo migrar un proyecto de Angular 7 a Angular 8
La migración es muy sencilla, y para realizarla necesitamos realizar los siguientes pasos antes de migrar:
- Sustituimos la librería HTTP por la librería HTTP Client.
- Actualizamos a RxJS6.
- Actualizamos Node a la versión 10 o poterior y TypesCript a la versión 3.4.
- Reemplazamos /deep/ por ::ng-deep, mucho más eficiente y atractivo para nuestro código CSS.
Terminados estos pasos, simplemente debemos actualizar el Core y el CLI de nuestro proyecto Angular a la versión 8:
ng update @angular/cli @angular/core
Si Angular nos avisa de que tenemos cambios sin subir al repositorio, podemos lanzar la siguiente sentencia para ponerle remedio:
ng update @angular/core --from 7 –to 8 –migrate-only –allow-dirty
¡Y listo! Ya disponemos de nuestro proyecto Angular actualizado a la versión 8 🎉
