We have yet to finalize a file/code structure that we want to follow for this project. I was reading through React's page about file structuring and found that we are currently using a "Grouping by file type" structure (splitting files into /components and /api).
However, I saw that further structuring can be done within the component folder following a concept that was mentioned called Atomic Design. Simply put, it is a concept that promotes splitting components into their atomic module then defining higher-level components with these modules instead of writing them all in the same file. For example:
Input boxes, labels, and buttons are "atoms"
A search form containing an input box, label, and a button is a "molecule"
A header with a logo, buttons, and a search form is an "organism", and so forth.
This provides a tiered hierarchy of components that facilitate future modifications, separation of concerns, as well a simpler debugging process. However, this method does slightly slow down coding in the beginning in order to split components up into different files.
I am interested in this style of structure and think we should start early if we want to follow this type of structure, but it may conflict with some of your coding styles. However, even if we decide not to apply this type of coding structure, I think it will be beneficial to keep this concept in the back of our minds so we can work towards writing better and cleaner code. Let me know if you guys know this style of coding and whether if you think we should apply it to our project.
P.S, another key point to mention is that in order to keep imports simple, we should avoid too much nesting (i.e., limiting to a max of 3-4 nested folders) unless there is a compelling reason for us to do so.
We have yet to finalize a file/code structure that we want to follow for this project. I was reading through React's page about file structuring and found that we are currently using a "Grouping by file type" structure (splitting files into
/componentsand/api).However, I saw that further structuring can be done within the component folder following a concept that was mentioned called Atomic Design. Simply put, it is a concept that promotes splitting components into their atomic module then defining higher-level components with these modules instead of writing them all in the same file. For example:
This provides a tiered hierarchy of components that facilitate future modifications, separation of concerns, as well a simpler debugging process. However, this method does slightly slow down coding in the beginning in order to split components up into different files.
I am interested in this style of structure and think we should start early if we want to follow this type of structure, but it may conflict with some of your coding styles. However, even if we decide not to apply this type of coding structure, I think it will be beneficial to keep this concept in the back of our minds so we can work towards writing better and cleaner code. Let me know if you guys know this style of coding and whether if you think we should apply it to our project.
P.S, another key point to mention is that in order to keep imports simple, we should avoid too much nesting (i.e., limiting to a max of 3-4 nested folders) unless there is a compelling reason for us to do so.