架构 - How to Combine Clean Architecture and MVP Mode to Improve Front-end Development Experience (1) - Overall Architecture - 若邪的栏目

If you can't accept TypeScript, it is not recommended to continue reading this series of articles

This article does not introduce what is clean architecture and MVP mode in detail, check the related articles at the end of the article by yourself.

A rough introduction to clean architecture

The following figure shows the most primitive structure of the clean architecture:

Entities/Models: Entity layer. Officially, it encapsulates some of the most common logic in the enterprise. It can also be called Models. It may be an object that only contains data fields, or it may contain methods, with some business logic. More in-depth is the content related to domain-driven (DDD) development.
Use Case/Service: Contains core business logic.
Interface Adapter: Adaptation layer/glue layer, responsible for data conversion between the entity and use case of the inner circle and the external interfaces of the outer circle. It is necessary to convert the data of the outer service into the data that the inner entity and usecase can consume, and vice versa.
External Interfaces: Dependent external services, third-party frameworks, and page UIs that need to be pasted all belong to this layer. This layer is completely unaware of any logic in the inner circle, so no matter how this layer changes (the component library is controlled by Element UI Changed to Ant Design Vue, database changed from MySQL to PostgreSQL), should not affect the inner circle.

Isn't this the backend mvc?

benefit

Better unit testing: business logic can be tested without UI, database, web server or any other external infrastructure.
Reduce dependence on UI framework: Cross-end development, the business logic layer can be directly reused, and only the UI layer needs to be adapted.
Infrastructure independence: The inner business logic does not need to care about where the data comes from and where it is submitted, such as LocalStroage, IndexedDB, Web SQL, JSbridge, HTTP, and WebSocket.

Converted to a structure suitable for front-end engineering

Both Service and Model are pure JS classes/objects, independent of the framework.

The dotted line of the basic service does not directly call the corresponding API, but encapsulates it in a tool library or function.

How to really land?

The presenter/controller creates the model, the service instance, and injects the model into the service. The model is used in the service to do business logic calculations. At the same time, the service method is called in the presenter/controller to process the view event, and the model is returned to the view layer for data binding.

Question: model is a pure JS object, how to trigger view update when model data changes?

mobx, @formily/reactive turns models into responsive; making wheels - publish-subscribe model

How to land in actual projects

Use vue composition api or react hooks to build models, so model is a custom hooks.

The presenter/controller is also a custom hooks, which can call our own defined hooks internally, as well as third-party open source hooks libraries, such as ahooks, vueuse

Because the model is a custom hook, when the internal state is updated, it will trigger the update of the view.