Nedávno Angular vydal nezávislou "zážitkovou" vývojovou funkci nazvanou Zone.js. Ačkoliv je funkce stále experimentální, tým Angularu na této důležité inovaci pracuje již dlouhou dobu. Responzivní primitiva jsou pro vývojáře stále důležitější, což naznačuje, že Angular vstupuje do další nové éry. Úhlové závislostiVýhody Signals a Rxjs jsou ještě výraznější, protože odpadá nutnost neustále naslouchat změnám, na které Zone.js záviset, a nakonec působil jako prostředník během vývoje.
Angular bude i nadále odvážným a silným rámcem v budoucnu a zahájí novou transformaci.
Za prvé, můj článek není určen k tomu, aby někoho něco naučil. Doufám, že moji čtenáři nebudou mít pocit, že si zaslouží být tak pasivní. Snažím se sdílet své zkušenosti a poznatky co nejvíce a otevírat se diskuzím. Je důležité diskutovat společně, vyměňovat si nápady a hodnotit na základě kritického myšlení. Nemělo by se zapomínat, že stále panuje určitý zmatek ohledně toho, jak přesně fungují, zvláště když technologie diskutované v tomto článku jsou stále využívány, a řekl bych, že i mechanismus detekce změn může stále způsobovat určité zmatení mezi jádrem týmu v Angularu.
Co je Zone.js a co dělá?
Zone.js je malá knihovna vyvinutá Brianem Fordem v roce 2010 pod názvem "Zones" pro správu asynchronní práce v JavaScriptu. Inspirován jazyky jako Erlang a Dart si klade za cíl přinést strukturovanou souběžnost do prostředí JavaScriptu s jedním vláknem. Tým Angularu získal na síle, když přijal Zones jako mechanismus detekce změn v Angular 2, a tým Angularu začal přispívat tímto systémem ve formě Zone.js, čímž přinesl širší zapojení komunity a další rozvoj. Dnes, ačkoliv je stále úzce spjat s Angularem, lze Zone.js považovat za výkonný nástroj pro monitorování a zásahy do asynchronních úloh, umožňující analýzu výkonu, schopnosti řešení chyb a mnoho pochybných funkcí.
Tak proč Zone.js Angular opustil?
Využili jsme schopnost AI bez námahy přeměňovat naše imaginární obrázky na kresby a použili jsme metaforu "houby pod postelí" k vytvoření vizuálu pro snadné pochopení.
Představte si postel na obrázku výše, která není položena na zemi, ale na velké houbičce. Zone.js je jako houba v aplikaci Angular. Tato houba zajišťuje, že postel stojí na pohodlném, podpůrném základu a zároveň poskytuje relativní pohodlí spícímu. Houba absorbuje každý pohyb postele, čímž zabraňuje pohybu uvnitř postele, aby se odrážel ven.
Monkey patche Zone.js poslouchají všechna asynchronní API v prohlížeči, jako jsou: události, závazky, observables, setTimeout, setInterval atd.
Tím, že aplikace Angular tyto informace naslouchá, dokáže detekovat jakékoli změny a tím aktualizovat uživatelské rozhraní, ve skutečnosti stejně jako podložka s houbičkou Zone.js zároveň umožňuje plynulý chod aplikace Angular. V takovém případě mohou nastat problémy s výkonem, které u velkých projektů necítíme.
Na druhou stranu se zdá, že tato složitá struktura nám brání vnímat určité konkrétní změny v čase. Každá předchozí charakteristika a vývoj, spolu s vlastním vnitřním vývojem a měnícími se potřebami, se náhle stává překážkou pro další a rozvoj.
Když houbu vytáhneme zpod sebe, vidíme, že přirozená volnost pohybu začíná vznikat, protože postel je v přímém kontaktu se zemí. Když se začne omezovat komfortní účinek houbičky, znamená to, že pohyb na posteli se nyní odráží přímo na zemi.
Taková metafora může znamenat, že houba poskytuje komfortní zónu a relativně pohodlnější spánek. Zone.js jako tato houba poskytuje vážnou komfortní zónu, která nám umožňuje cítit každou změnu na povrchu. Postupem času nám však tato složitá struktura může zabránit vnímat některé konkrétní změny. Bolest dolní části zad může nastat, když si houbu vytáhneme zpod sebe, a tyto bolesti a nepříjemnosti naznačují, že jsme sestoupili z umělého na přírodní povrch, a i když může být tento přechod trochu bolestivý, nakonec s rovnou dolní částí zad, pohodlnějším spánkem, lepší cirkulací a zdravější fyzickou i duševní ostrostí. Když přecházíme na zóny bez zón, tedy bolesti zad a kloubů ze spaní v posteli bez houby, je to dobrý signál, že přecházíme z umělé na přírodní zem. Ačkoliv je tento přechod trochu bolestivý, bolest při přechodu také mizí, jakmile se naše spodní část zad začne přetvářet do původního přirozeného stavu a zlepšuje krevní oběh; Příklad přechodu zde odpovídá experimentálnímu Zoneless, který jsme slyšeli v Angular v18.
Zone.js se předpokládá, že přidává další zátěž, protože sleduje operace asektronu a předává je detekčním mechanismům Angularu, jako jsou volání, události, chyby atd. Dnes, co se týče výkonu Angularu, nevidíme ani necítíme tu dodatečnou zátěž. Zone.js by se dalo dále rozvíjet a některé ladicí problémy by se daly vyřešit, ale základem je roadmapa Angularu. Vidíme, že vlastní Angular vyvinul Signals reagující primitiva Zone.js nyní brání budoucím plánům Angularu. Struktura Signals je sice velmi užitečná z hlediska detekce a také dobrá z hlediska výkonu, snadno použitelná a výkonná, Zone.js už není potřeba, ale není to knihovna, kterou by bylo možné opustit přes noc.
Chápeme, že Angular nechce omezovat své sny, ale spíše chce vybudovat flexibilnější a spolehlivější aplikaci s soběstačnějším rámcem tím, že co nejvíce odstraní mezilehlé procesy. Vidíme, že Angular směřuje k praktičtějšímu stavu a snaží se využít příležitosti znovu vstoupit do vzestupného trendu v budoucnu. Bohužel, podle aktuálního průzkumu StateofJS nemůžeme říct, že by to bylo v takovém trendu, ale také vidíme, že Angular je otevřený všem možným inovacím.
Jak přepnu na režim Zoneless v Angular 18?
Angular 18 má krok, který nám umožní přepnout do režimu bez zón a zbavit se houbičky. Jak je uvedeno níže, nyní můžeme tuto zkušenost poskytnout pomocí mechanismu detekce změny zóny bez zóny ve fázi bootstrapu.
S přidanou výše uvedenou funkcí do poskytovatele nyní můžeme použít příkaz npm uninstall zone.js k odstranění zone.js definovaného v poli polyfills níže z angular.json.
Teď můžeme použít Angular Zoneless!
Jaké jsou výhody Zoneless?
Zoneless poskytuje efektivnější ekosystém pro naše aplikace tím, že eliminuje zbytečné operace poslechu. To znamená rychlejší renderování, vyšší výkon, rychlejší načítání stránek, menší velikosti balíčků a jednodušší ladění.
Vezměte si klasický test, kdy přidáte počítadlo kliknutím na tlačítko a chcete toto číslo zvýšit kliknutím na tlačítko. V tomto případě vidíme, že změněná hodnota se vykreslí při spuštění každé funkce a tato hodnota se v HTML změní. Protože už je to funkce a my ji spustíme přímo, je zde vykreslena. Ale co se stane, když se tato hodnota změní kvůli vnějším vlivům a my chceme vidět jakoukoli změnu hodnoty, aniž bychom ji museli ručně spustit? Pokud existuje Zone.js, neustále naslouchá všem změnám a informuje Angular naším jménem. Protože však momentálně takový mechanismus neexistuje, musíme buď spustit mechanismus detekce změny po nějaké asynchronní operaci, nebo použít přímo Signals či RxJS, aby bylo možné změnu detekovat přímo díky této reaktivitě.
Zmizení Sponge nás učí, že nezmizí jen Zone.js, ale také "komfortní zóna".
Pokud použijeme Zone.js jako modul s čistým JavaScriptem, bude to vypadat takto.
V Angularu se těmito situacemi nemusíme zabývat; U ngZone tyto operace již fungují ve spojení s detekčním mechanismem.
Například v případě přímého DOM, eventových posluchačů, pozorovatelných veličin a závazků, HTTP požadavků a synchronních řídicích toků musíme manuálně spustit mechanismus detekce změn pro asynchronní operace.
Protože Signals nebo R xjs automaticky detekuje změny, není potřeba spouštět mechanismus detekce změn.
Příklad signálu:
Teď napišme aplikaci na testování mechanismů detekce změn Zoneless a Angular a uvidíme, jak to funguje.
Po zahájení výše definovaného intervalu jako standardního vidíme, že začne fungovat, ale DOM se neobnoví a změny se neodrážejí. Když použijeme interval startu signálu, vidíme, že funguje bez spuštění mechanismu detekce změn v Angularu. Jak vidíte, jakmile začnou kliknutí a signální intervaly, Angular si změny všimne, okamžitě ji zachytí v našem standardním intervalu a pak ji uvolní.
Když pošleme hodnotu proměnné do rodičovské komponenty, zjistíme, že je vnímána odlišně jak v push, tak ve výchozím případě.
Když přiřadíme vstup vlevo, změna se projeví, když není žádná oblast, a podobně vidíme, že změna se po kliknutí projeví díky slibu.
Zde vidíme, že po HTTP volání bez detekce změn se změny neodrážejí, pouze když je spustíme ručně. Samozřejmě, Signals snadno odráží nováčky na požadovanou obrazovku. Některé části kódu jsou následující:
app.component.ts
change-detection-demo.component.ts
Aplikace byla zveřejněna na Stacklibitz a můžete si prohlédnout zbytek testů. Výsledky můžete také sledovat v uživatelském rozhraní pomocí kódu.
Stackblitz:Přihlášení k hypertextovému odkazu je viditelné.
GitHub:Přihlášení k hypertextovému odkazu je viditelné.
Níže je také ukázková aplikace, která ukazuje, jak funguje mechanismus detekce změn v Angularu, a můžete si ji vyzkoušet i odtud.
Přihlášení k hypertextovému odkazu je viditelné.
Na co se zaměřit při přechodu na režim bez regionů
Je důležité poznamenat, že, jak název napovídá, ExperimentalZonelessChangeDetection je stále experimentální.
Při testování jsme si všimli některých zvláštností v mechanismu detekce změn. Například když některé změny nejsou spuštěny ručně, nevidíme žádné změny v DOM a stav se neobnovuje. Pokud však jiný signál nebo reakční proměnná funguje mimo mechanismus detekce změny a způsobí obnovení DOM, můžeme pozorovat, že i dříve neobnovený stav je obnoven.
Pokud chcete tuto funkci implementovat v existujícím projektu, měli byste pečlivě otestovat všechny akce a chování aplikace. Zejména knihovny třetích stran mohou na Zone.js spoléhat, což může vést k chybám a problémům s vykreslováním.
Původní:Přihlášení k hypertextovému odkazu je viditelné. |
Zveřejněno 30. 12. 2024 11:02:42
|
|
|
|
Pronajímatel|
Zveřejněno 30. 12. 2024 11:04:13
|
