Hexagonal Architecture applied to typescript react project

Introduction

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.

We will implement a typescript project using react to apply some of the concepts of HA (Hexagonal Architecture)

First of all, to maintain this real we implement an existing API to get Dog Breeds Photos in the link bellow you can find the api documentation.
Dog CEO Api documentation

Let's get started

I'm gonna create a react app, using yarn and create react app CLI and typescript template to do this you need to type the following:

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.

The code.

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

if you want you can see the finished project implemented in my github account esaraviam

Conclusion

From the react app perspective implementing this kind of architecture will push you to apply SOLID principles and your app will be more scalable and easy to maintain.

It forces our domain not to be coupled to anything external through the use of our domain's own interfaces that are implemented by external elements.

It facilitates being decoupled from the delivery method, making it easier for a use case to work for a mobile App, API, a traditional website, a single web App by REST, etc ...

On the other hand, it allows you to be prepared to change the implementation details such as the persistence or the framework.
Like any architecture based on the investment of dependencies, it facilitates that the components can be unit tested.

Comments

[Adria M.]

Thanks for sharing! How would you approach React contexts with hexacgonal architecture? Another repo and use cases? Do you have any example? Thanks again!!!

[Luis Esteban Saravia M]

Thanks for your comment 🤩, First of all, you have to think about what the context is used for. Mainly the context in react is used for sharing some "global" data to avoid passing that data as props through a lot of components. if you are thinking use context to manage the state of your app to avoid using redux it's not a very recommended practice. saying this from the hexagonal architecture perspective, to use context should be enough adding some repos and use cases to grab some data from your domain. Remember the use of context is highly risky in terms of code coupling, and that coupling is one of the primary goals when we are using DDD in this case Hexagonal architecture, a better approach is to use component composition and manage the state separately.

I Hope to be Helpful

[Adria M.]

@esaraviam thank you so much for your thorough response. Definitely helpful! Will take your advise into consideration. Thanks for sharing your knowledge.
Best,