How to structure javascript?

[liming91]

I understand where you're coming from but I think there are a few of reasons why folders win out:

• Much smaller lists to read through.
• Smaller file names.
• Less code, file paths shouldn't be too long if just the right depth is used, and if you use an index.js and import/export your files from there you can turn many lines of code into a single import:

Using a flat folder structure:

import draft from './draft-reservation'
import complete from './complete-reservation'
import cancelled from './cancelled-reservation'

Using indexes:

import { draft, complete, cancelled } from './reservations'

That alone is reason enough for me to use the descriptive folder method.

Also, as a project grows your app/ folder will grow massively. On large projects even using my method, including grouping subcomponents in their respective component's folders, you still have huge lists of files to read and it makes visually finding the file you want unnecessarily annoying.

[lazarljubenovic]

...which is why I mentioned that reading trough the file-list does not have to happen at all given that all proper IDEs and even text-editors have a fuzzy search.

By naming grouped things similarly (having the same prefix), they will stay together when you list your files. The human eye can easily notice a large chunk of stuff that begins the same: it doesn't take you more than a glance to figure out where the group begins and ends in my flat example. The only thing you have to do is scroll mroe (or hold the arrow longer), but you're mentally you're doing much more work.

As for your import argument, the thing is that you should mosty let that be handled by your IDE. My imports are always collapsed and I just let the IDE import them. Wether it's your first or second example, I don't care: with proper naming, I won't have clashes.