Bootstrap

Every TerrificJS page or application has a bootstrap that does all of the annoying work for you automatically. All you have to do to is to place the bootstrap code at the end of your TerrificJS application. Believe me, it really saves you a lot of time and tedious work ;-)

Basic bootstrap

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

As long as your markup uses the TerrificJS conventions, this tiny snippet is all you need. Place it before the closing </body> tag, reload your page and be stunned ;-)

If you need components that does not conform to the TerrificJS naming conventions – ie. global modules for sitewide functionality – please have a look at the registerModule documentation.

Config

TerrificJS comes with a very small config. It is shared among almost all TerrificJS components – so it is a good thing to store your configuration param in this global object.

/**
 * Contains the application base config.
 *
 * @author Remo Brunschwiler
 * @namespace Tc
 * @class Config
 * @static
 */
Tc.Config = {
    /**
     * The paths for the different types of dependencies.
     *
     * @property dependencies
     * @type Object
     */
    dependencies: {
        css: '/css/dependencies',
        js: '/js/dependencies'
    }
};

The paths for the different dependencies are the only params – and they are not even required but helps you when using script loaders – for TerrificJS. But if needed you can extend or change the config as you want. There are two different ways to do so.

#1 – Simple global extension

Often is is enough to simple change or extend the config prior bootstrapping your application.

// in your script prior boostrapping
Tc.Config = Tc.$.extend(Tc.Config, {
    // your config params goes here
};

The main advantage of this solution is that you can bundle your extended config with all of your other JavaScript resources. But in some cases this is not ideal – especially when it comes to CMS integration and you need a little bit more of flexibility.

#2 – Bootstrap extension

(function($) {
    $(document).ready(function() {
        var $page = $('body'),
        config = {
            // your config params goes here
        };
        var application = new Tc.Application($page, config);
        application.registerModules();
        application.start();
    });
})(Tc.$);

This solution provides you the maximal flexibility. You could even change your whole config on every bootstrap – ie. on every single page. Furthermore if you don't need to change the basic config – namely paths for the dependencies – there is no need to redeclare them.

Close