📐 TypeScript Clean Architecture Framework 📐
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
- 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 evtExamples 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.
Onyxia: A data science-oriented container launcher.
Starting the demo app
git clone https://github.com/garronej/clean-architecture
cd clean-architecture
yarn
yarn build
yarn start-demo-app