How to divide up a JavaScript codebase into modules?

Question

The JavaScript in my web application has grown into one huge file. I want to break it up into modules so it's easier to manage.

I don't know if there are any established best practices for anatomizing the codebase of a web application, or if it just varies too much from project to project?

In particular:

should each module be responsible for an app-wide concept, such as "layout", or "clientside storage", etc?
or should modules be for concepts specific to the app being built (like "comments" or "calendar"), and each module be responsible for managing its own layout, its own clientside storage, etc?
or a mixture of both?

mbx-mbx · Accepted Answer · 2012-04-02 15:30:19Z

3

If you take Separation of Concerns and Single Responsibility into account then each module/component etc. should be responsible for doing what it does and nothing else. Break down your modules by re factoring into small, easy to manage chunks that do it's job and nothing else.

In terms of your JS application you could take a look at some client side MVC frameworks (such as knockout, sproutcore, spine etc. to name but a few) these frameworks help to logically separate out views and layouts to controllers and models. You might also be interested in using something like require.js to load your modules as and when they are needed.

There is a very good book by Alex McCaw which is worth a read.

MVC is just one pattern, but it is a very popular pattern and addresses some of the concerns you have.

Best of luck.

edited Apr 2, 2012 at 15:30

answered Apr 2, 2012 at 12:21

mbx-mbx

1,77511 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chris Chedgey - Structure101 · Accepted Answer · 2012-04-03 10:26:55Z

1

All things being equal, you are better to create your modules around concepts specific to the app. This is more object oriented, and tends to group together code that is more likely to change together. This in turn makes your code easier to understand, more tolerant of change, easier to develop and extend (the benefits of "modularity").

answered Apr 3, 2012 at 10:26

Chris Chedgey - Structure101

6574 silver badges6 bronze badges

Collectives™ on Stack Overflow

How to divide up a JavaScript codebase into modules?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related