Modularize your Javascript
Code with TerrificJS
View TerrificJS on GitHub Download TerrificJS

 

Terrific Architecture

Modules

The real stars of TerrificJS. All of your JavaScript code will find its place in one of the Modules.

Skins

Extends your Modules on demand – so you can apply different behaviours on the same Module.

Bootstrap

Kickstarts the engine of your Application. Saves you from doing tedious stuff by wiring up your Components automatically.

Application

The master and commander of TerrificJS. It manages and glues all of your Modules, Skins and Connectors together.

Sandbox

Gives your Modules the power to communicate with the Application.

Connectors

Lets your Modules stay in touch with each other by remaining loosely coupled.

Conventions

TerrificJS uses Naming Conventions to prevent you from doing tedious work over and over again. Of course you don't have to follow these Conventions, but it will really saves you a lot of time 
<div class="mod mod-news">

<!-- your news content goes here -->
</div>

Modules

Mark your Module with the .mod class – to identify them as modules – and a specific module class – ie. .mod-news. TerrificJS will instantiate Tc.Module.News for you automatically. 

<div class="mod mod-news
            skin-news-highlighted">
<!-- your news content goes here -->
</div>

Skins

Simply add an additional skin class to your markup – ie. skin-news-highlighted. This will decorate your Tc.Module.News instance with the appropriate Tc.Module.News.Highlighted skin. 

<div class="mod mod-news"
     data-connectors="stats,filter">
<!-- your news content goes here -->
</div>

Connectors

The data-connectors attribute takes a comma separated list of connector ids. Each of them refers to a separate communication channel. TerrificJS will wire up the associated Modules and let them talk with each other.

Read more about the TerrificJS Naming Conventions in the Conventions Chapter.
Close