Nedávno Angular vydal nezávislú "zážitkovú" vývojovú funkciu s názvom Zone.js. Hoci je funkcia stále experimentálna, tím Angular na tejto dôležitej inovácii pracuje už dlhý čas. Responzívne primitíva sú pre vývojárov čoraz dôležitejšie, čo naznačuje, že Angular vstupuje do ďalšej novej éry. Uhlové závislostiVýhody Signals a Rxjs sú ešte výraznejšie, čím sa eliminuje potreba neustále počúvať zmeny, na ktoré Zone.js závisieť, a nakoniec pôsobila ako sprostredkovateľ počas vývoja.
Angular bude aj naďalej odvážnym a silným rámcom v budúcnosti a začne novú transformáciu.
V prvom rade, môj článok nemá za cieľ nikoho nič naučiť. Dúfam, že moji čitatelia nebudú mať pocit, že si zaslúžia byť takí pasívni. Snažím sa čo najviac zdieľať svoje skúsenosti a poznatky a otvárať sa diskusiám. Je dôležité diskutovať spolu, vymieňať si nápady a hodnotiť na základe kritického myslenia. Netreba zabúdať, že stále panuje istý zmätok ohľadom toho, ako presne fungujú, najmä keď technológie diskutované v tomto článku sa stále používajú, a povedal by som, že aj mechanizmus detekcie zmien môže stále spôsobovať zmätok medzi jadrovým tímom v Angulare.
Čo je Zone.js a čo robí?
Zone.js je malá knižnica vyvinutá Brianom Fordom v roku 2010 pod názvom "Zones" na správu asynchrónnej práce v JavaScripte. Inšpirovaný jazykmi ako Erlang a Dart si kladie za cieľ priniesť štruktúrovanú súbežnosť do jednovláknového prostredia JavaScriptu. Tím Angular získal na sile, keď prijal Zones ako mechanizmus detekcie zmien v Angular 2, a tím Angular začal prispievať týmto systémom vo forme Zone.js, čím poskytol širšiu účasť komunity a ďalší rozvoj. Dnes, hoci je stále úzko spätý s Angularom, možno Zone.js považovať za výkonný nástroj na monitorovanie a zasahovanie do asynchrónnych úloh, ktorý umožňuje analýzu výkonu, schopnosti riešiť chyby a mnohé sporné funkcie.
Tak prečo Zone.js Angular opustil?
Využívajúc schopnosť AI bez námahy premeniť naše imaginárne obrázky na kresby, použili sme metaforu "špongia pod posteľou" na vytvorenie vizuálu pre jednoduché pochopenie.
Predstavte si posteľ na obrázku vyššie, ktorá nie je položená na podlahe, ale na veľkej špongii. Zone.js je ako špongia v aplikácii Angular. Táto hubka zabezpečuje, že posteľ stojí na pohodlnom, podpornom podklade a zároveň poskytuje relatívne pohodlie pre spáča. Špongia absorbuje každý pohyb postele, čím zabraňuje pohybu vo vnútri postele, aby sa odrážal von.
Monkey patchuje Zone.js počúva všetky asynchrónne API v prehliadači, ako sú: udalosti, záväzky, observables, setTimeout, setInterval a podobne.
Počúvaním týchto informácií dokáže aplikácia Angular detekovať akékoľvek zmeny a tým aktualizovať používateľské rozhranie, v skutočnosti, podobne ako podložka s hubou, Zone.js zároveň umožňuje plynulý chod aplikácie Angular. V takom prípade sa môžu vyskytnúť problémy s výkonom, ktoré pri veľkých projektoch necítime.
Na druhej strane, táto zložitá štruktúra nám akoby bránila vnímať určité konkrétne zmeny v priebehu času. Každá predchádzajúca charakteristika a vývoj, spolu s vlastným vnútorným vývojom a meniacimi sa potrebami, sa náhle stávajú prekážkou pre ďalší a rozvoj.
Keď vytiahneme hubku spod seba, vidíme, že prirodzená sloboda pohybu začína vznikať, keď je posteľ priamo v kontakte so zemou. Keď sa začne opotrebovávanie obmedzujúceho komfortu špongie, znamená to, že pohyb na posteli sa odráža priamo na zemi.
Takáto metafora môže znamenať, že hubka poskytuje komfortnú zónu a relatívne pohodlnejší spánok. Zone.js podobne ako táto špongia poskytuje vážnu komfortnú zónu, ktorá nám umožňuje cítiť každú zmenu na povrchu. Avšak časom nám táto zložitá štruktúra môže zabrániť vnímať niektoré konkrétne zmeny. Bolesť dolnej časti chrbta môže nastať, keď si vytiahneme špongiu spod seba, a tieto bolesti a nepríjemnosti naznačujú, že sme zostúpili z umelého na prírodný základ, a hoci tento prechod môže byť trochu bolestivý, nakoniec s rovným dolným chrbtom, pohodlnejším spánkom, lepším cirkuláciou, ako aj zdravšou fyzickou a mentálnou bystrosťou. Keď prechádzame na zóny bez zón, teda bolesti chrbta a kĺbov zo spánku v posteli bez špongie, je to dobrý znak, že prechádzame z umelého na prírodný základ. Hoci je tento prechod trochu bolestivý, bolesť pri prechode tiež zmizne, keď sa naša spodná časť chrbta začne formovať do pôvodného prirodzeného stavu, čím sa zlepšuje cirkulácia; Príklad prechodu tu zodpovedá experimentálnemu Zoneless, ktorý sme počuli v Angular v18.
Zone.js sa predpokladá, že pridáva dodatočné zaťaženie, pretože sleduje operácie asektronu a odovzdáva ich mechanizmom detekcie Angular, ako sú volania, udalosti, chyby a podobne. Dnes, čo sa týka výkonu Angularu, nevidíme ani necítime dodatočnú záťaž. Zone.js by sa dalo ďalej rozvíjať a niektoré problémy s ladením by sa dali vyriešiť, ale základom je Angularova roadmapa. Vidíme, že Angular vyvinul vlastné primitívne zariadenia reagujúce na signály, Zone.js teraz prekážajú Angularovým budúcim plánom. Hoci je štruktúra signálov veľmi užitočná z hľadiska detekčných mechanizmov a tiež dobrá z hľadiska výkonu, jednoduchá na používanie a výkonná, už Zone.js nie je potrebná, no nie je to knižnica, ktorú by bolo možné zo dňa na deň opustiť.
Chápeme, že Angular nechce obmedzovať svoje sny, ale chce vybudovať flexibilnejšiu a spoľahlivejšiu aplikáciu s sebestačnejším rámcom tým, že čo najviac odstráni medziprocesy. Vidíme, že Angular smeruje k praktickejšiemu stavu a snaží sa využiť príležitosť opäť vstúpiť do vzostupného trendu v budúcnosti. Bohužiaľ, podľa aktuálneho prieskumu StateofJS nemôžeme povedať, že by to bolo v takomto trende, ale zároveň vidíme, že Angular je otvorený všetkým možným inováciám.
Ako prepnem do režimu Zoneless v Angular 18?
Angular 18 obsahuje krok, ktorý nám umožňuje prepnúť do režimu bez zón a zbaviť sa špongie. Ako je uvedené nižšie, túto skúsenosť teraz môžeme poskytnúť pomocou mechanizmu detekcie zmien bez zóny v bootstrap fáze.
S pridaním vyššie uvedenej funkcie do poskytovateľa môžeme teraz použiť príkaz npm uninstall zone.js na odstránenie zone.js definovaného v poli polyfillov nižšie z angular.json.
Teraz môžeme použiť Angular Zoneless!
Aké sú výhody Zoneless?
Zoneless poskytuje pre naše aplikácie efektívnejší ekosystém tým, že eliminuje zbytočné operácie počúvania. To znamená rýchlejšie vykresľovanie, vyšší výkon, rýchlejšie načítanie stránok, menšie veľkosti balíkov a jednoduchšie ladenie.
Urobte klasický test, kde pridáte počítadlo kliknutím na tlačidlo a chcete zvýšiť toto číslo stlačením tlačidla. V tomto prípade vidíme, že zmenená hodnota sa zobrazí, keď sa spustí každá funkcia, a táto hodnota sa mení v HTML. Pretože je to už funkcia a spúšťame ju priamo, renderuje sa tu. Ale čo sa stane, ak sa táto hodnota zmení v dôsledku vonkajších vplyvov a my chceme vidieť akúkoľvek zmenu hodnoty bez toho, aby sme ju manuálne spustili? Ak existuje Zone.js, neustále počúva všetky zmeny a upozorňuje Angular v našom mene. Keďže však momentálne takýto mechanizmus neexistuje, musíme buď spustiť mechanizmus detekcie zmien po nejakej asynchrónnej operácii, alebo použiť priamo Signals či RxJS, aby sa zmena dala detekovať priamo vďaka tejto reaktivite.
Zmiznutie Sponge nás učí, že nezmizne len Zone.js, ale aj "komfortná zóna".
Ak Zone.js použijeme ako modul so surovým JavaScriptom, bude to vyzerať takto.
V Angulari sa s týmito situáciami nemusíme zaoberať; S ngZone tieto operácie už fungujú v tandeme s detekčným mechanizmom.
Napríklad v prípade priameho DOM, eventových poslucháčov, pozorovateľov a záväzkov, HTTP požiadaviek a synchronných riadiacich tokov musíme manuálne spustiť mechanizmus detekcie zmien pre asynchrónne operácie.
Keďže Signals alebo R xjs automaticky detegujú zmeny, nie je potrebné spúšťať mechanizmus detekcie zmien.
Príklad signálu:
Teraz napíšme aplikáciu na testovanie mechanizmov detekcie zmien Zoneless a Angular a uvidíme, ako to funguje.
Po spustení vyššie definovaného intervalu ako štandardného vidíme, že začne fungovať, ale DOM sa neobnoví a zmeny sa neprejavia. Keď použijeme interval začiatku signálu, vidíme, že funguje bez spúšťania mechanizmu detekcie zmien v Angulare. Ako vidíte, keď začnú klik a signálny interval, Angular si všimne zmenu, okamžite ju zachytí v našom štandardnom intervale a potom ju uvoľní.
Keď odošleme hodnotu v premennej rodičovskej komponente, zistíme, že je vnímaná odlišne v oboch prípadoch, push aj predvolených.
Keď priradíme vstup naľavo, zmena sa odrazí, keď nie je žiadna oblasť, a podobne vidíme, že zmena sa odrazí po kliknutí vďaka sľubu.
Tu vidíme, že po HTTP volaní bez detekcie zmien sa zmeny neprejavia, iba keď ich spustíme manuálne. Samozrejme, Signals ľahko odráža nováčikov na požadovanú obrazovku. Niektoré časti kódu sú nasledovné:
app.component.ts
change-detection-demo.component.ts
Aplikácia bola zverejnená na Stacklibitz a môžete si pozrieť zvyšok testov. Výsledky môžete tiež sledovať v používateľskom rozhraní cez kód.
Stackblitz:Prihlásenie na hypertextový odkaz je viditeľné.
GitHub:Prihlásenie na hypertextový odkaz je viditeľné.
Nižšie je tiež ukážková aplikácia, ktorá ukazuje, ako funguje mechanizmus detekcie zmien v Angulare, a môžete si ju tiež vyskúšať.
Prihlásenie na hypertextový odkaz je viditeľné.
Veci, ktoré treba zvážiť pri prechode na režim bez regiónu
Je dôležité poznamenať, že, ako už názov napovedá, ExperimentalZonelessChangeDetection je stále experimentálny.
Pri testovaní sme si všimli niektoré zvláštnosti v mechanizme detekcie zmien. Napríklad, keď niektoré zmeny nie sú spustené manuálne, nevidíme žiadne zmeny v DOM a stav sa neobnoví. Avšak keď iný signál alebo reakčná premenná funguje mimo mechanizmu detekcie zmien a spôsobí obnovenie DOM, môžeme pozorovať, že aj predtým neobnovený stav je obnovený.
Ak chcete túto funkciu implementovať v existujúcom projekte, mali by ste starostlivo otestovať všetky akcie a správanie aplikácie. Najmä knižnice tretích strán sa môžu spoliehať na Zone.js, čo môže viesť k chybám a problémom s vykresľovaním.
Originál:Prihlásenie na hypertextový odkaz je viditeľné. |
Zverejnené 30. 12. 2024 o 11:02:42
|
|
|
|
Prenajímateľ|
Zverejnené 30.12.2024 11:04:13
|
