franka107/explicit-architecture-reactjs

This repository is a demo of Explicit Architecture, using ReactJs and the Symfony Demo Application as a GraphQL API backend.

Explicit Architecture in ReactJs

This repository is a demo of Explicit Architecture, using ReactJs and a GraphQL API on top of the the Symfony Demo Application.

Since this is a frontend project, the code is structured in a slightly different way than a backend project, nevertheless, the guiding principles are the same.

For a example of the code structure in a backend project, you can check my repository Explicit Architecture in PHP.

There may be code in this project that is not used and therefore it would be removed in a real project, nevertheless it was included here as examples.

Explicit Architecture

I explained Explicit Architecture in one of my blog posts, as a result of my understanding of several architectural ideas such as (but not limited to) EBI Architecture, DDD, Ports & Adapters Architecture, Onion Architecture and Clean Architecture.

Please, not that the term "component" in the following slides are not the same as a "react component". They refer to a more generic concept of a domain wise module, which in the context of this project is a Page.

Package by component

Dependencies directions

Folder structure

• bin (application binaries, however the dependencies binaries should go in vendor/bin)
• build (The compiled/built application)
• config (all the config needed to run the application)
• docs (application documentation)
• lib (libraries used by the application, which are independent from, but owned by, this project and not yet distributable)
  • reactjs-extension (code to be used as if it was part of the language itself)
    • src
• public (the entry point to the application)
• src
  • Core (the application core)
    • Page (the application pages with their components that are not reusable in other pages)
    • SharedKernel (components that are used in several pages)
  • Infrastructure (the port & adapters for the infrastructure tools, designed as wrappers because of language limitations)
• translations
• var (volatile artifacts like logs, cache, temporary test databases, generated code, ...)
• node_modules (distributable libraries)