How Modlets Can Help You Improve Maintainability

Next time you start working on your next web application, ask yourself: Can I compose my application from many different little applications? Rather than structure your app as a bunch of Actions, Stores, Views, and Stylesheets, perhaps you can structure your app as little sets of code.

That is what the Modlet pattern is for. Instead of separating your files by type, you separate them by their domain. Bitovi has an awesome article on modlets as well.

What is a Modlet?

A modlet is a small self-contained module – a set of code that works altogether.

Usually a modlet consists of:

  • JavaScript,
  • HTML (or Handlebars, or any sort of template),
  • CSS,
  • A Test,
  • and Documenation

The benifits of writing code this way include:

  • Keeping code that logically goes together in one folder
  • Documentation and tests are easier to keep in-step with the module
  • You can load whole modules together and reuse them

Typically, the folder structure for the modlet pattern will look something like this:

  • /moduleA
    • moduleA.js
    • moduleA.html
    • moduleA-test.js
  • /moduleB
    • moduleB.js
    • moduleB.html
    • moduleB-test.js