Frontend architecture
1. Component
In our projects we follow this architecture:
1.1. Component Logic layer
Logic and data processing. Usually supported by developers.
1.1.1. Provider
Main question: **
What business data does component operate with?
What business logic does component implement?
Responsible for:
Getting and preparing data from store
Preparing actions
Implementation of business logic
Filename: <component>.provider.tsx
Exports mapStateToProps
and / or mapDispatchToProps
functions.
Example:
1.1.2. Presenter
Stateful component.
Main question: What does component do?
Responsible for: 1. Storing and controlling UI state 2. Implementation of all methods like handlers and component logic
Filename: <component>.presenter.tsx
Exports class name: <Component>Presenter
Example:
1.2. Presentation Layer
Only UI view layers. Can be supported by designers.
1.2.1. Styles
Main question: How does component look?
Filename: <component>.styles.tsx
Example:
1.2.2. View
Main question: What does component show?
Responsible for: 1. Stateless component 2. Only makeup with handler interfaces and data interpolation
Filename: <component>.view.tsx
Exports class name / functional component name: <Component>View
Example:
1.2.3. Animation
Main question: How does component change UI states?
Responsible for: 1. Includes animation states for some components. 2. As Framer Motion, as CSS
Filename: <component>.animation.ts
Example:
1.3. Index
Each component folder should contain index
file with exported <Component>
. If component contains Provider
layer this file should connect mapStateToProps
and / or mapDispatchToProps
with component. In another case, just export <Component>
.
Example with existing provider layer:
Example with not existing provider layer:
Last updated