Web Application Module Structure

Module Index (File ./index.js)

Our modules are JavaScript files that exports to an object with one or more properties. Usually each module has its own directory with index.js as the starting point. You can use NPM structure, too.

Our current framework is using JavaScript. However in the future these modules could use any code that can be translated to JavaScript. Examples are ES6 to ES5 or even PHP. Yes, there are few projects that offer PHP to JavaScript compilation.

Internally the application will be bundled using Browserify as one single JavaScript file.

This file describes the client side features. There is also our extended Express-based Node.js framework for building APIs and automatically building and serving the Browserify bundle.

Example ./index.js

"use strict";
var mod = module.exports = {};
mod.browser = require('./browser.js');
mod.routes = require('./routes/');
mod.views = require('./views/');

Property browser (File ./browser.js)

This function can be used to execute code at the start of the application (on client side).

Example:

"use strict";
module.exports = function(opts) {
    // ...
};

Property routes (Directory ./routes/)

This property should be an object. Properties are different route targets. If multiple modules use same name those functions will be merged as one function.

"use strict";
module.exports = {
        "tasks-current" : require("./tasks-current.js"),
        "tasks-create"  : require("./tasks-create.js"),
        "tasks-edit"    : require("./tasks-edit.js"),
        "tasks"         : require("./tasks.js")
};

Route file (./routes/foo.js)

Example file ./routes/foo.js

"use strict";
module.exports = function(opts) {
    return {
        "url": "/foo/:id",
        model: function(params) {
            // Do something with params.id and return model as an object or promise of it
        },
        setup: function(model) {
            // Render the model on the web page
        }
    };
};

Property logic (Directory ./logic/)

The value should be an object. Properties are different functions implementing logic for views and routes. If multiple modules use the same name those functions will be merged as one function.

Example file ./logic/index.js

"use strict";
module.exports = {
        "resource-picker": require('./resource-picker.js'),
        "datepicker": require('./datepicker.js')
};

Example logic module ./logic/datepicker.js

"use strict";
var $ = require('jquery');
/** REST Resource picker */
module.exports = function datepicker(opts) {
        return function datepicker_(element, value) {
                $(element).datepicker();
        };
};

You can use it in the view by:

<input name="date" data-logic="datepicker" />

...or with a value:

<input name="date" data-datepicker="value" />

...or use from the route as:

opts.logic.datepicker(opts)(value);

Property views (Directory ./views/)

This property should be an object. Properties are different view functions. If multiple modules use same name those views will be merged as one function.

Example view index (./views/index.js)

"use strict";
require('ejs');
var views = module.exports = {};
views.styles = require('./styles.ejs');
views.tasks = require('./tasks.ejs');
views.task = require('./task.ejs');

Example view (./views/input-text.ejs)

Views are normal EJS files.

<div class="pure-control-group">
        <label for="<%= $.id %>"><%= $.label %></label>
        <input class="pure-input-1-2" id="<%= $.id %>" type="text" name="<%= $.name %>" placeholder="<%= $.placeholder %>" value="<%= $.value || '' %>">
</div>

In the future this framework could accept any compatible view module or plain HTML/CSS files.