A pattern I saw emerging with components was there was 3 levels:
the code with the JSX for the view of the component
the code that dealt with the business logic, the model
the code that connected the two together, the controller / view model
When a new component is added, it's not clear on where it should be placed.
Current solution
Some of the code is split into those distinctions but other parts are not.
There's some models split out, found in the model folder
There's just one "controller" (not really a controller because it's not connecting a model to a view)
Alternative solution
Folder structure could look like
component
this is primarily the "view" but will also connect to the controllers
model
controller
Why no view folder?
The controllers use React hooks, which have to be called inside the render function, which is the basically the view. And React thinks in terms of components, which are a combination of view, controller, and model.
Problem
A pattern I saw emerging with components was there was 3 levels:
When a new component is added, it's not clear on where it should be placed.
Current solution
Some of the code is split into those distinctions but other parts are not.
modelfolderAlternative solution
Folder structure could look like
componentmodelcontrollerWhy no
viewfolder?The controllers use React hooks, which have to be called inside the render function, which is the basically the view. And React thinks in terms of components, which are a combination of view, controller, and model.
It appears to be similar to the Presentation-abstraction-control pattern.
Benefits compared to current solution
It's clearer on where the parts of a component should be placed and can lead to more code reuse by finding patterns in each section.
Costs compared to current solution
Basic dev effort.