Äskettäin Angular julkaisi itsenäisen "kokemuksellisen" kehitysominaisuuden nimeltä Zone.js. Vaikka ominaisuus on vielä kokeellinen, Angular-tiimi on työskennellyt tämän tärkeän innovaation parissa pitkään. Responsiiviset primitiivit ovat yhä tärkeämpiä kehittäjille, mikä viittaa siihen, että Angular on siirtymässä uuteen aikakauteen. KulmariippuvuudetSignaalien ja Rxj:n edut ovat entistä selvemmät, sillä ne poistavat tarpeen kuunnella jatkuvasti muutoksia, joihin Zone.js riippua, ja päätyi toimimaan välittäjänä kehityksen aikana.
Angular tulee jatkossakin olemaan rohkea ja voimakas viitekehys ja aloittaa uuden muutoksen.
Ensinnäkin, artikkelini ei ole tarkoitettu opettamaan kenellekään mitään. Toivon, etteivät lukijani tunne ansaitsevansa olla niin passiivisia. Yritän jakaa kokemuksiani ja oppejani mahdollisimman paljon ja avautua keskusteluille. On tärkeää keskustella yhdessä, vaihtaa ajatuksia ja arvioida kriittisen ajattelun pohjalta. Ei pidä unohtaa, että niiden toiminnasta on edelleen jonkin verran epäselvyyttä, erityisesti kun tässä artikkelissa käsitellyt teknologiat ovat vielä käytössä, ja sanoisin, että jopa muutosten tunnistusmekanismi voi aiheuttaa hämmennystä Angularin ydintiimissä.
Mitä Zone.js on ja mitä se tekee?
Zone.js on pieni kirjasto, jonka Brian Ford kehitti vuonna 2010 nimellä "Zones" hallinnoimaan asynkronista työtä JavaScriptissä. Erlangin ja Dartin kaltaisista kielistä inspiroituneena se pyrkii tuomaan rakenteellista samanaikaisuutta JavaScriptin yksisäikeiseen ympäristöön. Angular-tiimi sai vauhtia, kun se otti Zonesin käyttöön muutosten havaitsemismekanismiksi Angular 2:ssa, ja Angular-tiimi alkoi tuoda sitä Zone.js muodossa, tarjoten laajempaa yhteisön osallistumista ja lisäkehitystä. Nykyään, vaikka se on edelleen tiiviisti sidoksissa Angulariin, Zone.js voidaan kiistatta pitää tehokkaana työkaluna asynkronisten tehtävien valvontaan ja puuttumiseen, mahdollistaen suorituskyvyn analysoinnin, virheenkäsittelykyvyn ja monien kyseenalaisten toimintojen.
Miksi Angular sitten hylkäsi Zone.js?
Hyödyntäen tekoälyn kykyä muuttaa mielikuvituskuvamme vaivattomasti piirroksiksi, käytimme metaforaa "sieni sängyn alla" luodaksemme visuaalisen kuvan helpon ymmärryksen saavuttamiseksi.
Kuvittele yllä olevassa kuvassa oleva sänky, joka ei ole asetettu lattialle, vaan suuren sienen päälle. Zone.js on kuin sieni Angular-sovelluksessa. Tämä sieni varmistaa, että sänky asettuu mukavalle ja tukevalle pohjalle samalla kun se tarjoaa nukkujalle suhteellista mukavuutta. Sieni imee jokaisen sängyn liikkeen, estäen sängyn sisällä olevan liikkeen heijastumisen ulospäin.
Monkey-patchit Zone.js kuuntelevat kaikkia selaimen asynkronisia API-rajapintoja, kuten: tapahtumat, sitoutumiset, havaittavat, setTimeout, setInterval jne.
Kuuntelemalla näitä Angular-sovellus voi havaita mahdolliset muutokset ja päivittää käyttöliittymän – itse asiassa aivan kuten sienitukialusta, Zone.js mahdollistaa myös Angular-sovelluksen sujuvan toimimisen. Tässä tapauksessa voi ilmetä suorituskykyongelmia, joita emme tunne hyvin suurissa projekteissa.
Toisaalta tämä monimutkainen rakenne näyttää estävän meitä havaitsemasta tiettyjä erityisiä muutoksia ajan myötä. Jokainen aiempi ominaisuus ja kehitys, yhdessä oman sisäisen kehityksen ja muuttuvien tarpeiden kanssa, muuttuu yhtäkkiä esteeksi seuraavalle ja kehitykselle.
Kun vedämme sienen pois altamme, näemme, että luonnollinen liikkumisvapaus alkaa nousta esiin, kun sänky on suoraan kosketuksessa maan kanssa. Kun sienen mukavuutta rajoittava vaikutus alkaa kulua, liike sängyllä heijastuu nyt suoraan maahan.
Tällainen vertauskuva voi tarkoittaa, että sieni tarjoaa mukavuusalueen ja suhteellisen mukavamman unen. Zone.js kuten tämä sieni, se tarjoaa vakavan mukavuusalueen, jonka avulla voimme tuntea jokaisen muutoksen pinnalla. Kuitenkin ajan myötä tämä monimutkainen rakenne saattaa estää meitä havaitsemasta tiettyjä tiettyjä muutoksia. Alaselkäkipu voi syntyä, kun vedämme sienen pois altamme, ja nämä kivut ja särkyt viittaavat siihen, että olemme siirtyneet keinotekoisesta maaperästä luonnolliseen, ja vaikka tämä siirtymäkokemus voi olla hieman kivulias, lopulta suoran alaselkän, mukavamman unen ja paremman verenkierron sekä terveemmän fyysisen ja henkisen terävyyden myötä. Kun siirrymme vyöhykevapaaseen tilaan, eli selkä- ja nivelkipu nukkumisesta sängyssä ilman sientä, on hyvä merkki siitä, että siirrymme keinotekoisesta maaperästä luonnolliseen. Vaikka tämä siirtymäkokemus on hieman kivulias, siirtymäkipu myös katoaa, kun alaselkä alkaa muotoutua entiseen luonnolliseen tilaansa ja parantaa verenkiertoa; Tässä siirtymäesimerkki vastaa kokeellista Zonelessia, jonka kuulimme Angular v18:ssa.
Zone.js ajatellaan lisäävän kuormaa, koska se seuraa asektron-toimintoja ja välittää ne kulmatunnistusmekanismeille, kuten kutsuille, tapahtumille, virheille jne. Nykyään Angularin suorituskyvyn osalta emme näe tai edes tunne ylimääräistä kuormitusta tässä. Zone.js voisi kehittyä edelleen ja joitakin virheenkorjausongelmia ratkaista, mutta perustana on Angularin tiekartta. Näemme, että Angularin itse kehittämät Signalit reagoivat primitiiveihin Zone.js nyt haittaavat Angularin tulevaisuuden suunnitelmia. Vaikka signaalien rakenne on erittäin hyödyllinen tunnistusmekanismien kannalta ja myös suorituskyvyltään hyvä, helppokäyttöinen ja tehokas, Zone.js ei enää ole tarpeen, mutta se ei ole kirjasto, jonka voisi hylätä yhdessä yössä.
Ymmärrämme, että Angular ei halua rajoittaa unelmiaan, vaan haluaa rakentaa joustavamman ja luotettavamman sovelluksen omavaraisemmalla kehyksellä poistamalla välivaiheen prosessit mahdollisimman paljon. Näemme Angularin siirtyvän käytännöllisempään tilaan ja yrittävän tarttua tilaisuuteen palata nousutrendiin tulevaisuudessa. Valitettavasti nykyisen StateofJS-kyselyn perusteella emme voi sanoa, että se olisi tällaisessa trendissä, mutta näemme myös, että Angular on avoin kaikille mahdollisille innovaatioille.
Miten vaihdan Zoneless-tilaan Angular 18:ssa?
Angular 18:ssa on vaihe, jonka avulla voimme vaihtaa vyöhykevapaaseen tilaan ja päästä eroon sienestä. Kuten alla on esitetty, voimme nyt tarjota tämän kokemuksen käyttämällä nollavyöhykeiden muutosten tunnistusmekanismia bootstrap-vaiheessa.
Kun yllä oleva funktio on lisätty palveluntarjoajaan, voimme nyt käyttää npm uninstall zone.js -komentoa poistaaksemme alla olevassa polyfills-taulukossa zone.js angular.json:sta.
Nyt voimme käyttää Angular Zonelessia!
Mitkä ovat Zonelessin edut?
Zoneless tarjoaa sovelluksillemme virtaviivaisemman ekosysteemin poistamalla tarpeettomat kuuntelutoiminnot. Tämä tarkoittaa nopeampaa renderöintiä, parempaa suorituskykyä, nopeampia sivujen latausta, pienempiä pakettikokoja ja helpompaa virheenkorjausta.
Tee klassinen testi, jossa lisäät laskurin klikkaamalla nappia ja haluat kasvattaa lukua nappia painaessasi. Tässä tapauksessa näemme, että muuttunut arvo renderöidään, kun kukin funktio aktivoituu, ja tämä arvo muuttuu HTML:ssä. Koska se on jo funktio ja laukaisemme sen suoraan, se renderöidään tässä. Mutta mitä tapahtuu, jos tämä arvo muuttuu ulkoisten vaikutteiden vuoksi ja haluamme nähdä arvon muuttuvan ilman, että laukaisemme sen manuaalisesti? Jos Zone.js on olemassa, se kuuntelee jatkuvasti kaikkia muutoksia ja ilmoittaa Angularille puolestamme. Koska tällaista mekanismia ei tällä hetkellä ole, meidän täytyy joko aktivoida muutoksen tunnistusmekanismi jonkin asynkronisen operaation jälkeen tai käyttää Signaleja tai RxJS:ää suoraan, jotta muutos voidaan havaita suoraan tämän reaktiivisuuden vuoksi.
Spongen katoaminen opettaa meille, että katoa ei vain Zone.js, vaan myös "mukavuusalue".
Jos käytämme Zone.js moduulina raaka-JavaScriptillä, se näyttää tältä.
Angularissa meidän ei tarvitse käsitellä näitä tilanteita; ngZonen avulla nämä toiminnot toimivat jo yhdessä tunnistusmekanismin kanssa.
Esimerkiksi suorassa DOM:ssa, tapahtumakuuntelijoissa, havaittavissa ja sitoutumisissa, HTTP-pyynnöissä sekä synkronisissa ohjausvirroissa meidän täytyy manuaalisesti käynnistää muutosten tunnistusmekanismi asynkronisille operaatioille.
Koska signaalit tai R xjs tunnistavat muutokset automaattisesti, muutosten tunnistusmekanismia ei tarvitse laukaista.
Signaaliesimerkki:
Kirjoitetaan nyt sovellus, jolla testataan Zoneless- ja Angular-muutosten tunnistusmekanismeja ja katsotaan, miten ne toimivat.
Kun yllä määritelty intervalli on aloitettu standardina, näemme, että se alkaa toimia, mutta DOM ei päivity eikä muutokset heijastu. Kun käytämme signaalin aloitusväliä, näemme, että se toimii ilman, että Angularin muutosten tunnistusmekanismi aktivoituu. Kuten näette, kun klikkaustapahtuma ja signaaliväli alkavat, Angular huomaa muutoksen, tallentaa muutoksen välittömästi standardivälissämme ja vapauttaa sen.
Kun lähetämme muuttujan arvon vanhemmalle komponentille, huomaamme, että se koetaan eri tavalla sekä push- että oletustapauksissa.
Kun sitomme vasemman puolen syötteen, muutos heijastuu silloin, kun aluetta ei ole, ja samoin näemme, että muutos heijastuu klikkauksen jälkeen lupauksen vuoksi.
Tässä näemme, että HTTP-puhelun jälkeen ilman muutoksia ei näky, vaan vain manuaalisesti laukaistettaessa. Tietenkin Signals heijastaa helposti uusia pelaajia halutulle näytölle. Osa koodista on seuraava:
app.component.ts
change-detection-demo.component.ts
Sovellus on julkaistu Stacklibitzissä, ja voit tutustua muihin testeihin. Voit myös seurata tuloksia käyttöliittymässä koodin avulla.
Stackblitz:Hyperlinkin kirjautuminen on näkyvissä.
GitHub:Hyperlinkin kirjautuminen on näkyvissä.
Alla on myös esimerkkisovellus, joka näyttää, miten Angularin muutosten tunnistusmekanismi toimii, ja voit kokeilla sitä sieltäkin.
Hyperlinkin kirjautuminen on näkyvissä.
Asioita, joita kannattaa ottaa huomioon siirtyessä aluevapaaseen tilaan
On tärkeää huomata, että kuten nimikin kertoo, ExperimentalZonelessChangeDetection on edelleen kokeellinen.
Testauksen aikana huomasimme poikkeavuuksia muutosten tunnistusmekanismissa. Esimerkiksi, kun jotkut muutokset eivät käynnisty manuaalisesti, DOM:ssa ei nähdä muutoksia eikä tilaa päivitetä. Kuitenkin, kun toinen signaali tai reaktiomuuttuja toimii muutoksen havaitsemismekanismin ulkopuolella ja saa DOM:n päivittymään, voimme havaita, että aiemmin virkistämätön tila myös päivittyy.
Jos haluat toteuttaa tämän ominaisuuden olemassa olevaan projektiin, sinun tulisi testata huolellisesti kaikki toiminnot ja sovelluksen toiminta. Erityisesti kolmannen osapuolen kirjastot saattavat luottaa Zone.js, mikä voi johtaa virheisiin ja renderöintiongelmiin.
Alkuperäinen:Hyperlinkin kirjautuminen on näkyvissä. |
Julkaistu 2024-12-30 11:02:42
|
|
|
|
Vuokraisäntä|
Julkaistu 2024-12-30 11:04:13
|
