Make it more modular!

[simme]

Hey.

First off, amazing project. Very fun. :)

However, might I suggest taking a look at turning the project into a CommonJS module to make it easy to integrate with other projects? I was looking in to using Beep in a small thing I've been thinking about doing for a while.

Seems like it should be pretty simple to do by just something like this to every file:

var BEEP = {
  Note: require('./beep.note'),
  Instrument: require('./beep.instrument'),
  Voice: require('./beep.voice')
};

BEEP.Trigger = module.exports = function(){

It seems though like "main file": beep.js is hardcoded to expect an editor and stuff like that. Maybe that code should be moved to app.js so that Beep could be as "pure" as possible? IMO beep.js could be the trigger/instrument/voice registry only, as well as act as a module that exposes the other modules to third party code.

I'm thinking something like:

module.exports = {
  Note: require('./beep.note'),
  Instrument: require('./beep.instrument'),
  Voice: require('./beep.voice'),
  Trigger: require('./beep.trigger'),
  AudioContext: window.AudioContext ? window.AudioContext : window.webkitAudioContext

  // "Registry"
  voices:      [],
  triggers:    [],
  instruments: [],

  audioContext: null,
  init: function () {
    this.audioContext = new this.AudioContext();
  }

  destroy: function () {  ... },
};

I wrote this straight here on GitHub and have only spent 15 minutes or so browsing the code so far. So this might (probably is) completely broken and misguided. However, it'd be very nice to have it be a clean module to make it super easy to integrate in other stuff! :)

Should you have no idea what I'm talking about: take a peek at Browserify. It's a very nice way of composing JavaScript modules!

[stewdio]

Hi Simon—thanks for looking into this! You’re right, making it more modular will go a long way. It’s funny you mention the editor; some bones for it are in the code right now but I’ve not finished and committed the real deal yet. I’m just adding in a very clumsy simple editor ASAP and will likely replace it down the road with a stripped down version of CodeMirror or similar. (Right now adding CodeMirror wholesale just feels so bulky but I’m sure I’ll get over that in time.) I’ll probably have the basic editor live by tomorrow night. But I digress!

I think you’re on the money. Once I get this basic editor in (and a few other small tricks) I’ll take a much closer look at how bits ought to be separated between the main beep.js and app.js, etc. That seems like a good time to dive into real modularization. And eventually minifiers and so on. ’Tis early days—only 15 commits in!

[ajpocus]

I second that -- I actually tried to get this project into my app as a library with browserify, before I realized how fresh the code really is. :p Awesome stuff, @stewdio, truly. I'm working on a browser-based music composition app of my own, and this could play a big part. Thanks for sharing, and please, keep it coming!

[stewdio]

Ok. I’ve got that simple editor in and I’ve started to better separate the demo example code from Beep’s core. More modularization is in the roadmap. Just takes some time 😉

[stewdio]

Just committed the latest tweaks. The separation of concerns is a bit cleaner now—including SVG stacks even. Check out the beep/ folder. Should now be easier to grab just the functionality you want to include in your own project and leave the rest out. I’ve some more bugs to squash and bits to add but I’ve still got true module packaging in the back of my mind.

[simme]

👍