Tell me about hexagonal architecture and its origin…

Hexagonal architecture (Ports and Adapters) is an architectural pattern proposed by Alistair Cockburn. It aims to isolate the core business logic of the application from external dependencies (UI, databases, third-party services).

Origin:

Alistair Cockburn introduced the concept in 2005. The main idea arose as a reaction to traditional layered architectures, where business logic was often tightly coupled with the infrastructure layer. Cockburn aimed to create an architecture that allows developing and testing business logic independently of how it interacts with the outside world. The name "hexagonal" symbolizes the application's ability to interact with various types of external "adapters" through "ports." The hexagon was chosen as an abstract shape with enough "faces" (ports) to interact with different systems.

Main principles:

Core (Core / Domain): Contains pure business logic and domain objects. It does not depend on external technologies.
Ports: Interfaces defining the interaction between the core and the outside world. There are two types of ports:
- Driving Ports: Define how external agents (e.g., user interface or API) can invoke core functions.
- Driven Ports: Define how the core can interact with external services (e.g., database or third-party API). The core defines these interfaces but does not implement them.
Adapters: Implement the ports and serve as a bridge between the core and external elements. There are also two types of adapters:
- Driving Adapters: Transform requests from external agents into a format understandable by the core (e.g., UI adapter).
- Driven Adapters: Transform calls from the core into a format understandable by external services (e.g., database adapter).

Advantages:

Isolation: The business logic core does not depend on external technologies.
Testability: The core can be tested independently without needing to run the entire stack.
Flexibility: Easily replace one adapter with another without changing the core (e.g., switch from one database to another).
Maintainability: Different parts of the application (core and adapters) can be developed and evolved independently.

Application in Frontend:

Although hexagonal architecture is more often associated with the backend, its principles can also be applied in the frontend to structure client applications:

Core: Modules containing business logic and application state (e.g., Redux reducers, Zustand store, components with pure logic not tied to DOM).
Ports: Interfaces defining how UI interacts with logic (incoming) and how logic interacts with external APIs or local storage (outgoing).
Adapters: UI components that handle user input and invoke ports (incoming adapters), and services that perform HTTP requests or work with browser APIs like localStorage (outgoing adapters).

Example structure (abstract):

📦 app
 ┣ 📂 core
 ┃ ┣ 📂 domain
 ┃ ┃ ┗ 📜 todos.ts  // Description of Todo entity
 ┃ ┣ 📂 application
 ┃ ┃ ┗ 📜 todoService.ts // Business logic for Todo
 ┃ ┗ 📂 ports
 ┃ ┃ ┣ 📜 in/ITodoUseCase.ts // Incoming port (UI interface)
 ┃ ┃ ┗ 📜 out/ITodoRepository.ts // Outgoing port (data access interface)
 ┣ 📂 infra
 ┃ ┣ 📂 adapters
 ┃ ┃ ┣ 📂 in/reactUIAdapter.tsx // Incoming adapter (React component)
 ┃ ┃ ┗ 📂 out/apiTodoRepository.ts // Outgoing adapter (API access implementation)

Tell me about hexagonal architecture and its origin.