Hiljuti avaldas Angular sõltumatu "kogemusliku" arendusfunktsiooni nimega Zone.js. Kuigi funktsioon on endiselt eksperimentaalne, on Angulari meeskond selle olulise uuenduse kallal töötanud juba pikka aega. Reageerivad primitiivid muutuvad arendajate jaoks üha olulisemaks, mis näitab, et Angular astub uude ajastusse. NurksõltuvusedSignaalide ja Rxj-de eelised on veelgi selgemad, kõrvaldades vajaduse pidevalt kuulata muutusi, millest Zone.js sõltuda, ja lõpuks tegutses arenduse ajal vahendajana.
Angular jätkab tulevikus julge ja võimsa raamistikuna ning alustab uut muutust.
Esiteks, minu artikkel ei ole mõeldud kellelegi midagi õpetama. Loodan, et mu lugejad ei tunne, et nad väärivad nii passiivsust. Püüan jagada oma kogemusi ja õpitusi nii palju kui võimalik ning avada end aruteludeks. Oluline on arutada koos, vahetada ideid ja hinnata kriitilise mõtlemise põhjal. Ei tohiks unustada, et nende täpse toimimise osas on endiselt teatav segadus, eriti kui selles artiklis käsitletud tehnoloogiad on endiselt kasutusel, ja ma ütleksin, et isegi muutuste tuvastamise mehhanism võib tekitada segadust Angulari tuumikmeeskonnas.
Mis on Zone.js ja mida see teeb?
Zone.js on väike raamatukogu, mille töötas välja Brian Ford 2010. aastal nime all "Zones", et hallata asünkroonset JavaScripti tööd. Inspireerituna sellistest keeltest nagu Erlang ja Dart on loodud selle eesmärk tuua struktureeritud paralleelsus JavaScripti ühe lõimega keskkonda. Angulari meeskond sai hoogu, kui võttis Angular 2-s kasutusele Zonesi muutuste tuvastamise mehhanismina ning Angulari meeskond hakkas seda panustama Zone.js näol, pakkudes laiemat kogukonna osalust ja edasist arengut. Tänapäeval, kuigi see on endiselt tihedalt seotud Angulariga, võib Zone.js pidada võimsaks tööriistaks asünkroonsete ülesannete jälgimiseks ja sekkumiseks, võimaldades jõudlusanalüüsi, veahaldusvõimekust ja paljusid küsitavaid funktsioone.
Miks siis Angular Zone.js maha jättis?
Kasutades tehisintellekti võimet muuta meie kujuteldavad kujutised joonistusteks, kasutasime metafoori "käsn voodi all", et luua visuaal lihtsaks mõistmiseks.
Kujuta ette ülaloleval pildil olevat voodit, mis ei ole põrandal, vaid suurel käsnal. Zone.js on nagu käsn Angulari rakenduses. See käsn tagab, et voodi asub mugaval ja toetaval alusel, pakkudes samal ajal magajale suhtelist mugavust. Käsn neelab voodi iga liigutuse, takistades liikumise peegeldumist voodi sees väljapoole.
Monkey patch'id Zone.js kuulavad kõiki asünkroonneid API-sid brauseris, nagu: sündmused, kohustused, observables, setTimeout, setInterval jne.
Nende kuulamise kaudu suudab Angulari rakendus tuvastada kõik muudatused ja seeläbi kasutajaliidest uuendada, tegelikult nagu käsnatugivoodi, Zone.js võimaldab ka Angulari rakendusel sujuvalt töötada. Sellisel juhul võivad tekkida jõudlusprobleemid, mida me väga suurtes projektides ei tunne.
Teisest küljest näib see keerukas struktuur takistavat meil tajuda teatud spetsiifilisi muutusi aja jooksul. Iga eelnev omadus ja areng koos oma sisemise arengu ja muutuvate vajadustega muutub äkitselt takistuseks järgmisele ja arengule.
Kui tõmbame käsna enda alt välja, näeme, et loomulik liikumisvabadus hakkab tekkima, kuna voodi on otseses kontaktis maapinnaga. Kui käsna mugavust piirav efekt hakkab kuluma, peegeldub liikumine voodil nüüd otse maapinnale.
Selline metafoor võib tähendada, et käsn pakub mugavustsooni ja suhteliselt mugavamat und. Zone.js nagu see käsn, pakub see tõsist mugavustsooni, mis võimaldab meil tunda iga muutust üle pinna. Kuid aja jooksul võib see keerukas struktuur takistada meil tajuda mõningaid konkreetseid muutusi. Alaseljavalu võib tekkida siis, kui tõmbame käsna alt välja, ja need valud ja valud viitavad sellele, et oleme langenud kunstlikult pinnalt loomulikule pinnasele, ning kuigi see üleminekukogemus võib olla veidi valulik, siis lõpuks sirge alaselja, mugavama une ja parema vereringe ning tervislikuma füüsilise ja vaimse teravuse tõttu. Kui me läheme üle tsoonivabale mullale, st selja- ja liigesevalu voodis ilma käsnata magamisest, on hea märk, et liigume kunstlikult pinnaselt loodusliku pinnase vastu. Kuigi see üleminekukogemus on veidi valus, kaob ka üleminekuvalu, kui alaselg hakkab taastuma endisesse loomulikku olekusse, mis parandab vereringet; Siin tehtud üleminekunäide vastab eksperimentaalsele Zonelessile, mida kuulsime Angular v18-s.
Zone.js arvatakse, et lisakoormust lisab, kuna jälgib asektroni operatsioone ja edastab need nurktuvastusmehhanismidele nagu kutsed, sündmused, vead jne. Täna, Angulari jõudluse osas, ei näe ega tunne me siin lisakoormust. Zone.js võiks edasi arendada ja mõningaid silumisprobleeme lahendada, kuid aluseks on Angulari tegevuskava. Näeme, et Angulari enda enda arendatud Signalid reageerivad primitiividele Zone.js segavad nüüd Angulari tulevikuplaane. Kuigi signaalide struktuur on väga kasulik tuvastusmehhanismide poolest ning hea ka jõudluse poolest, lihtne kasutada ja võimas, pole Zone.js enam vajalik, kuid see ei ole teek, mida saaks üleöö hüljata.
Mõistame, et Angular ei taha oma unistusi piirata, vaid soovib luua paindlikuma ja usaldusväärsema rakenduse iseseisvama raamistikuga, kõrvaldades võimalikult palju vahepealseid protsesse. Näeme, et Angular liigub praktilisema seisundi suunas ja püüab tulevikus taas tõusutrendi haarata. Kahjuks ei saa praeguse StateofJS uuringu põhjal öelda, et see oleks sellises trendis, kuid näeme ka, et Angular on avatud kõigile võimalikele uuendustele.
Kuidas ma saan Angular 18-s tsoonita režiimile lülituda?
Angular 18-l on samm, mis võimaldab meil lülituda tsoonivabale režiimile ja eemaldada käsna. Nagu allpool näidatud, saame nüüd pakkuda seda kogemust bootstrap-faasis tsoonita muutuste tuvastamise mehhanismi abil.
Kui ülaltoodud funktsioon on lisatud teenusepakkujale, saame nüüd kasutada npm uninstall zone.js käsku, et eemaldada allpool polüfillide massiivis määratletud zone.js angular.json-st.
Nüüd saame kasutada Angular Zonelessi!
Millised on Zonelessi eelised?
Zoneless pakub meie rakendustele sujuvamat ökosüsteemi, kõrvaldades tarbetud kuulamistoimingud. See tähendab kiiremat renderdamist, suuremat jõudlust, kiiremat lehekülgede laadimist, väiksemaid pakettide suurusi ja lihtsamat silumist.
Võta klassikaline test, kus lisad loenduri, vajutades nuppu ja tahad seda numbrit suurendada, kui nuppu vajutad. Sellisel juhul näeme, et muudetud väärtus kuvatakse iga funktsiooni käivitamisel ning see väärtus muutub HTML-is. Kuna see on juba funktsioon ja me käivitame selle otse, renderdatakse see siin. Aga mis juhtub, kui see väärtus muutub väliste mõjude tõttu ja me tahame näha mingit väärtusmuutust ilma, et me seda käsitsi käivitaksime? Kui Zone.js on olemas, kuulab see pidevalt kõiki muudatusi ja teavitab Angularit meie nimel. Kuid kuna praegu sellist mehhanismi pole, peame kas käivitama muutuste tuvastamise mehhanismi pärast mõnda asünkroonset operatsiooni või kasutama otse Signaleid või RxJS-i, et muutust saaks tuvastada otse selle reaktiivsuse tõttu.
Sponge'i kadumine õpetab meile, et kao mitte ainult Zone.js, vaid ka "mugavustsoon".
Kui kasutame Zone.js moodulina koos toore JavaScriptiga, näeb see välja selline.
Angularis ei pea me selliste olukordadega tegelema; ngZone'iga töötavad need operatsioonid juba koos tuvastusmehhanismiga.
Näiteks otsese DOM-i, sündmuste kuulajate, jälgitavate ja kohustuste puhul, HTTP-päringute ning sünkroonsete juhtimisvoogude puhul peame käsitsi käivitama muudatuste tuvastamise mehhanismi asünkroonsete operatsioonide jaoks.
Kuna Signals ehk R xjs tuvastavad automaatselt muutusi, pole vaja käivitada muudatuste tuvastusmehhanismi.
Signaali näide:
Nüüd kirjutame rakenduse, et testida tsoonita ja nurkmuutuste tuvastamise mehhanisme ning vaadata, kuidas see töötab.
Pärast eespool määratletud standardintervalli käivitamist näeme, et see hakkab tööle, kuid DOM ei ole värskendatud ja muudatused ei kajastu. Kui kasutame signaali algusintervalli, näeme, et see töötab ilma Angulari muutuste tuvastamise mehhanismi käivitamata. Nagu näha, kui klikkide sündmus ja signaaliintervall algavad, märkab Angular muutust, salvestab kohe meie tavapärase intervalli muutuse ja vabastab selle.
Kui saadame väärtuse muutujana vanemkomponendile, leiame, et seda tajutakse erinevalt nii push- kui vaikejuhtudel.
Kui me seome sisendi vasakule, kajastub muutus ka siis, kui pinda pole, ja samamoodi näeme, et muutus peegeldub pärast klõpsamist lubaduse tõttu.
Siin näeme, et pärast HTTP-kõnet ilma muudatuste tuvastamiseta ei kajastu muudatused, vaid ainult siis, kui käivitame need käsitsi. Loomulikult peegeldab Signals lihtsalt uustulnukaid soovitud ekraanile. Mõned koodid on järgmised:
app.component.ts
change-detection-demo.component.ts
Rakendus on avaldatud Stacklibitzis ja saad vaadata ülejäänud teste. Tulemusi saab ka kasutajaliideses jälgida koodi abil.
Stackblitz:Hüperlingi sisselogimine on nähtav.
GitHub:Hüperlingi sisselogimine on nähtav.
Allpool on ka näidisrakendus, mis näitab, kuidas Angulari muutuste tuvastamise mehhanism töötab, ja sealt saad seda ka proovida.
Hüperlingi sisselogimine on nähtav.
Asjad, mida tasub arvestada, kui lülitu regioonivabale režiimile
Oluline on märkida, et nagu nimigi ütleb, on ExperimentalZonelessChangeDetection endiselt eksperimentaalne.
Testides märkasime muutuste tuvastamise mehhanismis mõningaid kummalisi nüansse. Näiteks, kui mõningaid muudatusi ei käivitu käsitsi, ei näe me DOM-is muutusi ja olek ei taastu. Kui aga mõni teine signaal või reaktsioonimuutuja töötab väljaspool muutuste tuvastamise mehhanismi ja põhjustab DOM-i värskendamise, võime täheldada, et varem värskendamata olek on samuti värskendatud.
Kui soovid seda funktsiooni olemasolevas projektis rakendada, peaksid hoolikalt testima kõiki tegevusi ja rakenduse käitumist. Eriti võivad kolmandate osapoolte teegid tugineda Zone.js-le, mis võib põhjustada vigu ja renderdamisprobleeme.
Originaal:Hüperlingi sisselogimine on nähtav. |
Postitatud 2024-12-30 11:02:42
|
|
|
|
Üürileandja|
Postitatud 2024-12-30 11:04:13
|
