Наскоро 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 е като гъба в ъглово приложение. Тази гъба гарантира, че леглото стои на удобна и поддържаща основа, като същевременно осигурява относителен комфорт на спящия. Гъбата абсорбира всяко движение на леглото, предотвратявайки движението вътре в леглото да се отразява навън.
Маймунски пачове в 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 е отворен за всички възможни иновации.
Как да превключа в режим Zoneless в 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 заявки и синхронни контролни потоци, трябва ръчно да задействаме механизма за откриване на промени за асинхронни операции.
Тъй като сигналите или R xjs автоматично откриват промени, няма нужда да се задейства механизмът за откриване на промени.
Пример за сигнал:
Сега нека напишем приложение, което да тества механизмите за разпознаване на промени без зона и ъглов и да видим как работи.
След като започнем дефинирания по-горе интервал като стандартен, виждаме, че започва да работи, но DOM не се обновява и промените не се отразяват. Когато използваме интервала за начало на сигнала, виждаме, че той работи без да задейства механизма за откриване на промени в Angular. Както виждате, когато започва събитието клик и интервалът на сигнала, Angular забелязва промяната, веднага я улавя в стандартния интервал и след това я освобождава.
Когато изпратим стойността в променлива към родителския компонент, откриваме, че тя се възприема различно както в push, така и в default случаи.
Когато обвържем входа отляво, промяната се отразява, когато няма зона, и по подобен начин виждаме, че промяната се отразява след кликване поради обещанието.
Тук виждаме, че след 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
|
