Nesen Angular izlaida neatkarīgu "pieredzes" izstrādes funkciju ar nosaukumu Zone.js. Lai gan šī funkcija joprojām ir eksperimentāla, Angular komanda jau ilgu laiku strādā pie šī svarīgā jauninājuma. Atsaucīgie primitīvi kļūst arvien svarīgāki izstrādātājiem, norādot, ka Angular ieiet citā jaunā laikmetā. Leņķa atkarībasSignālu un Rxjs priekšrocības ir vēl izteiktākas, novēršot nepieciešamību pastāvīgi klausīties izmaiņas, no kurām Zone.js būt atkarīgas, un beidza darboties kā starpnieks izstrādes laikā.
Angular turpinās būt drosmīgs un spēcīgs ietvars nākotnē un sāks jaunu transformāciju.
Pirmkārt, mans raksts nav paredzēts, lai nevienam kaut ko iemācītu. Es ceru, ka mani lasītāji nejūtas pelnījuši būt tik pasīvi. Es cenšos pēc iespējas vairāk dalīties savā pieredzē un mācībās un atvērties diskusijām. Ir svarīgi kopīgi diskutēt, apmainīties ar idejām un novērtēt, balstoties uz kritisko domāšanu. Nevajadzētu aizmirst, ka joprojām ir zināma neskaidrība par to, kā tieši tie darbojas, it īpaši, ja šajā rakstā aplūkotās tehnoloģijas joprojām tiek pieredzētas, un es teiktu, ka pat izmaiņu noteikšanas mehānisms joprojām var radīt neskaidrības Angular pamatkomandā.
Kas ir Zone.js un ko tas dara?
Zone.js ir neliela bibliotēka, ko 2010. gadā izstrādāja Braiens Fords ar nosaukumu "Zonas", lai pārvaldītu asinhronu darbu JavaScript. Iedvesmojoties no tādām valodām kā Erlang un Dart, tā mērķis ir ieviest strukturētu vienlaicīgumu JavaScript viena pavediena vidē. Angular komanda ieguva impulsu, kad tā pieņēma zonas kā izmaiņu noteikšanas mehānismu Angular 2, un Angular komanda sāka to sniegt Zone.js veidā, nodrošinot plašāku kopienas līdzdalību un turpmāku attīstību. Mūsdienās, lai gan tas joprojām ir cieši saistīts ar Angular, Zone.js var uzskatīt par spēcīgu rīku asinhronu uzdevumu uzraudzībai un iejaukšanās, ļaujot veikt veiktspējas analīzi, kļūdu apstrādes iespējas un daudzas apšaubāmas funkcijas.
Tad kāpēc Angular Zone.js pameta?
Izmantojot mākslīgā intelekta spēju bez piepūles pārveidot mūsu iedomātos attēlus zīmējumos, mēs izmantojām metaforu "sūklis zem gultas", lai izveidotu vizuālu attēlu vieglai izpratnei.
Iedomājieties gultu iepriekš redzamajā attēlā, kas nav novietota uz grīdas, bet uz liela sūkļa. Zone.js ir kā sūklis leņķa lietojumprogrammā. Šis sūklis nodrošina, ka gulta atrodas uz ērtas, atbalstošas pamatnes, vienlaikus nodrošinot relatīvu komfortu gulētājam. Sūklis absorbē katru gultas kustību, neļaujot kustībai gultas iekšpusē atspoguļoties uz ārpusi.
Pērtiķu ielāpi Zone.js klausīties visus asinhronos API pārlūkprogrammā, piemēram: notikumi, saistības, novērojamie, setTimeout, setInterval utt.
Klausoties tos, Angular lietojumprogramma var noteikt jebkādas izmaiņas un tādējādi atjaunināt lietotāja interfeisu, patiesībā, tāpat kā sūkļa atbalsta gulta, Zone.js arī ļauj Angular lietojumprogrammai darboties nevainojami. Šajā gadījumā var rasties veiktspējas problēmas, kuras mēs nejūtam ļoti lielos projektos.
No otras puses, šķiet, ka šī sarežģītā struktūra neļauj mums uztvert noteiktas specifiskas izmaiņas laika gaitā. Katra iepriekšējā īpašība un attīstība kopā ar savu iekšējo attīstību un mainīgajām vajadzībām pēkšņi kļūst par šķērsli nākamajai un attīstībai.
Kad mēs izvelkam sūkli no zemes, mēs redzam, ka dabiskā kustību brīvība sāk parādīties, jo gulta ir tiešā saskarē ar zemi. Kad sūkļa komfortu ierobežojošā iedarbība sāk valkāt, tas nozīmē, ka kustība uz gultas tagad atspoguļosies tieši uz zemes.
Šāda metafora var nozīmēt, ka sūklis nodrošina komforta zonu un nodrošina salīdzinoši ērtāku miegu. Zone.js tāpat kā šis sūklis, tas nodrošina nopietnu komforta zonu, kas ļauj mums sajust visas izmaiņas virspusē. Tomēr laika gaitā šī sarežģītā struktūra var neļaut mums uztvert dažas specifiskas izmaiņas. Sāpes muguras lejasdaļā var rasties, kad mēs izvelkam sūkli no zemes, un šīs sāpes un sāpes norāda, ka mēs esam nolaidušies no mākslīgās uz dabisko zemi, un, lai gan šī pārejas pieredze var būt nedaudz sāpīga, galu galā ar taisnu muguras lejasdaļu, ērtāku miegu un labāku asinsriti, kā arī veselīgāku fizisko un garīgo asumu. Kad mēs pārejam uz zonu, t.i., muguras un locītavu sāpes no gulēšanas gultā bez sūkļa, ir laba zīme, ka mēs pārejam no mākslīgās uz dabisko zemi. Lai gan šī pārejas pieredze ir nedaudz sāpīga, pārejas sāpes arī pazūd, jo mūsu muguras lejasdaļa sāk pārveidoties iepriekšējā dabiskajā stāvoklī, nodrošinot labāku asinsriti; Pārejas piemērs šeit atbilst eksperimentālajam Zoneless, ko dzirdējām Angular v18.
Tiek uzskatīts, ka Zone.js pievieno papildu slodzi, jo tas izseko asektron operācijas un nodod tās leņķa noteikšanas mehānismiem, piemēram, zvaniem, notikumiem, kļūdām utt. Šodien, runājot par Angular veiktspēju, mēs šeit nevaram redzēt vai pat sajust papildu slodzi. Zone.js varētu turpināt attīstīt un atrisināt dažas atkļūdošanas problēmas, taču pamatā ir Angular ceļvedis. Mēs redzam, ka Angular paša iekšējie izstrādātie signāli reaģē primitīvi Zone.js tagad traucē Angular nākotnes plāniem. Lai gan signālu struktūra ir ļoti noderīga noteikšanas mehānismu ziņā, kā arī laba veiktspējas ziņā, viegli lietojama un jaudīga, Zone.js vairs nav nepieciešama, taču tā nav bibliotēka, no kuras var atteikties vienas nakts laikā.
Mēs saprotam, ka Angular nevēlas ierobežot savus sapņus, bet drīzāk vēlas izveidot elastīgāku un uzticamāku lietojumprogrammu ar pašpietiekamāku sistēmu, pēc iespējas novēršot starpposma procesus. Mēs redzam, ka Angular virzās uz praktiskāku stāvokli un cenšas izmantot iespēju nākotnē atkal iekļūt augšupejošajā tendencē. Diemžēl no pašreizējās StateofJS aptaujas mēs nevaram teikt, ka tā ir šādā tendencē, bet mēs arī redzam, ka Angular ir atvērts visām iespējamām inovācijām.
Kā pārslēgties uz bezzonas režīmu Angular 18?
Angular 18 nāk ar soli, kas ļauj pārslēgties uz bezzonas režīmu un atbrīvoties no sūkļa. Kā parādīts zemāk, mēs tagad varam nodrošināt šo pieredzi, izmantojot bezzonas izmaiņu noteikšanas mehānismu bootstrap fāzē.
Izmantojot iepriekš minēto funkciju, kas pievienota pakalpojumu sniedzējam, mēs tagad varam izmantot komandu npm atinstalēt zone.js, lai no angular.json noņemtu zemāk esošajā poliaizpildījumu masīvā definēto zone.js.
Tagad mēs varam izmantot Angular Zoneless!
Kādas ir Zoneless priekšrocības?
Zoneless nodrošina racionalizētāku ekosistēmu mūsu lietojumprogrammām, novēršot nevajadzīgas klausīšanās darbības. Tas nozīmē ātrāku renderēšanu, augstāku veiktspēju, ātrāku lapu ielādi, mazākus pakotņu izmērus un vieglāku atkļūdošanu.
Veiciet klasisko testu, kurā pievienojat skaitītāju, noklikšķinot uz pogas, un vēlaties palielināt šo skaitli, noklikšķinot uz pogas. Šajā gadījumā mēs varam redzēt, ka mainītā vērtība tiek atveidota, kad tiek aktivizēta katra funkcija, un šī vērtība mainās HTML. Tā kā tā jau ir funkcija un mēs to aktivizējam tieši, tā tiek atveidota šeit. Bet kas notiek, ja šī vērtība mainās ārējas ietekmes dēļ un mēs vēlamies redzēt vērtības izmaiņas, neaktivizējot to manuāli? Ja ir Zone.js, tas pastāvīgi uzklausa visas izmaiņas un paziņo Angular mūsu vārdā. Tomēr, tā kā šobrīd šāda mehānisma nav, mums ir vai nu jāiedarbina izmaiņu noteikšanas mehānisms pēc kādas asinhronas darbības, vai arī jāizmanto signāli vai RxJS tieši, lai izmaiņas varētu noteikt tieši šīs reaktivitātes dēļ.
Sūkļa pazušana mums māca, ka pazūd ne tikai Zone.js, bet arī "komforta zona".
Ja mēs Zone.js izmantojam kā moduli ar neapstrādātu JavaScript, tas izskatīsies šādi.
Angular mums nav jārisina šādas situācijas; Izmantojot ngZone, šīs operācijas jau darbojas tandēmā ar atklāšanas mehānismu.
Piemēram, tiešo DOM, notikumu klausītāju, novērojamo un saistību, HTTP pieprasījumu un sinhronās vadības plūsmu gadījumā mums manuāli jāaktivizē izmaiņu noteikšanas mehānisms asinhronām operācijām.
Tā kā signāli vai R xjs automātiski nosaka izmaiņas, nav nepieciešams iedarbināt izmaiņu noteikšanas mehānismu.
Signāla piemērs:
Tagad uzrakstīsim lietojumprogrammu, lai pārbaudītu bezzonas un leņķa izmaiņu noteikšanas mehānismus un redzētu, kā tas darbojas.
Pēc iepriekš definētā intervāla sākšanas mēs redzam, ka tas sāk darboties, bet DOM netiek atsvaidzināts un izmaiņas netiek atspoguļotas. Kad mēs izmantojam signāla sākuma intervālu, mēs redzam, ka tas darbojas, neiedarbinot Angular izmaiņu noteikšanas mehānismu. Kā redzat, sākoties klikšķa notikumam un signāla intervālam, Angular pamana izmaiņas, nekavējoties uztver izmaiņas mūsu standarta intervālā un pēc tam to atbrīvo.
Nosūtot mainīgā vērtību uz vecākkomponentu, mēs konstatējam, ka tā tiek uztverta atšķirīgi gan push, gan noklusējuma gadījumos.
Kad mēs saistām ievadi kreisajā pusē, izmaiņas tiek atspoguļotas, kad nav apgabala, un līdzīgi mēs varam redzēt, ka izmaiņas tiek atspoguļotas pēc noklikšķināšanas solījuma dēļ.
Šeit mēs redzam, ka pēc HTTP zvana bez izmaiņu noteikšanas izmaiņas netiek atspoguļotas, tikai tad, kad mēs tās aktivizējam manuāli. Protams, signāli viegli atspoguļo jaunpienācējus vēlamajā ekrānā. Daži no kodiem ir šādi:
app.component.ts
change-detection-demo.component.ts
Lietotne ir publicēta vietnē Stacklibitz, un jūs varat pārbaudīt pārējos testus. Varat arī izsekot rezultātiem lietotāja interfeisā, izmantojot kodu.
Stackblitz:Hipersaites pieteikšanās ir redzama.
GitHub:Hipersaites pieteikšanās ir redzama.
Zemāk ir arī lietojumprogrammas paraugs, kas parāda, kā darbojas Angular izmaiņu noteikšanas mehānisms, un jūs varat to izmēģināt arī no turienes.
Hipersaites pieteikšanās ir redzama.
Lietas, kas jāņem vērā, pārslēdzoties uz režīmu bez reģiona
Ir svarīgi atzīmēt, ka, kā norāda nosaukums, ExperimentalZonelessChangeDetection joprojām ir eksperimentāls.
Veicot dažas pārbaudes, mēs pamanījām dažas dīvainības izmaiņu noteikšanas mehānismā. Piemēram, ja dažas izmaiņas netiek aktivizētas manuāli, mēs neredzam izmaiņas DOM un stāvoklis netiek atsvaidzināts. Tomēr, ja cits signāls vai reakcijas mainīgais darbojas ārpus izmaiņu noteikšanas mehānisma un izraisa DOM atsvaidzināšanos, mēs varam novērot, ka tiek atsvaidzināts arī iepriekš neatsvaidzinātais stāvoklis.
Ja vēlaties ieviest šo funkciju esošā projektā, rūpīgi jāpārbauda visas darbības un lietojumprogrammu darbība. Jo īpaši trešo pušu bibliotēkas var paļauties uz Zone.js, kas var izraisīt dažas kļūdas un renderēšanas problēmas.
Sākotnējā:Hipersaites pieteikšanās ir redzama. |
Publicēts 2024-12-30 11:02:42
|
|
|
|
Saimnieks|
Publicēts 2024-12-30 11:04:13
|
