Нещодавно 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 Zone.js тепер заважають майбутнім планам Angular. Хоча структура Signals дуже корисна з точки зору механізмів виявлення, а також хороша з точки зору продуктивності, простою у використанні та потужною, Zone.js вже не є необхідністю, але це не бібліотека, яку можна покинути миттєво.
Ми розуміємо, що Angular не прагне обмежувати свої мрії, а прагне створити більш гнучкий і надійний додаток із більш самодостатньою структурою, максимально усунувши проміжні процеси. Ми бачимо, як Angular рухається до більш практичного стану і намагається скористатися можливістю знову увійти в висхідний тренд у майбутньому. На жаль, згідно з поточним опитуванням StateofJS, ми не можемо сказати, що це така тенденція, але ми також бачимо, що Angular відкритий до всіх можливих інновацій.
Як переключитися на беззонний режим у Angular 18?
Angular 18 має крок, який дозволяє перейти в режим без зон і позбутися губки. Як показано нижче, тепер ми можемо надати цей досвід, використовуючи механізм виявлення зміни без зони на етапі bootstrap.
Додавши цю функцію до провайдера, ми тепер можемо використати команду 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-запитів і синхронних керуючих потоків, ми повинні вручну активувати механізм виявлення змін для асинхронних операцій.
Оскільки Signals або 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
|
