Frontend arhitektura: Heksagonalna i čista arhitektura za skalabilne aplikacije

Kako frontend aplikacije postaju sve složenije, dobro definirana arhitektura postaje ključna za održivost, mogućnost testiranja i skalabilnost. Dva popularna arhitektonska obrasca koja rješavaju ove probleme su heksagonalna arhitektura (poznata i kao portovi i adapteri) i čista arhitektura. Iako potječu iz svijeta pozadinskih sustava (backend), ova se načela mogu učinkovito primijeniti na frontend razvoj kako bi se stvorila robusna i prilagodljiva korisnička sučelja.

Što je frontend arhitektura?

Frontend arhitektura definira strukturu, organizaciju i interakcije različitih komponenti unutar frontend aplikacije. Pruža nacrt za način na koji se aplikacija gradi, održava i skalira. Dobra frontend arhitektura promiče:

• Održivost: Lakše razumijevanje, mijenjanje i ispravljanje grešaka u kodu.
• Mogućnost testiranja: Olakšava pisanje jediničnih i integracijskih testova.
• Skalabilnost: Omogućuje aplikaciji da se nosi s rastućom složenošću i opterećenjem korisnika.
• Ponovna iskoristivost: Promiče ponovnu upotrebu koda u različitim dijelovima aplikacije.
• Fleksibilnost: Prilagođava se promjenjivim zahtjevima i novim tehnologijama.

Bez jasne arhitekture, frontend projekti mogu brzo postati monolitni i teški za upravljanje, što dovodi do povećanih troškova razvoja i smanjene agilnosti.

Uvod u heksagonalnu arhitekturu

Heksagonalna arhitektura, koju je predložio Alistair Cockburn, ima za cilj odvojiti temeljnu poslovnu logiku aplikacije od vanjskih ovisnosti, poput baza podataka, UI okvira i API-ja trećih strana. To postiže kroz koncept portova i adaptera.

Ključni koncepti heksagonalne arhitekture:

• Jezgra (domena): Sadrži poslovnu logiku i slučajeve korištenja aplikacije. Neovisna je o bilo kakvim vanjskim okvirima ili tehnologijama.
• Portovi: Sučelja koja definiraju kako jezgra komunicira s vanjskim svijetom. Predstavljaju ulazne i izlazne granice jezgre.
• Adapteri: Implementacije portova koje povezuju jezgru s određenim vanjskim sustavima. Postoje dvije vrste adaptera:
• Pokretački adapteri (primarni adapteri): Pokreću interakcije s jezgrom. Primjeri uključuju UI komponente, sučelja naredbenog retka ili druge aplikacije.
• Pokretani adapteri (sekundarni adapteri): Jezgra ih poziva za interakciju s vanjskim sustavima. Primjeri uključuju baze podataka, API-je ili datotečne sustave.

Jezgra ne zna ništa o specifičnim adapterima. Ona s njima komunicira samo putem portova. Ovo razdvajanje omogućuje vam jednostavnu zamjenu različitih adaptera bez utjecaja na temeljnu logiku. Na primjer, možete se prebaciti s jednog UI okvira (npr. React) na drugi (npr. Vue.js) jednostavnom zamjenom pokretačkog adaptera.

Prednosti heksagonalne arhitekture:

• Poboljšana mogućnost testiranja: Temeljna poslovna logika može se lako testirati u izolaciji, bez oslanjanja na vanjske ovisnosti. Možete koristiti lažne (mock) adaptere za simulaciju ponašanja vanjskih sustava.
• Povećana održivost: Promjene na vanjskim sustavima imaju minimalan utjecaj na temeljnu logiku. To olakšava održavanje i razvoj aplikacije tijekom vremena.
• Veća fleksibilnost: Aplikaciju možete lako prilagoditi novim tehnologijama i zahtjevima dodavanjem ili zamjenom adaptera.
• Poboljšana ponovna iskoristivost: Temeljna poslovna logika može se ponovno koristiti u različitim kontekstima povezivanjem s različitim adapterima.

Uvod u čistu arhitekturu

Čista arhitektura, koju je popularizirao Robert C. Martin (Uncle Bob), još je jedan arhitektonski obrazac koji naglašava odvajanje odgovornosti (separation of concerns) i razdvajanje (decoupling). Fokusira se na stvaranje sustava koji je neovisan o okvirima, bazama podataka, korisničkom sučelju i bilo kojoj vanjskoj agenciji.

Ključni koncepti čiste arhitekture:

Čista arhitektura organizira aplikaciju u koncentrične slojeve, s najapstraktnijim i ponovno iskoristivim kodom u središtu te najkonkretnijim i tehnološki specifičnim kodom na vanjskim slojevima.

• Entiteti: Predstavljaju temeljne poslovne objekte i pravila aplikacije. Neovisni su o bilo kakvim vanjskim sustavima.
• Slučajevi korištenja (Use Cases): Definiraju poslovnu logiku aplikacije i kako korisnici komuniciraju sa sustavom. Oni orkestriraju entitete za obavljanje određenih zadataka.
• Sučeljni adapteri (Interface Adapters): Pretvaraju podatke između slučajeva korištenja i vanjskih sustava. Ovaj sloj uključuje prezentere, kontrolere i pristupnike (gateways).
• Okviri i pokretači (Frameworks and Drivers): Najudaljeniji sloj koji sadrži UI okvir, bazu podataka i druge vanjske tehnologije.

Pravilo ovisnosti u čistoj arhitekturi kaže da vanjski slojevi mogu ovisiti o unutarnjim slojevima, ali unutarnji slojevi ne smiju ovisiti o vanjskim slojevima. To osigurava da je temeljna poslovna logika neovisna o bilo kakvim vanjskim okvirima ili tehnologijama.

Prednosti čiste arhitekture:

• Neovisnost o okvirima: Arhitektura se ne oslanja na postojanje neke biblioteke softvera bogatog značajkama. To vam omogućuje da koristite okvire kao alate, umjesto da budete prisiljeni staviti svoj sustav u njihova ograničenja.
• Mogućnost testiranja: Poslovna pravila mogu se testirati bez korisničkog sučelja, baze podataka, web poslužitelja ili bilo kojeg drugog vanjskog elementa.
• Neovisnost o korisničkom sučelju: Korisničko sučelje može se lako promijeniti, bez mijenjanja ostatka sustava. Web sučelje može se zamijeniti konzolnim sučeljem, bez mijenjanja poslovnih pravila.
• Neovisnost o bazi podataka: Možete zamijeniti Oracle ili SQL Server za Mongo, BigTable, CouchDB ili nešto drugo. Vaša poslovna pravila nisu vezana za bazu podataka.
• Neovisnost o bilo kojoj vanjskoj agenciji: Zapravo, vaša poslovna pravila jednostavno ne znaju *ništa* o vanjskom svijetu.

Primjena heksagonalne i čiste arhitekture na frontend razvoj

Iako se heksagonalna i čista arhitektura često povezuju s pozadinskim razvojem, njihova se načela mogu učinkovito primijeniti na frontend aplikacije kako bi se poboljšala njihova arhitektura i održivost. Evo kako:

1. Identificirajte jezgru (domenu)

Prvi korak je identificirati temeljnu poslovnu logiku vaše frontend aplikacije. To uključuje entitete, slučajeve korištenja i poslovna pravila koja su neovisna o UI okviru ili bilo kakvim vanjskim API-jima. Na primjer, u e-commerce aplikaciji, jezgra bi mogla uključivati logiku za upravljanje proizvodima, košaricom i narudžbama.

Primjer: U aplikaciji za upravljanje zadacima, jezgra domene mogla bi se sastojati od:

• Entiteti: Zadatak, Projekt, Korisnik
• Slučajevi korištenja: StvoriZadatak, AžurirajZadatak, DodijeliZadatak, DovršiZadatak, PopisZadataka
• Poslovna pravila: Zadatak mora imati naslov, zadatak se ne može dodijeliti korisniku koji nije član projekta.

2. Definirajte portove i adaptere (heksagonalna arhitektura) ili slojeve (čista arhitektura)

Zatim definirajte portove i adaptere (heksagonalna arhitektura) ili slojeve (čista arhitektura) koji odvajaju jezgru od vanjskih sustava. U frontend aplikaciji, to bi moglo uključivati:

• UI komponente (Pokretački adapteri / Okviri i pokretači): React, Vue.js, Angular komponente koje komuniciraju s korisnikom.
• API klijenti (Pokretani adapteri / Sučeljni adapteri): Servisi koji šalju zahtjeve pozadinskim API-jima.
• Spremnici podataka (Pokretani adapteri / Sučeljni adapteri): Lokalna pohrana, IndexedDB ili drugi mehanizmi za pohranu podataka.
• Upravljanje stanjem (Sučeljni adapteri): Redux, Vuex ili druge biblioteke za upravljanje stanjem.

Primjer korištenja heksagonalne arhitekture:

• Jezgra: Logika za upravljanje zadacima (entiteti, slučajevi korištenja, poslovna pravila).
• Portovi: TaskService (definira metode za stvaranje, ažuriranje i dohvaćanje zadataka).
• Pokretački adapter: React komponente koje koriste TaskService za interakciju s jezgrom.
• Pokretani adapter: API klijent koji implementira TaskService i šalje zahtjeve pozadinskom API-ju.

Primjer korištenja čiste arhitekture:

• Entiteti: Zadatak, Projekt, Korisnik (čisti JavaScript objekti).
• Slučajevi korištenja: CreateTaskUseCase, UpdateTaskUseCase (orkestriraju entitete).
• Sučeljni adapteri:
  • Kontroleri: Upravljaju korisničkim unosom iz korisničkog sučelja.
  • Prezenteri: Formatiraju podatke za prikaz u korisničkom sučelju.
  • Pristupnici (Gateways): Komuniciraju s API klijentom.
• Okviri i pokretači: React komponente, API klijent (axios, fetch).

3. Implementirajte adaptere (heksagonalna arhitektura) ili slojeve (čista arhitektura)

Sada implementirajte adaptere ili slojeve koji povezuju jezgru s vanjskim sustavima. Pobrinite se da su adapteri ili slojevi neovisni o jezgri i da jezgra s njima komunicira samo putem portova ili sučelja. To vam omogućuje jednostavnu zamjenu različitih adaptera ili slojeva bez utjecaja na temeljnu logiku.

Primjer (heksagonalna arhitektura):

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

// Adapter API klijenta
class ApiTaskService implements TaskService {
  async createTask(taskData: TaskData): Promise {
    // Pošalji API zahtjev za stvaranje zadatka
  }

  async updateTask(taskId: string, taskData: TaskData): Promise {
    // Pošalji API zahtjev za ažuriranje zadatka
  }

  async getTask(taskId: string): Promise {
    // Pošalji API zahtjev za dohvaćanje zadatka
  }
}

// Adapter React komponente
function TaskList() {
  const taskService: TaskService = new ApiTaskService();

  const handleCreateTask = async (taskData: TaskData) => {
    await taskService.createTask(taskData);
    // Ažuriraj popis zadataka
  };

  // ...
}

Primjer (čista arhitektura):

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

// Slučaj korištenja
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;
  }
}

// Sučeljni adapteri - Pristupnik (Gateway)
interface TaskGateway {
  create(task: Task): Promise;
}

class ApiTaskGateway implements TaskGateway {
  async create(task: Task): Promise {
    // Pošalji API zahtjev za stvaranje zadatka
  }
}

// Sučeljni adapteri - Kontroler
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);
  }
}

// Okviri i pokretači - React komponenta
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">Stvori zadatak</button>
    </form>
  );
}

</code>
</pre>

<h3>4. Implementirajte ubacivanje ovisnosti (Dependency Injection)</h3>

<p>Kako biste dodatno odvojili jezgru od vanjskih sustava, koristite ubacivanje ovisnosti (dependency injection) za pružanje adaptera ili slojeva jezgri. To vam omogućuje jednostavnu zamjenu različitih implementacija adaptera ili slojeva bez mijenjanja koda jezgre.</p>

<p><b>Primjer:</b></p>

<pre>
<code>
// Ubacite TaskService u TaskList komponentu
function TaskList(props: { taskService: TaskService }) {
  const { taskService } = props;

  const handleCreateTask = async (taskData: TaskData) => {
    await taskService.createTask(taskData);
    // Ažurirajte popis zadataka
  };

  // ...
}

// Korištenje
const apiTaskService = new ApiTaskService();
<TaskList taskService={apiTaskService} />
</code>
</pre>

<h3>5. Napišite jedinične testove</h3>

<p>Jedna od ključnih prednosti heksagonalne i čiste arhitekture je poboljšana mogućnost testiranja. Možete lako pisati jedinične testove za temeljnu poslovnu logiku bez oslanjanja na vanjske ovisnosti. Koristite lažne (mock) adaptere ili slojeve kako biste simulirali ponašanje vanjskih sustava i provjerili radi li temeljna logika kako se očekuje.</p>

<p><b>Primjer:</b></p>

<pre>
<code>
// Lažni 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' });
  }
}

// Jedinični 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>Praktična razmatranja i izazovi</h2>

<p>Iako heksagonalna i čista arhitektura nude značajne prednosti, postoje i neka praktična razmatranja i izazovi koje treba imati na umu prilikom njihove primjene na frontend razvoj:</p>

<ul>
 <li><b>Povećana složenost:</b> Ove arhitekture mogu dodati složenost u bazu koda, posebno za male ili jednostavne aplikacije.</li>
 <li><b>Krivulja učenja:</b> Razvojni timovi možda će morati naučiti nove koncepte i obrasce kako bi učinkovito implementirali ove arhitekture.</li>
 <li><b>Pretjerani inženjering:</b> Važno je izbjegavati pretjerano kompliciranje aplikacije. Počnite s jednostavnom arhitekturom i postupno dodajte složenost prema potrebi.</li>
 <li><b>Balansiranje apstrakcije:</b> Pronalaženje prave razine apstrakcije može biti izazovno. Previše apstrakcije može učiniti kod teškim za razumijevanje, dok premalo apstrakcije može dovesti do čvrste povezanosti.</li>
 <li><b>Razmatranja o performansama:</b> Prekomjerni slojevi apstrakcije potencijalno mogu utjecati na performanse. Važno je profilirati aplikaciju i identificirati uska grla u performansama.</li>
</ul>

<h2>Međunarodni primjeri i prilagodbe</h2>

<p>Načela heksagonalne i čiste arhitekture primjenjiva su na frontend razvoj bez obzira na geografsku lokaciju ili kulturni kontekst. Međutim, specifične implementacije i prilagodbe mogu varirati ovisno o zahtjevima projekta i preferencijama razvojnog tima.</p>

<p><b>Primjer 1: Globalna e-commerce platforma</b></p>

<p>Globalna e-commerce platforma mogla bi koristiti heksagonalnu arhitekturu kako bi odvojila temeljnu logiku košarice i upravljanja narudžbama od UI okvira i pristupnika za plaćanje. Jezgra bi bila odgovorna za upravljanje proizvodima, izračun cijena i obradu narudžbi. Pokretački adapteri uključivali bi React komponente za katalog proizvoda, košaricu i stranice za naplatu. Pokretani adapteri uključivali bi API klijente za različite pristupnike za plaćanje (npr. Stripe, PayPal, Alipay) i pružatelje dostave (npr. FedEx, DHL, UPS). To omogućuje platformi da se lako prilagodi različitim regionalnim načinima plaćanja i opcijama dostave.</p>

<p><b>Primjer 2: Višejezična aplikacija za društvene mreže</b></p>

<p>Višejezična aplikacija za društvene mreže mogla bi koristiti čistu arhitekturu kako bi odvojila temeljnu logiku autentifikacije korisnika i upravljanja sadržajem od UI i okvira za lokalizaciju. Entiteti bi predstavljali korisnike, objave i komentare. Slučajevi korištenja definirali bi kako korisnici stvaraju, dijele i komuniciraju sa sadržajem. Sučeljni adapteri bavili bi se prevođenjem sadržaja na različite jezike i formatiranjem podataka za različite UI komponente. To omogućuje aplikaciji da lako podrži nove jezike i prilagodi se različitim kulturnim preferencijama.</p>

<h2>Zaključak</h2>

<p>Heksagonalna i čista arhitektura pružaju vrijedna načela za izgradnju održivih, testabilnih i skalabilnih frontend aplikacija. Odvajanjem temeljne poslovne logike od vanjskih ovisnosti, možete stvoriti fleksibilniju i prilagodljiviju bazu koda koju je lakše razvijati tijekom vremena. Iako ove arhitekture mogu dodati početnu složenost, dugoročne koristi u smislu održivosti, mogućnosti testiranja i skalabilnosti čine ih isplativom investicijom za složene frontend projekte. Zapamtite da treba započeti s jednostavnom arhitekturom i postupno dodavati složenost prema potrebi te pažljivo razmotriti praktična razmatranja i izazove.</p>

<p>Prihvaćanjem ovih arhitektonskih obrazaca, frontend developeri mogu graditi robusnije i pouzdanije aplikacije koje mogu zadovoljiti rastuće potrebe korisnika diljem svijeta.</p>

<h3>Dodatna literatura</h3>

<ul>
  <li>Hexagonal Architecture: <a href="https://alistaircockburn.com/hexagonal-architecture/">https://alistaircockburn.com/hexagonal-architecture/</a></li>
  <li>Clean Architecture: <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">frontend arhitektura</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">heksagonalna arhitektura</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">čista arhitektura</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">frontend razvoj</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">softverska arhitektura</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">skalabilne aplikacije</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">kod koji se može testirati</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">kod koji se može održavati</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 arhitektura</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 arhitektura</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 arhitektura</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>