Recientemente, Angular lanzó una función independiente de desarrollo "experiencial" llamada Zone.js. Aunque la función sigue siendo experimental, el equipo de Angular lleva mucho tiempo trabajando en esta importante innovación. Las primitivas responsivas están cobrando cada vez más importancia para los desarrolladores, lo que indica que Angular está entrando en otra nueva era. Dependencias angularesLas ventajas de Signals y Rxjs son aún más evidentes, eliminando la necesidad de escuchar constantemente los cambios de los que Zone.js depende, y terminó actuando como intermediario durante el desarrollo.
Angular seguirá siendo un marco audaz y poderoso en el futuro y comenzará una nueva transformación.
En primer lugar, mi artículo no pretende enseñar nada a nadie. Espero que mis lectores no sientan que merecen ser tan pasivos. Intento compartir mis experiencias y aprendizajes tanto como puedo y abrir las conversaciones. Es importante debatir juntos, intercambiar ideas y evaluar basándose en el pensamiento crítico. No hay que olvidar que todavía existe cierta confusión sobre cómo funcionan exactamente, especialmente cuando las tecnologías discutidas en este artículo siguen en desarrollo, y diría que incluso el mecanismo de detección de cambios puede causar cierta confusión entre el equipo principal de Angular.
¿Qué es Zone.js y qué hace?
Zone.js es una pequeña biblioteca desarrollada por Brian Ford en 2010 bajo el nombre "Zones" para gestionar trabajo asíncrono en JavaScript. Inspirado en lenguajes como Erlang y Dart, pretende llevar una concurrencia estructurada al entorno monohilo de JavaScript. El equipo de Angular ganó impulso cuando adoptó Zonas como mecanismo de detección de cambios en Angular 2, y comenzó a contribuirlo en forma de Zone.js, proporcionando una mayor participación comunitaria y un mayor desarrollo. Hoy en día, aunque sigue estando estrechamente ligado a Angular, Zone.js puede considerarse una herramienta poderosa para monitorizar e intervenir en tareas asincrónicas, permitiendo el análisis de rendimiento, capacidades de manejo de errores y muchas funciones cuestionables.
¿Entonces por qué Angular abandonó Zone.js?
Aprovechando la capacidad de la IA para transformar sin esfuerzo nuestras imágenes imaginarias en dibujos, utilizamos la metáfora de "esponja bajo la cama" para crear una imagen que facilitara la comprensión.
Imagina la cama de la imagen de arriba, que no está colocada en el suelo, sino sobre una esponja grande. Zone.js es como una esponja en una aplicación Angular. Esta esponja asegura que la cama descanse sobre una base cómoda y de soporte, proporcionando un confort relativo al durmiente. La esponja absorbe cada movimiento de la cama, evitando que el movimiento dentro de la cama se refleje hacia el exterior.
Los parches de mono en Zone.js escuchan todas las APIs asíncronas del navegador, como: eventos, compromisos, observables, setTimeout, setInterval, etc.
Al escuchar estos, la aplicación Angular puede detectar cualquier cambio y así actualizar la interfaz de usuario, de hecho, igual que una cama de soporte esponja, Zone.js también permite que la aplicación Angular funcione sin problemas. En este caso, pueden surgir problemas de rendimiento que no sentimos en proyectos muy grandes.
Por otro lado, esta estructura compleja parece impedirnos percibir ciertos cambios específicos a lo largo del tiempo. Cada característica y desarrollo previo, junto con su propio desarrollo interno y necesidades cambiantes, de repente se convierte en un obstáculo para el siguiente y desarrollo.
Cuando sacamos la esponja de debajo de nosotros, vemos que comienza a emerger la libertad natural de movimiento cuando el lecho está en contacto directo con el suelo. Cuando el efecto limitante de comodidad de la esponja empieza a desgastarse, significa que el movimiento en la cama se reflejará directamente en el suelo.
Tal metáfora puede significar que la esponja proporciona una zona de confort y un sueño relativamente más cómodo. Zone.js como esta esponja, nos proporciona una zona de confort seria que nos permite sentir cada cambio en la superficie. Sin embargo, con el tiempo, esta estructura compleja puede impedirnos percibir algunos cambios específicos. El dolor lumbar puede aparecer cuando sacamos la esponja de debajo, y estos dolores indican que hemos pasado de suelo artificial a natural, y aunque esta experiencia de transición puede ser un poco dolorosa, en última instancia, con una zona lumbar recta, un sueño más cómodo y una mejor circulación, así como una agudeza física y mental más saludable. Cuando cambiamos a zonas sin zonas, es decir, dolor de espalda y articulaciones por dormir en una cama sin esponja, es una buena señal de que estamos cambiando de suelo artificial a natural. Aunque esta experiencia de transición es algo dolorosa, el dolor de transición también desaparece a medida que la parte baja de la espalda comienza a remodelarse a su estado natural anterior, proporcionando una mejor circulación; El ejemplo de transición aquí corresponde al experimental Zoneless que escuchamos en Angular v18.
Se piensa que Zone.js añade carga adicional porque rastrea las operaciones de asektron y las pasa a mecanismos de detección angular como llamadas, eventos, errores, etc. Hoy en día, en cuanto al rendimiento de Angular, no podemos ver ni sentir la carga extra aquí. Zone.js podrían desarrollarse más y resolver algunos problemas de depuración, pero la base aquí es la hoja de ruta de Angular. Vemos que los primitivos de reacción de Signals desarrollados internamente por Angular Zone.js ahora están entorpeciendo los planes futuros de Angular. Aunque la estructura de señales es muy útil en cuanto a mecanismos de detección y también buena en cuanto a rendimiento, fácil de usar y potente, Zone.js ya no es necesaria, pero no es una biblioteca que pueda abandonarse de la noche a la mañana.
Entendemos que Angular no quiere limitar sus sueños, sino construir una aplicación más flexible y fiable con un marco más autosuficiente, eliminando procesos intermedios tanto como sea posible. Vemos a Angular avanzar hacia un estado más práctico y tratar de aprovechar la oportunidad para volver a entrar en la tendencia alcista en el futuro. Desafortunadamente, según la encuesta actual de StateofJS, no podemos decir que esté en esa tendencia, pero también vemos que Angular está abierto a todas las posibles innovaciones.
¿Cómo cambio al modo Sin Zona en Angular 18?
Angular 18 viene con un paso que nos permite cambiar a modo sin zonas y deshacernos de la esponja. Como se muestra a continuación, ahora podemos ofrecer esta experiencia usando el mecanismo de detección de sin cambio de zona en la fase de arranque.
Con la función anterior añadida al proveedor, ahora podemos usar el comando npm uninstall zone.js para eliminar el zone.js definido en el array polyfills de abajo del angular.json.
¡Ahora podemos usar Angular Zoneless!
¿Cuáles son las ventajas de Zoneless?
Zoneless proporciona un ecosistema más ágil para nuestras aplicaciones al eliminar operaciones de escucha innecesarias. Esto significa renderizado más rápido, mayor rendimiento, cargas de página más rápidas, tamaños de empaque más pequeños y depuración más sencilla.
Haz una prueba clásica en la que añades un contador pulsando un botón y quieres aumentar ese número al pulsar el botón. En este caso, podemos ver que el valor cambiado se renderiza cuando se activa cada función, y este valor cambia en el HTML. Como ya es una función y la activamos directamente, se renderiza aquí. Pero, ¿qué ocurre si este valor cambia por influencias externas y queremos ver que algún valor cambie sin que tengamos que activarlo manualmente? Si hay un Zone.js, está constantemente atento a todos los cambios y notifica a Angular en nuestro nombre. Sin embargo, dado que actualmente no existe tal mecanismo, necesitamos activar el mecanismo de detección de cambios tras alguna operación asíncrona, o usar Signals o RxJS directamente, para que el cambio pueda detectarse directamente debido a esta reactividad.
La desaparición de Sponge nos enseña que no es solo Zone.js lo que desaparece, sino también la "zona de confort".
Si usamos Zone.js módulo con JavaScript en bruto, se verá así.
En Angular, no necesitamos lidiar con estas situaciones; Con ngZone, estas operaciones ya funcionan en conjunto con el mecanismo de detección.
Por ejemplo, en el caso de DOM directo, escuchadores de eventos, observables y compromisos, solicitudes HTTP y flujos de control síncronos, debemos activar manualmente el mecanismo de detección de cambios para operaciones asíncronas.
Dado que las señales o los R xjs detectan automáticamente cambios, no es necesario activar el mecanismo de detección de cambios.
Ejemplo de señal:
Ahora vamos a escribir una aplicación para probar los mecanismos de detección de cambios sin zona y angular y ver cómo funcionan.
Tras iniciar el intervalo definido anteriormente como estándar, vemos que empieza a funcionar, pero el DOM no se actualiza y los cambios no se reflejan. Cuando usamos el intervalo de inicio de señal, vemos que funciona sin activar el mecanismo de detección de cambios de Angular. Como puedes ver, cuando comienzan el evento de clic y el intervalo de señal, Angular detecta el cambio, captura inmediatamente el cambio en nuestro intervalo estándar y luego lo libera.
Cuando enviamos el valor de una variable al componente padre, vemos que se percibe de forma diferente tanto en el push como en el caso por defecto.
Cuando asignamos la entrada a la izquierda, el cambio se refleja cuando no hay área, y de forma similar, podemos ver que el cambio se refleja tras hacer clic debido a la promesa.
Aquí vemos que tras una llamada HTTP sin detectar cambios, los cambios no se reflejan, solo cuando los activamos manualmente. Por supuesto, Signals refleja fácilmente a los recién llegados a la pantalla deseada. Parte del código es el siguiente:
app.component.ts
change-detection-demo.component.ts
La app ya está publicada en Stacklibitz, y puedes consultar el resto de las pruebas. También puedes seguir los resultados en la interfaz mediante código.
Stackblitz:El inicio de sesión del hipervínculo es visible.
GitHub:El inicio de sesión del hipervínculo es visible.
También hay una aplicación de ejemplo abajo que muestra cómo funciona el mecanismo de detección de cambios de Angular, y puedes probarlo desde ahí también.
El inicio de sesión del hipervínculo es visible.
Aspectos a tener en cuenta al cambiar al modo sin región
Es importante señalar que, como su nombre indica, ExperimentalZonelessChangeDetection sigue siendo experimental.
Mientras hacíamos algunas pruebas, notamos algunas rarezas en el mecanismo de detección de cambios. Por ejemplo, cuando algunos cambios no se activan manualmente, no vemos cambios en el DOM y el estado no se actualiza. Sin embargo, cuando otra señal o variable de reacción funciona fuera del mecanismo de detección de cambios y provoca que el DOM se actualice, podemos observar que el estado previamente no actualizado también se actualiza.
Si quieres implementar esta función en un proyecto existente, deberías probar cuidadosamente todas las acciones y el comportamiento de la aplicación. En particular, las bibliotecas de terceros pueden depender de Zone.js, lo que puede provocar algunos errores y problemas de renderizado.
Texto original en:El inicio de sesión del hipervínculo es visible. |
Publicado el 30-12-2024 11:02:42
|
|
|
|
Propietario|
Publicado el 30-12-2024 11:04:13
|
