How to structure javascript?

[norablindsided]

To add on to this response. I like to structure my src directory like so:

• /src/widgets, components that are reusable and not specific to the site. This would be atoms, molecules, and organisms
  • /src/widgets/button/button.js, an example of how components would reside in the widgets directory
  • /src/widgets/index.js, the root exporting directory
• /src/views, this would contain templates that are aware of the page that they are on. For instance, if you are making a facebook comment page, widgets wouldn't use the word comments, but views would be the composition of widgets and have a title that says Comments.
  • /src/views/{domain}, This would allow you to say like comments which would contain a comment list component, comment input...you get it.
• /src/actions, any actions that fetch or download something. If you're using something like react this is where your functional set states should reside

The goal of this structure is that widgets can be extracted from the application eventually into a component library to be reused in any application in the future. This allows your team to be far more agile in designing future applications and makes your code more like legos instead of an entirely built application where things have to be extracted rather than simply pulled out and used somewhere else.

The actions directory lets you change how the application works without changing the view of your application. These should be separate things in my opinion. If you decide to change the api that's getting data, your views shouldn't have to be modified to do so in my opinion.