esaraviam / dogappv1 Goto Github PK

Usually, when we develop react Apps, we only concern about separate in our directory map, hooks, components, pages, store, etc. But this directory separation doesn't guarantee that our application will scale or be maintainable in the future.

Here's comes to help the Domain-Driven Desing(DDD) in particular in this article Hexagonal Architecture.

yarn create react-app dogapp --template typescript

this will create a boilerplate react app that we will modify to implement HA, first of all let's talk about design.

###Hexagonal Architecture.

The Hexagonal Architecture is based in layers like an onion, and propose three base layers, Domain , Application and Infrastructure.

Hexagonal Architecture proposes that our domain is the core of the layers and that it does not couple to anything external. Instead of making explicit use and through the principle of inversion of dependencies, we couple ourselves to contracts (interfaces or ports) and not to specific implementations.

we will make a dog breed app so let's create some directories to implement HA.

To implement HA we need to separate our domain of the implementations so let create the layer proposed by HA.

so we need to create 3 main folders to contain our app.

I'll upload this in a github repository at the end of the post.

• src
• --domain
• --application
• --infrastructure

using this approach the domain folder does know how will be implemented, and the application layer only can access to domain but doesn't know how the infrastructure will be implemented