Application

Whilst the modules are the stars of your TerrificJS application or website, the Application is the master and commander, the heartpiece of Terrific. It is instantiated during the Bootstrap and is responsible for the magical module registration process and for keeping all of your great modules together.

If you want to gain a deeper understanding of how TerrificJS works - this is for you!

registerModule

/**
  * @method registerModule
  * @param {jQuery|Zepto} $node the module node.
  * @param {String} modName the module name. it must match the class name of the module (case sensitive).
  * @param {Array} skins a list of skin names. each entry must match a class name of a skin (case sensitive)).
  * @param {Array} connectors a list of connectors identifiers. schema: <connectorName><connectorId><connectorRole> (ie. MasterSlave1Master).
  * @return {Module} the reference to the registered module.
  */
 registerModule : function($node, modName, [skins], [connectors]) {

As long as your markup uses the TerrificJS naming conventions you do not have to worry about registering your modules manually. This is all done for you automatically from the registerModules method (note the plural) that internally call registerModule for every found module.

However there may be some cases where you are not able to apply these conventions to your project or to a specific part of your markup. In this case registerModule provides you the abililty to register your modules by hand.

Register a "global" module

(function($) {
    $(document).ready(function() {
        var $page = $('body'),
            application = new Tc.Application($page);

        application.registerModules();
        application.registerModule($page, 'Global');
        application.start();
    });
})(Tc.$);

In the above example we register a global module that provides sitewide functionality on the $page. The $page object is set as the context of the Tc.Module.Global module instance.

Register modules by hand

(function($) {
    $(document).ready(function() {
        var $page = $('body'),
            application = new Tc.Application($page);

        application.registerModule($('#navigation'), 'Navigation', ['Home'], ['1']);
        application.registerModule($('#imageSlider'), 'ImageSlider', null, ['1']);
        application.registerModule($page, 'Global'); // layout functionality
        application.start();
    });
})(Tc.$);

This way you are able to register your modules manually wherever you want without the need of using the TerrificJS naming conventions for your markup.

registerModules

/**
 * @method registerModules
 * @param {jQuery|Zepto} $ctx the context.
 * @return {Array} a list containing the references of the registered modules.
 */
registerModules : function([$ctx]) {

registerModules is perhaps the most important method of TerrificJS. It takes care of the TerrificJS naming conventions and instantiates all Modules, Skins and defined Connectors in the given context automatically. The clue is, that because of this only the TerrificJS components that are actually used on the current page are instantiated. So there are no unused objects, no unnecessarily executed JavaScript code, no misunderstandings, no chaos - everything is perfectly fitted for the current page.

Register modules in a specific context

(function($) {
    $(document).ready(function() {
        var $page = $('body'),
            application = new Tc.Application($page);

        application.registerModules();
        application.start();
    });
})(Tc.$);

In the above example registerModules does not take a param. In this case the global context which has been given to the Application ($page) is used.

If you only want to register modules in specific parts of your application, you could do something like:

(function($) {
    $(document).ready(function() {
        var application = new Tc.Application();

        application.registerModules($('.head'));
        application.registerModules($('.foot'));
        application.start();
    });
})(Tc.$);

The snippet above only registers the modules in the head and the footer section.

start

/**
 * @method start
 * @param {Array} modules a list of the modules to start.
 */
start: function([modules]) {

The registration process only instantiates the TerrificJS components. Until start is called, nothing seems to happen from a users point of view. The real game, however, starts as soon as start is called.

Start all registered modules

(function($) {
    $(document).ready(function() {
        var $page = $('body'),
            application = new Tc.Application($page);

        application.registerModules();
        application.start();
    });
})(Tc.$);

As you see in the bootstrap example above, start has to be called after the module registration process. Calling start loops through all registered modules and calls start on every individual module. At this point the Application has done its initial work. Now the turn is at your Modules.

end

Sometimes it would be useful to react – eg. trigger something – from within the bootstrap when the module initialization is done. By using the end method you can do exactly this.

Register "end" hook

(function($) {
    $(document).ready(function() {
        var $page = $('body'),
            application = new Tc.Application($page);

        application.registerModules();

		// register end hook (is executed at the end of all phases)
		application.end(function() {
			// do something here
		});

		application.start();
    });
})(Tc.$);
 
Close