Recentemente, Angular ha rilasciato una funzione indipendente di sviluppo "esperienziale" chiamata Zone.js. Sebbene la funzionalità sia ancora sperimentale, il team di Angular lavora a questa importante innovazione da molto tempo. I primitivi responsivi stanno diventando sempre più importanti per gli sviluppatori, indicando che Angular sta entrando in un'altra nuova era. Dipendenze angolariI vantaggi di Signals e Rxjs sono ancora più evidenti, eliminando la necessità di ascoltare costantemente i cambiamenti da cui Zone.js dipendere, e finì per agire come intermediario durante lo sviluppo.
Angular continuerà a essere un framework audace e potente in futuro e avvierà una nuova trasformazione.
Prima di tutto, il mio articolo non è pensato per insegnare nulla a nessuno. Spero che i miei lettori non si sentano meritevoli di essere così passivi. Cerco di condividere il più possibile le mie esperienze e apprendimenti e di aprirmi alle discussioni. È importante discutere insieme, scambiarsi idee e valutare basandosi sul pensiero critico. Non va dimenticato che c'è ancora qualche confusione su come funzionino esattamente, soprattutto considerando che le tecnologie discusse in questo articolo sono ancora in fase di sperimentazione, e direi che anche il meccanismo di rilevamento dei cambiamenti può ancora causare un po' di confusione tra il team centrale di Angular.
Cos'è Zone.js e cosa fa?
Zone.js è una piccola libreria sviluppata da Brian Ford nel 2010 con il nome "Zones" per gestire il lavoro asincrono in JavaScript. Ispirato a linguaggi come Erlang e Dart, mira a portare una concorrenza strutturata nell'ambiente single-threaded di JavaScript. Il team di Angular ha guadagnato slancio quando ha adottato Zones come meccanismo di rilevamento dei cambiamenti in Angular 2, e il team di Angular ha iniziato a contribuire con esso sotto forma di Zone.js, offrendo una partecipazione più ampia alla comunità e ulteriore sviluppo. Oggi, sebbene sia ancora strettamente legato ad Angular, Zone.js può essere considerato uno strumento potente per monitorare e intervenire in compiti asincroni, abilitando l'analisi delle prestazioni, capacità di gestione degli errori e molte funzioni discutibili.
Allora perché Angular ha abbandonato Zone.js?
Sfruttando la capacità dell'IA di trasformare senza sforzo le nostre immagini immaginarie in disegni, abbiamo usato la metafora della "spugna sotto il letto" per creare una visuale che facilitasse la comprensione.
Immagina il letto nell'immagine sopra, che non è posato sul pavimento, ma su una grande spugna. Zone.js è come una spugna in un'applicazione Angular. Questa spugna garantisce che il letto si appoggi su una base confortevole e di supporto, offrendo al contempo un relativo comfort al dormiente. La spugna absorbe ogni movimento del letto, impedendo che il movimento interno si rifletta verso l'esterno.
Le patch di scimmia in Zone.js ascoltano tutte le API asincrone nel browser, come: eventi, impegni, osservabili, setTimeout, setInterval, ecc.
Ascoltando queste informazioni, l'applicazione Angular può rilevare eventuali cambiamenti e quindi aggiornare l'interfaccia utente, infatti, proprio come un banco di supporto a spugna, Zone.js permette anche all'applicazione Angular di funzionare senza intoppi. In questo caso, possono verificarsi problemi di performance che non rischiamo in progetti molto grandi.
D'altra parte, questa struttura complessa sembra impedirci di percepire certi cambiamenti specifici nel tempo. Ogni caratteristica e sviluppo precedenti, insieme al proprio sviluppo interno e ai bisogni in evoluzione, diventano improvvisamente un ostacolo per il successivo e per lo sviluppo.
Quando tiriamo fuori la spugna da sotto di noi, vediamo che la naturale libertà di movimento inizia a emergere poiché il letto è a contatto diretto con il terreno. Quando l'effetto limitante di comfort della spugna inizia a consumarsi, significa che il movimento sul letto si rifletterà direttamente sul terreno.
Una tale metafora potrebbe significare che la spugna offre una zona di comfort e un sonno relativamente più confortevole. Zone.js come questa spugna, offre una vera zona di comfort che ci permette di percepire ogni cambiamento sulla superficie. Tuttavia, col tempo, questa struttura complessa può impedirci di percepire alcuni cambiamenti specifici. Il mal di schiena può manifestarsi quando tiriamo fuori la spugna da sotto di noi, e questi dolori indicano che siamo passati da un terreno artificiale a quello naturale, e sebbene questa esperienza di transizione possa essere un po' dolorosa, alla fine con una schiena dritta, un sonno più confortevole e una migliore circolazione, oltre a una maggiore acuità fisica e mentale. Quando passiamo a zone free, cioè dolori alla schiena e alle articolazioni dovuti a dormire in un letto senza spugna, è un buon segno che stiamo passando da un terreno artificiale a quello naturale. Sebbene questa esperienza di transizione sia un po' dolorosa, il dolore di transizione scompare anche quando la parte bassa della schiena inizia a rimodellarsi nel suo stato naturale precedente, garantendo una migliore circolazione; L'esempio di transizione qui corrisponde al Zoneless sperimentale che abbiamo sentito in Angular v18.
Si pensa che Zone.js aggiunga carico aggiuntivo perché traccia le operazioni asektron e le trasmette ai meccanismi di rilevamento angolare come chiamate, eventi, errori, ecc. Oggi, in termini di prestazioni di Angular, non possiamo vedere né sentire il carico extra qui. Zone.js potrebbero essere ulteriormente sviluppate e alcuni problemi di debug potrebbero essere risolti, ma la base qui è la roadmap di Angular. Vediamo che i primitivi reattivi Signals sviluppati internamente Zone.js da Angular ora stanno ostacolando i piani futuri di Angular. Sebbene la struttura Signals sia molto utile in termini di meccanismi di rilevamento e anche buona in termini di prestazioni, facile da usare e potente, Zone.js non è più necessaria, ma non è una libreria che può essere abbandonata da un giorno all'altro.
Comprendiamo che Angular non vuole limitare i suoi sogni, ma piuttosto vuole costruire un'applicazione più flessibile e affidabile con un quadro più autosufficiente, eliminando il più possibile i processi intermedi. Vediamo Angular muoversi verso uno stato più pratico e cercare di cogliere l'opportunità di entrare nuovamente nella tendenza rialzista in futuro. Purtroppo, dall'attuale sondaggio StateofJS, non possiamo dire che sia in questa tendenza, ma vediamo anche che Angular è aperta a tutte le possibili innovazioni.
Come posso passare alla modalità Zoneless in Angular 18?
Angular 18 include un passaggio che ci permette di passare alla modalità zona-free e liberarci della spugna. Come mostrato di seguito, ora possiamo offrire questa esperienza utilizzando il meccanismo di rilevamento del no-zone change nella fase di bootstrap.
Con la funzione sopra aggiunta al provider, ora possiamo usare il comando npm uninstall zone.js per rimuovere il zone.js definito nell'array polyfills qui sotto dal angular.json.
Ora possiamo usare Angular Zoneless!
Quali sono i vantaggi di Zoneless?
Zoneless offre un ecosistema più snello per le nostre applicazioni eliminando operazioni di ascolto inutili. Questo significa rendering più veloce, prestazioni superiori, caricamenti di pagina più rapidi, dimensioni dei pacchetti più piccole e un debug più semplice.
Fai un test classico in cui aggiungi un contatore cliccando un pulsante e vuoi aumentare quel numero quando clicchi il pulsante. In questo caso, possiamo vedere che il valore cambiato viene visualizzato quando ogni funzione viene attivata, e questo valore cambia nell'HTML. Poiché è già una funzione e la attiviamo direttamente, viene visualizzata qui. Ma cosa succede se questo valore cambia a causa di influenze esterne e vogliamo vedere un cambiamento di valore senza che noi lo attiviamo manualmente? Se c'è un Zone.js, ascolta costantemente ogni cambiamento e avvisa Angular per nostro conto. Tuttavia, poiché al momento non esiste un tale meccanismo, dobbiamo o attivare il meccanismo di rilevamento del cambiamento dopo un'operazione asincrona, oppure usare direttamente Signals o RxJS, così che il cambiamento possa essere rilevato direttamente a causa di questa reattività.
La scomparsa di Sponge ci insegna che non è solo Zone.js che scompare, ma è anche la "zona di comfort".
Se usiamo Zone.js come modulo con JavaScript grezzo, apparirà così.
In Angular, non dobbiamo affrontare queste situazioni; Con ngZone, queste operazioni già funzionano in sinergia con il meccanismo di rilevamento.
Ad esempio, nel caso di DOM diretto, ascoltatori di eventi, osservabili e impegni, richieste HTTP e flussi di controllo sincroni, dobbiamo attivare manualmente il meccanismo di rilevamento dei cambiamenti per operazioni asincrone.
Poiché i segnali o i R xjs rilevano automaticamente le modifiche, non è necessario attivare il meccanismo di rilevamento delle modifiche.
Esempio di segnale:
Ora scriviamo un'applicazione per testare i meccanismi di rilevamento dei cambiamenti Zoneless e Angular e vediamo come funzionano.
Dopo aver avviato l'intervallo definito sopra come standard, vediamo che inizia a funzionare, ma il DOM non viene aggiornato e le modifiche non vengono riflesse. Quando usiamo l'intervallo di avvio del segnale, vediamo che funziona senza attivare il meccanismo di rilevamento dei cambiamenti di Angular. Come puoi vedere, quando iniziano l'evento di clic e l'intervallo di segnale, Angular nota il cambiamento, cattura immediatamente il cambiamento nel nostro intervallo standard e poi lo rilascia.
Quando inviamo il valore di una variabile al componente genitore, scopriamo che viene percepito diversamente sia nei casi push che in quelli di default.
Quando associamo l'input a sinistra, la modifica viene riflessa quando non c'è area, e allo stesso modo, possiamo vedere che la modifica viene riflessa dopo aver cliccato a causa della promessa.
Qui vediamo che dopo una chiamata HTTP senza rilevare cambiamenti, i cambiamenti non vengono riflessi, solo quando li attiviamo manualmente. Naturalmente, Signals riflette facilmente i nuovi arrivati sullo schermo desiderato. Alcuni dettagli del codice sono i seguenti:
app.component.ts
change-detection-demo.component.ts
L'app è stata pubblicata su Stacklibitz, e puoi dare un'occhiata agli altri test. Puoi anche monitorare i risultati nell'interfaccia tramite codice.
Stackblitz:Il login del link ipertestuale è visibile.
GitHub:Il login del link ipertestuale è visibile.
C'è anche un'applicazione di esempio qui sotto che mostra come funziona il meccanismo di rilevamento dei cambiamenti di Angular, e puoi provarlo anche da lì.
Il login del link ipertestuale è visibile.
Aspetti da considerare quando si passa alla modalità region-free
È importante notare che, come suggerisce il nome, ExperimentalZonelessChangeDetection è ancora sperimentale.
Durante alcuni test, abbiamo notato alcune stranezze nel meccanismo di rilevamento dei cambiamenti. Ad esempio, quando alcune modifiche non vengono attivate manualmente, non vediamo cambiamenti nel DOM e lo stato non viene aggiornato. Tuttavia, quando un altro segnale o variabile di reazione funziona al di fuori del meccanismo di rilevamento del cambiamento e fa sì che il DOM venga aggiornato, possiamo osservare che anche lo stato precedentemente non aggiornato viene aggiornato.
Se vuoi implementare questa funzionalità in un progetto esistente, dovresti testare attentamente tutte le azioni e il comportamento dell'applicazione. In particolare, le librerie di terze parti possono fare affidamento su Zone.js, il che può causare alcuni errori e problemi di rendering.
Originale:Il login del link ipertestuale è visibile. |
Pubblicato il 30-12-2024 11:02:42
|
|
|
|
Padrone di casa|
Pubblicato il 30-12-2024 11:04:13
|
