<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1063935717132479&amp;ev=PageView&amp;noscript=1 https://www.facebook.com/tr?id=1063935717132479&amp;ev=PageView&amp;noscript=1 "> Bitovi Blog - UX and UI design, JavaScript and Frontend development
Loading

Modlet Workflows

Learn how to organize your app's files into "modlets". A modlet is a folder that contains a module, its tests, documentation, demo page and other resources.

Justin Meyer

Justin Meyer

Twitter Reddit

One of Bitovi's earliest, and most important, development strategies was the introduction of the "modlet" workflow. It's a very simple concept - every module should be developed as its own application. In practice, this means that instead of a folder structure where files are grouped by type like:

project/
  js/
    moduleA.js
    moduleB.js
  templates/
    moduleA.handlebars
    moduleB.handlebars
  css/
    moduleA.css
    moduleB.less
  test/
    moduleA_test.js
    moduleB_test.js
  docs/
    moduleA.markdown
    moduleB.markdown

Bitovi groups files by the module they belong to:

project/
  moduleA/
    moduleA.js
    moduleA.handlebars
    moduleA.css
    moduleA_test.js
    moduleA.markdown
    moduleA.html
    test.html
 moduleB/
    moduleB.js
    moduleB.handlebars
    moduleB.css
    moduleB_test.js
    moduleB.markdown
    moduleB.html
    test.html

Each module has a folder with all of its supporting files, tests, and documentation. Additionally, we add:

  • A demo page (moduleA.html) that shows off the modules functionality if the module has a visual representation.
  • A test page (test.html) that runs just the module's tests.

Benefits

In my experience, this workflow / folder structure provides the following benefits:

  1. It enforces good API design and separation of concerns. By writing a demo page, you might discover that it's difficult to setup your module without a lot of bootstrapping. This might be an indication that something is wrong.
  2. Developers are more likely to update tests and documentation if they are sitting right next to the module they are editing. The test is not hidden away in some tests folder that is more easily ignored.
  3. It is easy to identify missing tests or documentation. If the test or documentation file is missing altogether, it's very easy to identify when they are in the same folder.
  4. You can develop the application without having to load the entire application and all of its tests on every change.

An Old Example

An old, but great example of the modlet workflow is the Srchr app. For example, the ui/tabs folder had a test and demo page.

We're in the process of updating the Srchr app with the latest CanJS, StealJS, DocumentJS and creating another demo application that highlights the modlet technique.