A decent file-structure for my js mvc app

Question

As our in-house app is growing so is the frontend that I'm building with various open source technologies including backbone as an mvc base and require.js as a dependancy manager.

That aside I'm in the process of separating boilerplate code from views, models, collections and routes into a sort of core-library. As I'm doing that I'm reviewing the file-structure and would like weigh in the opinion of others who might have experience/ideas in regards to this.

Right now this is how my structure looks:

public
    assets
        css
            lib                 < CSS libraries used within app
            app                 < app specific CSS assets
        images                  < image assets
        js
            lib                 < JS libraries used within app
            lib_ext             < Library overrides
            app                 < app specific JS
                collection
                model
                template
                view

My current plan of action is to have a 'core' folder in 'js' which has a similar structure to 'app'. All code in the core would be completely decoupled. The classes in app would then inherit from core and only set attributes specific to its' use...

Any opinions on this that I should take into account?

Here is a point on which I'm for example not really sure about: Would you put html templates into the core?

Answer 1

Your structure was how I originally built our application but looking back, I would have gone with the widget structure like Backbone Aura presents.

I found that as I added more views, models, collections, the amount of files I had quickly became unmanageable. By using this widget approach, each element group on the page gets its own models, collections and views. You can them work piecemeal from widget to widget.

This may or may not be overkill depending on the size of your application. Also, it may be too late to go back and change things. Just something to think about.

Backbone Aura
Widget Structure