Recent, Angular a lansat o funcție independentă de dezvoltare "experiențială" numită Zone.js. Deși funcționalitatea este încă experimentală, echipa Angular lucrează de mult timp la această inovație importantă. Primitivele responsive devin din ce în ce mai importante pentru dezvoltatori, indicând că Angular intră într-o nouă eră. Dependențe unghiulareAvantajele Signals și Rxjs sunt și mai pronunțate, eliminând necesitatea de a asculta constant modificările de care Zone.js depinde, și a ajuns să acționeze ca intermediar în timpul dezvoltării.
Angular va continua să fie un cadru îndrăzneț și puternic în viitor și va începe o nouă transformare.
În primul rând, articolul meu nu are scopul de a învăța pe nimeni nimic. Sper ca cititorii mei să nu simtă că merită să fie atât de pasivi. Încerc să împărtășesc cât mai mult experiențele și învățăturile mele și să deschid discuțiile. Este important să discutăm împreună, să schimbăm idei și să evaluăm pe baza gândirii critice. Nu trebuie uitat că există încă o oarecare confuzie cu privire la modul exact în care funcționează, mai ales când tehnologiile discutate în acest articol sunt încă în curs de experimentare, și aș spune că chiar și mecanismul de detectare a schimbărilor poate provoca unele confuzii în rândul echipei centrale de la Angular.
Ce este Zone.js și ce face?
Zone.js este o mică bibliotecă dezvoltată de Brian Ford în 2010 sub numele "Zones" pentru a gestiona munca asincronă în JavaScript. Inspirat de limbaje precum Erlang și Dart, își propune să aducă concurență structurată în mediul single-threaded al JavaScript. Echipa Angular a câștigat avânt când a adoptat Zones ca mecanism de detectare a schimbărilor în Angular 2, iar echipa Angular a început să contribuie cu acesta sub forma Zone.js, oferind o participare mai largă a comunității și dezvoltare suplimentară. Astăzi, deși este încă strâns legat de Angular, Zone.js poate fi considerat un instrument puternic pentru monitorizarea și intervenția în sarcini asincrone, permițând analiza performanței, gestionarea erorilor și multe funcții discutabile.
Deci, de ce a abandonat Angular Zone.js?
Profitând de abilitatea AI de a transforma fără efort imaginile noastre imaginare în desene, am folosit metafora "buretele sub pat" pentru a crea o vizuală ușor de înțeles.
Imaginează-ți patul din imaginea de mai sus, care nu este așezat pe podea, ci pe un burete mare. Zone.js este ca un burete într-o aplicație Angular. Acest burete asigură că patul stă pe o bază confortabilă și de susținere, oferind totodată un confort relativ celui care doarme. Buretele absoarbe fiecare mișcare a patului, împiedicând mișcarea din interiorul patului să se reflecte spre exterior.
Patch-urile monkey din Zone.js ascultă toate API-urile asincrone din browser, cum ar fi: evenimente, angajamente, observabile, setTimeout, setInterval etc.
Ascultând acestea, aplicația Angular poate detecta orice schimbări și astfel poate actualiza interfața utilizatorului, de fapt, la fel ca un pat de suport pentru burete, Zone.js permite și rularea fluentă a aplicației Angular. În acest caz, pot apărea probleme de performanță pe care nu le simțim în proiecte foarte mari.
Pe de altă parte, această structură complexă pare să ne împiedice să percepem anumite schimbări specifice în timp. Fiecare caracteristică și dezvoltare anterioară, împreună cu propria lor dezvoltare internă și nevoi în schimbare, devin brusc un obstacol pentru următoarea și pentru dezvoltare.
Când scoatem buretele de sub noi, vedem că libertatea naturală de mișcare începe să apară, deoarece patul este în contact direct cu solul. Când efectul de limitare a confortului al buretelui începe să se uzeze, înseamnă că mișcarea pe pat va fi reflectată direct pe sol.
O astfel de metaforă poate însemna că buretele oferă o zonă de confort și un somn relativ mai confortabil. Zone.js ca acest burete, oferă o zonă de confort serioasă care ne permite să simțim fiecare schimbare la suprafață. Totuși, în timp, această structură complexă ne poate împiedica să percepem anumite schimbări specifice. Durerea lombară poate apărea atunci când tragem buretele de sub noi, iar aceste dureri indică faptul că am coborât de la un sol artificial la cel natural, iar deși această experiență de tranziție poate fi puțin dureroasă, în cele din urmă, cu o parte inferioară a spatelui drept, un somn mai confortabil și o circulație mai bună, precum și o acuitate fizică și mentală mai sănătoasă. Când trecem la zone-free, adică dureri de spate și articulare după ce dormim într-un pat fără burete, este un semn bun că trecem de la un sol artificial la cel natural. Deși această experiență de tranziție este puțin dureroasă, durerea de tranziție dispare și pe măsură ce partea inferioară a spatelui începe să se remodeleze la starea naturală anterioară, oferind o circulație mai bună; Exemplul de tranziție de aici corespunde experimentului Zoneless pe care l-am auzit în Angular v18.
Se crede că Zone.js adaugă sarcină suplimentară deoarece urmărește operațiunile asektron și le transmite către mecanismele de detecție Angular, cum ar fi apeluri, evenimente, erori etc. Astăzi, în ceea ce privește performanța Angular, nu putem vedea sau simți această povară suplimentară aici. Zone.js ar putea fi dezvoltate mai departe și unele probleme de depanare ar putea fi rezolvate, dar baza aici este foaia de parcurs a Angular. Vedem că primitivele reacționante Signals dezvoltate intern de Angular Zone.js acum stau în calea planurilor de viitor ale lui Angular. Deși structura Signals este foarte utilă în termeni de mecanisme de detectare și bună și din punct de vedere al performanței, ușor de folosit și puternic, Zone.js nu mai este necesară, dar nu este o bibliotecă care poate fi abandonată peste noapte.
Înțelegem că Angular nu dorește să-și limiteze visele, ci mai degrabă vrea să construiască o aplicație mai flexibilă și mai fiabilă, cu un cadru mai autosuficient, eliminând procesele intermediare cât mai mult posibil. Vedem cum Angular se îndreaptă spre o stare mai practică și încearcă să profite de oportunitatea de a intra din nou în trend ascendent în viitor. Din păcate, din actualul sondaj StateofJS, nu putem spune că este în această tendință, dar vedem și că Angular este deschis la toate inovațiile posibile.
Cum trec în modul fără zonă în Angular 18?
Angular 18 vine cu un pas care ne permite să trecem în modul fără zone și să scăpăm de burete. După cum se arată mai jos, putem oferi acum această experiență folosind mecanismul de detectare a neschimbării zonei în faza bootstrap.
Cu funcția de mai sus adăugată în furnizor, putem folosi acum comanda npm uninstall zone.js pentru a elimina zone.js definite în array-ul polyfills de mai jos din angular.json.
Acum putem folosi Angular Zoneless!
Care sunt avantajele Zoneless?
Zoneless oferă un ecosistem mai eficient pentru aplicațiile noastre, eliminând operațiunile inutile de ascultare. Aceasta înseamnă randare mai rapidă, performanțe mai mari, încărcare mai rapidă a paginilor, dimensiuni mai mici ale pachetelor și depanare mai ușoară.
Fă un test clasic în care adaugi un contor apăsând un buton și vrei să crești acel număr când apeși butonul. În acest caz, putem vedea că valoarea modificată este redată când fiecare funcție este declanșată, iar această valoare se modifică în HTML. Pentru că este deja o funcție și o declanșăm direct, este redată aici. Dar ce se întâmplă dacă această valoare se schimbă din cauza influențelor externe și vrem să vedem vreo schimbare fără să o declanșăm manual? Dacă există o Zone.js, ascultă constant toate schimbările și notifică Angular în numele nostru. Totuși, deoarece nu există un astfel de mecanism în acest moment, trebuie fie să declanșăm mecanismul de detectare a schimbării după o operație asincronă, fie să folosim direct Signals sau RxJS, astfel încât schimbarea să poată fi detectată direct din cauza acestei reactivități.
Dispariția lui Sponge ne învață că nu doar Zone.js dispare, ci și "zona de confort".
Dacă folosim Zone.js ca un modul cu JavaScript brut, va arăta astfel.
În Angular, nu trebuie să ne confruntăm cu aceste situații; Cu ngZone, aceste operațiuni funcționează deja în tandem cu mecanismul de detecție.
De exemplu, în cazul DOM-ului direct, ascultătorilor de evenimente, observabilelor și angajamentelor, solicitărilor HTTP și fluxurilor de control sincrone, trebuie să declanșăm manual mecanismul de detectare a modificărilor pentru operațiunile asincrone.
Deoarece semnalele sau R xjs detectează automat modificările, nu este nevoie să declanșeze mecanismul de detectare a schimbărilor.
Exemplu de semnal:
Acum să scriem o aplicație pentru a testa mecanismele de detectare a schimbărilor Zoneless și Angular și să vedem cum funcționează.
După ce începem intervalul definit mai sus ca standard, vedem că începe să funcționeze, dar DOM-ul nu este reîmprospătat și modificările nu sunt reflectate. Când folosim intervalul de pornire al semnalului, vedem că funcționează fără a declanșa mecanismul de detectare a schimbărilor din Angular. După cum puteți vedea, când încep evenimentul de click și intervalul de semnal, Angular observă schimbarea, capturează imediat schimbarea în intervalul nostru standard și apoi o eliberează.
Când trimitem valoarea dintr-o variabilă către componenta părinte, constatăm că aceasta este percepută diferit atât în cazul push, cât și în cel implicit.
Când asociem intrarea din stânga, schimbarea se reflectă când nu există o zonă, iar în mod similar, putem vedea că schimbarea este reflectată după apăsare din cauza promisiunii.
Aici vedem că după un apel HTTP fără a detecta modificări, modificările nu sunt reflectate, ci doar când le declanșăm manual. Desigur, Signals reflectă cu ușurință noii veniți pe ecranul dorit. O parte din cod este următoarea:
app.component.ts
change-detection-demo.component.ts
Aplicația a fost publicată pe Stacklibitz și poți verifica restul testelor. De asemenea, poți urmări rezultatele în interfață prin cod.
Stackblitz:Autentificarea cu hyperlink este vizibilă.
GitHub:Autentificarea cu hyperlink este vizibilă.
Există și o aplicație exemplu mai jos care arată cum funcționează mecanismul de detectare a schimbărilor de la Angular, pe care îl poți încerca și de acolo.
Autentificarea cu hyperlink este vizibilă.
Lucruri de luat în considerare când treci la modul fără regiune
Este important de menționat că, după cum sugerează și numele, ExperimentalZonelessChangeDetection este încă experimental.
În timpul unor teste, am observat unele ciudățenii în mecanismul de detectare a schimbărilor. De exemplu, când unele modificări nu sunt declanșate manual, nu vedem modificări în DOM și starea nu este reîmprospătată. Totuși, atunci când un alt semnal sau variabilă de reacție funcționează în afara mecanismului de detectare a schimbărilor și determină reîncărcarea DOM-ului, putem observa că starea anterior nereîmprospătată este de asemenea reîmprospătată.
Dacă vrei să implementezi această funcționalitate într-un proiect existent, ar trebui să testezi cu atenție toate acțiunile și comportamentul aplicației. În special, bibliotecile terțe se pot baza pe Zone.js, ceea ce poate duce la unele erori și probleme de randare.
Original:Autentificarea cu hyperlink este vizibilă. |
Postat la 30-12-2024 11:02:42
|
|
|
|
Proprietarul|
Postat la 2024-12-30 11:04:13
|
