Raziščite heksagonalno in čisto arhitekturo za gradnjo vzdrževalnih, skalabilnih in testabilnih frontend aplikacij. Spoznajte načela, prednosti in implementacijo.
Frontend arhitektura: heksagonalna in čista arhitektura za skalabilne aplikacije
Ker kompleksnost frontend aplikacij narašča, postane dobro definirana arhitektura ključna za vzdržljivost, testabilnost in skalabilnost. Dva priljubljena arhitekturna vzorca, ki naslavljata te skrbi, sta heksagonalna arhitektura (znana tudi kot "Ports and Adapters" - vrata in adapterji) in čista arhitektura. Čeprav izvirata iz sveta zalednih sistemov (backend), se lahko ta načela učinkovito uporabijo pri razvoju frontend aplikacij za ustvarjanje robustnih in prilagodljivih uporabniških vmesnikov.
Kaj je frontend arhitektura?
Frontend arhitektura opredeljuje strukturo, organizacijo in interakcije različnih komponent znotraj frontend aplikacije. Zagotavlja načrt za izgradnjo, vzdrževanje in skaliranje aplikacije. Dobra frontend arhitektura spodbuja:
- Vzdržljivost: Lažje razumevanje, spreminjanje in odpravljanje napak v kodi.
- Testabilnost: Omogoča lažje pisanje enotnih in integracijskih testov.
- Skalabilnost: Omogoča aplikaciji, da se spopada z naraščajočo kompleksnostjo in obremenitvijo uporabnikov.
- Ponovna uporabnost: Spodbuja ponovno uporabo kode v različnih delih aplikacije.
- Prilagodljivost: Prilagaja se spreminjajočim se zahtevam in novim tehnologijam.
Brez jasne arhitekture lahko frontend projekti hitro postanejo monolitni in težko obvladljivi, kar vodi do povečanih stroškov razvoja in zmanjšane agilnosti.
Uvod v heksagonalno arhitekturo
Heksagonalna arhitektura, ki jo je predlagal Alistair Cockburn, si prizadeva ločiti osrednjo poslovno logiko aplikacije od zunanjih odvisnosti, kot so baze podatkov, ogrodja za uporabniške vmesnike in API-ji tretjih oseb. To doseže s konceptom vrat in adapterjev (Ports and Adapters).
Ključni koncepti heksagonalne arhitekture:
- Jedro (domena): Vsebuje poslovno logiko in primere uporabe aplikacije. Je neodvisno od zunanjih ogrodij ali tehnologij.
- Vrata (Ports): Vmesniki, ki opredeljujejo, kako jedro komunicira z zunanjim svetom. Predstavljajo vhodne in izhodne meje jedra.
- Adapterji (Adapters): Implementacije vrat, ki povezujejo jedro s specifičnimi zunanjimi sistemi. Obstajata dve vrsti adapterjev:
- Gonilni adapterji (primarni adapterji): Sprožijo interakcije z jedrom. Primeri vključujejo komponente uporabniškega vmesnika, vmesnike ukazne vrstice ali druge aplikacije.
- Gnani adapterji (sekundarni adapterji): Kliče jih jedro za interakcijo z zunanjimi sistemi. Primeri vključujejo baze podatkov, API-je ali datotečne sisteme.
Jedro ne ve ničesar o specifičnih adapterjih. Z njimi komunicira samo preko vrat. Ta ločitev omogoča enostavno zamenjavo različnih adapterjev brez vpliva na osrednjo logiko. Na primer, lahko preklopite z enega ogrodja za uporabniški vmesnik (npr. React) na drugega (npr. Vue.js) s preprosto zamenjavo gonilnega adapterja.
Prednosti heksagonalne arhitekture:
- Izboljšana testabilnost: Osrednjo poslovno logiko je mogoče enostavno testirati v izolaciji, brez zanašanja na zunanje odvisnosti. Uporabite lahko lažne adapterje (mock adapters) za simulacijo delovanja zunanjih sistemov.
- Povečana vzdržljivost: Spremembe v zunanjih sistemih imajo minimalen vpliv na osrednjo logiko. To olajša vzdrževanje in razvoj aplikacije skozi čas.
- Večja prilagodljivost: Aplikacijo lahko enostavno prilagodite novim tehnologijam in zahtevam z dodajanjem ali zamenjavo adapterjev.
- Izboljšana ponovna uporabnost: Osrednjo poslovno logiko je mogoče ponovno uporabiti v različnih kontekstih s povezovanjem na različne adapterje.
Uvod v čisto arhitekturo
Čista arhitektura, ki jo je populariziral Robert C. Martin (stric Bob), je še en arhitekturni vzorec, ki poudarja ločevanje skrbi (separation of concerns) in razdruževanje. Osredotoča se na ustvarjanje sistema, ki je neodvisen od ogrodij, baz podatkov, uporabniškega vmesnika in katere koli zunanje agencije.
Ključni koncepti čiste arhitekture:
Čista arhitektura organizira aplikacijo v koncentrične plasti, pri čemer je najbolj abstraktna in ponovno uporabna koda v središču, najbolj konkretna in tehnološko specifična koda pa na zunanjih plasteh.
- Entitete (Entities): Predstavljajo osrednje poslovne objekte in pravila aplikacije. So neodvisne od zunanjih sistemov.
- Primeri uporabe (Use Cases): Opredeljujejo poslovno logiko aplikacije in kako uporabniki komunicirajo s sistemom. Orkestrirajo entitete za izvajanje specifičnih nalog.
- Vmesniški adapterji (Interface Adapters): Pretvarjajo podatke med primeri uporabe in zunanjimi sistemi. Ta plast vključuje predstavitelje (presenters), krmilnike (controllers) in prehode (gateways).
- Ogrodja in gonilniki (Frameworks and Drivers): Najbolj zunanja plast, ki vsebuje ogrodje uporabniškega vmesnika, bazo podatkov in druge zunanje tehnologije.
Pravilo odvisnosti v čisti arhitekturi določa, da so lahko zunanje plasti odvisne od notranjih plasti, notranje plasti pa ne morejo biti odvisne od zunanjih. To zagotavlja, da je osrednja poslovna logika neodvisna od zunanjih ogrodij ali tehnologij.
Prednosti čiste arhitekture:
- Neodvisnost od ogrodij: Arhitektura se ne zanaša na obstoj neke knjižnice programske opreme z obilico funkcij. To vam omogoča, da ogrodja uporabljate kot orodja, namesto da bi bili prisiljeni svoj sistem umestiti v njihove omejene okvire.
- Testabilnost: Poslovna pravila je mogoče testirati brez uporabniškega vmesnika, baze podatkov, spletnega strežnika ali katerega koli drugega zunanjega elementa.
- Neodvisnost od uporabniškega vmesnika: Uporabniški vmesnik je mogoče enostavno spremeniti, ne da bi spreminjali preostali del sistema. Spletni uporabniški vmesnik je mogoče zamenjati s konzolnim, ne da bi spreminjali katero koli poslovno pravilo.
- Neodvisnost od baze podatkov: Oracle ali SQL Server lahko zamenjate za Mongo, BigTable, CouchDB ali kaj drugega. Vaša poslovna pravila niso vezana na bazo podatkov.
- Neodvisnost od katere koli zunanje agencije: Pravzaprav vaša poslovna pravila preprosto ne vedo *ničesar* o zunanjem svetu.
Uporaba heksagonalne in čiste arhitekture pri razvoju frontend aplikacij
Čeprav sta heksagonalna in čista arhitektura pogosto povezani z razvojem zalednih sistemov, se njuna načela lahko učinkovito uporabijo tudi pri frontend aplikacijah za izboljšanje njihove arhitekture in vzdržljivosti. Poglejmo, kako:
1. Določite jedro (domeno)
Prvi korak je določitev osrednje poslovne logike vaše frontend aplikacije. To vključuje entitete, primere uporabe in poslovna pravila, ki so neodvisna od ogrodja uporabniškega vmesnika ali zunanjih API-jev. Na primer, v spletni trgovini bi jedro lahko vključevalo logiko za upravljanje izdelkov, nakupovalnih košaric in naročil.
Primer: V aplikaciji za upravljanje nalog bi lahko osrednja domena vsebovala:
- Entitete: Naloga, Projekt, Uporabnik
- Primeri uporabe: UstvariNalogo, PosodobiNalogo, DodeliNalogo, ZaključiNalogo, SeznamNalog
- Poslovna pravila: Naloga mora imeti naslov, naloge ni mogoče dodeliti uporabniku, ki ni član projekta.
2. Opredelite vrata in adapterje (heksagonalna arhitektura) ali plasti (čista arhitektura)
Nato opredelite vrata in adapterje (heksagonalna arhitektura) ali plasti (čista arhitektura), ki ločujejo jedro od zunanjih sistemov. V frontend aplikaciji bi to lahko vključevalo:
- Komponente UI (gonilni adapterji/ogrodja in gonilniki): komponente React, Vue.js, Angular, ki komunicirajo z uporabnikom.
- Odjemalci API (gnani adapterji/vmesniški adapterji): Storitve, ki pošiljajo zahteve na zaledne API-je.
- Shranjevanje podatkov (gnani adapterji/vmesniški adapterji): Lokalna shramba (Local storage), IndexedDB ali drugi mehanizmi za shranjevanje podatkov.
- Upravljanje stanja (vmesniški adapterji): Redux, Vuex ali druge knjižnice za upravljanje stanja.
Primer z uporabo heksagonalne arhitekture:
- Jedro: Logika upravljanja nalog (entitete, primeri uporabe, poslovna pravila).
- Vrata:
TaskService(definira metode za ustvarjanje, posodabljanje in pridobivanje nalog). - Gonilni adapter: Komponente React, ki uporabljajo
TaskServiceza interakcijo z jedrom. - Gnani adapter: Odjemalec API, ki implementira
TaskServicein pošilja zahteve na zaledni API.
Primer z uporabo čiste arhitekture:
- Entitete: Task, Project, User (čisti JavaScript objekti).
- Primeri uporabe: CreateTaskUseCase, UpdateTaskUseCase (orkestrirajo entitete).
- Vmesniški adapterji:
- Krmilniki (Controllers): Obravnavajo uporabniški vnos iz UI.
- Predstavitelji (Presenters): Formatirajo podatke za prikaz v UI.
- Prehodi (Gateways): Komunicirajo z odjemalcem API.
- Ogrodja in gonilniki: Komponente React, odjemalec API (axios, fetch).
3. Implementirajte adapterje (heksagonalna arhitektura) ali plasti (čista arhitektura)
Sedaj implementirajte adapterje ali plasti, ki povezujejo jedro z zunanjimi sistemi. Poskrbite, da so adapterji ali plasti neodvisni od jedra in da jedro z njimi komunicira samo preko vrat ali vmesnikov. To vam omogoča enostavno zamenjavo različnih adapterjev ali plasti brez vpliva na osrednjo logiko.
Primer (heksagonalna arhitektura):
// Vrata TaskService
interface TaskService {
createTask(taskData: TaskData): Promise;
updateTask(taskId: string, taskData: TaskData): Promise;
getTask(taskId: string): Promise;
}
// Adapter odjemalca API
class ApiTaskService implements TaskService {
async createTask(taskData: TaskData): Promise {
// Pošlji API zahtevek za ustvarjanje naloge
}
async updateTask(taskId: string, taskData: TaskData): Promise {
// Pošlji API zahtevek za posodobitev naloge
}
async getTask(taskId: string): Promise {
// Pošlji API zahtevek za pridobitev naloge
}
}
// Adapter komponente React
function TaskList() {
const taskService: TaskService = new ApiTaskService();
const handleCreateTask = async (taskData: TaskData) => {
await taskService.createTask(taskData);
// Posodobi seznam nalog
};
// ...
}
Primer (čista arhitektura):
// Entitete
class Task {
constructor(public id: string, public title: string, public description: string) {}
}
// Primer uporabe
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;
}
}
// Vmesniški adapterji - Prehod
interface TaskGateway {
create(task: Task): Promise;
}
class ApiTaskGateway implements TaskGateway {
async create(task: Task): Promise {
// Pošlji API zahtevek za ustvarjanje naloge
}
}
// Vmesniški adapterji - Krmilnik
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);
}
}
// Ogrodja in gonilniki - Komponenta React
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 (