Organizing A large JavaScript application

As my project lickcreator keeps getting larger, the need to decide upon and implement a good directory structure becomes pretty important.

I previously had all my .js files in a common directory called src. Well that’s dirty, but its fine if you just have a few files (think less than 7).

I’m using Backbone.js so I would keep my files as

  • src
    • sheet_model.js
    • sheet_view.js
    • measure_model.js
    • measure_view.js
    • … (and so on)

As I expanded my app to roughly five main classes I realized I needed some organization strategy. The first thought for a developer would be to put all models in a model directory, all views in a view directory, and all collections in a collection directory.

What would this look like?

  • src
    • model
      • sheet.js
      • measure.js
      • beat.js
      • note.js
      • audio.js
    • view
      • sheet.js
      • measure.js
      • beat.js
      • note.js
      • audio.js
    • collection
      • sheet.js
      • measure.js
      • beat.js
      • note.js
      • audio.js

Looks much better. Of course, its not all about that! But you need to think ahead too. Now what If I add a new class to my app? This would mean creating a new file in each of the three directories – model, view and collection.

And I don’t want to start off with an empty file. (I should be using boilerplate code), so I would usually copy a model class to my new class. Same with the view and collection. You see how tedious this can get?

Here’s a better idea. What is more important to your app? The model directory or a class of your app. For example, Sheet.

Let me digress. lickcreator is a web based music notation app. You can create, edit, and play sheet music right in your browser. Using the wonderful Web Audio API. Now a sheet music usually consists of a Sheet, Measures and Notes. Along the way, you’re going to have Audio playback, interactivity, payments, users, social network integration, etc. So it really made sense to me to view my app as first a collection of top level subsystems. And then under each subsystem, we keep their MVC logic.

So back to the topic, I decided to invest my time in JavaScript ES6 and webpack and the investment is now paying off beautifully.

Here’s my directory layout now

  • src
    • audio
      • model.js
    • beat
      • model.js
      • view.js
      • collection.js
    • toolbar
      • model.js
      • view.js
    • menu
      • model.js
      • view.js
    • measure
      • model.js
      • view.js
      • collection.js
    • sheet
      • model.js
      • view.js
      • collection.js
    • note
      • model.js
      • view.js
      • collection.js
    • index.js

index.js is my entry point. I find this structure much easier on the mind. When I need to import a module, its easy for me to do

import Sheet from "./sheet/model";

and inside sheet/model.js if I need access to another model, I can do

import MeasureCollection from '../measure/collection';

Also creating a new class is easy. I just copy an existing directory into a new directory. 🙂

If you have any questions or just need to talk, you can contact me via Twitter. Thanks for reading!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s