Nemrégiben az Angular kiadott egy önálló "tapasztalati" fejlesztési funkciót, Zone.js-t. Bár a funkció még kísérleti folyamatban van, az Angular csapata már régóta dolgozik ezen a fontos újításon. A reakcióképes primitívek egyre fontosabbá válnak a fejlesztők számára, ami azt jelzi, hogy az Angular egy újabb korszakba lép. SzögfüggőségekA Signals és Rxjs előnyei még kiemelkedőbbek, így nem kell folyamatosan figyelni a változásokra, amelyekre Zone.js támaszkodni, és végül közvetítőként működött a fejlesztés során.
Az Angular a jövőben továbbra is merész és erőteljes keretrendszer marad, és új átalakulást indít.
Először is, a cikkem nem arra szolgál, hogy bárkinek bármit is tanítson. Remélem, az olvasóim nem érzik úgy, hogy ennyire passzívak lenni. Igyekszem minél többet megosztani tapasztalataimat és tanulságaimat, és nyitott vagyok a beszélgetésekre. Fontos, hogy együtt beszéljünk, ötleteket cseréljünk, és kritikus gondolkodás alapján értékeljünk. Nem szabad elfelejteni, hogy még mindig van némi zavar abban, hogyan működnek pontosan, különösen, ha a cikkben tárgyalt technológiákat még mindig tapasztalják, és azt mondanám, hogy még a változásészlelő mechanizmus is okozhat némi zavart az Angular magcsapatában.
Mi az Zone.js, és mit csinál?
Zone.js egy kis könyvtár, amelyet Brian Ford fejlesztett ki 2010-ben "Zones" néven, hogy aszinkron JavaScript-ben dolgozzon munkát kezeljen. Az olyan nyelvek ihlették, mint az Erlang és a Dart, célja, hogy strukturált párhuzamot hozzon a JavaScript egyszálas környezetébe. Az Angular csapat lendületet nyert, amikor a Zónákat alkalmazta változásészlelő mechanizmusként az Angular 2-ben, és az Angular csapat Zone.js formájában kezdett hozzájárulni, szélesebb közösségi részvételt és további fejlesztést biztosítva. Ma is, bár továbbra is szorosan kapcsolódik az Angularhoz, Zone.js vitathatóan hatékony eszköznek tekinthető az aszinkron feladatok megfigyelésére és beavatkozására, lehetővé téve a teljesítményelemzést, hibakezelési képességeket és sok megkérdőjelezhető funkciót.
Akkor miért hagyta el az Angular Zone.js?
Az AI képességét kihasználva, hogy könnyedén alakítsa képzeletbeli képeinket rajzokká, a "szivacs az ágy alatt" metaforáját használtuk, hogy könnyen megérthető vizuális képet hozzunk létre.
Képzeld el a fenti képen látható ágyat, amely nem a padlón van, hanem egy nagy szivacsra. Zone.js olyan, mint egy szivacs egy Angular alkalmazásban. Ez a szivacs biztosítja, hogy az ágy kényelmes, támasztó alapon álljon, miközben viszonylagos kényelmet nyújt az alvónak. A szivacs minden mozgását elnyeli az ágyból, megakadályozva, hogy az ágy belsejében lévő mozgás visszaverődjön a külső oldalra.
A majomjavítások Zone.js minden aszinkron API-t meghallgatnak a böngészőben, például: események, elköteleződések, megfigyelhetők, setTimeout, setInterval stb.
Ezekre hallgatva az Angular alkalmazás képes észlelni bármilyen változást, és így frissíteni a felhasználói felületet, sőt, akárcsak egy szivacstartó ágy, Zone.js lehetővé teszi az Angular alkalmazás zökkenőmentes futtatását is. Ebben az esetben olyan teljesítményproblémák jelentkezhetnek, amelyeket nem tapasztalunk túl nagy projektekben.
Másrészt ez a bonyolult szerkezet úgy tűnik, megakadályozza, hogy bizonyos konkrét változásokat érzékeljünk az idő során. Minden korábbi jellemző és fejlődés, valamint a saját belső fejlődése és változó igényei hirtelen akadályt jelentenek a következőnek és a fejlődésnek.
Amikor kihúzzuk a szivacsot alólunkból, látjuk, hogy a természetes mozgásszabadság kezd megjelenni, ahogy az ágy közvetlen érintkezést ér a talajsal. Amikor a szivacs kényelmkorlátozó hatása elkezd kopni, az azt jelenti, hogy az ágyon lévő mozgás most közvetlenül a földön tükröződik.
Egy ilyen metafora azt jelentheti, hogy a szivacs komfortzónát biztosít, és viszonylag kényelmesebb alvást biztosít. Zone.js ehhez a szivacshoz hasonlóan komoly komfortzónát biztosít, amely lehetővé teszi, hogy érezzük minden változást a felszínen. Azonban idővel ez a bonyolult szerkezet megakadályozhatja, hogy bizonyos konkrét változásokat érzékeljünk. Az alsó hátfájás akkor jelentkezhet, amikor kihúzzuk a szivacsot alólunk, és ezek a fájdalmak, fájdalmak arra utalnak, hogy mesterséges talajról természetes talajra kerültünk le, és bár ez az átmeneti élmény kissé fájdalmas lehet, végső soron egyenes alsó hát, kényelmesebb alvással és jobb keringéssel, valamint egészségesebb testi és mentális élességgel jár. Amikor zónamentesre váltunk, azaz a hát- és ízületi fájdalom, amit szivacs nélküli ágyban alszunk, jó jel van annak, hogy mesterséges talajról természetes talajra váltunk. Bár ez az átmeneti élmény kissé fájdalmas, az átmeneti fájdalom is eltűnik, ahogy a derekünk elkezd átalakulni korábbi természetes állapotába, jobb keringést biztosítva; Az itt említett átmeneti példa megfelel az Angular v18-ban hallott kísérleti Zonelessnek.
Zone.js további terhelést jelent, mivel követi az asektron műveleteket, és továbbítja azokat Angular detektáló mechanizmusoknak, például hívásoknak, eseményeknek, hibáknak stb. Ma, az Angular teljesítményét illetően, nem is látjuk vagy érezzük a plusz terhelést. Zone.js tovább fejleszthető, és néhány hibakeresési problémát meg lehetne oldani, de az alap itt az Angular útiterve. Látjuk, hogy az Angular saját fejlesztésű, Signals reagáló primitív lényei Zone.js most már akadályozzák Angular jövőbeli terveit. Bár a jelek szerkezete nagyon hasznos az észlelési mechanizmusok szempontjából, teljesítmény szempontjából is jó, könnyen használható és hatékony, Zone.js már nem szükséges, de nem egy olyan könyvtár, amelyet egyik napról a másikra el lehet hagyni.
Tudjuk, hogy az Angular nem akarja korlátozni álmait, hanem inkább rugalmasabb és megbízhatóbb alkalmazást szeretne építeni egy önellátóbb keretrendszerrel, amennyire csak lehet, a köztes folyamatokat kizárva. Látjuk, hogy az Angular egy gyakorlatiabb állapot felé halad, és megpróbálja megragadni az alkalmat, hogy a jövőben ismét belépjen az emelkedő trendbe. Sajnos a jelenlegi StateofJS felmérés alapján nem mondhatjuk, hogy ilyen trendben lenne, de azt is látjuk, hogy az Angular nyitott minden lehetséges innovációra is.
Hogyan válthatok Zóna nélküli módra az Angular 18-ban?
Az Angular 18 egy lépéssel rendelkezik, amely lehetővé teszi, hogy zónamentes módra váltsunk és eltávolítsuk a szivacsot. Ahogy az alábbiakban látható, most már a bootstrap fázisban a zóna nélküli változásérzékelő mechanizmussal is biztosíthatjuk ezt az élményt.
A fenti funkció hozzáadásával a szolgáltatóhoz most már az npm eltávolítás zone.js parancs segítségével eltávolíthatjuk az alábbi polyfills tömbben meghatározott zone.js eltávolítását a angular.json-ről.
Most már használhatjuk az Angular Zoneless-t!
Mik a zóna nélküli előnyei?
A Zoneless egy egyszerűbb ökoszisztémát biztosít alkalmazásaink számára azáltal, hogy megszünteti a felesleges hallgatási műveleteket. Ez gyorsabb renderelést, nagyobb teljesítményt, gyorsabb oldalbetöltést, kisebb csomagméreteket és könnyebb hibakeresést jelent.
Vegyél egy klasszikus tesztet, ahol egy gomb megnyomásával hozzáadsz számlálót, és növelni akarod ezt a számot, amikor rákattintasz. Ebben az esetben láthatjuk, hogy a megváltozott érték akkor jelenik meg, amikor minden függvényt aktiválunk, és ez az érték a HTML-ben változik. Mivel ez már egy funkció, és közvetlenül aktiváljuk, itt renderel. De mi történik, ha ez az érték külső hatások miatt változik, és szeretnénk bármilyen értékváltozást anélkül, hogy manuálisan aktiválnánk? Ha van Zone.js, folyamatosan meghallgatja minden változást, és értesíti az Angulart a nevünkben. Azonban mivel jelenleg nincs ilyen mechanizmus, vagy aktiválni kell a változásérzékelő mechanizmust egy aszinkron művelet után, vagy közvetlenül a Signalokat vagy az RxJS-t kell használni, hogy a változás közvetlenül érzékelhető legyen a reakció miatt.
Sponge eltűnése megtanítja nekünk, hogy nemcsak Zone.js tűnik el, hanem a "komfortzóna" is.
Ha Zone.js-t modulként használjuk nyers JavaScript-szel, így néz ki.
Az Angularban nem kell ezekkel a helyzetekkel foglalkoznunk; A ngZone-nál ezek a műveletek már együttműködnek a detektáló mechanizmussal.
Például közvetlen DOM, eseményhallgatók, megfigyelhetők és elköteleződések, HTTP kérések és szinkron vezérlőáramlások esetén manuálisan kell aktiválnunk a változásészlelési mechanizmust aszinkron műveletekhez.
Mivel a Signals vagy az R xjs automatikusan észleli a változásokat, nincs szükség a változásérzékelő mechanizmus aktiválására.
Jel példa:
Most írjunk egy alkalmazást, amely tesztelje a zónamentes és szögletek változásfelismerő mechanizmusait, és megnézzük, hogyan működik.
Miután elindítjuk a fent definiált szabványos intervallumot, látjuk, hogy működésbe kezd, de a DOM nem frissül, és a változások nem tükröződnek. Amikor használjuk a jelkezdési intervallumot, látjuk, hogy az működik anélkül, hogy aktiválná az Angular változásérzékelő mechanizmusát. Ahogy látod, amikor a kattintás esemény és a jelintervallum elkezdődött, az Angular észreveszi a változást, azonnal rögzíti a változást a szokásos intervallumban, majd kiadja azt.
Amikor egy változóban az értéket a szülőkomponensnek küldjük, azt tapasztaljuk, hogy mind push, mind alapértelmezett esetben másként érzékeljük.
Amikor a bal oldali bemenetet kötjük, a változás akkor is visszatükröződik, ha nincs terület, és hasonlóan láthatjuk, hogy a változás a kattintás után is visszatükröződik az ígéret miatt.
Itt azt látjuk, hogy egy HTTP hívás után a változások észlelése nélkül a változások nem jelennek meg, csak akkor jelennek meg, ha manuálisan indítjuk el őket. Természetesen a Signals könnyen visszatükrözi az újoncokat a kívánt képernyőre. A kód egy része a következő:
app.component.ts
change-detection-demo.component.ts
Az alkalmazás megjelent a Stacklibitz-en, és megnézheted a többi tesztet. Kóddal is nyomon követheted az eredményeket a felhasználói felületen.
Stackblitz:A hiperlink bejelentkezés látható.
GitHub:A hiperlink bejelentkezés látható.
Az alábbi egy mintaalkalmazás is látható, amely bemutatja, hogyan működik az Angular változásérzékelő mechanizmusa, és onnan is kipróbálhatod.
A hiperlink bejelentkezés látható.
Fontos szempontok, amikor régiómentes módra váltunk
Fontos megjegyezni, hogy – ahogy a neve is mutatja, az ExperimentalZonelessChangeDetection még mindig kísérleti jellegű.
Tesztelés közben furcsaságokat vettünk észre a változásészlelő mechanizmusban. Például, ha egyes változtatásokat nem indítanak el kézzel, nem látunk változást a DOM-ban, és az állapot nem frissül. Azonban, amikor egy másik jel vagy reakcióváltozó a változásérzékelő mechanizmuson kívül működik, és a DOM frissítését okozza, megfigyelhetjük, hogy a korábban nem frissített állapot is frissül.
Ha ezt a funkciót egy meglévő projektben szeretnéd megvalósítani, alaposan teszteld az összes műveletet és alkalmazás viselkedését. Különösen a harmadik féltől származó könyvtárak támaszkodhatnak Zone.js-re, ami hibákhoz és renderelési problémákhoz vezethet.
Eredeti:A hiperlink bejelentkezés látható. |
Közzétéve: 2024-12-30 11:02:42
|
|
|
|
Háziúr|
Közzétéve: 2024-12-30 11:04:13
|
