Jak navrhnout a implementovat podnikové aplikace v Angularu: Případová studie a praktické doporučení

V předchozích kapitolách jsme se zaměřili na to, jak využít funkce Angularu pro vytváření dynamických aplikací, jako je LocalCast Weather, která nám umožnila prozkoumat základní koncepty frameworku. Ačkoli aplikace, jako je ta naše, jsou užitečné pro menší a střední projekty, při vývoji podnikových aplikací je třeba vzít v úvahu širší souvislosti a výzvy, které s sebou přináší velké a komplexní aplikace. Architektura podnikových aplikací se liší od menších projektů nejen v požadavcích na škálovatelnost, ale i v nutnosti dodržování osvědčených postupů a efektivního řízení týmu. To, co se může zdát jako drobnosti při vývoji malých aplikací, se v podnikových aplikacích může stát rozhodujícím faktorem mezi úspěchem a fiaskem.

Nejdůležitější je přístup k návrhu aplikace, který spočívá v její modularitě a schopnosti reagovat na různé změny ve funkčnosti a požadavcích uživatelů. Při vývoji podnikových aplikací je třeba mít na paměti nejen technologické, ale i organizační výzvy, které se mohou objevit. Příliš rychlý přechod na nové technologie, které nejsou dostatečně ověřené v praxi, může vést k vytvoření „sinkholu“, tedy neřešitelných problémů, které mohou projekt fatálně zpomalit nebo úplně zastavit.

Angular nabízí mnoho nových funkcí, které pomáhají zjednodušit vývoj, jako jsou samostatné komponenty, řízení toku kódu pomocí nových syntaktických konstrukcí a signalizace. Tyto vlastnosti, i když jsou ve fázi experimentálního testování, mohou nabídnout hodnotu pro specifické potřeby při tvorbě aplikací, a to zejména v kontextu větších systémů. Samostatné komponenty jsou užitečné při řešení problémů s kruhovými závislostmi a nadměrným objemem kódu v moduly, což je typické pro velké aplikace.

Line-of-Business (LOB) aplikace jsou v tomto ohledu ideálním příkladem. Tento typ aplikací je v podnikovém prostředí velmi běžný a představuje klíčový pilíř pro efektivní řízení podnikových procesů. LOB aplikace by měly pokrývat nejběžnější obchodní scénáře, které jsou pro podniky nezbytné. Díky tomu, že pokrývají 80 % požadavků s minimálním úsilím, je možné je vyvinout s relativně nízkými náklady a rychlým časovým rámcem. K tomu se hodí i přístup 80-20, který se zaměřuje na dosažení maximálních výsledků s minimálním úsilím.

Při navrhování podnikových aplikací je třeba mít na paměti, že se může velmi snadno stát, že se úspěch projektu obrátí proti jeho tvůrcům. Jakmile je aplikace přijata a začne generovat poptávku, obvykle se stává obtížné udržet rovnováhu mezi potřebami funkčnosti a složitostí, kterou projekt s sebou přináší. Mnozí vývojáři, kteří se ocitnou v této situaci, mohou skončit ve slepé uličce, kdy se jejich projekt stává zbytečně složitým a obtížně udržovatelným.

V následujících kapitolách se budeme zabývat tím, jak správně navrhovat a architektonicky řešit LOB aplikace pomocí router-first přístupu. Tento přístup se soustředí na návrh aplikace s ohledem na logiku navigace, což zajišťuje flexibilitu a modularitu aplikace, která je klíčová pro budoucí rozšiřitelnost. Navíc, správné rozdělení aplikace na jednotlivé komponenty a efektivní řízení datové logiky může výrazně zjednodušit vývoj a údržbu.

Při vývoji podnikové aplikace je nutné zohlednit několik aspektů, které se netýkají pouze technologií. Je třeba mít správně nastavený tým, který bude schopný vyřešit všechny výzvy spojené s komplexností projektu, a to jak na technické, tak na organizační úrovni. Kanbanové plánování pomocí nástrojů jako GitHub umožňuje lepší sledování pokroku a zajišťuje, že všechny úkoly jsou včas dokončeny. Výběr správných nástrojů pro vývoj vysoce výkonných aplikací je rovněž zásadní pro zajištění dlouhodobé udržitelnosti aplikace.

Důležitým krokem při navrhování aplikací je aplikace správné metodiky pro vývoj – ať už jde o iterativní přístup, nebo agilní vývoj. Tímto způsobem lze reagovat na měnící se požadavky uživatelů a přizpůsobit aplikaci tak, aby splňovala požadavky trhu i jednotlivých podniků.

Jak implementovat vlastní zprávy o chybách ve formulářích pomocí direktivy v Angularu

Dynamické generování chybových zpráv

Základní implementace začíná definováním funkce, která na základě typu chyby vrátí standardizovanou zprávu. Tato zpráva je generována podle specifických pravidel pro jednotlivé typy chyb, jak je uvedeno v následujícím kódu:

typescript
Copy code
getStandardErrorMessage(error: ValidationError): string {

  const label = this.fieldLabel || 'Input';

  switch (error) {
    case 'required':
      return `${label} is required`;
    case 'minlength':
      return `${label} must be at least ${this.fieldControl?.getError(error)?.requiredLength ?? 2} characters`;
    case 'maxlength':

      return `${label} can’t exceed ${this.fieldControl?.getError(error)?.requiredLength ?? 50} characters`;

    case 'invalid':
      return `A valid ${label} is required`;
  }
}

Zde se používá dynamické načítání minimální a maximální délky z objektu fieldControl, což značně zjednodušuje správu zpráv pro různé velikosti vstupních polí.

Zpracování více chybových stavů

Dalším krokem je implementace funkce, která prochází všechny chyby v poli appFieldError a zobrazuje je pomocí metody getStandardErrorMessage. Tento algoritmus prochází jednotlivé chyby a pro každou z nich generuje odpovídající zprávu:

typescript
Copy code
updateErrorMessage() {
  const errorsToDisplay: string[] = [];

  const errors = Array.isArray(this.appFieldError) ? this.appFieldError : [this.appFieldError];

  errors.forEach((error: ValidationError | { error: ValidationError; message: string }) => {

    const errorCode = typeof error === 'object' ? error.error : error;

    const message = typeof error === 'object' ? () => error.message : () => this.getStandardErrorMessage(errorCode);
    const errorChecker = errorCode === 'invalid' ? () => this.fieldControl?.invalid : () => this.fieldControl?.hasError(errorCode);
    if (errorChecker()) {
      errorsToDisplay.push(message());
    }
  });

  this.renderErrors(errorsToDisplay.join(''));

}

Tato metoda vytváří dynamické seznamy chybových zpráv, které se následně zobrazí ve formuláři.

Optimalizace výkonu

Pokud jde o výkon, je důležité věnovat pozornost efektivnímu řízení vykonávání funkcí. Použití delegátů funkcí, což je technika, která umožňuje předávání funkcí jako proměnných, zajišťuje, že kód nebude vykonáván zbytečně často. Tento přístup výrazně zlepšuje organizaci kódu a zajišťuje, že logika pro zobrazení chybových zpráv se spustí pouze tehdy, když je to nezbytné.

Subskripce na změny hodnoty

Pro správnou implementaci je důležité správně řídit životní cyklus subskripcí na změny hodnoty formulářového pole. K tomu slouží následující metoda, která se přihlásí k odběru změn hodnoty v poli formuláře a při zjištění chyby spustí metodu pro zobrazení zpráv:

typescript
Copy code
initFieldControl() {

  if (this.input && this.group) {
    const controlName = this.input.getAttribute('formControlName') ?? '';
    this.fieldControl = this.fieldControl || this.group.get(controlName);
    if (!this.fieldControl) {

      throw new Error(`[appFieldError] couldn't bind to control ${controlName}`);

    }
    this.unsubscribe();
    this.controlSubscription = this.fieldControl?.valueChanges
      .pipe(
        filter(() => this.fieldControl?.status === 'INVALID'),

        tap(() => this.updateErrorMessage())

      )
      .subscribe();
  }
}

Tato metoda nejenom že kontroluje validitu hodnoty, ale také spravuje předchozí subskripce, což je důležité pro prevenci problémů s únikem paměti, pokud je metoda volána vícekrát.

Obsluha změn atributů

Jakmile je pole správně inicializováno, je třeba reagovat na jakékoliv změny atributů pomocí události ngOnChanges. Tato událost zajistí, že i při dynamických změnách formulářových polí budou všechny změny správně reflektovány:

typescript
Copy code
ngOnChanges(changes: SimpleChanges): void {
  this.initFieldControl();
  if (changes.input.firstChange) {
    if (this.input) {
      this.input.onblur = () => this.updateErrorMessage();

      this.fieldLabel = this.fieldLabel || this.input.placeholder || this.input.getAttribute('aria-label') || '';

    } else {
      throw new Error(`[appFieldError].[input] couldn't bind to any input element`);
    }
  }
}

Tato metoda zajišťuje, že všechna nastavení a obsluhy událostí budou vždy správně inicializována.

Výkon a správa paměti

Při implementaci takto složitého systému je také nezbytné zajistit správu paměti, především správné odhlášení subskripcí a vyhnutí se jejich zbytečnému opakovanému vytváření. To zajistí hladký běh aplikace a předchází problémům s výkonem.