Architektúra frontendu: Hexagonálna a čistá architektúra pre škálovateľné aplikácie

Ako frontendové aplikácie rastú na zložitosti, dobre definovaná architektúra sa stáva kľúčovou pre udržiavateľnosť, testovateľnosť a škálovateľnosť. Dva populárne architektonické vzory, ktoré riešia tieto problémy, sú Hexagonálna architektúra (tiež známa ako porty a adaptéry) a Čistá architektúra. Hoci pochádzajú zo sveta backendu, tieto princípy možno efektívne aplikovať aj na vývoj frontendu na vytvorenie robustných a prispôsobivých používateľských rozhraní.

Čo je to architektúra frontendu?

Architektúra frontendu definuje štruktúru, organizáciu a interakcie rôznych komponentov v rámci frontendovej aplikácie. Poskytuje plán, ako je aplikácia vytváraná, udržiavaná a škálovaná. Dobrá architektúra frontendu podporuje:

• Udržiavateľnosť: Jednoduchšie pochopenie, úprava a ladenie kódu.
• Testovateľnosť: Uľahčuje písanie unit a integračných testov.
• Škálovateľnosť: Umožňuje aplikácii zvládnuť rastúcu zložitosť a záťaž používateľov.
• Znovu použiteľnosť: Podporuje opätovné použitie kódu v rôznych častiach aplikácie.
• Flexibilita: Prispôsobuje sa meniacim sa požiadavkám a novým technológiám.

Bez jasnej architektúry sa frontendové projekty môžu rýchlo stať monolitickými a ťažko spravovateľnými, čo vedie k zvýšeným nákladom na vývoj a zníženej agilite.

Úvod do hexagonálnej architektúry

Hexagonálna architektúra, ktorú navrhol Alistair Cockburn, má za cieľ oddeliť základnú obchodnú logiku aplikácie od externých závislostí, ako sú databázy, UI frameworky a API tretích strán. Dosahuje to prostredníctvom konceptu portov a adaptérov.

Kľúčové koncepty hexagonálnej architektúry:

• Jadro (Doména): Obsahuje obchodnú logiku a prípady použitia aplikácie. Je nezávislé od akýchkoľvek externých frameworkov alebo technológií.
• Porty: Rozhrania, ktoré definujú, ako jadro interaguje s vonkajším svetom. Reprezentujú vstupné a výstupné hranice jadra.
• Adaptéry: Implementácie portov, ktoré spájajú jadro s konkrétnymi externými systémami. Existujú dva typy adaptérov:
• Riadiace adaptéry (Primárne adaptéry): Iniciujú interakcie s jadrom. Príkladmi sú UI komponenty, rozhrania príkazového riadku alebo iné aplikácie.
• Riadené adaptéry (Sekundárne adaptéry): Sú volané jadrom na interakciu s externými systémami. Príkladmi sú databázy, API alebo súborové systémy.

Jadro nevie nič o konkrétnych adaptéroch. Interaguje s nimi iba prostredníctvom portov. Toto oddelenie umožňuje jednoducho vymieňať rôzne adaptéry bez ovplyvnenia logiky jadra. Napríklad, môžete prejsť z jedného UI frameworku (napr. React) na iný (napr. Vue.js) jednoduchou výmenou riadiaceho adaptéra.

Výhody hexagonálnej architektúry:

• Zlepšená testovateľnosť: Obchodná logika jadra sa dá ľahko testovať izolovane bez spoliehania sa na externé závislosti. Môžete použiť falošné (mock) adaptéry na simuláciu správania externých systémov.
• Zvýšená udržiavateľnosť: Zmeny v externých systémoch majú minimálny dopad na logiku jadra. To uľahčuje údržbu a vývoj aplikácie v priebehu času.
• Väčšia flexibilita: Aplikáciu môžete ľahko prispôsobiť novým technológiám a požiadavkám pridaním alebo výmenou adaptérov.
• Zlepšená znovu použiteľnosť: Obchodná logika jadra sa dá opätovne použiť v rôznych kontextoch pripojením k rôznym adaptérom.

Úvod do Čistej architektúry

Čistá architektúra, popularizovaná Robertom C. Martinom (Uncle Bob), je ďalším architektonickým vzorom, ktorý zdôrazňuje oddelenie zodpovedností a oddelenie (decoupling). Zameriava sa na vytvorenie systému, ktorý je nezávislý od frameworkov, databáz, UI a akejkoľvek externej agentúry.

Kľúčové koncepty Čistej architektúry:

Čistá architektúra organizuje aplikáciu do koncentrických vrstiev, s najabstraktnejším a znovu použiteľným kódom v strede a najkonkrétnejším a technologicky špecifickým kódom na vonkajších vrstvách.

• Entity: Reprezentujú základné obchodné objekty a pravidlá aplikácie. Sú nezávislé od akýchkoľvek externých systémov.
• Prípady použitia (Use Cases): Definujú obchodnú logiku aplikácie a spôsob, akým používatelia interagujú so systémom. Organizujú Entity na vykonávanie špecifických úloh.
• Adaptéry rozhrania (Interface Adapters): Konvertujú údaje medzi Prípadmi použitia a externými systémami. Táto vrstva zahŕňa prezentéry, kontroléry a brány (gateways).
• Frameworky a ovládače (Frameworks and Drivers): Najvzdialenejšia vrstva obsahujúca UI framework, databázu a ďalšie externé technológie.

Pravidlo závislostí v Čistej architektúre hovorí, že vonkajšie vrstvy môžu závisieť od vnútorných vrstiev, ale vnútorné vrstvy nemôžu závisieť od vonkajších vrstiev. Tým sa zabezpečuje, že základná obchodná logika je nezávislá od akýchkoľvek externých frameworkov alebo technológií.

Výhody Čistej architektúry:

• Nezávislosť od frameworkov: Architektúra sa nespolieha na existenciu nejakej knižnice softvéru plného funkcií. To vám umožňuje používať frameworky ako nástroje, namiesto toho, aby ste boli nútení vkladať svoj systém do ich obmedzených mantinelov.
• Testovateľnosť: Obchodné pravidlá je možné testovať bez UI, databázy, webového servera alebo akéhokoľvek iného externého prvku.
• Nezávislosť od UI: UI je možné ľahko zmeniť bez zmeny zvyšku systému. Webové UI môže byť nahradené konzolovým UI bez zmeny akýchkoľvek obchodných pravidiel.
• Nezávislosť od databázy: Môžete vymeniť Oracle alebo SQL Server za Mongo, BigTable, CouchDB alebo niečo iné. Vaše obchodné pravidlá nie sú viazané na databázu.
• Nezávislosť od akejkoľvek externej agentúry: V skutočnosti vaše obchodné pravidlá jednoducho nevedia *vôbec nič* o vonkajšom svete.

Aplikácia hexagonálnej a čistej architektúry na vývoj frontendu

Hoci sa hexagonálna a čistá architektúra často spájajú s vývojom backendu, ich princípy možno efektívne aplikovať aj na frontendové aplikácie na zlepšenie ich architektúry a udržiavateľnosti. Tu je postup:

1. Identifikujte jadro (doménu)

Prvým krokom je identifikovať základnú obchodnú logiku vašej frontendovej aplikácie. To zahŕňa entity, prípady použitia a obchodné pravidlá, ktoré sú nezávislé od UI frameworku alebo akýchkoľvek externých API. Napríklad v e-commerce aplikácii by jadro mohlo zahŕňať logiku pre správu produktov, nákupných košíkov a objednávok.

Príklad: V aplikácii na správu úloh by jadro domény mohlo pozostávať z:

• Entity: Úloha, Projekt, Používateľ
• Prípady použitia: VytvoriťÚlohu, AktualizovaťÚlohu, PriradiťÚlohu, DokončiťÚlohu, ZoznamÚloh
• Obchodné pravidlá: Úloha musí mať názov, úloha nemôže byť priradená používateľovi, ktorý nie je členom projektu.

2. Definujte porty a adaptéry (Hexagonálna architektúra) alebo vrstvy (Čistá architektúra)

Ďalej definujte porty a adaptéry (Hexagonálna architektúra) alebo vrstvy (Čistá architektúra), ktoré oddeľujú jadro od externých systémov. Vo frontendovej aplikácii by to mohlo zahŕňať:

• UI komponenty (Riadiace adaptéry/Frameworky a ovládače): Komponenty React, Vue.js, Angular, ktoré interagujú s používateľom.
• API klienti (Riadené adaptéry/Adaptéry rozhrania): Služby, ktoré vytvárajú požiadavky na backendové API.
• Dátové úložiská (Riadené adaptéry/Adaptéry rozhrania): Local storage, IndexedDB alebo iné mechanizmy na ukladanie dát.
• Správa stavu (Adaptéry rozhrania): Redux, Vuex alebo iné knižnice na správu stavu.

Príklad použitia hexagonálnej architektúry:

• Jadro: Logika správy úloh (entity, prípady použitia, obchodné pravidlá).
• Porty: TaskService (definuje metódy na vytváranie, aktualizáciu a získavanie úloh).
• Riadiaci adaptér: React komponenty, ktoré používajú TaskService na interakciu s jadrom.
• Riadený adaptér: API klient, ktorý implementuje TaskService a vytvára požiadavky na backendové API.

Príklad použitia Čistej architektúry:

• Entity: Úloha, Projekt, Používateľ (čisté JavaScript objekty).
• Prípady použitia: CreateTaskUseCase, UpdateTaskUseCase (organizujú entity).
• Adaptéry rozhrania:
  • Kontroléry: Spracovávajú vstup od používateľa z UI.
  • Prezentéry: Formátujú dáta na zobrazenie v UI.
  • Brány (Gateways): Interagujú s API klientom.
• Frameworky a ovládače: React komponenty, API klient (axios, fetch).

3. Implementujte adaptéry (Hexagonálna architektúra) alebo vrstvy (Čistá architektúra)

Teraz implementujte adaptéry alebo vrstvy, ktoré spájajú jadro s externými systémami. Uistite sa, že adaptéry alebo vrstvy sú nezávislé od jadra a že jadro s nimi interaguje iba prostredníctvom portov alebo rozhraní. To vám umožní ľahko vymieňať rôzne adaptéry alebo vrstvy bez ovplyvnenia logiky jadra.

Príklad (Hexagonálna architektúra):

// Port TaskService
interface TaskService {
  createTask(taskData: TaskData): Promise;
  updateTask(taskId: string, taskData: TaskData): Promise;
  getTask(taskId: string): Promise;
}

// Adaptér API klienta
class ApiTaskService implements TaskService {
  async createTask(taskData: TaskData): Promise {
    // Vytvorenie API požiadavky na vytvorenie úlohy
  }

  async updateTask(taskId: string, taskData: TaskData): Promise {
    // Vytvorenie API požiadavky na aktualizáciu úlohy
  }

  async getTask(taskId: string): Promise {
    // Vytvorenie API požiadavky na získanie úlohy
  }
}

// Adaptér React komponentu
function TaskList() {
  const taskService: TaskService = new ApiTaskService();

  const handleCreateTask = async (taskData: TaskData) => {
    await taskService.createTask(taskData);
    // Aktualizácia zoznamu úloh
  };

  // ...
}

Príklad (Čistá architektúra):

// Entity
class Task {
  constructor(public id: string, public title: string, public description: string) {}
}

// Prípad použitia
class CreateTaskUseCase {
  constructor(private taskGateway: TaskGateway) {}

  async execute(title: string, description: string): Promise {
    const task = new Task(generateId(), title, description);
    await this.taskGateway.create(task);
    return task;
  }
}

// Adaptéry rozhrania - Brána
interface TaskGateway {
  create(task: Task): Promise;
}

class ApiTaskGateway implements TaskGateway {
  async create(task: Task): Promise {
    // Vytvorenie API požiadavky na vytvorenie úlohy
  }
}

// Adaptéry rozhrania - Kontrolér
class TaskController {
  constructor(private createTaskUseCase: CreateTaskUseCase) {}

  async createTask(req: Request, res: Response) {
    const { title, description } = req.body;
    const task = await this.createTaskUseCase.execute(title, description);
    res.json(task);
  }
}

// Frameworky a ovládače - React komponent
function TaskForm() {
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const apiTaskGateway = new ApiTaskGateway();
  const createTaskUseCase = new CreateTaskUseCase(apiTaskGateway);
  const taskController = new TaskController(createTaskUseCase);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    await taskController.createTask({ body: { title, description } } as Request, { json: (data: any) => console.log(data) } as Response);
  };

  return (
    

       setTitle(e.target.value)} />
       setDescription(e.target.value)} />
      <button type="submit">Vytvoriť úlohu</button>
    </form>
  );
}

</code>
</pre>

<h3>4. Implementujte Dependency Injection</h3>

<p>Na ďalšie oddelenie jadra od externých systémov použite dependency injection na poskytnutie adaptérov alebo vrstiev jadru. To vám umožní ľahko vymieňať rôzne implementácie adaptérov alebo vrstiev bez úpravy kódu jadra.</p>

<p><b>Príklad:</b></p>

<pre>
<code>
// Injektáž TaskService do komponentu TaskList
function TaskList(props: { taskService: TaskService }) {
  const { taskService } = props;

  const handleCreateTask = async (taskData: TaskData) => {
    await taskService.createTask(taskData);
    // Aktualizácia zoznamu úloh
  };

  // ...
}

// Použitie
const apiTaskService = new ApiTaskService();
<TaskList taskService={apiTaskService} />
</code>
</pre>

<h3>5. Píšte unit testy</h3>

<p>Jednou z kľúčových výhod hexagonálnej a čistej architektúry je zlepšená testovateľnosť. Môžete ľahko písať unit testy pre základnú obchodnú logiku bez spoliehania sa na externé závislosti. Použite falošné (mock) adaptéry alebo vrstvy na simuláciu správania externých systémov a overenie, že logika jadra funguje podľa očakávaní.</p>

<p><b>Príklad:</b></p>

<pre>
<code>
// Mock TaskService
class MockTaskService implements TaskService {
  async createTask(taskData: TaskData): Promise<Task> {
    return Promise.resolve({ id: '1', ...taskData });
  }

  async updateTask(taskId: string, taskData: TaskData): Promise<Task> {
    return Promise.resolve({ id: taskId, ...taskData });
  }

  async getTask(taskId: string): Promise<Task> {
    return Promise.resolve({ id: taskId, title: 'Test Task', description: 'Test Description' });
  }
}

// Unit test
describe('TaskList', () => {
  it('should create a task', async () => {
    const mockTaskService = new MockTaskService();
    const taskList = new TaskList({ taskService: mockTaskService });

    const taskData = { title: 'New Task', description: 'New Description' };
    const newTask = await taskList.handleCreateTask(taskData);

    expect(newTask.title).toBe('New Task');
    expect(newTask.description).toBe('New Description');
  });
});
</code>
</pre>

<h2>Praktické úvahy a výzvy</h2>

<p>Hoci hexagonálna a čistá architektúra ponúkajú významné výhody, pri ich aplikácii na vývoj frontendu je potrebné mať na pamäti aj niektoré praktické úvahy a výzvy:</p>

<ul>
 <li><b>Zvýšená zložitosť:</b> Tieto architektúry môžu pridať zložitosť do kódovej základne, najmä pre malé alebo jednoduché aplikácie.</li>
 <li><b>Krivka učenia:</b> Vývojári sa možno budú musieť naučiť nové koncepty a vzory, aby mohli tieto architektúry efektívne implementovať.</li>
 <li><b>Prehnané inžinierstvo (Over-engineering):</b> Je dôležité vyhnúť sa prehnanému inžinierstvu aplikácie. Začnite s jednoduchou architektúrou a postupne pridávajte zložitosť podľa potreby.</li>
 <li><b>Vyvažovanie abstrakcie:</b> Nájdenie správnej úrovne abstrakcie môže byť náročné. Príliš veľa abstrakcie môže sťažiť pochopenie kódu, zatiaľ čo príliš málo abstrakcie môže viesť k tesnému prepojeniu.</li>
 <li><b>Úvahy o výkone:</b> Nadmerné vrstvy abstrakcie môžu potenciálne ovplyvniť výkon. Je dôležité profilovať aplikáciu a identifikovať akékoľvek výkonnostné úzke miesta.</li>
</ul>

<h2>Medzinárodné príklady a adaptácie</h2>

<p>Princípy hexagonálnej a čistej architektúry sú aplikovateľné na vývoj frontendu bez ohľadu na geografickú polohu alebo kultúrny kontext. Špecifické implementácie a adaptácie sa však môžu líšiť v závislosti od požiadaviek projektu a preferencií vývojového tímu.</p>

<p><b>Príklad 1: Globálna e-commerce platforma</b></p>

<p>Globálna e-commerce platforma by mohla použiť hexagonálnu architektúru na oddelenie logiky správy nákupného košíka a objednávok od UI frameworku a platobných brán. Jadro by bolo zodpovedné za správu produktov, výpočet cien a spracovanie objednávok. Riadiace adaptéry by zahŕňali React komponenty pre katalóg produktov, nákupný košík a stránky pokladne. Riadené adaptéry by zahŕňali API klientov pre rôzne platobné brány (napr. Stripe, PayPal, Alipay) a doručovateľské spoločnosti (napr. FedEx, DHL, UPS). To umožňuje platforme ľahko sa prispôsobiť rôznym regionálnym platobným metódam a možnostiam doručenia.</p>

<p><b>Príklad 2: Viacjazyčná aplikácia sociálnych médií</b></p>

<p>Viacjazyčná aplikácia sociálnych médií by mohla použiť Čistú architektúru na oddelenie logiky autentifikácie používateľov a správy obsahu od UI a lokalizačných frameworkov. Entity by reprezentovali používateľov, príspevky a komentáre. Prípady použitia by definovali, ako používatelia vytvárajú, zdieľajú a interagujú s obsahom. Adaptéry rozhrania by sa starali o preklad obsahu do rôznych jazykov a formátovanie dát pre rôzne UI komponenty. To umožňuje aplikácii ľahko podporovať nové jazyky a prispôsobiť sa rôznym kultúrnym preferenciám.</p>

<h2>Záver</h2>

<p>Hexagonálna a čistá architektúra poskytujú cenné princípy na vytváranie udržiavateľných, testovateľných a škálovateľných frontendových aplikácií. Oddelením základnej obchodnej logiky od externých závislostí môžete vytvoriť flexibilnejšiu a prispôsobivejšiu kódovú základňu, ktorú je ľahšie vyvíjať v priebehu času. Hoci tieto architektúry môžu priniesť určitú počiatočnú zložitosť, dlhodobé výhody v oblasti udržiavateľnosti, testovateľnosti a škálovateľnosti z nich robia cennú investíciu pre zložité frontendové projekty. Pamätajte, že je dôležité začať s jednoduchou architektúrou a postupne pridávať zložitosť podľa potreby a starostlivo zvážiť praktické úvahy a výzvy.</p>

<p>Prijatím týchto architektonických vzorov môžu frontendoví vývojári vytvárať robustnejšie a spoľahlivejšie aplikácie, ktoré dokážu uspokojiť vyvíjajúce sa potreby používateľov po celom svete.</p>

<h3>Ďalšie čítanie</h3>

<ul>
  <li>Hexagonálna architektúra: <a href="https://alistaircockburn.com/hexagonal-architecture/">https://alistaircockburn.com/hexagonal-architecture/</a></li>
  <li>Čistá architektúra: <a href="https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html">https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html</a></li>
</ul>
</div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">architektúra frontendu</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">hexagonálna architektúra</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">čistá architektúra</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">vývoj frontendu</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">softvérová architektúra</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">škálovateľné aplikácie</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">testovateľný kód</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">udržiavateľný kód</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">UI architektúra</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">JavaScript architektúra</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">TypeScript architektúra</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0};
$RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div hidden id="S:3"></div><script>$RC("B:3","S:3")</script><div hidden id="S:0"></div><script>$RC("B:0","S:0")</script></body></html>