Nylig lanserte Angular en uavhengig «opplevelsesbasert» utviklingsfunksjon kalt Zone.js. Selv om funksjonen fortsatt er eksperimentell, har Angular-teamet jobbet med denne viktige innovasjonen i lang tid. Responsive primitiver blir stadig viktigere for utviklere, noe som indikerer at Angular går inn i en ny æra. VinkelavhengigheterFordelene med Signals og Rxjs er enda mer fremtredende, og eliminerer behovet for å stadig lytte etter endringer som Zone.js avhenger av, og endte opp med å fungere som mellommann under utviklingen.
Angular vil fortsette å være et dristig og kraftfullt rammeverk i fremtiden og starte en ny transformasjon.
Først og fremst er ikke artikkelen min ment å lære noen noe. Jeg håper ikke leserne mine føler at de fortjener å være så passive. Jeg prøver å dele mine erfaringer og lærdommer så mye som mulig og åpne meg for diskusjoner. Det er viktig å diskutere sammen, utveksle ideer og evaluere basert på kritisk tenkning. Det må ikke glemmes at det fortsatt er noe forvirring om hvordan de egentlig fungerer, spesielt når teknologiene som diskuteres i denne artikkelen fortsatt er i bruk, og jeg vil si at selv endringsdeteksjonsmekanismen fortsatt kan skape forvirring blant kjerneteamet i Angular.
Hva er Zone.js og hva gjør det?
Zone.js er et lite bibliotek utviklet av Brian Ford i 2010 under navnet "Zones" for å håndtere asynkront arbeid i JavaScript. Inspirert av språk som Erlang og Dart, har det som mål å bringe strukturert samtidighet til JavaScripts enkelttrådede miljø. Angular-teamet fikk fart da det tok i bruk soner som sin endringsdeteksjonsmekanisme i Angular 2, og Angular-teamet begynte å bidra med dette i form av Zone.js, som ga bredere fellesskapsdeltakelse og videre utvikling. I dag, selv om det fortsatt er tett knyttet til Angular, kan Zone.js utvilsomt betraktes som et kraftig verktøy for overvåking og inngripen i asynkrone oppgaver, som muliggjør ytelsesanalyse, feilhåndtering og mange tvilsomme funksjoner.
Så hvorfor forlot Angular Zone.js?
Ved å utnytte AIs evne til lett å forvandle våre imaginære bilder til tegninger, brukte vi metaforen «svamp under sengen» for å lage et visuelt bilde for enkel forståelse.
Tenk deg sengen på bildet over, som ikke er plassert på gulvet, men på en stor svamp. Zone.js er som en svamp i en Angular-applikasjon. Denne svampen sørger for at sengen står på en komfortabel, støttende base samtidig som den gir relativ komfort til den som sover. Svampen absorberer hver bevegelse i sengen, og forhindrer at bevegelsen inne i sengen reflekteres utover.
Monkey-patcher i Zone.js lytte til alle asynkrone API-er i nettleseren, som: events, commitments, observables, setTimeout, setInterval, osv.
Ved å lytte til disse kan Angular-applikasjonen oppdage eventuelle endringer og dermed oppdatere brukergrensesnittet; faktisk, akkurat som en svampstøtte, gjør Zone.js også at Angular-applikasjonen kan kjøre jevnt. I dette tilfellet kan ytelsesproblemer oppstå som vi ikke opplever i svært store prosjekter.
På den annen side ser denne komplekse strukturen ut til å hindre oss i å oppfatte visse spesifikke endringer over tid. Hver tidligere egenskap og utvikling, sammen med sin egen indre utvikling og skiftende behov, blir plutselig en hindring for den neste og utviklingen.
Når vi trekker svampen ut under oss, ser vi at naturlig bevegelsesfrihet begynner å komme frem når sengen er i direkte kontakt med bakken. Når den komfortbegrensende effekten av svampen begynner å slites, betyr det at bevegelse på sengen nå reflekteres direkte på gulvet.
En slik metafor kan bety at svampen gir en komfortsone og en relativt mer behagelig søvn. Zone.js som denne svampen, gir den en seriøs komfortsone som lar oss kjenne hver endring på overflaten. Men over tid kan denne komplekse strukturen hindre oss i å oppfatte noen spesifikke endringer. Korsryggsmerter kan oppstå når vi trekker svampen ut under oss, og disse smertene tyder på at vi har gått fra kunstig til naturlig grunn, og selv om denne overgangen kan være litt smertefull, med en rett korsrygg, mer behagelig søvn og bedre sirkulasjon, samt sunnere fysisk og mental skarphet. Når vi går over til sonefri, altså rygg- og leddsmerter fra å sove i seng uten svamp, er det et godt tegn på at vi bytter fra kunstig til naturlig jord. Selv om denne overgangsopplevelsen er litt smertefull, forsvinner også overgangssmerten når korsryggen begynner å omforme seg til sin tidligere naturlige tilstand, noe som gir bedre sirkulasjon; Overgangseksempelet her tilsvarer det eksperimentelle Zoneless vi hørte i Angular v18.
Zone.js antas å legge til ekstra belastning fordi den sporer asektronoperasjoner og sender dem videre til vinkeldeteksjonsmekanismer som kall, hendelser, feil osv. I dag, når det gjelder Angulars ytelse, kan vi verken se eller engang føle den ekstra belastningen her. Zone.js kan utvikles videre og noen feilsøkingsproblemer kan løses, men grunnlaget her er Angulars veikart. Vi ser at Angulars egne internt utviklede Signal-reagerende primitive Zone.js nå kommer i veien for Angulars fremtidsplaner. Selv om Signals-strukturen er svært nyttig når det gjelder deteksjonsmekanismer og også god når det gjelder ytelse, enkel å bruke og kraftig, er Zone.js ikke lenger nødvendig, men det er ikke et bibliotek som kan forlates over natten.
Vi forstår at Angular ikke ønsker å begrense drømmene sine, men heller vil bygge en mer fleksibel og pålitelig applikasjon med et mer selvforsynt rammeverk ved å eliminere mellomliggende prosesser så mye som mulig. Vi ser Angular bevege seg mot en mer praktisk tilstand og forsøke å gripe muligheten til å gå inn i opptrenden igjen i fremtiden. Dessverre, ut fra den nåværende StateofJS-undersøkelsen, kan vi ikke si at det er i en slik trend, men vi ser også at Angular er åpen for alle mulige innovasjoner.
Hvordan bytter jeg til Zoneless-modus i Angular 18?
Angular 18 kommer med et trinn som lar oss bytte til sonefri modus og bli kvitt svampen. Som vist nedenfor, kan vi nå gi denne opplevelsen ved hjelp av no-zone change-deteksjonsmekanismen i bootstrap-fasen.
Med funksjonen ovenfor lagt til i leverandøren, kan vi nå bruke kommandoen npm uninstall zone.js for å fjerne zone.js definert i polyfills-arrayet nedenfor fra angular.json.
Nå kan vi bruke Angular Zoneless!
Hva er fordelene med Zoneless?
Zoneless gir et mer strømlinjeformet økosystem for våre applikasjoner ved å eliminere unødvendige lytteoperasjoner. Dette betyr raskere rendering, høyere ytelse, raskere sidelasting, mindre pakkestørrelser og enklere feilsøking.
Ta en klassisk test hvor du legger til en teller ved å klikke på en knapp, og du vil øke det tallet når du trykker på knappen. I dette tilfellet kan vi se at den endrede verdien gjengis når hver funksjon utløses, og denne verdien endres i HTML-en. Fordi det allerede er en funksjon og vi utløser den direkte, blir den gjengitt her. Men hva skjer hvis denne verdien endres på grunn av ytre påvirkninger, og vi ønsker å se noen verdiendring uten at vi utløser det manuelt? Hvis det finnes en Zone.js, lytter den kontinuerlig etter alle endringer og varsler Angular på våre vegne. Men siden det ikke finnes en slik mekanisme akkurat nå, må vi enten utløse endringsdeteksjonsmekanismen etter en asynkron operasjon, eller bruke Signals eller RxJS direkte, slik at endringen kan oppdages direkte på grunn av denne reaktiviteten.
Sponges forsvinning lærer oss at det ikke bare er Zone.js som forsvinner, det er også «komfortsonen».
Hvis vi bruker Zone.js som en modul med rå JavaScript, vil det se slik ut.
I Angular trenger vi ikke å forholde oss til disse situasjonene; Med ngZone fungerer disse operasjonene allerede sammen med deteksjonsmekanismen.
For eksempel, i tilfelle direkte DOM, hendelseslyttere, observabler og forpliktelser, HTTP-forespørsler og synkrone kontrollflyter, må vi manuelt utløse endringsdeteksjonsmekanismen for asynkrone operasjoner.
Siden Signals eller R xjs automatisk oppdager endringer, er det ikke nødvendig å utløse endringsdeteksjonsmekanismen.
Signaleksempel:
La oss nå skrive en applikasjon for å teste Zoneless- og Angular endringsdeteksjonsmekanismene og se hvordan det fungerer.
Etter å ha startet intervallet definert ovenfor som standard, ser vi at det begynner å fungere, men DOM-en blir ikke oppdatert og endringene reflekteres ikke. Når vi bruker signalstartintervallet, ser vi at det fungerer uten å utløse Angulars endringsdeteksjonsmekanisme. Som du kan se, når klikkhendelsen og signalintervallet begynner, legger Angular merke til endringen, fanger umiddelbart opp endringen i vårt standardintervall, og slipper den deretter fri.
Når vi sender verdien i en variabel til foreldrekomponenten, finner vi at den oppfattes forskjellig både i push- og standardtilfeller.
Når vi binder inngangen til venstre, reflekteres endringen når det ikke er noe areal, og på samme måte kan vi se at endringen reflekteres etter å ha klikket på grunn av løftet.
Her ser vi at etter et HTTP-kall uten å oppdage endringer, reflekteres ikke endringene, bare når vi utløser dem manuelt. Selvfølgelig reflekterer signaler lett nykommere til ønsket skjerm. Noe av koden er som følger:
app.component.ts
change-detection-demo.component.ts
Appen er publisert på Stacklibitz, og du kan sjekke ut resten av testene. Du kan også spore resultater i brukergrensesnittet gjennom kode.
Stackblitz:Innloggingen med hyperkoblingen er synlig.
GitHub:Innloggingen med hyperkoblingen er synlig.
Det finnes også et eksempel på en applikasjon nedenfor som viser hvordan Angulars endringsdeteksjonsmekanisme fungerer, og du kan prøve den derfra også.
Innloggingen med hyperkoblingen er synlig.
Ting å tenke på når du bytter til regionsfri modus
Det er viktig å merke seg at, som navnet antyder, er ExperimentalZonelessChangeDetection fortsatt eksperimentell.
Under noen tester la vi merke til noen merkeligheter i endringsdeteksjonsmekanismen. For eksempel, når noen endringer ikke utløses manuelt, ser vi ingen endringer i DOM og tilstanden oppdateres ikke. Men når et annet signal eller en reaksjonsvariabel fungerer utenfor endringsdeteksjonsmekanismen og får DOM-en til å oppdateres, kan vi observere at den tidligere uoppdaterte tilstanden også blir oppdatert.
Hvis du ønsker å implementere denne funksjonen i et eksisterende prosjekt, bør du nøye teste alle handlinger og applikasjonsatferd. Spesielt kan tredjepartsbiblioteker være avhengige av Zone.js, noe som kan føre til noen feil og renderingsproblemer.
Original:Innloggingen med hyperkoblingen er synlig. |
Publisert 30.12.2024 11:02:42
|
|
|
|
Vert|
Publisert 30.12.2024 11:04:13
|
