Jak Ivy mění způsob testování a ladění Angular aplikací?

Použití přísného režimu v Angularu přináší zásadní změny do každodenního vývoje. Především dochází ke snížení limitů pro velikost bundle balíčků – výchozí varování se nyní objevuje při velikosti 500 KB a chyba při 1 MB. U stylů komponent je prahová hodnota ještě nižší: varování při 2 KB a chyba při 4 KB. Přísný režim zároveň aktivuje striktní kontrolu typů v šablonách, což výrazně zvyšuje kvalitu kódu a odhaluje chyby dříve, než se projeví v běhu aplikace.

V testování přináší Angular Ivy zcela nový zážitek. Vedle lepšího typování, které přináší vyšší jistotu při kontrole správnosti, dochází také ke zrychlení běhu testů. Ivy zavádí takzvaný princip lokalizace a mezipaměť pro deklarace a moduly. Dříve testovací běh opakovaně načítal, parsoval a kompiloval komponenty pro každý test zvlášť, nyní se výsledek této činnosti sdílí napříč testy. Výsledkem je znatelné urychlení běhu testů i při častých přestavbách během vývoje.

Při psaní testů lze využít novou anotaci @ts-expect-error, představenou ve verzi TypeScriptu 3.9. Na rozdíl od známého @ts-ignore, tato anotace deklaruje, že následující řádek by měl generovat chybu kompilátoru – a pokud ji negeneruje, vývojář je na to explicitně upozorněn. Tím se zvyšuje jistota, že test skutečně ověřuje chybové chování, například při zadání nesprávného typu:

typescript
Copy code
describe('add', () => {

  it('rejects a string as left operand', () => {
    const textInput = '2';
    const four = 4;
    // @ts-expect-error
    expect(() => add(textInput, four)).toThrow();
  });
});

Používání @ts-expect-error vede k robustnějším testům, neboť se tím ověřuje nejen runtime chování, ale i očekávané selhání při kompilaci.

Zlepšení chybových hlášení je dalším důležitým krokem ke zvýšení produktivity vývojářů. Zatímco View Engine zobrazoval obecné a často matoucí zprávy, Ivy poskytuje kontext – včetně přesného souboru, řádku a sloupce, kde se chyba nachází. Například při použití neznámého prvku jako <app-header> mimo deklarovaný modul dostaneme přesnou informaci o umístění chyby, včetně návrhu jejího řešení a místa v šabloně, kde k ní došlo.

Zlepšila se i detekce syntaktických chyb, například při chybném zápisu pole imports v dekorátoru @NgModule. Pokud vývojář omylem přidá duplicitní čárku, kompilátor nyní přesně ukáže, kde k problému došlo, místo obecného hlášení o nepodporovaném výrazu.

To vše dohromady přináší zcela novou úroveň vývojářské zkušenosti v Angularu, kde ladění, testování a validace kódu se stávají integrální součástí samotného vývoje – nikoliv až jeho dodatečným krokem.

Jak používat vlastnosti CSS Custom Properties pro dynamické přizpůsobení stylů a jazykových verzí v aplikacích

V předchozích příkladech jsme ukázali, jak může být hodnota vlastnosti CSS Custom Property deklarovaná v globálním rámci :root použita pro všechny DOM elementy, které tuto vlastnost využívají. První panel, který je fialový, se zobrazuje, protože hodnota --background-color byla nastavena na fialovou v rámci :root. Důležitou poznámkou je, že název CSS Custom Property musí začínat dvěma pomlčkami (--), a název je citlivý na velikost písmen.

V ukázce je vidět, že druhý panel je růžový. To je způsobeno tím, že třída CSS "contrast" definuje vlastní rámec, ve kterém je hodnota --background-color růžová místo fialové. Tento rámec začíná u DOM elementu, na kterém je použita třída, a ovlivňuje všechny jeho podřízené elementy. Třetí panel zůstává fialový, protože rodičovský element nemá třídu, která by deklarovala hodnotu custom property, pouze třídu, která ji používá. Tento příklad ilustruje, jak moc mohou být CSS Custom Properties flexibilní a jak lze tento mechanismus použít pro širokou škálu účelů.

Custom Properties, jak je ukázáno, lze využívat v mnoha různých kontextech. Mohou sloužit pro animace, přechody, fonty, barvy, dimenze a rozvržení. Důležitým přínosem je také jejich využití pro zajištění lokalizace a globalizace. Například pomocí pseudoelementů ::before nebo ::after s vlastností content, v kombinaci s pseudoklasou :lang(), můžeme dynamicky měnit text v závislosti na aktivním jazyce.

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

Pokud bychom tento přístup chtěli použít v aplikaci postavené na Angularu, můžeme se podívat na další příklad, kde bude možné přepínat mezi různými jazyky pomocí interaktivních tlačítek. Jazyk bude definován pomocí bindingu v modelu komponenty a na základě vybraného jazyka se dynamicky změní hodnota custom property. Tento mechanismus umožní snadnou správu více jazykových verzí a přizpůsobení textů.

Například:

typescript
Copy code
@Component({

   selector: 'app-welcome',
   template: `
      <button (click)="onLanguageSelect('en')">English</button>
      <button (click)="onLanguageSelect('fr')">Français</button>
      <div class="welcome-banner">
         <div class="welcome-content">{{ welcomeText }}</div>
      </div>
   `,
   styleUrls: ['./welcome.component.css']
})
export class WelcomeComponent {
   welcomeText: string = 'Welcome to my website!';
   onLanguageSelect(language: string): void {
      if (language === 'fr') {
         this.welcomeText = 'Bienvenue sur mon site web!';
      } else {
         this.welcomeText = 'Welcome to my website!';
      }
   }
}

Tato jednoduchá aplikace umožní uživatelům přepínat mezi jazyky a přizpůsobovat obsah stránky na základě výběru. Pomocí CSS Custom Properties a dynamických změn v Angularu lze snadno vytvořit aplikace, které se přizpůsobí různým jazykům a preferencím uživatele.

Dalším rozšířením této myšlenky je implementace dynamických změn vzhledu a velikosti textu na základě uživatelských preferencí. Pokud například chceme umožnit uživatelům změnit velikost textu na stránce, můžeme použít Angular s CSS Custom Properties takto:

typescript
Copy code
@Component({

   selector: 'app-root',
   template: `
      <button (click)="changeTextSize(14)">14px</button>
      <button (click)="changeTextSize(18)">18px</button>
      <div class="content">
         Lorem ipsum dolor sit amet...
      </div>
   `,
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   @HostBinding('style.--text-size.px') textSize = 16;
   changeTextSize(size: number): void {
      this.textSize = size;
   }
}

Tento přístup umožňuje uživatelský zásah do stylů aplikace, což je zvláště důležité pro zlepšení přístupnosti a pohodlí uživatelů s různými potřebami.

Důležitým aspektem je také využívání zkratek pro scope poskytovatelů, které umožňují efektivnější správu závislostí v rámci aplikace. Angular Ivy přinesl novinku v podobě zkratek poskytovatelů "any" a "platform", které usnadňují práci s tree-shakable poskytovateli, což je klíčové pro optimalizaci velikosti aplikace.

Jak používat komponenty Google Maps v Angularu?

Komponenty Google Maps v rámci Angularu umožňují snadnou integraci map a jejich různých funkcí přímo do aplikací. Tento nástroj je postavený na oficiálním balíčku @angular/google-maps, který obaluje základní funkce Google Maps JavaScript API do jednoduchých komponent pro použití v Angular aplikacích. Mezi nejběžnější komponenty patří GoogleMap, MapInfoWindow, MapMarker a MapMarkerClusterer. V tomto textu se zaměříme na jejich základní použití a vlastnosti.

typescript
Copy code
@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
})
export class MapComponent {

  @ViewChild(GoogleMap, { static: false }) map?: GoogleMap;

  isGoogleMapsApiLoaded$: Observable<boolean> = this.http

    .jsonp('https://maps.googleapis.com/maps/api/js?key=${this.config.googleMapsApiKey}', 'callback')

    .pipe(
      mapTo(true),
      catchError(() => of(false)),
    );

  constructor(private config: AppConfig, private http: HttpClient) {}

}

Tato komponenta používá isGoogleMapsApiLoaded$, což je Observable, který sleduje stav načtení API. Jakmile je API načteno, komponenta GoogleMap se vykreslí a je možné s ní dále pracovat.

Komponenty Google Maps v Angularu se mohou vzájemně kombinovat, aby bylo možné vytvářet komplexní mapy s různými vrstvami a interakcemi. Když se podíváme na jednotlivé komponenty, vidíme, že každá z nich má své specifické využití.

Komponenta GoogleMap je základním stavebním kamenem, na který můžeme přidávat další komponenty, jako jsou markery, informační okna, či vrstvy. Má několik vstupních vlastností, mezi které patří center, height, width, zoom a další, které definují vzhled a chování mapy. GoogleMap rovněž disponuje různými metodami pro manipulaci s mapou, jako je například změna centra nebo přiblížení.

Komponenta MapMarker představuje jednotlivý marker na mapě. Může být upravena pomocí různých možností, jako jsou ikony, symboly nebo popisky. Tato komponenta je Angular wrapper pro třídu google.maps.Marker a obsahuje vlastnosti jako position, label, title a další.

Komponenta MapInfoWindow je používána pro zobrazování informačních oken nad markery. Tato okna mohou obsahovat text, obrázky nebo jiný obsah, který se zobrazuje při kliknutí na marker. Pomocí metody open() je možné otevřít okno s informacemi, přičemž lze specifikovat, k jakému markeru bude připojeno.

Základem správného použití těchto komponent je správná konfigurace a pochopení jejich vzájemné interakce. Každá komponenta přichází s řadou parametrů, které je možné upravit podle potřeby. Například u markerů je možné nastavit vlastní ikony, což může být užitečné pro přizpůsobení vzhledu mapy podle specifických potřeb projektu. Podobně u markerových klastrů lze definovat minimální velikost klastru nebo maximální úroveň přiblížení, při které se markery seskupí.

Kromě základních komponent je možné přidávat i další vrstvy a funkce, jako jsou vrstvy pro dopravu, cyklistické trasy, či KML soubory. Tyto komponenty lze využít pro specializované aplikace, které vyžadují pokročilou analýzu dat přímo na mapě.

Při práci s Google Maps v Angularu je důležité pochopit, jak správně spravovat závislosti mezi komponentami, správně reagovat na události mapy a efektivně manipulovat s daty. V některých případech může být nutné integrovat další knihovny, jako je například MarkerClustererPlus pro efektivní clustering markerů, což může výrazně zlepšit výkon aplikace při velkém množství dat.

Tato technologie je silným nástrojem pro vytváření interaktivních mapových aplikací, které mohou zahrnovat vše od jednoduchých lokalizačních funkcí až po složité analytické nástroje využívající geolokační data a vizualizace.

Jak navrhnout a strukturovat data a komponenty v aplikaci Angular

Pro ilustraci si vezmeme příklad aplikace Angular Academy, kde se pracuje s třemi základními entitami: škola (School), kurz (Course) a video (Video). Každý kurz patří ke konkrétní škole a obsahuje sadu videí. Pro popis těchto entit jsou v TypeScriptu definovány jednoduché rozhraní, která přesně vymezují požadovaná data a jejich strukturu. Například kurz má jedinečné ID, název, volitelný popis a pole videí. Video pak obsahuje identifikátor na YouTube, název, datum nahrání a další volitelné atributy jako autora či popis. Škola zase obsahuje ID, název a geografické souřadnice, což umožňuje její zobrazení na mapě.

Tento model představuje základ, na kterém je možné stavět aplikaci, protože umožňuje opakované využití logiky a usnadňuje správu dat. Například rozhraní Course je sdílené mezi komponentami Škola a Kurz, čímž se minimalizuje duplikace kódu.

Aplikaci je vhodné rozdělit do samostatných modulů a komponent, které mají jasně definované odpovědnosti. V našem případě jsou hlavními částmi moduly Kurz, Téma a Školy. Každý modul má svůj vlastní komponent, který zodpovídá za zobrazení a správu relevantních dat. Komponenta Kurz zobrazuje obsah kurzu včetně videí, která jsou přehrávána pomocí Angular YouTube Player modulu. Komponenta Téma ovlivňuje vizuální styl aplikace prostřednictvím CSS vlastností, čímž umožňuje uživateli měnit vzhled. Komponenta Školy umožňuje vyhledávat školy na mapě a vybírat kurzy, které škola nabízí.

Pro navigaci mezi těmito částmi aplikace se v modulu aplikace (AppModule) definují trasy, kde každá komponenta má přiřazenou URL cestu. Například výchozí cesta vede na kurz s ID 1, což umožňuje jednoduchý přístup uživatele k obsahu bez nutnosti přihlašování nebo dalších konfigurací. Případné rozšíření o přihlašování a uživatelské profily je možné realizovat později, kdy by se například vybraný kurz mohl ukládat v rámci uživatelských dat.

Modulární struktura aplikace přináší i výhody při správě závislostí. Každý modul importuje jen ty knihovny a komponenty, které skutečně využívá, což udržuje aplikaci přehlednou a optimalizovanou. Například modul Kurz zahrnuje modul Video, který zase importuje Angular YouTube Player a Clipboard moduly nezbytné pro přehrávání videí a kopírování dat.

Pro získávání dat jsou v Angularu vhodné služby (services), které zajišťují asynchronní komunikaci s backendem. V našem příkladu jsou služby CourseService a SchoolsService, které vrací data o kurzech a školách formou Observable streamů. To umožňuje efektivní načítání a aktualizaci dat bez blokování uživatelského rozhraní. Pro účely výuky se zde používají tzv. mock data, tedy simulovaná data, ale principy lze snadno aplikovat i na reálná API.

Dále je třeba uvědomit si, že vhodné plánování navigace a routing systému je základem intuitivního uživatelského zážitku. Výchozí nastavení tras, parametrizace a možnost rozšíření o autentizaci či ukládání preferencí uživatele jsou aspekty, které zvyšují flexibilitu aplikace.

Zvláštní pozornost by měla být věnována správě závislostí v Angular modulech. Zavedení specifických modulů s přesně definovanými závislostmi zaručuje, že aplikace nebude obsahovat nadbytečné knihovny, což se projeví lepším výkonem a snazší správou. Tento princip „používej pouze to, co skutečně potřebuješ“ je jedním ze základních kamenů efektivního vývoje v Angularu.