Miért fontos a CSS egyéni tulajdonságok és azok alkalmazása?

A CSS egyéni tulajdonságok (más néven CSS változók) lehetővé teszik, hogy a stílusokat dinamikusan és hatékonyan kezeljük. Az előző példában bemutattuk, hogy a :root szintjén deklarált --background-color egyéni tulajdonság értéke alkalmazható az összes DOM elemre. Az első panel lila, ahogy azt a root szinten beállítottuk. Az egyéni tulajdonságok kulcsa, hogy nevük két kötőjellel (--), és az érzékenyek a kis- és nagybetűkre.

Egy fontos dolog, amit érdemes figyelembe venni, hogy az egyéni tulajdonságok hatóköre a CSS osztályok által meghatározott területekre korlátozódik. A második panel rózsaszín, mert az abban szereplő "contrast" CSS osztályban a --background-color értéke rózsaszínre van állítva. Az egyéni tulajdonságok hatóköre ott kezdődik, ahol az osztály használata történik, és az összes, az adott elemhez tartozó gyermeket is érinti. Azonban, ha a harmadik panelt körülvevő elem nem rendelkezik a tulajdonságot használó osztállyal, annak színe sem lila, sem rózsaszín nem lesz.

A CSS egyéni tulajdonságok széleskörű alkalmazása lehetőséget ad arra, hogy az alkalmazásunkban szinte bármilyen CSS értéket dinamikusan módosíthassunk. Például animációk, átmenetek, betűtípusok, színek, dimenziók, elrendezések módosítására egyaránt használhatók. Az egyéni tulajdonságok nemcsak szövegeket vagy színeket, hanem akár számokat is tárolhatnak. Ezen kívül különösen hasznosak lehetnek nemzetközivé tett alkalmazások esetén, ahol a nyelvek közötti váltás egyszerűsítése szükséges.

css
Copy code
:lang(en) {
   --welcome-text: 'Welcome to my website!';
}
:lang(fr) {
   --welcome-text: 'Bienvenue sur mon site web!';
}

Ezután a szöveget a welcome-banner osztályban szereplő welcome-content elemen keresztül jeleníthetjük meg, ahol az értéke a --welcome-text egyéni tulajdonsághoz kötődik.

typescript
Copy code
import { Component, HostBinding } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
  `,
})
export class AppComponent {
  @HostBinding('style.--text-size.px') textSize = 16;
}

Ez lehetővé teszi, hogy a komponensünk host eleméhez kötött stílusok, például betűméret, dinamikusan változzanak, anélkül hogy külön CSS fájlokat kellene módosítanunk.

Fontos, hogy az ilyen típusú dinamikus változtatások rendkívül hasznosak lehetnek például felhasználói beállítások kezelésében. Ha az alkalmazásunkban például lehetőség van a betűméret módosítására, akkor a felhasználói választásokat könnyen átadhatjuk az alkalmazás más részeinek, ahol a változtatásokat azonnal alkalmazhatjuk. Az Angular Ivy új funkciói lehetővé teszik az ilyen típusú kommunikációt, amellyel dinamikusan alkalmazhatjuk az egyéni tulajdonságokat.

Ezen kívül az Angular könyvtárak és nagyobb alkalmazások, különösen monorepo-k esetében a tree-shaking segít a nem használt függőségek eltávolításában, így a CSS változók használata az alkalmazás méretének csökkentésére is szolgálhat.

A CSS egyéni tulajdonságok és azok alkalmazása az Angularban tehát rendkívül erőteljes eszköztárat ad a fejlesztők kezébe, amely lehetővé teszi az alkalmazások rugalmasabb, dinamikusabb és hatékonyabb kezelését.

Hogyan végezzünk teszteket Angular komponenseken keresztül a felhasználó szemszögéből?

A tesztelés egyik legfontosabb célja, hogy biztosítsuk, hogy a fejlesztett alkalmazás minden egyes funkciója helyesen működjön, és megfeleljen a felhasználói elvárásoknak. Az Angular komponens-harneszek segítségével könnyedén végezhetünk olyan teszteket, amelyek nem csupán a komponensek belső működésére, hanem azok viselkedésére is összpontosítanak. A tesztelési megközelítés, amit ebben a fejezetben bemutatunk, a felhasználói szemszögből vizsgálja a különböző Angular komponensek használatát, figyelmen kívül hagyva azok implementációs részleteit.

A leggyakoribb komponensek, mint például az Angular Material Select vagy Button komponensek, sokféle eseményt és viselkedést tartalmaznak, melyeket tesztelni szükséges annak érdekében, hogy biztosak legyünk azok megbízhatóságában és felhasználóbarát működésében. A tesztelés nemcsak az egyes komponensek funkcionalitására vonatkozik, hanem arra is, hogy hogyan lépnek interakcióba ezek a komponensek más szolgáltatásokkal, mint például egy rendelési rendszer.

Az Angular CDK (Component Dev Kit) által biztosított komponens-harneszek egyre népszerűbbek, mivel lehetővé teszik, hogy függetlenek legyünk a komponensek belső felépítésétől, és kizárólag a felhasználói viselkedésre összpontosíthassunk. Így a komponens tesztelése a fejlesztési ciklusok során sokkal egyszerűbbé válik, hiszen nem kell az implementációs részletekkel foglalkozni. A komponens-harnesz egy magas szintű API-t biztosít, amely segítségével egyszerűen meghatározhatjuk a komponens működését, például annak állapotát, interakcióit vagy az eseményeket, amelyeket az alkalmazás során generál.

A következő teszt példaként egy online ruházati bolt vásárlási folyamatát mutatja be. Az alkalmazott komponensek: egy "Méret kiválasztó" legördülő menü és egy "Vásárlás egy kattintással" gomb. A teszt során a felhasználó egy "Nagy" méretű inget választ, majd rákattint a vásárlás gombra. A teszt célja, hogy megbizonyosodjunk róla, hogy a vásárlási folyamat helyesen működik, és a vásárlási szolgáltatás megfelelően hívódik meg.

Az alábbiakban láthatóak a szükséges lépések és kód, hogy létrehozzuk ezt a tesztet:

1. Először importáljuk a szükséges Angular csomagokat, mint például a HarnessLoader-t és a TestbedHarnessEnvironment-et.

2. Beállítjuk a szükséges modulokat, és helyettesítjük az OrderService-t egy spyon alapú teszt szolgáltatással.

3. Létrehozzuk a tesztkomponenst, és a teszteléshez szükséges komponens-harneszt használjuk a gombok és legördülő menük kezelésekor.

4. A vásárlás gombra kattintás után ellenőrizzük, hogy az OrderService megfelelően hívódott-e meg a megfelelő időpontban.

Ez a megközelítés nagy előnye, hogy teljes mértékben elválasztja a tesztelést a DOM struktúráktól és a komponens implementációjától. Így ha az Angular Material jövőbeli verziói változtatnak a belső szerkezeten, a tesztünk nem fog elromlani, mivel a komponens-harnesz API-ja nem függ a DOM struktúrától.

A tesztek során nemcsak az események sikeres kiváltására kell figyelni, hanem arra is, hogy az alkalmazás válaszideje megfelelő legyen. A felhasználói élmény minősége, a gyors visszajelzések, a könnyű navigálhatóság és az intuitív design mind hozzájárulnak a sikeres alkalmazás teszteléséhez. A tesztelés nem csupán arról szól, hogy a kód jól van-e implementálva, hanem arról is, hogy a felhasználói igényeknek megfelelően reagál-e az alkalmazás.

Hogyan használjuk az Angular új fejlesztési eszközeit és funkcióit?

Az Angular keretrendszer folyamatos fejlődésének köszönhetően az újabb verziók egyre több hasznos fejlesztési eszközt és API-t kínálnak, amelyek segítenek a fejlesztőknek gyorsabbá és hatékonyabbá tenni a munkát. A legújabb Angular frissítések és funkciók bevezetésével, különösen az Ivy váltásával, az alkalmazásfejlesztés során jelentős változások történtek. E fejezet célja, hogy bemutassa az Angular legújabb eszközeit és azok alkalmazását a gyakorlatban, miközben a különböző fejlesztési irányelvek és technikák is szóba kerülnek.

Az Angular új tesztelési eszközei, mint például a "component harnesses", jelentős mértékben megkönnyítik az alkalmazások tesztelését. A "component harness" API lehetővé teszi, hogy az alkalmazás egyes komponenseit tesztelési környezetben kezeljük, így könnyen tesztelhetjük az egyes elemek viselkedését és működését anélkül, hogy manuálisan kellene interakcióba lépni velük. Az Angular CDK (Component Dev Kit) új "Clipboard API"-ja szintén komoly segítséget nyújt az olyan alkalmazások fejlesztésében, amelyeknél a vágólap kezelése fontos szerepet kap.

Ezen kívül a CSS Custom Properties segítségével az alkalmazás kinézete és működése is testre szabható. A CSS egy új szintre emelésével lehetőség nyílik arra, hogy a fejlesztők dinamikusan módosítsák az alkalmazás stílusait anélkül, hogy minden egyes változtatást kézzel kellene végrehajtaniuk. Ez különösen fontos olyan alkalmazások esetén, ahol a dizájn gyors módosítása szükséges, és ezáltal növelhetjük a fejlesztés hatékonyságát.

A CSS Custom Properties használatával kapcsolatosan az Angular Academy alkalmazás példáján keresztül mutatjuk be, hogyan lehet egyedi témákat kialakítani, amelyek dinamikusan változtatják az alkalmazás megjelenését. A rugalmas grid layoutok kialakítása szintén fontos szerepet kap, hiszen így az alkalmazás különböző képernyőméretekhez is könnyen igazítható.

Az Angular összeszervezésének és komponenseinek használata szintén kulcsfontosságú a moduláris fejlesztés szempontjából. A Angular Academy alkalmazás felépítését részletesen bemutatva láthatjuk, hogyan építhetjük fel a különböző komponensek közötti kapcsolatokat, valamint hogyan kezelhetjük a komponensek közötti adatkommunikációt és kölcsönhatásokat. Az Angular új komponensek használata lehetővé teszi, hogy hatékonyabb és fenntarthatóbb alkalmazásokat készítsünk, miközben minimalizáljuk a szükséges kód mennyiségét.

A fejlesztési ciklusok gyorsítása érdekében a könyv egy külön fejezetben foglalkozik a "Ahead-of-Time" (AOT) Angular fordítóval, és annak alkalmazásával kapcsolatos gyakorlati kihívásokkal. Az AOT jelentős előnyöket biztosít, különösen a teljesítmény terén, mivel a fordítás már a fejlesztés során történik, így csökkentve a futási időt és a hibák előfordulásának lehetőségét.

A tesztelési és fejlesztési eszközök mellett nem szabad megfeledkezni az Angular kompatibilitási fordítóról sem. Az Angular Compatibility Compiler (ngcc) segít abban, hogy az alkalmazások zökkenőmentesen működjenek az új Ivy rendszerrel, miközben biztosítja a visszafelé kompatibilitást a régi alkalmazásokkal is. Az ngcc CLI paramétereinek és optimalizálási lehetőségeinek részletes elemzése lehetővé teszi a fejlesztők számára, hogy a lehető legjobb teljesítményt érjék el a CI/CD munkafolyamatok és monorepo struktúrák kezelésében.

Fontos megérteni, hogy a migrálás az Angular Ivy verzióra egy folyamat, amely alapos tervezést és megfelelő eszközkészletet igényel. Az alkalmazások migrálása a View Engine-ről Ivy-ra nem csupán egyszerű verzióváltás, hanem a fejlesztési struktúrák és a tesztelési folyamatok átalakítását is magában foglalja. A megfelelő migrációs technikák alkalmazása biztosítja, hogy az alkalmazásunk hosszú távon fenntartható maradjon, miközben kihasználhatjuk az Ivy új lehetőségeit.

Hogyan használhatók aszinkron függőségek az Angular alkalmazásokban?

Az Angular alkalmazások fejlesztése során számos módszert alkalmazhatunk az aszinkron függőségek kezelésére, különösen akkor, amikor a betöltés gyorsasága kulcsfontosságú. Az egyik ilyen megoldás az alkalmazás inicializáló (app initializer) használata, amely lehetővé teszi, hogy a szükséges konfigurációs adatokat, például a funkciók engedélyezését szolgáló zászlókat (feature flags), már az alkalmazás indítása előtt letöltsük és beállítsuk.

A FeatureFlagService és a HttpClient használatával az alkalmazás kezdeti állapotának beállítása egyszerűsíthető, és az aszinkron adatbetöltést hatékonyabban kezelhetjük. Az alábbiakban bemutatott kód példa segít megérteni, hogyan érdemes implementálni egy aszinkron inicializáló függőséget az Angular alkalmazásban.

typescript
Copy code
function configureFeatureFlags(
  featureFlagService: FeatureFlagService,
  http: HttpClient
): () => Observable<void> {
  return () =>
    http.get<{ [feature: string]: boolean }>('/assets/features.json').pipe(

      tap((features) => featureFlagService.configureFeatures(features)),

      mapTo(undefined)
    );
}

Ezután a kódot regisztráljuk az alkalmazás fő moduljában az APP_INITIALIZER használatával, hogy biztosítsuk a funkciók megfelelő inicializálását az alkalmazás betöltése előtt. Íme egy példa, hogyan tehetjük ezt meg a featureFlagInitializer segítségével:

typescript
Copy code
@NgModule({

  bootstrap: [AppComponent],
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule, MatSlideToggleModule],
  providers: [featureFlagInitializer],
})
export class AppModule {}

Miért előnyös az alkalmazás inicializáló használata? Az egyik legnagyobb előnye, hogy több inicializálót is párhuzamosan futtathatunk, ezzel gyorsítva az alkalmazás betöltési idejét. Ha nem használjuk ezt a technikát, akkor az egész alkalmazás betöltése csak akkor fejeződik be, amikor a válaszok megérkeznek az aszinkron hívásokra. Az inicializáló viszont lehetővé teszi, hogy az alkalmazás többi részének betöltése közben is történjenek háttérben az aszinkron műveletek.

Ugyanakkor fontos észben tartani, hogy az aszinkron függőségek kezelése szolgáltatás-alapú megoldásokra épít, tehát egy szolgáltatásba kell csomagolnunk a funkciók állapotát és a hozzájuk tartozó metódusokat. Ez szemben áll azzal az egyszerűbb megoldással, amikor a funkciók statikus, közvetlenül hozzáférhető objektumok formájában voltak elérhetők. Bár mindkét megoldásnak megvannak a maga előnyei és hátrányai, a választás a konkrét igényektől függ.

A FeatureFlagService-t az Angular komponensekbe injektálhatjuk, és annak isEnabled metódusával ellenőrizhetjük, hogy egy-egy funkció engedélyezve van-e. Például:

typescript
Copy code
@Component({

  selector: 'app-root',
  template: `
    <mat-slide-toggle [checked]="featureFlagService.isEnabled('newFeature')">
      New Feature
    </mat-slide-toggle>
  `,
})
export class AppComponent {
  constructor(public featureFlagService: FeatureFlagService) {}
}

Ez lehetővé teszi, hogy a felhasználói felületen dinamikusan jelenítsük meg a funkciók állapotát, miközben a háttérben a megfelelő feature flag-eket kezeljük.

A fejlesztés során a legfontosabb kérdés, hogy melyik módszert válasszuk: statikus, egyszerű megoldásokat, vagy egy komplexebb, szolgáltatás alapú megközelítést. A választás során figyelembe kell venni, hogy a funkciók konfigurációja milyen mértékben változhat a futás során, és hogy a rendszer skálázhatóságát és karbantarthatóságát mennyire befolyásolják a különböző megoldások.

A fent bemutatott megoldás nemcsak a funkciók engedélyezését, hanem más konfigurációs adatokat is képes kezelni, például különböző felhasználói szintek vagy környezetekhez kapcsolódó beállításokat. Az alkalmazás inicializálása tehát kulcsfontosságú szerepet játszik az Angular alkalmazások teljesítményének optimalizálásában, különösen akkor, ha az alkalmazás nagyszabású, és sok aszinkron adatot kell kezelnie már a kezdeti szakaszban.