Jak přidat vlastní ikony a používat lazy loading ve vaší Angular aplikaci

Pokud chcete, aby vaše aplikace vypadala profesionálně a odlišovala se od konkurence, je důležité zaměřit se na detaily, jako jsou ikony nebo barvy. Výběr správného barevného paletového systému, jak je popsáno na stránkách Material Design, může zásadně ovlivnit vizuální dojem a vnímání vaší značky. Stejně důležité je vytvoření kvalitní vlastní motivace a ikon, které přispívají k pozitivnímu dojmu z používání aplikace.

V této části si ukážeme, jak přidat vlastní ikony do aplikace Angular, jak nakonfigurovat vlastní branding a jak správně implementovat lazy loading modulů.

Pro registraci nové ikony v aplikaci použijeme následující kód v souboru app.component.ts:

typescript
Copy code
import { MatIconRegistry } from '@angular/material/icon';

import { DomSanitizer } from '@angular/platform-browser';

export class AppComponent {
  constructor(
    iconRegistry: MatIconRegistry,
    sanitizer: DomSanitizer
  ) {
    iconRegistry.addSvgIcon(
      'lemon',
      sanitizer.bypassSecurityTrustResourceUrl('assets/img/icons/lemon.svg')
    );
  }
}

Důležité je věnovat pozornost tomu, že načítání SVG ikony z URL nefunguje ve scénářích Server-Side Rendering (SSR). V takových případech je lepší načíst ikonu jako konstantní řetězec v TypeScript souboru a zaregistrovat ji přímo:

typescript
Copy code
import { LEMON_ICON } from './svg.icons';

iconRegistry.addSvgIconLiteral('lemon', sanitizer.bypassSecurityTrustHtml(LEMON_ICON));

Pro správnou funkčnost je také potřeba importovat modul MatIconModule.

Po registraci ikon můžeme začít přidávat ikony do uživatelského rozhraní, například do panelu nástrojů. Začneme s přidáním základní ikony do panelu:

html
Copy code
<mat-toolbar>
  <button mat-icon-button>

    <mat-icon svgIcon="lemon"></mat-icon>

  </button>
  <span>LemonMart</span>
</mat-toolbar>

Pokud chcete přidat více ikon, například pro menu, profil uživatele nebo odhlášení, můžete použít Material ikony, které jsou součástí Angular Material. Tato sada ikon je již automaticky importována jako webová písma v souboru index.html. Je však možné ikony hostovat i na svém serveru, avšak pokud se rozhodnete pro tuto možnost, ztratíte výhodu cacheování písma v prohlížeči, což může mít negativní vliv na rychlost načítání.

Pro zobrazení ikon v aplikaci přidejte do index.html kód pro Material ikony:

html
Copy code
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Poté přidáme ikony do panelu nástrojů a uživatelského rozhraní:

html
Copy code
<mat-toolbar>

  <button mat-icon-button>
    <mat-icon>menu</mat-icon>
  </button>
  <span>LemonMart</span>
  <button mat-icon-button>
    <mat-icon>account_circle</mat-icon>
  </button>
  <button mat-icon-button>
    <mat-icon>lock_open</mat-icon>
  </button>
</mat-toolbar>

Pokud máte více ikon a potřebujete je správně rozdělit na levou a pravou část panelu, můžete použít direktivu fxFlex pro správné zarovnání:

html
Copy code
<mat-toolbar>
  <div fxFlex="1">
    <button mat-icon-button>
      <mat-icon>menu</mat-icon>
    </button>
  </div>
  <span>LemonMart</span>
  <div fxFlex="none">
    <button mat-icon-button>
      <mat-icon>account_circle</mat-icon>
    </button>
    <button mat-icon-button>
      <mat-icon>lock_open</mat-icon>
    </button>
  </div>
</mat-toolbar>

Kromě toho je třeba zajistit, aby byly importovány moduly FlexModule a MatButtonModule pro správnou funkci layoutu a tlačítek. Pokud chcete mít základní přihlašovací stránku, můžete ji přidat do komponenty HomeComponent:

html
Copy code
<div fxLayout="column">

  <button mat-raised-button color="primary">Login</button>
</div>

Tímto způsobem si vytvoříte základní přihlašovací formulář, který bude reprezentovat základní uživatelskou zkušenost s vaší aplikací.

Například pro definici lazy-loaded modulu použijete směrování s vlastností loadChildren:

typescript
Copy code
const routes: Routes = [
  {
    path: 'products',
    loadChildren: () => import('./products/products.module').then(m => m.ProductsModule)
  }
];

Tato technika je velmi efektivní pro aplikace, které mají mnoho funkcí nebo podstránek. Uživatel tedy načítá pouze potřebné části aplikace, což šetří čas a zlepšuje celkovou rychlost aplikace.

Jak Docker mění vývoj a nasazování aplikací

Docker je open-source platforma, která umožňuje vývoj, distribuci a provoz aplikací v kontejnerech. Tento nástroj, známý pro svou jednoduchost a efektivitu, přináší vývojářům nový způsob práce, který zjednodušuje nasazování aplikací a jejich správu v produkčním prostředí. Docker představuje revoluční přístup, který posouvá hranice mezi vývojáři a operačními týmy a umožňuje efektivnější spolupráci. DevOps, který zkracuje vzdálenost mezi těmito týmy, přináší levnější a rychlejší možnosti pro řešení problémů a změny.

Jednou z klíčových výhod Dockeru je jeho schopnost zajistit, že aplikace, která funguje na vývojářském počítači, bude pracovat stejně i v produkčním prostředí. Toho je dosaženo díky virtualizaci na úrovni kontejnerů, která eliminuje rozdíly mezi různými operačními systémy a konfiguracemi. Na rozdíl od tradičních virtuálních strojů, které vyžadují desítky gigabajtů paměti a úložiště, kontejnery Dockeru mají mnohem menší nároky a umožňují spouštění aplikací v izolovaném, bezpečném prostředí. Velikost kontejnerů je obvykle v řádech megabajtů, což výrazně snižuje nároky na hardware.

Pokud se podíváme na konkrétní příklad použití Dockeru pro kontejnerizaci webových aplikací, zjistíme, že tento proces zahrnuje několik klíčových kroků. Dockerfile, což je skript, který popisuje konfiguraci kontejneru, se skládá z několika základních částí: FROM, SETUP, COPY a CMD. Každá z těchto částí má svůj specifický účel, který se podrobně popisuje v dokumentaci Dockeru.

Další část, COPY, slouží k přenesení naší aplikace do kontejneru. V tomto kroku je kód aplikace z vývojového prostředí zkopírován do složky kontejneru, kde bude k dispozici pro spuštění. Tato část je klíčová pro zajištění toho, že všechny potřebné soubory jsou přítomny a připraveny k nasazení.

Při práci s Dockerem je důležité věnovat pozornost tomu, jaké základní obrazy používáme, protože každý obraz přináší určité výhody a omezení. Například obraz minimal-nginx-web-server je optimalizován pro běh webového serveru a je velmi malý, což činí jeho použití efektivní v produkčním prostředí. Na druhou stranu, pokud potřebujeme více funkcí nebo specifických konfigurací, můžeme použít jiný obraz, například minimal-node-web-server, který obsahuje server pro aplikace postavené na Node.js.

Důležitou výhodou Dockeru je také úroveň bezpečnosti, kterou poskytuje. Docker kontejnery fungují jako izolované prostředí, což znamená, že i když aplikace obsahuje nějakou zranitelnost, je obtížné, aby útočník způsobil škody na hostitelském systému. Každý kontejner je oddělený a běží ve svém vlastním virtuálním prostředí, což zvyšuje úroveň ochrany proti útokům a neoprávněným zásahům.

Je třeba si také uvědomit, že při používání Dockeru je kladeno velké důraz na správu verzí. Obrazy, které používáme, by měly být vždy aktualizovány na nejnovější verze, aby zahrnovaly všechny opravy chyb a bezpečnostní záplaty. Docker umožňuje automatické aktualizace obrazů, což usnadňuje práci a zajišťuje, že aplikace budou vždy chráněny před známými zranitelnostmi. Přesto je důležité pravidelně testovat naše obrazy po každé aktualizaci, aby se předešlo problémům, které mohou vzniknout při nekompatibilitě nebo změnách v nových verzích základních obrazů.