Angular

Angular je robustní, open-source frontendový framework postavený na jazyce TypeScript, jehož hlavním tvůrcem a správcem je společnost Google. Je od základu navržen pro vývoj rozsáhlých, vysoce výkonných a udržovatelných podnikových (*enterprise*) aplikací.

Na rozdíl od knihoven, které řeší pouze vykreslování uživatelského rozhraní, poskytuje Angular vývojářům pevně danou architekturu, jednotné standardy a obrovskou sadu vestavěných nástrojů – od pokročilého routování a správy formulářů až po HTTP komunikaci se serverem.

Angular striktně vyžaduje použití TypeScriptu – silně typované nadstavby JavaScriptu. Statická typování a moderní OOP prvky (třídy, rozhraní, generiky) přinášejí řadu výhod:

• Včasná detekce chyb: Syntaktické a typové chyby odhalíte už během psaní kódu v IDE, nikoliv až za běhu v prohlížeči.
• Skvělá škálovatelnost: Ve velkých vývojářských týmech pomáhá TypeScript udržovat jasnou dohodu o tom, jaká data (datové modely) mezi jednotlivými vrstvami aplikace proudí.
• Pokročilý refaktoring: Bezpečné a automatizované přejmenovávání proměnných či metod napříč celou aplikací.

Jedna z nejznámějších a nejmocnějších funkcí Angularu (implementovaná pomocí direktivy `[(ngModel)]` a syntaxe „box-and-banana“).

• Jakmile programově změníte hodnotu proměnné v TypeScriptovém kódu, stav se okamžitě propíše do HTML šablony.
• A naopak – pokud uživatel cokoliv upraví v uživatelském rozhraní (např. napíše text do vstupního políčka), hodnota v kódu se ihned automaticky aktualizuje bez nutnosti psát manuální event listenery.

Angular disponuje extrémně propracovaným, hierarchickým systémem pro injektáž závislostí. Služby (*Services*), které obsahují business logiku nebo komunikují s API, jsou spravovány samotným frameworkem.

• Pokud komponenta potřebuje načíst data z databáze, Angular jí automaticky „přihraje“ (injektuje) správnou instanci potřebné služby.
• Výsledkem je vysoce modularizovaný, přehledný a snadno testovatelný kód (jednotlivé služby lze při testování jednoduše mockovat).

Aplikace jsou logicky členěny na stavební bloky (moduly, resp. komponenty a samostatné feature moduly).

• Pomocí mechanismu Lazy Loading (postupného načítání) lze zajistit, že se uživateli při startu aplikace nestahuje celý monolitický balík kódu, ale pouze ta část (modul), kterou právě otevírá. To dramaticky zrychluje počáteční načtení (*Initial Load*) rozsáhlých aplikací.

V historii vývoje tohoto nástroje existuje zásadní předěl, který je nutné mít na paměti:

• AngularJS (verze 1.x): Původní přelomová verze představená v roce 2010. Dnes se jedná o zcela zastaralou technologii, jejíž oficiální podpora již dávno skončila.
• Angular (verze 2 a novější): Úplný, moderní přepis architektury z roku 2016. Tyto nové verze nejsou zpětně kompatibilní s původním AngularJS. Moderní verze (Angular 17, 18 a novější) přinášejí revoluční prvky, jako je reaktivní programování (RxJS), zónová i bezzónová architektura (*Zoneless*), nové reaktivní šablony a extrémní rychlost kompilace.

Následující ukázka demonstruje minimalistickou komponentu v TypeScriptu s definovaným selektorem a inline šablonou:

import { Component } from '@angular/core';

@Component({
  selector: 'app-pozdrav',
  template: '<h1>Ahoj, {{ jmeno }}!</h1>'
})
export class PozdravComponent {
  jmeno: string = 'Vývojáři';
}

• Enterprise projekty: Ideální volba pro robustní bankovní systémy, komplexní vládní portály, CRM systémy a rozsáhlé firemní aplikace.
• Velké a rostoucí týmy: Díky striktním konvencím a pevně dané struktuře frameworku píší všichni členové týmu kód podobným způsobem, což usnadňuje code-review a zaučování nových lidí.
• Dlouhodobá údržba a životnost: Silná garance podpory ze strany Googlu a robustnost TypeScriptu předurčují Angular pro projekty s předpokládanou životností deseti a více let.

Zajímavost pod kapotou: Angular využívá pokročilou AOT (Ahead-of-Time) kompilaci. To znamená, že celý zdrojový kód (TypeScript a HTML šablony) se zkompiluje do čistého JavaScriptu a optimalizovaných instrukcí ještě předtím, než je aplikace distribuována uživateli. Prohlížeč tak stahuje již hotový, rychlý kód, což bleskurychle zrychluje start celé aplikace.

Zpět na Architekturu