Jak funguje Angular: Architektura, komponenty a reaktivní programování

V porovnání s frameworky jako Backbone nebo React, které vyžadují volání metody render pro zpracování HTML šablon, Angular tento proces vykonává automaticky a zcela transparentně pro vývojáře. Jedním z klíčových rozdílů mezi aplikacemi typu MVC a MVVM je právě vazba (binding). V Angularu je základní jednotkou aplikace komponenta. Komponenta je kombinací tří složek: JavaScriptové třídy napsané v TypeScriptu a šablony Angularu napsané v HTML, CSS a TypeScriptu. Tyto dvě části do sebe zapadají jako puzzle, což umožňuje jejich vzájemnou komunikaci.

Angular šablony umožňují podobné opětovné využívání kódu prostřednictvím direktiv, filtrů (pipes), uživatelských ovládacích prvků a dalších komponent. Tato část kódu, která je zodpovědná za interaktivitu, bývá často složitá a obtížně udržovatelná, proto je třeba ji oddělit od logiky byznysu nebo prezentace, aby bylo možné snadno udržovat čistotu a čitelnost kódu. Angular 17 přináší novou syntaxi pro řízení toku (v režimu náhledu), která nahrazuje starší direktivy, jako jsou *ngIf, *ngFor a *ngSwitch, novými dekorátory jako @if, @for a @switch, a zavádí novinky jako @empty, @defer, kontextové proměnné a podmíněné příkazy. Tato nová syntaxe činí šablony přehlednějšími a zabraňuje importování zastaralých direktiv do každé komponenty ve stand-alone projektech. V tomto knihy se bude výhradně používat nový kontrolní tok.

S příchodem stand-alone komponent se objevuje výhoda eliminace složitých a často neefektivních modulů. Předtím bylo nutné vkládat sdílené komponenty do společného modulu, což vedlo k neefektivnímu zvyšování velikosti aplikace. Například aplikace jako LocalCast Weather by neměla žádné výhody z používání modulů, naopak aplikace jako LemonMart, která implementuje různé obchodní funkce v oddělených modulech, těží z modularity více. Tento přístup je efektivní pro velké aplikace, kde rozdělení kódu na různé části přináší významné úspory v rychlosti načítání a správě aplikace.

Přesto by stand-alone komponenty neměly být zaměňovány za Angular elements, které jsou implementací webového standardu pro vlastní prvky, známé také jako Web Components. Implementace komponent tímto způsobem by vyžadovala výrazné zjednodušení frameworku Angular, což by znamenalo snížení velikosti z přibližně 150 KB na několik KB. Tato technologie je ambiciózní a její úspěch by znamenal možnost používat Angular komponenty v jakékoli webové aplikaci, což by bylo revoluční. O této technologii se můžete dozvědět více na stránkách Angular Elements.

Angular v těsné spolupráci s knihovnou RxJS přináší reaktivní vzory vývoje, což znamená posun od tradičního imperativního stylu programování k reaktivnímu, který umožňuje snazší práci s asynchronními datovými toky. Tato změna ve stylu programování činí aplikace více modulárními a lépe škálovatelnými. V Angularu je možné kombinovat různé paradigmy programování – ať už pocházíte z objektově orientovaného nebo funkcionálního prostředí, můžete efektivně pracovat s Angular aplikacemi.

Je důležité si uvědomit, že reaktivní programování přináší nový způsob, jakým lze přistupovat k vývoji složitých aplikací. Tento přístup, který dává přednost asynchronnímu zpracování datových toků před sekvenčními kroky, usnadňuje testování a zjednodušuje ladění aplikací, protože každá část aplikace je jednoduše testovatelná jako samostatná funkce.

Jak správně nakonfigurovat Docker pro Angular aplikace: Kompletní průvodce

Po nainstalování Dockeru je dalším krokem konfigurace npm skriptů pro Docker. Tyto skripty usnadňují automatizaci procesů, jako je stavba, testování a publikování aplikací. Vytvořil jsem sadu skriptů pro Docker, které fungují na Windows 10 i macOS. Můžete si je stáhnout a automaticky konfigurovat pro svůj projekt pomocí příkazu:

ruby
Copy code
$ npx mrm npm-docker

Po spuštění tohoto příkazu budete mít připravené skripty, které vám umožní efektivně spravovat kontejnery pro vaše aplikace.

Stavba a publikování Docker obrázku na Docker Hub

Nyní se zaměříme na samotné vytvoření Docker obrázku a jeho publikování na Docker Hub. Tento proces vám umožní přenést vaši aplikaci do Docker kontejneru, což znamená, že ji můžete spustit kdekoli, kde je Docker k dispozici. Začněte tím, že si vytvoříte účet na Docker Hub na https://hub.docker.com/ a následně vytvoříte veřejný repozitář pro vaši aplikaci. V souboru package.json je potřeba přidat nebo upravit sekci config, která obsahuje nastavení pro Docker:

json
Copy code
"config": {

  "imageRepo": "[namespace]/[repository]",
  "imageName": "custom_app_name",
  "imagePort": "0000",
  "internalContainerPort": "3000"
}

V tomto nastavení je namespace vaším uživatelským jménem na Docker Hubu. Při vytváření repozitáře definujete jeho název. Tímto způsobem se vytvoří správné propojení mezi vaší aplikací a Docker Hubem. imagePort určuje port, který bude použity pro expozici aplikace z kontejneru (pro vývoj se často používá port 4200, ale je doporučeno zvolit jiný, například 8080). internalContainerPort určuje port, který vaše aplikace používá v kontejneru (obvykle 3000 pro Node.js aplikace).

Konfigurace a spouštění skriptů Docker

Dalším krokem je konfigurace a přehled skriptů, které byly přidány do souboru package.json po spuštění mrm úkolu. Níže najdete ukázku a vysvětlení některých skriptů, které vám pomohou snadno pracovat s Dockerem.

• build skript: Tento skript spustí build vaší aplikace a následně vytvoří Docker obrázek.

json
Copy code
"scripts": {
  "predocker:build": "npm run build",

  "docker:build": "cross-conf-env docker image build --platform linux/amd64,linux/arm64 . -t $npm_package_config_imageRepo:$npm_package_version",

  "postdocker:build": "npm run docker:tag"
}

Skript predocker:build nejprve zkompiluje vaši Angular aplikaci, pak docker:build vytvoří Docker obrázek a následně postdocker:build označí obrázek verzí.

• tag skript: Tento skript přidá tag na již postavený Docker obrázek.

json
Copy code
"docker:tag": "cross-conf-env docker image tag $npm_package_config_imageRepo:$npm_package_version $npm_package_config_imageRepo:latest"

• stop skript: Tento skript zastaví běžící Docker kontejner, pokud nějaký běží.

json
Copy code
"docker:stop": "cross-conf-env docker stop $npm_package_config_imageName || true"

• run skript: Spustí nový kontejner z vytvořeného Docker obrázku.

json
Copy code
"docker:run": "run-s -c docker:stop docker:runHelper",

"docker:runHelper": "cross-conf-env docker run -e NODE_ENV=local --rm --name $npm_package_config_imageName -d -p $npm_package_config_imagePort:$npm_package_config_internalContainerPort $npm_package_config_imageRepo"

• publish skript: Tento skript publikuje Docker obrázek na Docker Hub.

json
Copy code
"predocker:publish": "echo Attention! Ensure `docker login` is correct.",

"docker:publish": "cross-conf-env docker image push $npm_package_config_imageRepo:$npm_package_version",

"postdocker:publish": "cross-conf-env docker image push $npm_package_config_imageRepo:latest"

• taillogs skript: Tento skript zobrazuje logy běžícího Docker kontejneru.

json
Copy code
"docker:taillogs": "cross-conf-env docker logs -f $npm_package_config_imageName"

• open skript: Skript pro otevření aplikace v prohlížeči.

json
Copy code
"docker:open": "sleep 2 && cross-conf-env open-cli http://localhost:$npm_package_config_imagePort"

• debug skript: Skript pro ladění, který postaví a spustí aplikaci v produkčním módu, a následně zobrazí logy.

json
Copy code
"predocker:debug": "run-s docker:build docker:run",
"docker:debug": "run-s -cs docker:open:win docker:open:mac docker:taillogs"

Další kroky a doporučení

Aby byl proces efektivní, je důležité si být vědom několika věcí. Prvním krokem je vždy optimalizovat vaši aplikaci před jejím umístěním do Docker kontejneru. To zahrnuje nejen optimalizaci kódu, ale také úpravu konfigurace pro produkční prostředí. Použití příznaku --prod u příkazu ng build zajistí, že aplikace bude kompilována ve verzi optimalizované pro produkci, což sníží její velikost a zlepší výkon.