Modules

At Clevertech we needed to be able to create smarter, smaller, easier to manage, re-usable chunks (modules) of code that was modular as possible without sacrificing code quality, development time or developer sanity.

Our Application and Module system's has been designed, architected and implemented from the ground up to be as modular as possible while still being easy and friendly to use, to accomplish all of this we needed all of the functionality, testing, resources and dependencies (etc) to be inside each module.

What this mean's is the more you install modules, more and more functionality will be added to your application, as each module defines and loads all of its dependencies using NPM there is no reason to clutter your applications main package.json file with every dependency.

CleverStack Modules List

We currently have a handful of important CleverStack modules available which we will add here soon.

Searching for modules you would run:

$: clever search clever-auth  # search for modules containing 'clever-auth'
$: clever list                # list all available modules

Adding modules

Adding modules from your CleverStack project can be done using the CLI.

To add a module you would run:

$: clever install clever-auth

Removing modules

Removing modules from your CleverStack project can be done using the CLI.

To remove a module you would run:

$: clever remove clever-auth

Front-end Module Directory Structure

This is a typical front-end (angular) module structure.

example-module/
├── scripts/                          # module angular scripts
│   └── controllers/
│   └── directives/
│   └── services/
│   └── resources/
├── styles/                           # module styles (optional)
├── img/                              # module images (optional)
├── fonts/                            # module fonts (optional)
├── views/                            # module ngTemplates
├── tests/                            # module tests
│   └── unit/
│   └── e2e/
├── main.js                           # module requirejs scripts
├── module.js                         # angular main module
└── bower.json                        # module js dependencies
├── Gruntfile.js                      # module grunt tasks
└── package.json                      # module npm dependencies

Module's important files and folders

scripts/

• This folder contains all the scripts required for the module. ie - all the modules angular controllers, directives, services and resources.

views/

• This allows each module to define it's own views for the ngtemplates provided within each module.

tests/

• Two folders for testing, unit/ and e2e/
• This allows each module to define it's own tests for the functionality (code) that is provided within each module.

main.js

• This is a require.js main.js file, use it to specify all the javascript files you need for your module..

module.js

• Instantiates and configures angular modules for your module.

bower.json

• Defines the modules JS dependencies.

package.json

• Defines the modules NPM dependencies.

Gruntfile.js

• Allow you to deepmerge the modules gruntConfig with the applications gruntConfig.
• Allow you to register tasks, load grunt tasks and anything else you want.

Backend Module Directory Structure

This is a typical backend (node) module structure.

example-module/
├── bin/                              # module scripts & binaries
├── classes/                          # module classes
├── config/                           # module specific configs and setting overides
├── controllers/                      # module controllers
├── exceptions/                       # custom exception handlers
├── models/
│   └── orm/                          # your mySQL table relationships & data models
│   └── odm/                          # your MongoDB table relationships & data models
├── schema/                           # seed data is used to populate your database tables
├── services/                         # module services
├── tasks/                            # module background tasks
├── tests/
│   └── e2e/                          # module end to end tests
│   └── unit/                         # module unit tests
├── utils/                            # module utils
├── Gruntfile.js                      # module grunt tasks
├── module.js                         # main module class
└── package.json                      # module npm dependencies

Module's important files and folders

config/

• global.json: This allows you to define the Global (default) modules settings for all environments which will be merged in with the config files from your applications /config/ directory.
• $NODE_ENV.json: This allows you to specify environmentally named json config files inside each module, as well as in the root applications /config/ folder for ultimate flexibility. These environment based configs will be merged in the same way as the main applications environment configuration files.

tests/

• Two folders for testing, e2e/ and unit/
• This allows each module to define it's own tests for the functionality (code) that is provided within each module.

package.json

• Defines the modules NPM dependencies.
• Modules can actually be an NPM Module.

Gruntfile.js

• Allow you to deepmerge the modules gruntConfig with the applications gruntConfig.
• Allow you to register tasks, load grunt tasks and anything else you want.

module.js

• Note: This presumes you have { "main": "module.js" } in your modules package.json, otherwise it is named what you want OR if not set at all this file will be called index.js. (As per standard NPM Modules)
• Exports ModuleClass instance which is imported by the moduleLoader.
• Has lifecycle hooks for every situation, like loading, routing, shutdown etc.

Creating your own Modules

You can develop your own CleverStack modules by typing in...

$: clever new my-module

This will then install and setup a new skeleton module for you.

Prev: Backend (NodeJS) | Next: Running Tests