clean-react
domain-driven-hexagon
clean-react | domain-driven-hexagon | |
---|---|---|
3 | 68 | |
1,370 | 11,338 | |
- | - | |
0.0 | 5.2 | |
about 1 year ago | 21 days ago | |
TypeScript | TypeScript | |
GNU General Public License v3.0 only | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
clean-react
-
A importância da Clean Architecture
Rodrigo Manguinho em Clean React
-
Clean Architecture: Applying with React
In src/presentation/pages/ the Login page will be created, which is composed by components, methods and functions. The component that calls the authentication function is the that is contained in the form to get the input values, as shown in the following code snippet: Enter fullscreen mode Exit fullscreen mode When clicking on the Button, the handleSubmit() that is in the onSubmit of the form is called. const handleSubmit = async ( event: React.FormEvent ): Promise => { event.preventDefault(); try { const account = await authentication.auth({ email: state.email, password: state.password, }); setCurrentAccount(account); history.replace('/'); } catch (error) { // Error handling here } }; Enter fullscreen mode Exit fullscreen mode Where the authentication.auth() on click will call a factory (we'll see later) to do the authentication. In this case, it is passing the parameters captured by the input and the value returned from the request is saved in the cache through setCurrentAccount(account). Fourth step: Connect all layers for requests to work After everything is implemented, now just connect all the parts. For this, the design pattern Factory Method is used. Inside src/main/factories/usecases we create the factory of the use case being implemented. In the case of this example, it is related to authentication. The makeRemoteAuthentication is created, which returns the RemoteAuthentication that receives as a parameter the factory of the Http Client and the factory that creates the URL. The URL of the API you want to request is passed as a parameter along with the factory that creates the URL. In the example it is the URL that ends with /login. import { RemoteAuthentication } from '@/data/usecases/'; import { IAuthentication } from '@/domain/usecases'; import { makeAxiosHttpClient, makeApiUrl } from '@/main/factories/http'; export const makeRemoteAuthentication = (): IAuthentication => { const remoteAuthentication = new RemoteAuthentication( makeApiUrl('/login'), makeAxiosHttpClient() ); return remoteAuthentication; }; Enter fullscreen mode Exit fullscreen mode After that, in src/main/factories/pages, the folder for the Login factories is created. In pages with forms, form validations are also injected, but as the focus of this text is on integrations, we will leave this point out of the explanation. import React from 'react'; import { Login } from '@/presentation/pages'; import { makeRemoteAuthentication } from '@/main/factories/usecases/'; const makeLogin: React.FC = () => { const remoteAuthentication = makeRemoteAuthentication(); return ( ); }; export default makeLogin; Enter fullscreen mode Exit fullscreen mode A makeLogin const representing the factory is created. It has makeRemoteAuthentication which is injected inside the Login page created in the presentation layer so that the page has access to these requests. Fifth step: Apply the page created in the application Finally, it is necessary to call the Login factory in the application, so that it can be accessed by the user. In the router.tsx file located in src/main/routes, add the factory page created into the Switch inside BrowserRouter. The route is passed in the path, in this case it is /login, and the page in the component, which in this case is the pointer to the makeLoginPage factory . This logic is used with all other pages, only changing from Route to PrivateRoute if the route is authenticated. The code looks like this below. const Router: React.FC = () => { return ( ); }; Enter fullscreen mode Exit fullscreen mode Conclusion Clean Architecture despite being a bit complex to understand and implement at the beginning - and even seem redundant -, abstractions are necessary. Several design patterns are applied to ensure the quality and independence of the code, facilitating the evolution and independent maintenance of the framework. In cases like this, if you want to change the framework from React to Angular or any other Typescript based framework, just change the presentation layer and make adjustments to the dependencies. Following the development process and understanding why you are doing it in such a way makes code production easier. After a while it ends up being done naturally, as it has a linear development process: I. Use case in the domain layer; II. Use case in the data layer; III. Creation of UI in the presentation layer; IV. Creation of factories to integrate all layers into the main layer; V. And the call of the main factory in the application routes. As the example has many abstracted parts, it is recommended that you read the code for the hidden parts for a better understanding. In this repository you can access abstracted code similar to the one given in this example. You can also access this architecture just by running the npx @rubemfsv/clean-react-app my app command, similar to create-react-app, but in a cleaner and more scalable way. Find out how to do it reading this post. References Rodrigo Manguinho https://github.com/rmanguinho/clean-react MARTIN, Robert C. Clean Architecture: A Craftsman’s Guide to Software Structure and Design. 1st. ed. USA: Prentice Hall Press, 2017. ISBN 0134494164.
- Arquitetura Limpa: Aplicando com React
domain-driven-hexagon
-
From Frontend to Backend
That's exactly where I am. My manager gave me these links, that cover a lot of those words the backend uses, so I can identify what they mean and how to use them. 1. For inspiration and concepts: https://github.com/Sairyss/domain-driven-hexagon 2. Suggested to read the documentation for nest.js. They apply such concepts I don't understand: https://nestjs.com/
-
How to Become a Node.js Backend Developer? Share Helpful Resources!
Domain-Driven Hexagon - architecture (NodeJS code examples)
-
Best file structure for node js project
Can't use any frameworks or libraries? Seems like a terrible idea tbh. I can suggest this repo https://github.com/Sairyss/domain-driven-hexagon - read "modules" and "folder and file structure" sections for some suggestions on how to structure files using patterns like Modular Architecture, Vertical Slicing, etc. Make sure to read the attached links and check code examples.
-
i just made an equation solver using constraint propogation in style of sicp
This is a reasonable intro, furthermore it points out more resources if you would he interested: https://github.com/Sairyss/domain-driven-hexagon
-
Anyone using CQRS in production? Does it really have any benefits?
I’ve recently refactored one of my key domains using nestjs/cqrs and was heavily inspired by this repository.
-
Clean architecture in real world app?
Not a big one, but explains how to combine architectures like clean architecture, domain-driven design, hexagonal, etc. https://github.com/Sairyss/domain-driven-hexagon
-
Recommended practices for better Angular large application architecture, project structure
I strongly recommand this: https://github.com/Sairyss/domain-driven-hexagon
- Examples of APIs that follows the best practices and are production ready on Github?
-
[AskJS] How to architect a JavaScript (backend) app that can scale?
Here is an example codebase with architectural patterns described more in details: https://github.com/Sairyss/domain-driven-hexagon
- Complex business logic in Node
What are some alternatives?
clean-architecture-react - Clean Architecture Example Using React.js
typescript-clean-architecture - It is my attempt to create Clean Architecture based application in TypeScript.
Server-Driven-UI - A framework example for Server Driven UI (SDUI) that teaches you the best practices to scale.
Nest - A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applications with TypeScript/JavaScript 🚀
react-use-wizard - 🧙 A React wizard (stepper) builder without the hassle, powered by hooks.
nestjs-config - Config module for nestjs using dotenv :key:
simple-blog-application-backend-challenge - Code Challenge: Simple Blog API built with TypeScript and MongoDB, using TDD, Clean Architecture, SOLID principles, and Design Patterns.
nestjs-starter-rest-api - NestJS Starter Kit. Monolithic Backend. REST API.
entangle - Global state management tool for react hooks inspired by RecoilJS and Jotai using proxies.
bulletproof-nodejs - Implementation of a bulletproof node.js API 🛡️
react-table - 🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table
express-typescript-skeleton - 🔰🦸 Template to start developing a REST API with Node.js (Express), TypeScript, Ts.ED, ESLint, Prettier, Husky, Prisma, etc.