Onlangs heeft Angular een onafhankelijke "ervaringsgebaseerde" ontwikkelfunctie uitgebracht genaamd Zone.js. Hoewel de functie nog experimenteel is, werkt het Angular-team al lange tijd aan deze belangrijke innovatie. Responsieve primitieven worden steeds belangrijker voor ontwikkelaars, wat aangeeft dat Angular een nieuw tijdperk ingaan. HoekafhankelijkhedenDe voordelen van Signals en Rxjs zijn nog duidelijker, omdat het niet nodig is om constant te luisteren naar veranderingen waar Zone.js van afhankelijk zijn geëlimineerd, en fungeerde als tussenpersoon tijdens de ontwikkeling.
Angular zal in de toekomst een gedurfd en krachtig kader blijven en een nieuwe transformatie inluiden.
Allereerst is mijn artikel niet bedoeld om iemand iets te leren. Ik hoop dat mijn lezers niet het gevoel hebben dat ze zo passief moeten zijn. Ik probeer mijn ervaringen en lessen zo veel mogelijk te delen en open te staan voor discussies. Het is belangrijk om samen te discussiëren, ideeën uit te wisselen en te evalueren op basis van kritisch denken. Het mag niet worden vergeten dat er nog steeds enige verwarring bestaat over hoe ze precies werken, vooral omdat de technologieën die in dit artikel worden besproken nog steeds worden ervaren, en ik zou zeggen dat zelfs het mechanisme voor veranderingsdetectie enige verwarring kan zorgen binnen het kernteam van Angular.
Wat is Zone.js en wat doet het?
Zone.js is een kleine bibliotheek ontwikkeld door Brian Ford in 2010 onder de naam "Zones" om asynchroon werk in JavaScript te beheren. Geïnspireerd door talen als Erlang en Dart, streeft het ernaar gestructureerde gelijktijdigheid te brengen in de single-threaded omgeving van JavaScript. Het Angular-team kreeg momentum toen het Zones als veranderingsdetectiemechanisme in Angular 2 adopteerde, en het Angular-team begon dit bij te dragen in de vorm van Zone.js, waarmee bredere gemeenschapsparticipatie en verdere ontwikkeling werden geboden. Tegenwoordig, hoewel het nog steeds nauw verbonden is met Angular, kan Zone.js worden beschouwd als een krachtig hulpmiddel voor het monitoren en ingrijpen in asynchrone taken, waardoor prestatieanalyse, foutafhandeling en vele twijfelachtige functies mogelijk is.
Dus waarom heeft Angular Zone.js verlaten?
Door gebruik te maken van het vermogen van AI om onze denkbeeldige beelden moeiteloos om te zetten in tekeningen, gebruikten we de metafoor van "spons onder het bed" om een visuele afbeelding te creëren die gemakkelijk te begrijpen is.
Stel je het bed voor op de afbeelding hierboven, dat niet op de vloer staat, maar op een grote spons. Zone.js is als een spons in een Angular-toepassing. Deze spons zorgt ervoor dat het bed op een comfortabele, ondersteunende basis staat en tegelijkertijd relatief comfort biedt aan de slaper. De spons absorbeert elke beweging van het bed en voorkomt dat de beweging binnenin het bed naar buiten weerkaatst.
Monkey patches in Zone.js luisteren naar alle asynchrone API's in de browser, zoals: events, commitments, observables, setTimeout, setInterval, enzovoort.
Door naar deze te luisteren, kan de Angular-applicatie eventuele wijzigingen detecteren en zo de gebruikersinterface bijwerken; in feite zorgt Zone.js net als een sponsondersteuningsbed ervoor dat de Angular-applicatie soepel kan draaien. In dit geval kunnen prestatieproblemen optreden die we niet ervaren bij zeer grote projecten.
Aan de andere kant lijkt deze complexe structuur te voorkomen dat we bepaalde specifieke veranderingen in de loop van de tijd waarnemen. Elke vorige eigenschap en ontwikkeling, samen met zijn eigen interne ontwikkeling en veranderende behoeften, wordt plotseling een obstakel voor de volgende en ontwikkeling.
Wanneer we de spons onder ons vandaan trekken, zien we dat natuurlijke bewegingsvrijheid begint te ontstaan omdat het bed direct contact maakt met de grond. Wanneer het comfortbeperkende effect van de spons begint te slijten, betekent dit dat beweging op het bed direct op de grond wordt weerkaatst.
Zo'n metafoor kan betekenen dat de spons een comfortzone biedt en een relatief comfortabelere slaap biedt. Zone.js net als deze spons biedt het een serieuze comfortzone waarmee we elke verandering op het oppervlak kunnen voelen. Na verloop van tijd kan deze complexe structuur ons echter verhinderen om bepaalde specifieke veranderingen waar te nemen. Lage rugpijn kan optreden wanneer we de spons onder ons vandaan trekken, en deze pijntjes en kwalen geven aan dat we zijn afgedaald van kunstmatige naar natuurlijke grond, en hoewel deze overgang wat pijnlijk kan zijn, uiteindelijk met een rechte onderrug, comfortabeler slaap en betere circulatie, evenals een gezondere fysieke en mentale scherpte. Wanneer we overstappen op zone-vrij, dus rug- en gewrichtspijn door slapen in bed zonder spons, is dat een goed teken dat we overstappen van kunstmatige naar natuurlijke grond. Hoewel deze overgangservaring wat pijnlijk is, verdwijnt de overgangspijn ook wanneer onze onderrug begint te hervormen naar zijn oorspronkelijke natuurlijke staat, wat zorgt voor een betere circulatie; Het overgangsvoorbeeld hier komt overeen met het experimentele Zoneless dat we hoorden in Angular v18.
Zone.js wordt verondersteld extra belasting toe te voegen omdat het asektron-operaties bijhoudt en deze doorgeeft aan hoekdetectiemechanismen zoals oproepen, gebeurtenissen, fouten, enzovoort. Tegenwoordig, wat betreft de prestaties van Angular, kunnen we de extra belasting hier niet zien of zelfs voelen. Zone.js zou verder ontwikkeld kunnen worden en sommige debuggingproblemen kunnen worden opgelost, maar de basis hier is de roadmap van Angular. We zien dat Angulars eigen intern ontwikkelde Signals-reagerende primitieven nu Zone.js Angulars toekomstplannen in de weg staan. Hoewel de structuur van het Signaal erg nuttig is qua detectiemechanismen en ook goed qua prestaties, gebruiksvriendelijk en krachtig, is Zone.js niet langer nodig, maar het is geen bibliotheek die van de ene op de andere dag kan worden opgegeven.
We begrijpen dat Angular zijn dromen niet wil beperken, maar juist een flexibelere en betrouwbaardere applicatie wil bouwen met een zelfvoorzienender kader door tussenliggende processen zoveel mogelijk te elimineren. We zien Angular zich ontwikkelen naar een praktischere staat en proberen de kans te grijpen om in de toekomst weer in de opwaartse trend te komen. Helaas kunnen we uit de huidige StateofJS-enquête niet zeggen dat het zo'n trend is, maar we zien ook dat Angular openstaat voor alle mogelijke innovaties.
Hoe schakel ik over naar de Zoneless-modus in Angular 18?
Angular 18 heeft een stap waarmee we kunnen overschakelen naar zone-vrije modus en de spons kunnen verwijderen. Zoals hieronder getoond, kunnen we deze ervaring nu bieden met het detectiemechanisme voor geen-zone-verandering in de bootstrap-fase.
Met bovenstaande functie toegevoegd aan de provider, kunnen we nu het npm uninstall zone.js-commando gebruiken om de zone.js gedefinieerd in de polyfills-array hieronder uit de angular.json te verwijderen.
Nu kunnen we Angular Zoneless gebruiken!
Wat zijn de voordelen van Zoneless?
Zoneless biedt een gestroomlijnder ecosysteem voor onze applicaties door onnodige luisteroperaties te elimineren. Dit betekent snellere rendering, hogere prestaties, snellere paginalaadpunten, kleinere pakketgroottes en eenvoudiger debuggen.
Maak een klassieke test waarbij je een teller toevoegt door op een knop te klikken en je wilt dat getal verhogen wanneer je op de knop klikt. In dit geval zien we dat de gewijzigde waarde wordt weergegeven wanneer elke functie wordt geactiveerd, en deze waarde verandert in de HTML. Omdat het al een functie is en we het direct triggeren, wordt het hier gerenderd. Maar wat gebeurt er als deze waarde verandert door externe invloeden en we willen dat elke waarde verandert zonder dat we het handmatig triggeren? Als er een Zone.js is, luistert het voortdurend naar alle veranderingen en waarschuwt het namens ons Angular. Omdat zo'n mechanisme momenteel echter niet bestaat, moeten we het veranderingsdetectiemechanisme activeren na een asynchrone bewerking, of direct Signals of RxJS gebruiken, zodat de verandering direct door deze reactiviteit kan worden gedetecteerd.
De verdwijning van Sponge leert ons dat het niet alleen Zone.js is dat verdwijnt, maar ook de "comfortzone".
Als we Zone.js als module gebruiken met ruwe JavaScript, ziet het er zo uit.
In Angular hoeven we niet met deze situaties om te gaan; Met ngZone werken deze operaties al samen met het detectiemechanisme.
Bijvoorbeeld, in het geval van directe DOM, event listeners, observables en commitments, HTTP-verzoeken en synchrone controlestromen, moeten we handmatig het wijzigingsdetectiemechanisme activeren voor asynchrone operaties.
Omdat Signals of R xjs automatisch wijzigingen detecteren, is het niet nodig om het wijzigingsdetectiemechanisme te activeren.
Signaalvoorbeeld:
Laten we nu een applicatie schrijven om de mechanismen voor detectie van zoneloze en hoekige veranderingen te testen en kijken hoe het werkt.
Na het starten van het hierboven gedefinieerde interval als standaard, zien we dat het begint te werken, maar de DOM wordt niet ververst en de wijzigingen worden niet weergegeven. Wanneer we het signaalstartinterval gebruiken, zien we dat het werkt zonder het veranderingsdetectiemechanisme van Angular te activeren. Zoals je kunt zien, merkt Angular de verandering op, registreert direct de verandering in ons standaardinterval wanneer het klikmoment en het signaalinterval beginnen, en geeft het vervolgens weer vrij.
Wanneer we de waarde in een variabele naar de oudercomponent sturen, merken we dat deze anders wordt waargenomen in zowel push- als standaardgevallen.
Wanneer we de invoer aan de linkerkant binden, wordt de verandering weerspiegeld wanneer er geen gebied is, en op dezelfde manier zien we dat de verandering wordt weerspiegeld na het klikken vanwege de belofte.
Hier zien we dat na een HTTP-aanroep zonder wijzigingen te detecteren, de wijzigingen niet worden weergegeven, alleen wanneer we ze handmatig activeren. Natuurlijk weerspiegelt Signals gemakkelijk nieuwkomers naar het gewenste scherm. Een deel van de code is als volgt:
app.component.ts
change-detection-demo.component.ts
De app is gepubliceerd op Stacklibitz, en je kunt de rest van de tests bekijken. Je kunt ook de resultaten in de UI volgen via code.
Stackblitz:De hyperlink-login is zichtbaar.
GitHub:De hyperlink-login is zichtbaar.
Hieronder is ook een voorbeeldapplicatie die laat zien hoe het veranderingsdetectiemechanisme van Angular werkt, en je kunt het daar ook uitproberen.
De hyperlink-login is zichtbaar.
Dingen om te overwegen bij het overschakelen naar regiovrije modus
Het is belangrijk om op te merken dat, zoals de naam al aangeeft, ExperimentalZonelessChangeDetection nog steeds experimenteel is.
Tijdens het testen merkten we enkele eigenaardigheden op in het mechanisme voor veranderingsdetectie. Bijvoorbeeld, wanneer sommige wijzigingen niet handmatig worden geactiveerd, zien we geen wijzigingen in de DOM en wordt de status niet ververst. Wanneer echter een ander signaal of reactievariabele buiten het veranderingsdetectiemechanisme werkt en ervoor zorgt dat de DOM wordt verfrist, kunnen we zien dat de eerder niet-ververste toestand ook wordt ververst.
Als je deze functie in een bestaand project wilt implementeren, moet je alle acties en applicatiegedrag zorgvuldig testen. In het bijzonder kunnen bibliotheken van derden afhankelijk zijn van Zone.js, wat kan leiden tot fouten en renderingsproblemen.
Origineel:De hyperlink-login is zichtbaar. |
Geplaatst op 30-12-2024 11:02:42
|
|
|
|
Huisbaas|
Geplaatst op 30-12-2024 11:04:13
|
