This is a Framework for building web application. It helps you decouple your UI component and the core logic of your App.
It can be used both on the frontend and the backend and integrate well with any UI framework but it's primary use case is for building SPAs (Vite Projects) with React.

• Benefits
• Install / Import
• Examples setups
  • Example project
  • Canonical setup
  • Enterprise grade app
• Starting the demo app

Benefits

• Clean architecture without the object-orientedness.
• No need to explicitly call dispatch() on the UI side.
  As a matter of fact, Redux being used under the hood is an implementation detail that can as well be ignored by the dev working on the UI.
• Strict isolation between the Core and the UI. Port your web app to React Native or switch to another UI framework without having to re-write a single line of the core logic.
• It's not specifically a React framework, it's not even specifically a frontend framework, it can and is be used on the backend.
• Names things once, it propagate through all the codebase via TypeScript's template literal types. No more hard to maintain stuttering.
  Name things once then let intellisense guide you.
• The core can tell the UI to do thing imperatively. Like "Play a sound now" which is something that is impossible to do cleanly with just states. (isSoundShouldBePlayedNow: boolean ?)

Install / Import

$ yarn add clean-architecture evt

Examples setups

Example project

This is a very basic snake game implemented with Vite/TypeScript/React/Clean-Architecture.

👉 garronej/snake-clean-architecture👈

Canonical setup

A canonical setup can be found here: 👉 src/test/demo-app👈 .

Enterprise grade app

You can consult the source code of onyxia-web to see how clean-architecture is used in a real world application.

Starting the demo app

git clone https://github.com/garronej/clean-architecture
cd clean-architecture
yarn
yarn build
yarn start-demo-app