/explicit-architecture-reactjs

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

Primary LanguageJavaScriptMIT LicenseMIT

Explicit Architecture in ReactJs

Author Software License

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.

Explicit Architecture

Package by component

Package by component

Dependencies directions

Dependencies

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)