Недавно Angular выпустила независимую «опытную» функцию разработки под названием Zone.js. Хотя функция всё ещё экспериментальна, команда Angular работает над этой важной инновацией уже долгое время. Адаптивные примитивы становятся всё более важными для разработчиков, что говорит о том, что Angular вступает в новую эру. Угловые зависимостиПреимущества Signals и Rxjs ещё более заметны, устраняя необходимость постоянно слушать изменения, от которых Zone.js зависеть, и в итоге выступал в роли посредника во время разработки.
Angular продолжит оставаться смелой и мощной структурой в будущем и начнёт новую трансформацию.
Прежде всего, моя статья не предназначена для того, чтобы никого чему-то научить. Надеюсь, мои читатели не чувствуют, что заслуживают быть такими пассивными. Я стараюсь делиться своим опытом и знаниями как можно чаще, и открыто вступать в обсуждения. Важно обсуждать вместе, обмениваться идеями и оценивать на основе критического мышления. Не стоит забывать, что до сих пор существует некоторая путаница относительно того, как именно они работают, особенно учитывая, что технологии, обсуждаемые в этой статье, всё ещё переживаются, и я бы сказал, что даже механизм обнаружения изменений может вызывать некоторую путаницу среди основной команды Angular.
Что такое Zone.js и что оно делает?
Zone.js — это небольшая библиотека, разработанная Брайаном Фордом в 2010 году под названием «Zones» для управления асинхронной работой на JavaScript. Вдохновлённый такими языками, как Erlang и Dart, он стремится привнести структурированную параллельность в однопоточную среду JavaScript. Команда Angular набрала обороты, когда приняла Zones в качестве механизма обнаружения изменений в Angular 2, а команда Angular начала вносить его в виде Zone.js, обеспечивая более широкое участие сообщества и дальнейшее развитие. Сегодня, несмотря на тесную связь с Angular, Zone.js можно считать мощным инструментом для мониторинга и вмешательства в асинхронные задачи, позволяющий анализировать производительность, управлять ошибками и выполнять многие сомнительные функции.
Так почему же Angular покинул Zone.js?
Используя способность искусственного интеллекта легко превращать наши воображаемые изображения в рисунки, мы использовали метафору «губки под кроватью», чтобы создать визуальный образ для простого понимания.
Представьте себе кровать на изображении выше, которая лежит не на полу, а на большой губке. Zone.js как губка в Angular. Эта губка обеспечивает комфортное и поддерживающее основание кровати, обеспечивая относительный комфорт спящему. Губка впитывает каждое движение кровати, не позволяя движению внутри кровати отражаться наружу.
Патчи Monkey в Zone.js прослушиваются все асинхронные API браузера, такие как: события, обязательства, наблюдаемые, setTimeout, setInterval и др.
Слушая их, приложение Angular может обнаруживать любые изменения и, таким образом, обновлять пользовательский интерфейс, фактически, как губчатая опорная платформа, Zone.js позволяет приложению Angular работать плавно. В этом случае могут возникать проблемы с производительностью, которых мы не ощущаем в очень крупных проектах.
С другой стороны, эта сложная структура, кажется, мешает нам воспринимать определённые конкретные изменения со временем. Каждая предыдущая характеристика и развитие, вместе с внутренним развитием и изменяющимися потребностями, внезапно становятся препятствием для следующей и развития.
Когда мы вытаскиваем губку из-под себя, мы видим, что естественная свобода движения начинает проявляться, когда кровать находится в прямом контакте с землёй. Когда эффект губки, ограничивающий комфорт, начинает изнашиваться, движение на кровати отражается прямо на земле.
Такая метафора может означать, что губка обеспечивает зону комфорта и относительно более комфортный сон. Zone.js, как эта губка, она создаёт серьёзную зону комфорта, позволяющую нам ощущать каждое изменение на поверхности. Однако со временем эта сложная структура может мешать нам заметить некоторые конкретные изменения. Боль в пояснице может возникать, когда мы вытаскиваем губку из-под себя, и эти боли и недомогания свидетельствуют о том, что мы перешли с искусственного на естественное место, и хотя этот переход может быть немного болезненным, в конечном итоге с прямой поясницей, более комфортным сном, лучшим кровообращением, а также более здоровой физической и умственной остротой. Когда мы переходим на беззонную зону, то есть боль в спине и суставах из-за сна в кровати без губки, это хороший знак того, что мы переходим с искусственного на естественное заземление. Хотя этот переходный процесс немного болезненный, боль при переходе также исчезает, когда нижняя часть спины начинает возвращаться к прежнему естественному состоянию, обеспечивая улучшение кровообращения; Пример перехода здесь соответствует экспериментальному Zoneless, который мы слышали в Angular v18.
Считается, что Zone.js добавляет дополнительную нагрузку, так как отслеживает операции асектора и передаёт их в угловые механизмы обнаружения, такие как вызовы, события, ошибки и т.д. Сегодня, если говорить о производительности Angular, мы не видим и даже не чувствуем дополнительной нагрузки. Zone.js можно было бы развить дальше и решить некоторые проблемы с отладкой, но основой здесь лежит дорожная карта Angular. Мы видим, что собственные Angular, реагирующие на примитивы Angular, Zone.js теперь мешают будущим планам Angular. Хотя структура Signals очень полезна с точки зрения механизмов обнаружения, а также хороша по производительности, простая в использовании и мощная, Zone.js больше не нужен, но это не библиотека, которую можно бросить за одну ночь.
Мы понимаем, что Angular не хочет ограничивать свои мечты, а стремится создать более гибкое и надёжное приложение с более самодостаточной структурой, максимально исключая промежуточные процессы. Мы видим, что Angular движется к более практичному состоянию и пытается воспользоваться возможностью вновь войти в восходящий тренд в будущем. К сожалению, согласно текущему опросу StateofJS, мы не можем сказать, что это такая тенденция, но мы также видим, что Angular открыт для всех возможных инноваций.
Как переключиться на беззонный режим в Angular 18?
В Angular 18 есть шаг, позволяющий переключиться на режим без зон и избавиться от губки. Как показано ниже, теперь мы можем предоставить этот опыт, используя механизм обнаружения изменений без зоны на этапе загрузки.
С добавленной вышеуказанной функцией в провайдер теперь мы можем использовать команду npm deinstall zone.js, чтобы удалить zone.js, определённый в массиве полифиллов ниже, из angular.json.
Теперь мы можем использовать Angular Zoneless!
Каковы преимущества Zoneless?
Zoneless обеспечивает более упрощённую экосистему для наших приложений, устраняя ненужные операции прослушивания. Это означает более быстрый рендеринг, более высокую производительность, более быстрые загрузки страниц, меньший размер пакетов и более простую отладку.
Пройдите классический тест, где вы добавляете счётчик нажатием кнопки и хотите увеличить это число при нажатии кнопки. В этом случае мы видим, что изменённое значение отображается при запуске каждой функции, и оно меняется в HTML. Поскольку это уже функция, и мы запускаем её напрямую, она отображается здесь. Но что произойдёт, если это значение изменится из-за внешних факторов, и мы захотим увидеть изменение значения без ручного запуска? Если есть Zone.js, он постоянно слушает все изменения и уведомляет Angular от нашего имени. Однако, поскольку сейчас такого механизма нет, нам нужно либо активировать механизм обнаружения изменений после некоторой асинхронной работы, либо использовать Signals или RxJS напрямую, чтобы изменение можно было напрямую обнаружить из-за этой реактивности.
Исчезновение Губки учит нас, что исчезает не только Zone.js, но и «зона комфорта».
Если использовать Zone.js как модуль с исходным JavaScript, он будет выглядеть так.
В Angular нам не нужно иметь дело с такими ситуациями; С ngZone эти операции уже работают в тандеме с механизмом обнаружения.
Например, в случае прямого DOM, слушателей событий, наблюдаемых и обязательств, HTTP-запросов и синхронных управляющих потоков необходимо вручную активировать механизм обнаружения изменений для асинхронных операций.
Поскольку сигналы или R xjs автоматически обнаруживают изменения, нет необходимости запускать механизм обнаружения изменений.
Пример сигнала:
Теперь давайте напишем приложение для тестирования механизмов обнаружения изменений без зоны и угла и посмотрим, как это работает.
После запуска определённого выше интервала как стандартного мы видим, что он начинает работать, но DOM не обновляется, и изменения не отражаются. Когда мы используем интервал запуска сигнала, мы видим, что он работает без активации механизма обнаружения изменений в Angular. Как видите, когда начинается событие клика и интервал сигнала, Angular замечает изменения, сразу фиксирует изменение в нашем стандартном интервале и затем выпускает его.
Когда мы отправляем значение переменной родительскому компоненту, мы видим, что оно воспринимается по-разному как в push, так и в дефолтном случаях.
Когда мы привязываем вход слева, изменение отражается, когда область отсутствует, и аналогично, мы видим, что изменение отражается после клика из-за обещания.
Здесь мы видим, что после HTTP-вызова без обнаружения изменений изменения не отражаются, а только при ручном триггере. Конечно, Signals легко отражает новичков на нужном экране. Часть кода следующая:
app.component.ts
change-detection-demo.component.ts
Приложение опубликовано на Stacklibitz, и вы можете ознакомиться с остальными тестами. Также можно отслеживать результаты в интерфейсе с помощью кода.
Stackblitz:Вход по гиперссылке виден.
GitHub:Вход по гиперссылке виден.
Ниже также есть пример приложения, показывающее, как работает механизм обнаружения изменений в Angular, и вы можете попробовать его там.
Вход по гиперссылке виден.
На что стоит обратить внимание при переходе в режим без регионального доступа
Важно отметить, что, как следует из названия, ExperimentalZonelessChangeDetection всё ещё является экспериментальным.
Во время тестирования мы заметили некоторые странности в механизме обнаружения изменений. Например, когда некоторые изменения не запускаются вручную, в DOM изменений нет, и состояние не обновляется. Однако когда другой сигнал или переменная реакции работает вне механизма обнаружения изменений и вызывает обновление DOM, можно наблюдать, что ранее не обновлявшееся состояние также обновляется.
Если вы хотите реализовать эту функцию в существующем проекте, тщательно протестируйте все действия и поведение приложения. В частности, сторонние библиотеки могут полагаться на Zone.js, что может привести к ошибкам и проблемам с рендерингом.
Исходный текст:Вход по гиперссылке виден. |
Опубликовано 2024-12-30 11:02:42
|
|
|
|
Хозяин|
Опубликовано 2024-12-30 11:04:13
|
