Uncategorized

Custom ports/events/callbacks II for modules dependencies injection

Cada vez hay más frameworks que nos hacen tener un ancla extremadamente fuerte de nuestra lógica con él, esta lógica de negocio se ve altamente contaminada por implementaciones de librerías que son difíciles y farragosas de actualizar. Ahora que estoy muy focalizado en la arquitectura modular reactiva he intentado que estos acaben teniendo una implementación propia, esto sería mucho más sencillo, casi nativo, si no tuviese que dar soporte a IE>=8.

Os presento un muy muy muy simple ejemplo de módulo que usa la implementación de la librería externa con una lógica de negocio propia ( en este caso la funcionalidad es simplemente detectar la carga del document o del window usando jquery), inyectándole otro módulo que tiene la implementación propia de la librería en cuestión.

Inicializamos el objeto ui y su objeto jquery, observar que dentro de este objeto del namespace podemos apilar nuestras implementaciones en este caso, de jquery, notar que con un buen trabajo de closure compiler y una buena arquitectura modular podemos inyectar de fuera a dentro las implementaciones necesarias para cada módulo y sus dependencias.

var ui = {};
ui.jquery = {};

tendríamos por tanto los siguientes módulos:

El modulo onLoadPage que tiene las implementaciones de inyección del callback (ifDocumentIsReady) y escucha del “custom port event” (onDocumentIsReady) que vimos en el ejemplo anterior:

ui.jquery.onLoadPage = ( function () {
  'use strict';
  var exports = {};
  var onDocumentIsReady = function() {
  	$( document ).ready( function () {
  		exports.ifDocumentIsReady();
  	} );
  };
  var onWindowIsLoad = function() {
  	$( window ).load( function () {
  		exports.ifWindowIsLoad();
  	} );
  };
  exports = {
    ifDocumentIsReady : function() {},
    ifWindowIsLoad:function() {},
    onDocumentIsReady: onDocumentIsReady,
    onWindowIsLoad: onWindowIsLoad
  };
  return exports;
} )();

Y tendríamos el módulo donde inyectaríamos como dependencia esta implementación, que setearíamos en ya, nuestra propia lógica que no estaríamos obligados a modificar si la implementación lo hiciese, como veis al inicializar el módulo con el operador new, se inicializa, es decir, setea la implementación como suya y añade el callback que el modulo precisa y se pone a escuchar el “evento”:

ui.moduleExample = function(externalDependencie) {
	'use strict';
  var onLoadPage; 
  var injectExternalDependencies = function(){
    onLoadPage = externalDependencie; 
  };
  var sayIfDocumentIsReady = function() {
    onLoadPage.ifDocumentIsReady = function () {
      console.log('DOCUMENT IS READY WITH LOGIC CLOSED');
    };   
    onLoadPage.onDocumentIsReady();
  };
  var initialize = function(){  
    injectExternalDependencies();
    sayIfDocumentIsReady();
  }; 
  initialize();  
};

Una vez inicializadas las variables y definidos los módulos los usaríamos :)

var loadPage = ui.jquery.onLoadPage;
var module = new ui.moduleExample(loadPage);

Como veis las implementaciones pueden ser más o menos complejas dependiendo de las librerías, intentaré seguir poniendo algunos ejemplos más, de momento podéis echar un vistazo a este ejemplo en jsbin como siempre

http://jsbin.com/voqisa/2
http://jsbin.com/voqisa/2/edit?js,output

Estándar
javascript, tutoriales

Custom ports/events/callbacks for modules in javascript

Gran parte de nuestro trabajo con javascript consiste en hacer las cosas de una forma más limpia y regularizada. A veces, yo añadiría que debemos hacer todo esto con, además, un componente semántico adecuado y mucho amor :).

Últimamente ando poniendo mucha atención al control de puertos de entrada/salida de mis módulos, y de mantener mi lógica de negocio bien aislada de desconocidos.

Utilizando esta aproximación de puertos de entrada, construyo mediante una simulación semántica la ejecución de eventos custom a los que se pueden inyectar callbacks, no son eventos propiamente, pero su funcionamiento es el mismo.

veamos el html

<div id="seya"><img src="http://kyubimugen.ucoz.com/imagenes/saintseiya/seiya.gif" /></div>
<button id="meteorsON">Press if atenea need help</button>
<button id="meteorsOFF">Press if atenea needn't help</button>

veamos el código del módulo:

// seya module closure
var seya = ( function () {	
  var exports; 
  var initialize = function () {
    document.getElementById('seya').style.display = 'none';
  };
  var ateneaNeedHelp = function () {
    exports.onPegasoMeteors();
  };  
  exports =  {    
    ateneaNoNeedHelp: initialize,
    ateneaNeedHelp: ateneaNeedHelp,
    onPegasoMeteors: function(){}
  };	 
  initialize();
  return exports;
})();

Notar que el return del objeto en esta ocasión es un objeto export, que tiene el método onPegasusMeteors que contiene una función vacía. Este metodo, nuestro evento, lo disparamos cuando atenea necesita ayuda :) con el método ateneaNeedhelp.

// define callback to onPegasoMeteors
seya.onPegasoMeteors = function(){
  document.getElementById('seya').style.display = 'block';
};

Con esto, ya tenemos el objeto seya y podemos inyectarle el callback que nosotros queramos por el “puerto”,”evento” onPegasoMeteors.

Lo siguiente es bindear comportamientos de puertos de salida de seya a los botones adecuados para conseguir lanzar nuestros nuevos eventos/callbacks inyectados.

// bind button on click
document.getElementById('meteorsON').addEventListener( 'click', seya.ateneaNeedHelp, false);
// bind button on click
document.getElementById('meteorsOFF').addEventListener( 'click', seya.ateneaNoNeedHelp, false);

Podéis ver mas detalles del código funcionando en el enlace:

http://jsbin.com/vunefa/12
http://jsbin.com/vunefa/12/edit?js,output

Estándar
diseñoweb, teoría, Uncategorized

How browsers work

Siempre que me quedo con los ojos como los conejos cuando les dan las largas al ver algún código o algún comportamiento que necesito para mi trabajo, procuro leer, estudiar acerca de ello, porque me supera la sensación que “eso” esté ahí y que pueda hacer cosas que no controlo en mi aplicación. Una de las cosas, sobre las que nunca había puesto hincapié, es sobre como funciona un navegador por dentro, cual es la forma en la que renderiza etc. Así que tenía en mi Pocket un artículo ” for read later ” que hablaba sobre esto y quizá os pueda servir para los que tenéis la misma curiosidad que yo.

How browsers work

Estándar
anuncios, comunicación, diseñador, Uncategorized

Jornadas de Diseño en la escuela de arte de Toledo

Los próximo 4, 5, 6 de Marzo tendrán lugar las Jornadas de Diseño en la escuela de arte de Toledo. EL cartel es una obra maestra realizada por el alumnado de la misma escuela de arte.La Comunidad, que recién ha nacido de mi amigo Miguel Moreno, abre los ciclos de conferencias. Mucha suerte para esta nueva empresa de comunicación, falta le hacía a Toledo contar con su enorme talento.

Estándar
diseñador, diseñoweb

Diseñando web para la experiencia de lectura

Estoy un tanto cansado de ver sitios web desastrosos en cuanto a la experiencia de lectura. Muchas veces las empresas siguen el patrón de contratar al todoterreno, sobre todo programador, cuanto más javascript mejor, pero esto acarrea estos problemas. La falta de especialistas en cuanto a diseño, disposición o maquetación hace que la experiencia lectora del usuario se vea mermada casi siempre. Es por esto, que dejo aquí un post de obligada lectura para todos aquellos maquetadores, diseñadores o desarrolladores, que tengan sensibilidad con estos temas y que quieran mejorar de una manera profesional toda esta paradoja.

Diseñando web para la experiencia de lectura

Estándar

484744_467496149976042_1445897641_n

carteleria

Las cosas bonitas deberían anunciarse con carteles bonitos

Imagen