Hi Kiryla, thanks for your additions! I love that you have extended it to services/utils as well. I think the underlying motivations for our directory structures are one and the same. It’s important to organize code into self-contained modules with well defined responsibilities and to be aware how these modules depend on one another. I think the biggest divide is domain-dependent code vs domain-agnostic code and this is the central theme in our thinking. A common pitfall I see in my day-to-day is the idea of implicit dependencies that I mentioned. By this I mean essentially any dependency that does not present itself in the form of an import.

const Foo = (props) => (
<div>
{props.dog.medicalHistory.shots.map(
(shot) => <p key={shot.id}>{shot.name}</p>
)}
</div>
)

Take for example this component. Even though it does not import other code, it implicitly knows about a dog object and a shot object and assumes that every dog object will always have a medicalHistory and a list of shots. I think these sorts of dependencies can be tough to spot, but really we have to question does it make sense for this component to know how to access nested properties on a dog.

Software Engineer at Target. I’m more active on twitter https://twitter.com/MalerbaAustin.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store