aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

El día 18 de los 24 que componenen el 24 ways nos muestra un ejemplo de como gestionar las dependencias de una aplicación desarrollada en Javascript, y es algo que debemos conocer. El desarrollo actual sobre javascript está llegando a puntos en los que podrían tratarse como aplicaciones independientes por su cuenta, con su propio equipo de desarrollo, analisis,…

Y es que las aplicaciones Javascript que méramente se encargaban de validar formularios y controlar el movimiento del ratón han pasado a mejor vida, dejando el camino abierto un futuro de aplicaciones complejas. En este tipo de aplicaciones, las dependencias juegan un papel crucial, ya que generalmente nadie tiene el control total sobre ellas y un problema en una puede hacer que toda la aplicación deje de funcionar. Por eso la gestión de las mismas «on demand» nos ahorra problemas y nos permite trabajar en paralelo con otros desarrolladores con mayor comodidad.

En el artículo nos muestra un ejemplo de como podría ser una gestión de componentes para nuestra aplicación javascript.

var myAwesomeApp = {
	components :{
		formcheck:{
			url:'formcheck.js',
			loaded:false
		},
		dynamicnav:{
			url:'dynamicnav.js',
			loaded:false
		},
		gallery:{
			url:'gallery.js',
			loaded:false
		},
		lightbox:{
			url:'lightbox.js',
			loaded:false
		}
	},
	addComponent:function(component){
		var c = this.components[component];
		if(c && c.loaded === false){
			var s = document.createElement('script');
			s.setAttribute('type', 'text/javascript');
			s.setAttribute('src',c.url);
			document.getElementsByTagName('head')[0].appendChild(s);
		}
	},
	componentAvailable:function(component){
		this.components[component].loaded = true;
		if(this.listener){
			this.listener(component);
		};
	}
};

Esta posibilidad además de permitirnos gestionar las dependecias de nuestra aplicación nos permite llevar un mayor control de la aplicación que estamos desarrollando. En caso de necesitar añadir dependencias podríamos usar la siguiente forma que nos evitará tener que tocar el código ya escrito.

myAwesomeApp.listener = function(component){
	if(component === 'bespokecomponent'){
		myAwesomeApp.addComponent('bespokelabels');
	};
	if(component === 'bespokelabels'){
		myAwesomeApp.addComponent('bespokedata');
	};
	if(component === 'bespokedata'){
		myAwesomeApp,bespokecomponent.init();
	};
};

myAwesomeApp.components.bespokecomponent = {
	url:'bespoke.js',
	loaded:false
};
myAwesomeApp.components.bespokelabels = {
	url:'bespokelabels.js',
	loaded:false
};
myAwesomeApp.components.bespokedata = {
	url:'bespokedata.js',
	loaded:false
};
myAwesomeApp.addComponent('bespokecomponent');