The Atomic Hexagonal Architecture o— on the frontend — with React

short name Atomic DDH, with an example on React

Following the Hexagonal Architecture article I published a few years ago on and then the Atomic Design Architecture, this one will showcase a new architecture style that combines both of them with a focus on the frontend with React.

First, let’s remember what is the Hexagonal Architecture.

Hexagonal Architecture

• The Hexagonal Architecture relies on the Layered Architecture, so we have 3 modules : API, Domain and SPI
• The goal is to isolate the Domain
• We need to apply the Dependency Inversion Principle to inverse the control (IoC), by wiring dependencies thus injecting implementations (Dependency Injection).
• Adapters are implementing Port which are interfaces defined in the Domain module
• The dependency direction is outside inward.
• In therms on Testing, we could tackle with 2 levels : inner layer and outer layer. The outer layer includes the API and SPI modules, seen as infrastructure.

The Atomic Design Architecture

However, on the frontend side, we need to consider some specificities, such as as UI…