Hexagonal
Architecture

in Frontend applications

David García - @d4vecarter

The Architecture

concept in Software development is a set of rules, patterns, and agreements that allows modeling our business logic and apply semantic to it

Hexagonal Architecture in Frontend Applications

David García - @d4vecarter

The Architecture

allows:

• Easily test and encapsulation of critical business logic
• Code reusability among different context in the application
• Improves maintainability and keeps complexity stable

Hexagonal Architecture in Frontend Applications

David García - @d4vecarter

https://www.opsmx.com/blog/reducing-cost-complexity-of-testing-ml-based-continuous-verification/

{

Learning

wall

Hexagonal Architecture in Frontend Applications

David García - @d4vecarter

Objective

Keep business logic complexity stable in time despite the number of features being added to our application

Hexagonal Architecture in Frontend Applications

David García - @d4vecarter

The Model

Dependency layers in the Hexagonal Architecture model

Hexagonal Architecture in Frontend Applications

David García - @d4vecarter

https://medium.com/@fabio.schettino.01/implementando-ddd-y-arquitectura-hexagonal-en-php-con-laravel-bc2d737b8460

Frontend
adaptation

Uni-directional dependencies representation between layers

/ User interface

Hexagonal Architecture in Frontend Applications

David García - @d4vecarter

Domain Objects:

In our Domain, every business logic represents an abstraction and becomes a type of object with a function

Hexagonal Architecture in Frontend Applications

David García - @d4vecarter

Entities

An Entity usually represents a unique Domain Object with an ID.

For instance: ad, course, savedSearch, user, etc...

Hexagonal Architecture in Frontend Applications

David García - @d4vecarter

Value Objects

A Domain Object with properties and attributes related between them. Featuring:

• Immutability
• Without identification
• Known as Data Transfer Object (DTO) in DDD

For instance: a filters object, a token, a response object...

Hexagonal Architecture in Frontend Applications

David García - @d4vecarter

Repository

Responsible for data fetching and persistence  

For instance: CRUD requests to endpoints or reads/write from/to cookies

Hexagonal Architecture in Frontend Applications

David García - @d4vecarter

Mapper

Gets the Repository response as an input and transforms data, makes calculations, and builds other domain objects like Entities or VOs as its output.

Hexagonal Architecture in Frontend Applications

David García - @d4vecarter

Use Case

The closest layer to the UI is responsible for abstracting the User needs into a requirement exposing a decoupled interface

For instance: The user requests the list of purchased courses based on its user-id

Hexagonal Architecture in Frontend Applications

David García - @d4vecarter

Let's code!

https://codesandbox.io/s/dmstk-lab-zyc7x