Modular Design Pattern

The Modular Design Pattern attempts to codify Brad Frost's Atomic Design methodology using a variation of the MVC architectural pattern. The use of this pattern makes it possible to work with an infinite amount of interchangeable components that can each individually communicate with an infinite amount of business-logic controllers.

Table of Contents

1. Overview
2. Structure
3. Usage
   1. Pseudocode
   2. Module Lifecycle
   3. Communication
4. Examples
5. License

Overview

The Modular Design Pattern solves problems like:

• How to work with modular programming
• How modules can instantiate other submodules

The Modular Design Pattern describes how to solves such as:

• Define an operation for creating modules
• Define an operation for destroying modules
• Define communication between modules and submodules

Structure

The Modular Design Pattern uses a variation of the model–view–controller and Hierarchical model–view–controller software architectural patterns. The major difference being that controllers can directly communicate with other controllers or the server(s) without having to send the request up the hierarchy to the top-level controller.

The runtime application will instantiate the initial modules and any submodules that are required will be instantiated by the module that requires them.

Usage

Pseudocode

interface Application
{
    public static modules;

    public static createModule(view, uuid, parent = null) returns Module;
    public static deleteModule(uuid) returns void;

    private mountModules()
    {
        requestedModules = getRequestedModules();
        foreach module in requestedModules
        {
            uuid = getUniversallyUniqueIdentifier();
            moduleInstance = Application.createModule(view, uuid);
            modulesInstance.mounted();
            push moduleInstance into modules;
        }
    }
}

interface Module
{
    public view;
    public uuid;
    public parent;
    public children;

    constructor(view, uuid, parent = null);

    public mounted()
    {
        requiredModules = getRequestedModules();
        foreach submodule in requiredModules {
            UUID = getUniversallyUniqueIdentifier();
            submoduleInstance = Application.createModule(view, uuid, Module);
            submoduleInstance.mounted();
            push moduleInstance into children;
        }
    }

    public beforeDestroy(){ }
    public destroy(){ }
}

Module Lifecycle

Communication

Client side controllers are allowed limited communication between one another. All controllers can directly communication with Static Module controllers or server side controllers.

interface StaticModule
{

    private static value;

    public static setValueMethod(value) returns void;
}

interface StandardModule extends Module
{
    
    ...snip...

    mounted()
    {
        StaticModule.setValueMethod(value);
    }
}

All other Module controllers are restricted to direct communication between the Modules parent or its children.

interface StandardModule extends Module
{
    
    ...snip...

    private user object;

    public setValue(key, value)
    {
        user[key] = value;
    }
}

interface ChildModule extends Module
{
    
    ...snip...

    mounted()
    {
        if(parent)
        {
            parent.setValue(key, value);
        }
    }
}

Examples

JavaScript

License

The Modular Design Pattern is published under the MIT license.