Nyligen släppte Angular en oberoende "upplevelsebaserad" utvecklingsfunktion kallad Zone.js. Även om funktionen fortfarande är experimentell har Angular-teamet arbetat med denna viktiga innovation under lång tid. Responsiva primitiva enheter blir allt viktigare för utvecklare, vilket tyder på att Angular går in i en ny era. VinkelberoendenFördelarna med Signals och Rxjs är ännu mer framträdande, då behovet av att ständigt lyssna efter förändringar som Zone.js är beroende av elimineras, och slutade fungera som mellanhand under utvecklingen.
Angular kommer att fortsätta vara en djärv och kraftfull ram i framtiden och starta en ny omvandling.
För det första är min artikel inte avsedd att lära någon något. Jag hoppas att mina läsare inte känner att de förtjänar att vara så passiva. Jag försöker dela med mig av mina erfarenheter och lärdomar så mycket som möjligt och öppna upp för diskussioner. Det är viktigt att diskutera tillsammans, utbyta idéer och utvärdera utifrån kritiskt tänkande. Det bör inte glömmas att det fortfarande råder viss förvirring kring hur de exakt fungerar, särskilt när teknologierna som diskuteras i denna artikel fortfarande upplevs, och jag skulle säga att även förändringsdetekteringsmekanismen kan orsaka viss förvirring bland kärnteamet i Angular.
Vad är Zone.js och vad gör det?
Zone.js är ett litet bibliotek utvecklat av Brian Ford 2010 under namnet "Zones" för att hantera asynkront arbete i JavaScript. Inspirerad av språk som Erlang och Dart syftar det till att införa strukturerad samtidighet i JavaScripts enkeltrådade miljö. Angular-teamet fick fart när de antog Zones som sin förändringsdetekteringsmekanism i Angular 2, och Angular-teamet började bidra med detta i form av Zone.js, vilket gav bredare samhällsdeltagande och vidare utveckling. Idag, även om det fortfarande är starkt kopplat till Angular, kan Zone.js anses vara ett kraftfullt verktyg för övervakning och ingripande i asynkrona uppgifter, vilket möjliggör prestandaanalys, felhantering och många tveksamma funktioner.
Så varför övergav Angular Zone.js?
Genom att utnyttja AI:s förmåga att utan ansträngning förvandla våra imaginära bilder till teckningar, använde vi metaforen "svamp under sängen" för att skapa en visuell bild för enkel förståelse.
Föreställ dig sängen på bilden ovan, som inte är placerad på golvet utan på en stor svamp. Zone.js är som en svamp i en Angular-applikation. Denna svamp säkerställer att sängen står på en bekväm, stödjande grund samtidigt som den ger relativ komfort för den som sover. Svampen absorberar varje rörelse i sängen och förhindrar att rörelsen inuti sängen reflekteras utåt.
Monkey-patchar Zone.js lyssna på alla asynkrona API:er i webbläsaren, såsom: events, commitments, observables, setTimeout, setInterval, etc.
Genom att lyssna på dessa kan Angular-applikationen upptäcka eventuella ändringar och därmed uppdatera användargränssnittet, faktiskt, precis som en svampstödsbädd, Zone.js också tillåter Angular-applikationen att köra smidigt. I detta fall kan prestandaproblem som vi inte känner av i mycket stora projekt uppstå.
Å andra sidan verkar denna komplexa struktur hindra oss från att uppfatta vissa specifika förändringar över tid. Varje tidigare egenskap och utveckling, tillsammans med sin egen inre utveckling och förändrade behov, blir plötsligt ett hinder för nästa och utveckling.
När vi drar svampen under oss ser vi att naturlig rörelsefrihet börjar komma fram när bädden är i direkt kontakt med marken. När svampens komfortbegränsande effekt börjar slitas ut betyder det att rörelsen på sängen nu reflekteras direkt i golvet.
En sådan metafor kan betyda att svampen ger en komfortzon och en relativt bekvämare sömn. Zone.js som denna svamp ger den en seriös komfortzon som låter oss känna varje förändring över ytan. Men med tiden kan denna komplexa struktur hindra oss från att uppfatta vissa specifika förändringar. Smärta i nedre delen av ryggen kan uppstå när vi drar svampen under oss, och dessa värk och värk tyder på att vi har gått från konstgjord till naturlig mark, och även om denna övergång kan vara lite smärtsam, så är det i slutändan med rak ländrygg, bekvämare sömn och bättre cirkulation samt hälsosammare fysisk och mental skärpa. När vi byter till zonfri, alltså rygg- och ledvärk från att sova i en säng utan svamp, är det ett gott tecken på att vi byter från konstgjord till naturlig mark. Även om denna övergångsupplevelse är lite smärtsam, försvinner också övergångssmärtan när vår nedre rygg börjar omformas till sitt tidigare naturliga tillstånd, vilket ger bättre cirkulation; Övergångsexemplet här motsvarar det experimentella Zoneless vi hörde i Angular v18.
Zone.js tros lägga till extra belastning eftersom den spårar asektronoperationer och vidarebefordrar dem till vinkeldetekteringsmekanismer såsom anrop, händelser, fel med mera. Idag, när det gäller Angulars prestation, kan vi varken se eller känna av den extra belastningen här. Zone.js skulle kunna utvecklas vidare och vissa felsökningsproblem skulle kunna lösas, men grunden här är Angulars färdplan. Vi ser att Angulars egna internt utvecklade Signal-reagerande primitiva Zone.js nu står i vägen för Angulars framtidsplaner. Även om Signals struktur är mycket användbar när det gäller detektionsmekanismer och också bra prestandamässigt, lätt att använda och kraftfull, är Zone.js inte längre nödvändig, men det är inte ett bibliotek som kan överges över en natt.
Vi förstår att Angular inte vill begränsa sina drömmar, utan snarare vill bygga en mer flexibel och pålitlig applikation med en mer självförsörjande ram genom att eliminera mellanliggande processer så mycket som möjligt. Vi ser Angular röra sig mot ett mer praktiskt tillstånd och försöka ta tillfället i akt att återigen gå in i upptrenden i framtiden. Tyvärr kan vi enligt den nuvarande StateofJS-undersökningen inte säga att det är i en sådan trend, men vi ser också att Angular är öppet för alla möjliga innovationer.
Hur byter jag till Zoneless-läge i Angular 18?
Angular 18 kommer med ett steg som låter oss byta till zonfritt läge och bli av med svampen. Som visas nedan kan vi nu erbjuda denna upplevelse med hjälp av no-zone change-detekteringsmekanismen i bootstrap-fasen.
Med funktionen ovan tillagd i leverantören kan vi nu använda kommandot npm avinstallera zone.js för att ta bort zone.js definierade i polyfills-arrayen nedan från angular.json.
Nu kan vi använda Angular Zoneless!
Vilka är fördelarna med Zoneless?
Zoneless ger ett mer strömlinjeformat ekosystem för våra applikationer genom att eliminera onödiga lyssningsoperationer. Detta innebär snabbare rendering, högre prestanda, snabbare sidinläsningar, mindre paketstorlekar och enklare felsökning.
Gör ett klassiskt test där du lägger till en räknare genom att klicka på en knapp och du vill öka det antalet när du klickar på knappen. I detta fall kan vi se att det ändrade värdet renderas när varje funktion triggas, och detta värde ändras i HTML:en. Eftersom det redan är en funktion och vi triggar den direkt, renderas den här. Men vad händer om detta värde ändras på grund av yttre påverkan och vi vill se någon värdeförändring utan att vi triggar det manuellt? Om det finns en Zone.js lyssnar den ständigt efter alla förändringar och meddelar Angular å våra vägnar. Men eftersom det inte finns någon sådan mekanism just nu behöver vi antingen trigga förändringsdetekteringsmekanismen efter någon asynkron operation, eller använda Signals eller RxJS direkt, så att förändringen kan detekteras direkt på grund av denna reaktivitet.
Sponges försvinnande lär oss att det inte bara är Zone.js som försvinner, utan också "komfortzonen".
Om vi använder Zone.js som en modul med rå JavaScript kommer det att se ut så här.
I Angular behöver vi inte hantera dessa situationer; Med ngZone fungerar dessa operationer redan tillsammans med detektionsmekanismen.
Till exempel, i fallet med direkt DOM, händelselyssnare, observabler och commitments, HTTP-förfrågningar och synkrona kontrollflöden, måste vi manuellt trigga förändringsdetekteringsmekanismen för asynkrona operationer.
Eftersom signaler eller R xjs automatiskt upptäcker förändringar finns det inget behov av att aktivera förändringsdetekteringsmekanismen.
Signalexempel:
Nu ska vi skriva en applikation för att testa mekanismerna för zonlös och vinkelmässig förändringsdetektering och se hur det fungerar.
Efter att ha startat intervallet som definierats ovan som standard ser vi att det börjar fungera, men DOM:en uppdateras inte och förändringarna återspeglas inte. När vi använder signalstartintervallet ser vi att det fungerar utan att utlösa Angulars förändringsdetekteringsmekanism. Som du kan se, när klickhändelsen och signalintervallet börjar, märker Angular förändringen, fångar omedelbart förändringen i vårt standardintervall och släpper sedan ut den.
När vi skickar värdet i en variabel till moderkomponenten upptäcker vi att det uppfattas olika i både push- och standardfall.
När vi binder inmatningen till vänster reflekteras ändringen när det inte finns något område, och på liknande sätt kan vi se att ändringen speglas efter klick på grund av löftet.
Här ser vi att efter ett HTTP-anrop utan att upptäcka förändringar reflekteras inte ändringarna, endast när vi triggar dem manuellt. Självklart reflekterar signaler enkelt nykomlingar till önskad skärm. En del av koden är följande:
app.component.ts
change-detection-demo.component.ts
Appen har publicerats på Stacklibitz, och du kan kolla in resten av testerna. Du kan också följa resultat i gränssnittet via kod.
Stackblitz:Inloggningen med hyperlänken är synlig.
GitHub:Inloggningen med hyperlänken är synlig.
Det finns också ett exempel på applikation nedan som visar hur Angulars förändringsdetekteringsmekanism fungerar, och du kan prova det därifrån också.
Inloggningen med hyperlänken är synlig.
Saker att tänka på när du byter till regionsfritt läge
Det är viktigt att notera att, som namnet antyder, är ExperimentalZonelessChangeDetection fortfarande experimentellt.
När vi gjorde några tester märkte vi några konstigheter i förändringsdetekteringsmekanismen. Till exempel, när vissa ändringar inte triggas manuellt, ser vi inga förändringar i DOM och tillståndet uppdateras inte. Men när en annan signal eller reaktionsvariabel fungerar utanför förändringsdetekteringsmekanismen och orsakar att DOM uppdateras, kan vi se att det tidigare ouppdaterade tillståndet också uppdateras.
Om du vill implementera denna funktion i ett befintligt projekt bör du noggrant testa alla åtgärder och applikationsbeteenden. Särskilt kan tredjepartsbibliotek förlita sig på Zone.js, vilket kan leda till vissa fel och renderingsproblem.
Original:Inloggningen med hyperlänken är synlig. |
Publicerad den 2024-12-30 11:02:42
|
|
|
|
Hyresvärd|
Publicerad den 2024-12-30 11:04:13
|
