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!