Modularize your code and scale down problems

Terrific
Modularize your code, scale down your problems

Agenda

Concept

TerrificJS

Terrific Composer

Questions

Remo Brunschwiler 14. August 2012 # 3

Github
Take it. Make it better. Together.

Repositories

TerrificJS
‣ https://github.com/brunschgi/terrificjs

Terrific Composer (Symfony2 Edition)
‣ https://github.com/brunschgi/terrific-composer

Terrific Symfony2 Bundles
‣ https://github.com/brunschgi/TerrificCoreBundle
‣ https://github.com/brunschgi/TerrificComposerBundle


Showcases
See Terrific in action

What’s a module?

web application module (n)

1 : an independent unit of functionality that is part of the total
structure of a web application

http://www.slideshare.net/nzakas/scalable-javascript-application-architecture


What’s a terrific module made of?

HTML CSS JavaScript


TerrificJS
See how HTML, CSS & JS works together

Components

‣ Modules (the real stars of Terrific)
‣ Skins (extend your modules on demand)
‣ Connectors (let your modules stay in touch with each other)


Modules

The real stars of Terrific.
Almost all of your code will find its place in one of the modules.


Example


HTML

Simply mark your modules by giving them a module class

<div class="mod mod-hero">

</div>


</div>


</div>

CSS
Prefix your module CSS rules – in OOCSS style – to prevent yourself
from strange side-effects

/* hero.css */
.mod-hero {
...
}

.mod-hero pre {
...
}

.mod-hero .bubble {
...
}

...


TerrificJS
(function($) {
Tc.Module.Hero = Tc.Module.extend({
/**
* Initializes the Hero module.
*/
init: function($ctx, sandbox, modId) {
this._super($ctx, sandbox, modId);
},

/**
* Hook function to do all of your module stuff.
*/
on: function(callback) {
...
callback();
},

/**
* Hook function to trigger your events.
*/
after: function() {
...
}
});
})(Tc.$);


on(callback)

Here goes all of your jQuery code

var $ctx = this.$ctx,
self = this;

...

// bind the submit event on the form
$('form', $ctx).on('submit', function() {
...
});

callback();
}

‣ $ctx = module DOM node (.mod) -> ensures encapsulation

‣ callback() -> indicates that the module is ready for the
«after» hook


after()

Trigger the default state of your modules

after: function() {
var $ctx = this.$ctx;

// trigger the first submit to write the default message in the bubble
$('form', $ctx).trigger('submit');
}

‣ synchronized among modules, i.e. the «on» hook of all modules
on the page are finished -> relevant for connectors


Skins

Extends your modules on demand – so you can apply different
behaviours on the same module.


Example


HTML

Simply give your module one or more skin classes

<div class="mod mod-hero skin-hero-stealth">

</div>

<div class="mod mod-news skin-hero-stealth skin-hero-xyz">

</div>

CSS

Prefix your skin CSS rules

.skin-hero-stealth pre {…}

.skin-hero-xyz .mode {…}

‣ skin CSS rules must be included after the module CSS rules
(specificity)
‣ inherits all styles of the module
‣ extends / overwrites them where needed


TerrificJS

TerrificJS skins are simply JavaScript decorators
(function($) {
Tc.Module.Hero.Stealth = function(parent) {
/**
* override the appropriate methods from the decorated module.
* the former/original method may be called via parent.<method>()
*/
this.on = function(callback) {

// binding the stealth mode on / off events
$('.on', $ctx).on('click', function() {
...
});

...
parent.on(callback);
};
};
})(Tc.$);


Connectors

Lets your modules stay in touch with each other while remaining
loosely coupled.


Example


HTML

Simply specify your communication channels talk channel

<div class="mod mod-hero mod-hero-stealth" data-connectors="talk">

</div>

<div class="mod mod-hero mod-hero-stealth" data-connectors="talk">

</div>

<div class="mod mod-hero mod-hero-stealth" data-connectors="talk >

</div>

CSS

Connectors have no associated styles


TerrificJS

The modules fire() method is your talking device
/**
* Notifies all attached connectors about changes.
*
* @method fire
* @param {String} event The event name
* @param {Object} data The data to provide to your connected modules (optional)
* @param {Array} channels A list containing the channel ids to send
* the event to (optional)
* @param {Function} defaultAction The default action to perform (optional)
*/
fire: function(event, [data], [channels], [defaultAction]) {


fire()

In your «talking» module
var self = this,
$ctx = this.$ctx;

...

// bind the submit event on the form
$('form', $ctx).on('submit', function () {
var name = $('pre', $ctx).data('name'),
message = $('.message', $ctx).val();

// write the current message in the bubble and notify the others
self.fire('message', { name: name, message: message }, ['talk'], function () {
$('.bubble', $ctx).text(message);
});

return false;
});
event data channels defaultAction
callback();
}


onEvent()

In your «receiving» module(s)

/**
* Handles the incoming messages from the other superheroes
*/
onMessage:function (data) {
onEvent data
data = data || {};

if (data.name && data.message) {
$('.bubble', $ctx).text(data.name + ' said: ' + data.message);
}
}


What we learned so far…


What we learned so far…

But how does the stuff get applied?


Architecture


Bootstrap


Bootstrap

Kickstarts the engine of your Application

Basic bootstrap

(function($) {
$(document).ready(function() {
var $page = $('body');
var application = new Tc.Application($page);
application.registerModules();
application.start();
});
})(Tc.$); here is where the
magic happens


Application


registerModules()

Registers all modules within your application
‣ Finds all modules in the DOM (.mod)
‣ Instantiates the appropriate modules accordingly to the naming
conventions
(e.g. .mod-hero instantiates Tc.Module.Hero)
‣ Decorates the module instances with the given skins
(e.g. .skin-hero-stealth decorates the Hero instance with the
Stealth decorator)
‣ Connects the modules with each other accordingly to the
specified Connector communication channels
(e.g. all modules with the data-connectors="talk" attribute
are connected)


start()

Starts all registered Modules
‣ Now the turn is at the modules (hooks)


Sandbox


Sandbox

Gives your Modules the power to communicate with the Application
‣ Add / remove modules on the fly (very useful for AJAX stuff)
‣ Subscribe / unsubscribe from connectors programmatically
‣ Access to config params
‣ Access to other module instances


Terrific Composer
Makes your life easier…

Terrific Composer

Frontend Development Framework
‣ Designed for building frontends / applications based on the
Terrific concept
‣ Integrates TerrificJS
‣ Based on Symfony2
‣ … still very young


Terrific Composer

Frontend Development Framework
‣ Designed for building frontends / applications based on the
Terrific concept
‣ Integrates TerrificJS
‣ Based on Symfony2
‣ … still very young

… melts dozens of best practices!


Create

Add new Modules & Skins to your project.
The Skeleton is generated for you so that
you can start right away.


Open

The Open dialog provides you fast access to
all of your Modules and Pages.


Inspect

The inspect mode shows you which modules
are in use on the current page.


… Let’s see it in action


Impact
How Terrific influences your frontend development

Modular Development & Testing


Reusability


More…

Lets keep talking
‣ http://terrifically.org
‣ remo@terrifically.org
‣ https://github.com/brunschgi
‣ http://twitter.com/#!/brunschgi


Modularize your code and scale down problems

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Modularize your code and scale down problems

Similar a Modularize your code and scale down problems (20)

Último

Último (20)

Modularize your code and scale down problems

Notas del editor