Az Angular alkalmazások fejlesztésének egyik legnagyobb mérföldköve az Ivy, amely nemcsak a sebességet és a tesztelési élményt javítja, hanem a fejlesztői élményt is jelentősen fokozza. Az Ivy különösen az AOT (Ahead-of-Time) fordítást és a típusellenőrzést érintően hozott változásokat, amelyek lehetővé teszik a pontosabb és gyorsabb kódot. Az Angular 9-es verziójában megjelent Ivy fordító alapértelmezett értéke igaz volt az alkalmazások esetében, de hamis a könyvtárak esetében. A verziók és a beállítások fejlődése ezen a ponton valóban hasznos, különösen, ha figyelembe vesszük az új beállításokat és azok hatását a fejlesztési folyamatra.

A szigorú mód bevezetése az Ivy-ben különösen fontos, mert számos fejlesztési lehetőséget kínál, beleértve a teljesebb típusellenőrzést és a szorosabb fordítói figyelmeztetéseket. A szigorú mód engedélyezése után a kódban a figyelmeztetések és hibák gyakran egyértelműbbé válnak, így a fejlesztők könnyebben azonosíthatják a problémákat még a kódírás korai szakaszában. Az alkalmazások betöltési ideje és teljesítménye is javult, hiszen az Ivy a komponens-stílusokat és a csomagok méretének optimalizálását célozza meg, amivel elkerülhetők a felesleges memóriaköltségek.

Az Angular szigorú fordítói beállításai mellett számos új tesztelési lehetőség is elérhetővé vált. A komponens tesztelés javítása érdekében bevezetett új tesztelési eszközök, mint a komponens tesztelési harnessek, lehetővé teszik a tesztelési folyamatok hatékonyabb végrehajtását. Az AOT fordító segítségével az Ivy tesztelési környezete sokkal közelebb áll a valódi alkalmazás futtatási környezetéhez, így a tesztek gyorsabban és megbízhatóbban futnak.

A TypeScript 3.9-es verziójában bevezetett @ts-expect-error annotáció különösen hasznos a tesztelés során, mivel lehetővé teszi, hogy a fejlesztők előre jelezhessék a lehetséges típushibákat anélkül, hogy megszakítanák a kód végrehajtását. Ez különösen akkor hasznos, ha az alkalmazásunk futtatása közben típushibák jelentkeznek, mivel így a tesztjeink képesek ellenőrizni, hogy a várt hibák valóban megjelennek-e.

A fejlesztési élmény javítása érdekében az Ivy nemcsak az AOT fordítást, hanem az optimalizált hibaüzeneteket is bevezette. Az alkalmazás hibáinak pontos nyomon követése érdekében most már a hibaüzenetben megjelennek a fájlok elérési útvonalai, a sorok számai, és még az egyes hibák helye is egyértelműen ki van emelve. Ez nemcsak a hibák gyorsabb elhárítását segíti, hanem növeli a fejlesztők produktivitását is.

Fontos kiemelni, hogy az Ivy gyorsabb tesztelést is lehetővé tesz az AOT fordítás révén, mivel a komponensek és modulok előre fordított kódja gyorsabban betöltődik és futtatható. Ezen kívül a fordító mostantól gyorsabban dolgozza fel a változtatásokat, csökkentve a tesztelés közbeni várakozási időt. Ez lehetővé teszi, hogy a fejlesztők gyorsabban végezzenek el minden szükséges tesztet, és így hatékonyabban kezeljék az esetleges hibákat.

A fejlesztői élmény növelésének következő lépéseként az Ivy bevezette a komponens tesztelési harnesseket, amelyek lehetővé teszik, hogy a tesztelők valós környezetben próbálják ki a komponenseket. Ezek az új eszközök egyszerűsítik a tesztelési folyamatokat, mivel képesek automatikusan kezelni a komponensek élethosszaként működő eseményeket, interakciókat és állapotokat, így a tesztek gyorsabban és megbízhatóbban futnak.

Az Ivy ezen fejlesztései nemcsak a kód minőségét javítják, hanem a tesztelési folyamatok sebességét és hatékonyságát is növelik. A fejlesztők mostantól gyorsabban végezhetik el a teszteléseket, és biztosabbak lehetnek abban, hogy a kódjuk minden fontos aspektusát alaposan tesztelték.

Hogyan vizsgálhatjuk meg az Angular beágyazott nézeti kontextusát és a változásokat futásidőben?

Az Angular egy hatékony fejlesztői környezetet kínál, amely lehetővé teszi a fejlesztők számára, hogy közvetlenül futásidőben vizsgálják meg és módosítsák az alkalmazás állapotát. A programozók számára a hibák gyors elhárítása és az alkalmazás működésének optimalizálása érdekében kiemelt fontosságú, hogy megértsék, hogyan működnek a különböző eseménykezelők, valamint miként tekinthetik át a különböző beágyazott nézeti kontextusokat, amelyek dinamikusan jönnek létre egy-egy struktúrált direktíva használatával. E fejezetben a futásidőbeli hibakeresés eszközei, különösen az Angular Ivy és annak debugging API-ja kerülnek a középpontba.

A beágyazott nézeti kontextus egy dinamikusan létrejövő nézet, amely egy-egy komponenshez vagy elemhez van kötve. A struktúrált direktívák, mint az NgIf és az NgFor, felelősek ezekért a dinamikusan létrejövő nézetekért. A futásidőbeli hibakeresés egyik fő eszköze a ng.getContext, amely lehetővé teszi a fejlesztők számára, hogy a hozzá tartozó kontextust vizsgálják meg, miközben az Angular alkalmazás állapota és viselkedése folyamatosan frissül a különböző események hatására.

A leggyakoribb használati esetek közé tartozik az NgIf direktíva, amely igaz vagy hamis értéken alapuló feltételekhez rendeli az elemeket, és így befolyásolja a DOM struktúráját. Ha egy NgIf direktívával ellátott elemet adunk át az ng.getContext-nek, akkor az NgIfContext értéket kapjuk vissza, amely a következő tulajdonságokkal rendelkezik: $implicit, ngIf. Az $implicit értéke a kifejezés eredménye, míg a ngIf a kifejezés aktív állapotát mutatja. Ha egy másik struktúrált direktívát, például NgFor-t használunk, akkor az NgForOfContext kontextust kapjuk, amely gazdagabb információkat tartalmaz, például az aktuális indexet, az elemek számát, és az adott elem tulajdonságait.

Például egy NgFor direktívával rendelkező lista elemeknél minden egyes listaelemhez létrejön egy beágyazott nézet, amely elérheti azokat a tulajdonságokat, amelyek az NgForOfContext-ban találhatóak. A $implicit tulajdonság itt a listaelemre vonatkozó értéket tartalmazza, míg a többi tulajdonság, mint az even, odd, first, last a lista egyes elemeinek pozícióját és jellemzőit határozza meg. Az alkalmazás állapota a változók frissítésével és az események kezelésével folyamatosan módosulhat.

A fejlesztők számára kulcsfontosságú, hogy megfelelően vizsgálják meg az eseménykezelőket is, amelyek nemcsak a natív DOM eseményeket, hanem a komponensekhez kötött egyedi eseményeket is kezelik. Az Angular runtime API segítségével a fejlesztők könnyedén hozzáférhetnek az egyes eseményekhez, és módosíthatják azok viselkedését. Az ng.getListeners metódussal a fejlesztők megtekinthetik az eseménykezelők regisztrált callback függvényeit, és azok paramétereit. A hibaelhárítás során ezek a technikák különösen hasznosak lehetnek, mivel lehetővé teszik a futásidőbeli változások nyomon követését és a DOM frissítését a kívánt állapot elérése érdekében.

A változások alkalmazásához az ng.applyChanges metódus szolgál, amely lehetővé teszi az Angular számára, hogy alkalmazza a változtatásokat a DOM-ra, miután a változás észlelése megtörtént. Ez különösen hasznos, amikor az alkalmazás logikájában történt módosításokat kell visszajelezni a felhasználói felületre, anélkül hogy manuálisan kellene kezelni a DOM frissítéseket.

A beágyazott nézetek kezelése tehát egy alapvető tudnivaló minden Angular fejlesztő számára, különösen azok számára, akik mélyebb hibakeresési feladatokat végeznek. A különböző struktúrált direktívák és azok kontextusai segítenek a dinamikusan létrejövő elemek nyomon követésében és a kód megfelelő optimalizálásában. A futásidőbeli hibakeresés eszközei az Angular Ivy fejlesztési környezetben lehetővé teszik a kód működésének pontos megértését, valamint a gyors és hatékony hibakeresést.

A beágyazott nézetek és a struktúrált direktívák kezelésének alapjai mellett a fejlesztőknek érdemes figyelmet fordítaniuk az Angular Ivy és a kompatibilitási fordító használatára, mivel a különböző verziók közötti kompatibilitási problémák gyakran előfordulhatnak. A ngcc (Angular Compatibility Compiler) fontos eszköz a régebbi verziójú Angular könyvtárak integrálásában, és az alkalmazásokban való futtatásában. Az Angular alkalmazás kompatibilitásának biztosítása érdekében elengedhetetlen, hogy az Angular CLI legújabb verzióját használjuk, és biztosítsuk a megfelelő környezetet a fejlesztési munkafolyamatokhoz.

Hogyan használd az Angular Kompatibilitási Fordítót (ngcc) az optimális teljesítmény eléréséhez?

Az Angular Linker egy új megoldás, amely lecseréli az Angular Kompatibilitási Fordítót (ngcc). Míg az Angular Kompatibilitási Fordító egy részben Ivy-val lefordított Angular könyvtárakat teljesen Ivy-val lefordítottá alakít a projektünkben való felhasználás előtt, az Angular Linker már egy lépésben, teljesen átalakítja ezeket a könyvtárakat. Az Angular Kompatibilitási Fordító eltávolításra kerül egy olyan Angular verzióban, amelyet az írás idején még nem határoztak meg, de várhatóan a 12.2-es verzió után. Ennek következtében Angular alkalmazásaink csak részben Ivy-val lefordított könyvtárakat tudnak majd használni.

A fentieket figyelembe véve, a következő részben az Angular Kompatibilitási Fordító használatáról lesz szó, és hogyan segíthet abban, hogy gyorsan és hatékonyan tudjuk fordítani a könyvtárainkat.

Az Angular Kompatibilitási Fordítót a verzió 9-es kiadásaiban kézzel kellett futtatni, mielőtt bármit építettünk, teszteltünk vagy szolgáltunk volna. Később az Angular CLI már automatikusan indítja el a fordítót, amikor szükséges. Azonban továbbra is lehetőség van manuálisan elindítani a fordítót, ami elősegíti az optimális fordítási sebesség elérését. Az Angular Kompatibilitási Fordítónak legalább egyszer le kell futnia a következő műveletek előtt:

  • Fejlesztői szerver indítása

  • Automatikus tesztek futtatása

  • Az alkalmazás építése

Amikor új Angular könyvtárat telepítünk vagy egy új könyvtárat adunk hozzá egy csomag-regisztrálóból, újra kell futtatnunk a Kompatibilitási Fordítót. Érdemes lehet a Git repository postinstall hook-jában futtatni, hogy a következő alkalommal, amikor valamelyik műveletet elvégezzük, már ne kelljen várakozni. A fordító futása közben pedig nyugodtan dolgozhatunk a forráskódunkkal.

A Kompatibilitási Fordító használatához különböző paramétereket adhatunk meg, amik segítenek finomhangolni a fordítási folyamatot:

  • --create-ivy-entry-points: Az Angular könyvtárak csomagjaiba _ivy_ngcc almappákat hoz létre, ahol az Ivy-val lefordított csomagok és forrás térképek kerülnek elhelyezésre.

  • --first-only: Ha ezt a paramétert használjuk a --properties-szel kombinálva, akkor csak az első, az Angular által felismerhető modul formátumot fordítja le.

  • --properties: Meghatározza, hogy mely könyvtári csomagokat fogja lefordítani a fordító.

  • --target: Ez a paraméter lehetővé teszi, hogy csak egy adott csomagot fordítson le a rendszer.

  • --tsconfig: Használatával megadhatjuk, hogy egy adott Angular projektet célozzunk meg a fordítás során.

A leggyakoribb parancs, amit helyi fejlesztés során használhatunk, a következő:

bash
ngcc --first-only --properties es2015 module fesm2015 esm2015 browser main --create-ivy-entry-points

Ez a parancs biztosítja, hogy csak egy csomag formátum kerüljön lefordításra, és hogy az Ivy-hoz való kompatibilitást a lehető leggyorsabb formában érjük el. A --properties paraméter segítségével meghatározhatjuk a preferált csomag formátumot, amely az es2015 formátum a leggyorsabb az Ivy kompatibilitás elérésében.

Fontos megjegyezni, hogy az Angular 9.0 és 11.1 verzióiban a --create-ivy-entry-points paraméter használata nem javasolt, mivel a közvetlen helyszíni csomagcsere gyorsabb lehet ezekben a verziókban. A --use-program-dependencies opcióval korlátozhatjuk, hogy csak azokat a csomagokat fordítja le a rendszer, amelyek ténylegesen szükségesek az alkalmazás számára. Ez különösen hasznos az Angular CDK és Angular Material könyvtárak esetén, mivel ezek sok kisebb csomagot tartalmaznak, és ezek mindegyike külön-külön fordítódik le.

Ha CI/CD környezetben dolgozunk, a Kompatibilitási Fordító futtatása manuálisan, külön lépésként, hatékonyabbá teheti a folyamatot. Ha a node_modules mappa teljes újraépítése túl lassú, érdemes a csomagkezelő gyorsítótárának mentését és visszaállítását használni. Ezzel elkerülhetjük a node_modules teljes újratelepítését a CI/CD futtatások során.

Amennyiben a CI/CD környezet nem támogatja a gyorsítótárat, minden egyes futtatás alkalmával újra kell indítani a Kompatibilitási Fordítót. A gyorsabb fordítás érdekében a következő parancsot ajánlott használni:

bash
ngcc --first-only --properties es2015 module fesm2015 esm2015 browser main --create-ivy-entry-points

Ezzel a megoldással biztosíthatjuk, hogy az Angular csomagok optimálisan legyenek fordítva, és az Ivy-kompatibilis csomagok új mappákba kerülnek, nem felülírva a régi csomagokat.

A fordítási folyamat hatékonyságát tovább növelhetjük, ha a CI/CD-ben külön lépésként futtatjuk az ngcc-t, lehetővé téve, hogy finomhangoljuk a folyamatot, és az eredményeket folyamatosan nyomon követhessük a gyorsabb alkalmazásfejlesztés érdekében.

Hogyan készíthetünk finom és tápláló vegán és vegetáriánus ételeket lassú főzővel?
Hogyan őrzi meg a történelem emlékeit egy omladozó sírkert és egy elfeledett parancsnokság?
Miért érdekes a megkövesedett tárgyak?
Milyen hatással van a testünk felépítése az életünkre?
Mi a kanonikus forma és hogyan találjuk a legalkalmasabb bázist?