Nedavno je Angular izdal neodvisno "izkustveno" razvojno funkcijo z imenom Zone.js. Čeprav je funkcija še vedno eksperimentalna, ekipa Angular že dolgo dela na tej pomembni inovaciji. Odzivni primitivi postajajo razvijalcem vse pomembnejši, kar kaže, da Angular vstopa v novo obdobje. Kotne odvisnostiPrednosti Signalov in Rxjs so še bolj izrazite, saj odpravijo potrebo po stalnem poslušanju sprememb, od katerih Zone.js odvisni, in je med razvojem delovala kot posrednik.
Angular bo še naprej drzen in močan okvir v prihodnosti ter začel novo preobrazbo.
Najprej, moj članek ni namenjen učenju nikogar ničesar. Upam, da moji bralci ne bodo čutili, da si zaslužijo biti tako pasivni. Poskušam čim več deliti svoje izkušnje in nauke ter se odpreti za razprave. Pomembno je, da se pogovarjamo skupaj, izmenjujemo ideje in ocenjujemo na podlagi kritičnega razmišljanja. Ne smemo pozabiti, da še vedno obstaja nekaj zmede glede tega, kako točno delujejo, še posebej, ker tehnologije, obravnavane v tem članku, še vedno prihajajo, in rekel bi, da lahko tudi mehanizem zaznavanja sprememb povzroči nekaj zmede med osrednjo ekipo v Angularju.
Kaj je Zone.js in kaj počne?
Zone.js je majhna knjižnica, ki jo je Brian Ford razvil leta 2010 pod imenom "Zones" za upravljanje asinhronega dela v JavaScriptu. Navdihnjena z jeziki, kot sta Erlang in Dart, si prizadeva uvesti strukturirano sočasnost v enonitno okolje JavaScripta. Ekipa Angular je pridobila zagon, ko je v Angular 2 sprejela Zones kot mehanizem za zaznavanje sprememb, ekipa pa je začela prispevati Zones v obliki Zone.js, kar je omogočilo širšo sodelovanje skupnosti in nadaljnji razvoj. Danes, čeprav je še vedno tesno povezan z Angularjem, Zone.js lahko štejemo za močno orodje za spremljanje in posredovanje v asinhronih nalogah, saj omogoča analizo zmogljivosti, upravljanje napak in številne vprašljive funkcije.
Zakaj je torej Angular opustil Zone.js?
Z uporabo sposobnosti umetne inteligence, da naše namišljene podobe brez napora spremeni v risbe, smo uporabili metaforo »goba pod posteljo« za ustvarjanje vizualnega elementa za lažje razumevanje.
Predstavljajte si posteljo na zgornji sliki, ki ni postavljena na tla, ampak na veliko gobico. Zone.js je kot goba v aplikaciji Angular. Ta goba zagotavlja, da postelja stoji na udobni, podporni podlagi in hkrati nudi relativno udobje za spalca. Goba absorbira vsak gib postelje in preprečuje, da bi gibanje znotraj postelje odsevalo navzven.
Monkey namesti Zone.js posluša vse asinhrone API-je v brskalniku, kot so: dogodki, zaveze, opazovalne datoteke, setTimeout, setInterval itd.
S poslušanjem teh lahko aplikacija Angular zazna vse spremembe in tako posodobi uporabniški vmesnik, pravzaprav podobno kot gobasto podporno posteljo, Zone.js omogoča tudi nemoteno delovanje aplikacije Angular. V tem primeru se lahko pojavijo težave z zmogljivostjo, ki jih ne občutimo pri zelo velikih projektih.
Po drugi strani pa se zdi, da ta kompleksna struktura preprečuje, da bi skozi čas zaznali določene specifične spremembe. Vsaka prejšnja značilnost in razvoj, skupaj z lastnim notranjim razvojem in spreminjajočimi se potrebami, nenadoma postane ovira za naslednjo in razvoj.
Ko izvlečemo gobico izpod sebe, vidimo, da se začne pojavlja naravna svoboda gibanja, saj je postelja v neposrednem stiku s tlemi. Ko se učinek omejevanja udobja gobe začne obrabljati, to pomeni, da se gibanje na postelji zdaj neposredno odbija od tal.
Takšna metafora lahko pomeni, da goba zagotavlja cono udobja in omogoča razmeroma bolj udoben spanec. Zone.js kot ta gobica nudi resno cono udobja, ki nam omogoča, da začutimo vsako spremembo na površini. Vendar pa nam ta kompleksna struktura sčasoma lahko prepreči, da bi zaznali nekatere specifične spremembe. Bolečine v spodnjem delu hrbta se lahko pojavijo, ko potegnemo gobico izpod sebe, in te bolečine in bolečine kažejo, da smo se spustili iz umetne v naravno podlago, in čeprav je ta prehodna izkušnja lahko nekoliko boleča, na koncu z ravnim spodnjim delom hrbta, bolj udobnim spanjem, boljšo cirkulacijo ter zdravo telesno in duševno ostrino. Ko preklopimo na brezconsko stanje, torej bolečine v hrbtu in sklepih zaradi spanja v postelji brez gobe, je dober znak, da prehajamo z umetne na naravno podlago. Čeprav je ta prehodna izkušnja nekoliko boleča, bolečina pri prehodu tudi izgine, ko se spodnji del hrbta začne oblikovati v prvotno naravno stanje, kar omogoča boljšo cirkulacijo; Primer prehoda tukaj ustreza eksperimentalnemu Zoneless, ki smo ga slišali v Angular v18.
Menijo, da Zone.js dodaja dodatno obremenitev, ker sledi asektronskim operacijam in jih posreduje Angular zaznavanim mehanizmom, kot so klici, dogodki, napake itd. Danes, kar zadeva zmogljivost Angularja, ne moremo videti ali celo občutiti dodatne obremenitve tukaj. Zone.js bi lahko še dodatno razvili in odpravili nekatere težave z odpravljanjem napak, a osnova tukaj je Angularjev načrt. Vidimo, da je Angularjeva lastna lastna podjetja razvila primitivne signale, ki reagirajo Zone.js zdaj ovirajo Angularjeve prihodnje načrte. Čeprav je struktura signalov zelo uporabna z vidika mehanizmov zaznavanja in tudi dobra glede zmogljivosti, enostavna za uporabo in zmogljiva, Zone.js ni več potrebna, vendar ni knjižnica, ki bi jo bilo mogoče zapustiti čez noč.
Zavedamo se, da Angular ne želi omejevati svojih sanj, temveč želi zgraditi bolj prilagodljivo in zanesljivo aplikacijo z bolj samozadostnim ogrodjem, tako da čim bolj odpravi vmesne procese. Vidimo, da se Angular premika v bolj praktično stanje in poskuša izkoristiti priložnost, da v prihodnosti ponovno vstopi v naraščajoči trend. Na žalost iz trenutne raziskave StateofJS ne moremo reči, da je v takšnem trendu, a hkrati vidimo, da je Angular odprt za vse možne inovacije.
Kako preklopim na način brez con v Angular 18?
Angular 18 ima korak, ki nam omogoča, da preklopimo v način brez con in se znebimo gobe. Kot je prikazano spodaj, lahko to izkušnjo zdaj zagotovimo z mehanizmom zaznavanja sprememb brez cone v fazi bootstrapa.
Z zgornjo funkcijo, dodano ponudniku, lahko zdaj uporabimo ukaz npm uninstall zone.js za odstranitev zone.js definiranega v spodnjem polju polipolnitev iz angular.json.
Zdaj lahko uporabimo Angular Zoneless!
Kakšne so prednosti Zoneless?
Zoneless zagotavlja bolj poenostavljen ekosistem za naše aplikacije, saj odpravlja nepotrebne poslušalne operacije. To pomeni hitrejše upodabljanje, višjo zmogljivost, hitrejše nalaganje strani, manjše pakete in lažje odpravljanje napak.
Naredite klasičen test, kjer števec dodate s klikom na gumb in želite povečati to številko, ko kliknete gumb. V tem primeru lahko vidimo, da se spremenjena vrednost prikaže, ko se sproži vsaka funkcija, in ta vrednost se spremeni v HTML-ju. Ker je to že funkcija in jo sprožimo neposredno, se upodablja tukaj. Kaj pa, če se ta vrednost spremeni zaradi zunanjih vplivov in želimo videti kakršnokoli spremembo vrednosti, ne da bi jo ročno sprožili? Če obstaja Zone.js, stalno posluša vse spremembe in v našem imenu obvešča Angular. Ker pa trenutno takšnega mehanizma ni, moramo bodisi sprožiti mehanizem zaznavanja sprememb po neki asinhroni operaciji ali pa uporabiti Signals ali RxJS neposredno, da je spremembo mogoče zaznati neposredno zaradi te reaktivnosti.
Spongejevo izginotje nas uči, da ne izgine le Zone.js, temveč tudi "cona udobja".
Če Zone.js uporabimo kot modul s surovim JavaScriptom, bo videti takole.
V Angularju se s takšnimi situacijami ni treba ukvarjati; Z ngZone te operacije že delujejo skupaj z mehanizmom zaznavanja.
Na primer, v primeru neposrednega DOM, dogodkovnih poslušalcev, opazovalk in zavez, HTTP zahtevkov in sinhronih krmilnih tokov moramo ročno sprožiti mehanizem zaznavanja sprememb za asinhrone operacije.
Ker signali ali R xjs samodejno zaznavajo spremembe, ni potrebe po sprožitvi mehanizma zaznavanja sprememb.
Primer signala:
Zdaj napišimo aplikacijo za testiranje mehanizmov zaznavanja sprememb Zoneless in Angular ter poglejmo, kako delujejo.
Po začetku intervala, definiranega zgoraj kot standardnega, vidimo, da začne delovati, vendar se DOM ne osveži in spremembe se ne odražajo. Ko uporabimo interval začetka signala, vidimo, da deluje brez sprožitve mehanizma zaznavanja sprememb v Angularju. Kot lahko vidite, ko se začneta dogodek klika in interval signala, Angular opazi spremembo, takoj zajame spremembo v našem standardnem intervalu in jo nato sprosti.
Ko pošljemo vrednost v spremenljivki nadrejeni komponenti, ugotovimo, da je zaznana drugače tako v push kot v privzetih primerih.
Ko vežemo vhod na levi, se sprememba odzove, ko ni območja, in podobno lahko vidimo, da se sprememba odzvati po kliku zaradi obljube.
Tukaj vidimo, da po HTTP klicu brez zaznavanja sprememb spremembe spremembe niso odražene, temveč le, ko jih ročno sprožimo. Seveda Signals zlahka odstrani novince na želeni zaslon. Nekateri deli kodeksa so naslednji:
app.component.ts
change-detection-demo.component.ts
Aplikacija je bila objavljena na Stacklibitz, ostale teste pa si lahko ogledate. Rezultate lahko spremljaš tudi v uporabniškem vmesniku preko kode.
Stackblitz:Prijava do hiperpovezave je vidna.
GitHub:Prijava do hiperpovezave je vidna.
Spodaj je tudi vzorčna aplikacija, ki prikazuje, kako deluje Angularjev mehanizem zaznavanja sprememb, in jo lahko preizkusite tudi tam.
Prijava do hiperpovezave je vidna.
Stvari, na katere je treba biti pozoren pri prehodu na način brez regij
Pomembno je poudariti, da je, kot že ime pove, ExperimentalZonelessChangeDetection še vedno eksperimentalen.
Med testiranjem smo opazili nekaj nenavadnosti v mehanizmu zaznavanja sprememb. Na primer, ko nekatere spremembe niso sprožene ročno, v DOM ne vidimo nobenih sprememb in stanje se ne osveži. Vendar pa, ko druga signalna ali reakcijska spremenljivka deluje zunaj mehanizma zaznavanja sprememb in povzroči osvežitev DOM, lahko opazimo, da se osveži tudi prej neosveženo stanje.
Če želite to funkcijo implementirati v obstoječem projektu, morate natančno testirati vse akcije in vedenje aplikacije. Zlasti knjižnice tretjih oseb se lahko zanašajo na Zone.js, kar lahko vodi do nekaterih napak in težav pri upodabljanju.
Izvirno:Prijava do hiperpovezave je vidna. |
Objavljeno 30. 12. 2024 ob 11:02:42
|
|
|
|
Najemodajalec|
Objavljeno 30. 12. 2024 ob 11:04:13
|
