Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/garronej/clean-architecture
📐 A clean architecture framework
https://github.com/garronej/clean-architecture
backend clean-architecture framwork react typescript
Last synced: 6 days ago
JSON representation
📐 A clean architecture framework
- Host: GitHub
- URL: https://github.com/garronej/clean-architecture
- Owner: garronej
- License: mit
- Created: 2021-12-18T17:19:25.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-06-08T10:42:55.000Z (6 months ago)
- Last Synced: 2024-08-03T09:43:47.283Z (4 months ago)
- Topics: backend, clean-architecture, framwork, react, typescript
- Language: TypeScript
- Homepage:
- Size: 948 KB
- Stars: 47
- Watchers: 2
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
📐 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](#benefits)
- [Install / Import](#install--import)
- [Examples setups](#examples-setups)
- [Example project](#example-project)
- [Canonical setup](#canonical-setup)
- [Enterprise grade app](#enterprise-grade-app)
- [Starting the demo app](#starting-the-demo-app)
# Benefits
- Clean architecture without [the object-orientedness](https://www.youtube.com/watch?v=QM1iUe6IofM).
- 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](https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html). 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
```bash
$ 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`👈 ](https://github.com/garronej/snake-clean-architecture)
## Canonical setup
A canonical setup can be found here: [👉 `src/test/demo-app`👈 ](https://github.com/garronej/clean-architecture/tree/main/src/test/demo-app).
## Enterprise grade app
You can consult the source code of [onyxia-web](https://github.com/InseeFrLab/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
```bash
git clone https://github.com/garronej/clean-architecture
cd clean-architecture
yarn
yarn build
yarn start-demo-app
```