Чи уявляєш ти собі спосіб, як твої додатки на Angular можуть працювати набагато ефективніше, ніж ти очікуєш? Як ти сам можеш контролювати події у своєму додатку та забезпечити найкращий досвід для своїх користувачів? Більше того, як контролювати ці події значно ефективніше, надаючи неперевершену швидкість? Сьогодні твій щасливий день, бо ти дізнаєшся, що таке zoneless додаток і як це може покращити досвід користувачів.
Що таке Zoneless? 🤔
Історично додатки, створені на Angular, працюють з асинхронним обробником подій за замовчуванням, який називається zone.js. Ця бібліотека, яка була доопрацьована і входить в основний пакет Angular (і яку планують видалити в майбутньому), відповідає за створення контексту виконання, який зберігається через асинхронні задачі. Її можна вважати локальним сховищем потоків для віртуальних машин JavaScript.
В кількох словах: цей обробник подій дозволяє нам глобально управляти асинхронними подіями нашого додатку.
Отже… що ми досягнемо, якщо видалимо zone.js?
Ми отримаємо дивовижну можливість повністю контролювати наші асинхронні події… але, варто бути обережним, адже якщо з цим не бути обачним, це може стати справжньою головною болем.
Час настав! Приступаємо до справи 👷🏻
Перше, що ми зробимо — створимо та ініціалізуємо наш додаток на Angular з нуля, чи то на версії 18, чи 19. Після того, як додаток буде запущено, відкриємо файл app.config.ts:
app.config.ts
І змінемо provideZoneChangeDetection на:
app.config.ts
Усе це робимо для того, щоб змінити стандартне виявлення змін у додатку на експериментальну методику без зон (zoneless).
Далі ми видалимо zone.js з нашого polyfill в файлі angular.json:
angular.json
Після цього додаток буде готовий для кодування без використання zone.js. Як порада: будьте обережні, редагуючи polyfill, і обов’язково виконайте пошук по цьому файлу, щоб видалити всі відповідні рядки один за одним. Якщо ваш додаток працює, вимкніть його і знову запустіть.
Para poder volver a asegurar de que no tienen el zone activo lo pueden comprobar en su navegador con la aplicación corriendo el siguiente comando en la consola:
Si ya no esta activo, colocándomelas la palabra zone, les debería salir ese tipo de error ✅.
A continuación voy a mostrar un ejemplo práctico y sencillo de como se puede usar zoneless, pueden hacer dicho ejemplo en cualquier archivo de su proyecto ya que es un ejemplo rápido.
¡A tirar código se dijo! ⌨️
Nos vamos a ubicar en nuestro html o template y vamos a colocar esto:
template html
En este ejemplo vamos a usar un contador que se va ir actualizando con el tiempo usándo un setInterval, de primera mostraré como está hecho el código en el componente (muy sencillo) sin usar zoneless:
component ts
Como pueden observar solo creámos una variable llamada tick y la inicializamos en 0, después en el ngOnInit inicializamos el setInterval para que comience a contar:
🚨Esto en teoría si tienen el zoneless ya activo no debería funcionar, pero si quieren pueden sacar una rama para probar tanto la parte zoneless como la normal.
Siguiendo con el ejercicio vamos ahora con zoneless:
- Usando markForCheck:
component ts
Injectando el changeDetectorRed podemos hacer saber al sistema cuando dichos cambios suceden o deberían actualizarse.
Pero… ¿Qué es el ChangeDetectorRef?
El ChangeDetectorRef es una clase en Angular que proporciona herramientas para interactuar directamente con el sistema de detección de cambios (Change Detection). Es especialmente útil cuando trabajas en un entorno “zoneless” (sin Zone.js), donde Angular no puede realizar automáticamente la detección de cambios.
- Usando Signals:
En nuestro componente vamos a convertir la variable anteriormente creada en un signal y la vamos a actualizar dentro del setInterval:
component ts
Después de dicha actualización en el componente ts nos faltaría modificarlo en nuestro template de la siguiente manera:
template html
Como pueden ver, solo se le agrego unos paréntesis al tick y:
De nuevo esta funcionando perfectamente pero… ¿qué es un signal?:
Los signals son una nueva característica introducida para gestionar estados reactivos de una forma más sencilla y eficiente. Los signals están inspirados en la reactividad utilizada en frameworks como SolidJS, pero adaptados al ecosistema de Angular.
¿Y cuáles son los pros y los contra?
PROS:
• Rendimiento mejorado: Reducción de ciclos de detección de cambios innecesarios.
• Más control: los desarrolladores controlan cuándo debe actualizarse la interfaz de usuario.
• Depuración más sencilla: es más fácil rastrear cuándo y por qué se produce una actualización de la interfaz de usuario.
CONTRAS:
• Más texto repetitivo: los desarrolladores deben gestionar explícitamente la detección de cambios.
• Potencial de errores: olvidarse de activar la detección de cambios podría provocar estados de interfaz de usuario obsoletos o inconsistentes.
• Curva de aprendizaje: Requiere una comprensión sólida del sistema de detección de cambios de Angular.
Перекладено з: Zoneless: la maravilla de manejar eventos generales a tu ritmo en Angular.