nexoBlogs network
Anónimo Anónimo

Hydra.js, para hacer tus aplicaciones JS modulares y escalables

miércoles, 12 de octubre del 2011

¿Tu JavaScript se va haciendo cada vez mas grande y se está volviendo immanejable? ¿Estas buscando alguna arquitectura que te permita hacer tu aplicacion más escalable?

Para aplicaciones que se van haciendo grandes la mejor solucion es la de aplicar una arquitectura de diseño modular.

Dicho de forma sencilla un modulo seria el código que controla un trozo de HTML (y nada más), o dicho de otra forma, un grupo de HTML + CSS + JS autónomo. 

Por ejemplo, en Yahoo utilizan esta arquitectura lo que les permite realizar codigo JS individualmente a cada modulo que implementan. Esto seria un modulo de Yahoo:

 TAGS:

En su dia, Nicholas Zakas (ex-Front End Engineer de Yahoo) hizo una presentación de las ventajas de hacer una aplicación con esta arquitectura y de cómo implementarlo. 

El esquema general de esta arquitectura es este:

 TAGS:

Desde hace unos meses tenemos disponible Hydra.js un gestor de modulos que nos permite implementar todo este sistema de modulos en nuestro site de manera sencilla. 

Su autor es Tomas Corral actual Javascript Expert en Softonic.com y Evangelizador del Performance & Buenas Prácticas en el JS. 

Algunas de las ventajas de Hydra son:

  • Ningun módulo conoce la existencia de otros modulos (lo que implica que si falla un modulo, el resto seguiran funcionando)
  • Un modulo puede notificar algo y le llegará a todos los modulos que esten esuchando
  • Un modulo puede ser extendido 
  • Los modulos pueden ser testeados mediante Unit Testings
  • Sólo ocupa 1.5kb comprimido
¿Cómo quedaria un modulo tipo en Hydra? Pues asi:
Hydra.module.register('moduleId', function(action)
{
    return {
        init: function (oData) {
            action.listen(['action1', 'action2', 'actionN'], this.handleAction, this);
            $("#button").click(function(){
                action.notify({
                    type: 'listenedAction',
                    data: 'data'
                });
            });
        },
        actionHandlers: {
            action1: function (oData) {},
            action2: function (oData) {},
            actionN: function (oData) {}
        },
        handleAction: function (oNotifier){
            var oHandler = this.actionHandlers[oNotifier.type]
            if(typeof oHandler === "undefined")
            {
                return;
            }
            oHandler.call(this, oData);
            oHandler = null;
        },
        destroy: function () {}
    };
});

 

Para más info sobre Hydra puedes visitar su pagina en GitHub desde donde te puedes hacer un clone del proyecto.

¿Que te ha parecido este gestor de modulos? ¿Lo conocias? ¿Has implementado alguna arquitectura similar en tu aplicación?  Esperamos vuestros comentarios

 

Relacionados con Hydra.js, para hacer tus aplicaciones JS modulares y escalables

Álbum de fotos de Hydra.js, para hacer tus aplicaciones JS modulares y escalables - Viendo 1 a 2 de 2

Hydra.js, para hacer tus aplicaciones JS modulares y escalables
Hydra.js, para hacer tus aplicaciones ...
Hydra.js, para hacer tus aplicaciones JS modulares y escalables
Hydra.js, para hacer tus aplicaciones ...

Ver fotos de Hydra.js, para hacer tus aplicaciones JS modulares y escalables »

Deja tu comentario sobre Hydra.js, para hacer tus aplicaciones JS modulares y escalables

Deja tu comentario
Necesitas tener javascript activado para poder dejar comentarios

Identifícate en OboLog, o crea tu blog gratis si aún no estás registrado.

De esta forma, además, podrás mostrar tu imagen en los comentarios y no tendrás que rellenar tus datos cada vez.

Otros blogs de nexoBlogs: