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

Ayer vimos como Web SQL Database apunta buenas maneras para el futuro del almacenamiento de datos en el cliente. Tambien hemos visto lo interesante del almacenamiento DOM como sustituto de las odiosas cookies, Lawnchair nos ofrecía un interfaz límpio y cómodo para interactuar con estas opciones, y ahora DOMCached, nos facilita tambien la integración con jQuery y Prototype.

// Ejemplo jQuery
<script src="jquery.js"></script>
<script src="jquery-json.js"></script>
<script src="domcached.js"></script>
<script>
// Leemos el valor de "key"
var value = $.DOMCached.get("key");
if(!value){
	// Si no está disponible lo cargamos desde el servidor
 	value = load_data_from_server()
 	// Lo añadimos al DOM para futuros usos
	$.DOMCached.set("key",value);
}
</script>

Compatible con la mayoría de navegadores actuales, DOMCached está disponible como plugin para Prototype y para jQuery. Podemos ver el código fuente alojado en GitHub y probarlo en vivo mediante este ejemplo usando el plugin jQuery.

Detectar el navegador no siempre es la mejor solución para condicionar nuestros scripts, siempre que podamos deberíamos detectar si las funcionalidades que vamos a ejecutar están disponibles y en caso de no estarlo ofrecer una alternativa, sin importar el navegador. Pero, como bien sabemos, no siempre podemos hacer lo correcto.

En estos casos, saber como lo hacen los frameworks Javascript más usados nos permitirá hacernos una idea de como actuar frente a este problema.

jQuery

Aunque desde la versión 1.3 el atributo browser está desaprovado, aún está disponible en el código para que se vayan migrando los scripts. Supongo que en breve dejará de estar, dejando paso a la detección de funcionalidades.

var userAgent = navigator.userAgent.toLowerCase();
// Figure out what browser is being used
jQuery.browser = {
	version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [0,'0'])[1],
	safari: /webkit/.test( userAgent ),
	opera: /opera/.test( userAgent ),
	msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
	mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
};

En este caso, hace uso del userAgent para comprobar mediante expresiones regulares el navegador del usuario. Se trata de una comprobación muy genérica y que no nos permite detectar móviles.

MooTools

Por otro lado, MooTools, nos ofrece un objeto (Browser) que nos permite detectar el motor de renderizado sin importar el navegador.

var Browser = $merge({
  Engine: {name: 'unknown', version: 0},
  Platform: {name: (window.orientation != undefined) ? 'ipod' : (navigator.platform.match(/mac|win|linux/i) || ['other'])[0].toLowerCase()},
  Features: {xpath: !!(document.evaluate), air: !!(window.runtime), query: !!(document.querySelector)},
  Plugins: {},
  Engines: {
    presto: function(){
      return (!window.opera) ? false : ((arguments.callee.caller) ? 960 : ((document.getElementsByClassName) ? 950 : 925));
    },
    trident: function(){
      return (!window.ActiveXObject) ? false : ((window.XMLHttpRequest) ? ((document.querySelectorAll) ? 6 : 5) : 4);
    },
    webkit: function(){
      return (navigator.taintEnabled) ? false : ((Browser.Features.xpath) ? ((Browser.Features.query) ? 525 : 420) : 419);
    },
    gecko: function(){
      return (!document.getBoxObjectFor && window.mozInnerScreenX == null) ? false : ((document.getElementsByClassName) ? 19 : 18);
    }
  }
}, Browser || {});

Como podemos ver, se encarga de realizar una serie de comprobaciones de funcionalidades para determinar el motor de renderizado que está usando el visitante.

Prototype

Prototype, al igual que MooTools nos ofrece un objeto (Browser) que nos ofrece la versión del navegador.

Browser: (function(){
   var ua = navigator.userAgent;
   // Opera (at least) 8.x+ has "Opera" as a [[Class]] of `window.opera`
   // This is a safer inference than plain boolean type conversion of `window.opera`
   var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]';
   return {
     IE: !!window.attachEvent && !isOpera,
     Opera: isOpera,
     WebKit: ua.indexOf('AppleWebKit/') > -1,
     Gecko: ua.indexOf('Gecko') > -1 && ua.indexOf('KHTML') === -1,
     MobileSafari: /Apple.*Mobile.*Safari/.test(ua)
   }
 })(),

Al igual que jQuery comprueba el navegador mediante expresiones regulares simples que no nos permite detectar versiones móviles.

YUI

YUI nos ofrece un atributo que nos indicará el navegador que está usando el usuario.

ua = nav && nav.userAgent,
if (ua) {

  if ((/windows|win32/i).test(ua)) {
    o.os = 'windows';
  } else if ((/macintosh/i).test(ua)) {
    o.os = 'macintosh';
  }

  // Modern KHTML browsers should qualify as Safari X-Grade
  if ((/KHTML/).test(ua)) {
    o.webkit=1;
  }
  // Modern WebKit browsers are at least X-Grade
  m=ua.match(/AppleWebKit\/([^\s]*)/);
  if (m&&m[1]) {
    o.webkit=numberfy(m[1]);

    // Mobile browser check
    if (/ Mobile\//.test(ua)) {
      o.mobile = "Apple"; // iPhone or iPod Touch
    } else {
      m=ua.match(/NokiaN[^\/]*|Android \d\.\d|webOS\/\d\.\d/);
      if (m) {
        o.mobile = m[0]; // Nokia N-series, Android, webOS, ex: NokiaN95
      }
    }

    m=ua.match(/AdobeAIR\/([^\s]*)/);
    if (m) {
      o.air = m[0]; // Adobe AIR 1.0 or better
    }

  }

  if (!o.webkit) { // not webkit
    // @todo check Opera/8.01 (J2ME/MIDP; Opera Mini/2.0.4509/1316; fi; U; ssr)
    m=ua.match(/Opera[\s\/]([^\s]*)/);
    if (m&&m[1]) {
      o.opera=numberfy(m[1]);
      m=ua.match(/Opera Mini[^;]*/);
      if (m) {
        o.mobile = m[0]; // ex: Opera Mini/2.0.4509/1316
      }
    } else { // not opera or webkit
      m=ua.match(/MSIE\s([^;]*)/);
      if (m&&m[1]) {
        o.ie=numberfy(m[1]);
      } else { // not opera, webkit, or IE
        m=ua.match(/Gecko\/([^\s]*)/);
        if (m) {
          o.gecko=1; // Gecko detected, look for revision
          m=ua.match(/rv:([^\s\)]*)/);
          if (m&&m[1]) {
            o.gecko=numberfy(m[1]);
          }
        }
      }
    }
  }
}

Al igual que jQuery y Prototype, recurre a las expresiones regulares para detectar el navegador, con la diferencia de que esta implementación nos permite detectar alguna versión más de las disponibles.

TimeFrame es un selector de fechas múltiple desarrollado con Prototype.

(Ver Imagen)

El script nos permite configurar los aspectos básicos de un selector de fechas y además nos permite usar el formato de fechas similar al usado por DateJS.

<script type="text/javascript" charset="utf-8">
      //<![CDATA[
        new Timeframe('calendars', {
          startField: 'start',
          endField: 'end',
          earliest: new Date(),
          resetButton: 'reset' });
      //]]>
</script>

Parámetros

Como vemos en el ejemplo anterior, el primer parámetro hace referencia al ID del elemento que usaremos para alojar el calendario y el segúndo parámetro se trata de un objeto con una serie de opciones que especificarán el aspecto que ha de tener el selector.

months

Número de meses que mostramos (default: 2).

format

Formato para las fechas en los elementos <input /> (default: %b %d, %Y)

weekOffset

Fecha de inicio de la semana (usa 1 para empezar la semana en Lunes).

startField, endField

Declara un rango de inicio y fin. (por defecto lo genera automáticamente)

previousButton, todayButton, nextButton, resetButton

Declara los botones de navegación (por defecto lo genera automáticamente)

earliest, latest

Permite espeficiar los rangos de fechas anteriores o posteriores que no podrán ser seleccionadas

maxRange

Limita el máximo de días a la vez

Demo y Descarga

Si lo quieres ver funcionando o descargarlo para probarlo en tu local puedes hacerlo aquí.

Script.aculo.us, la librería gráfica de Prototype se ha lavado la cara y de que manera.

(Ver Imagen)

Scripty2 se ha reescrito completamente desde 0 para suplir a la antigua librería, consiguiendo reducir su tamaño considerablemente, ideal para aplicarle efectos gráficos, enriquecer el interface del usuario de tus páginas en tan solo 20kb (gzzipped).

Como usarlo

Para disponer de las funcionalidades que la librería nos ofrece deberemos incluir la llamada al fichero correspondiente.

<script src="prototype.js" type="text/javascript"></script>
<script src="s2.js" type="text/javascript"></script>

Como podemos ver, necesitaremos prototype.js para que esta librería funcione. Además requiere la versión 1.6.3_rc3 de Prototype o superior.

Una vez añadido este código, podremos hacer uso de las funcionalidades que Scripty2 nos ofrece, funcionalidades que están divididas en 3 categorías:

1. Core: Funciones básicas usadas en el resto de la librería.
2. Fx: Colección de métodos para aplicarle efectos a los elementos de la página.
3. Ui: Funciones para el parseo de CSS

Descargar y demos

Para ver las posibilidades que ofrece, se han desarrollado un par de ejemplos. Puedes descargarlo directamente (con documentación) aquí.

Pocas son las cosas que no podamos hacer con Javascript, y la de hacer gráficas no es una de ellas.

(Ver Imagen)

Gracias a alguna de estas librerías, hacer nuestras gráficas más elegantes para nuestros usuarios es realmente sencillo:

1. Flot [jQuery]
2. fgCharting [jQuery]
3. jQuery Sparklines [jQuery]
4. jqPlot [jQuery]
5. TufteGraph [jQuery]
6. jQuery Google Charting [jQuery]
7. ProtoChart [Prototype]
8. JSXGraph [Prototype o jQuery]
9. Protovis [Native JS]
10. PlotKit [Nativa JS]

Me ha parecido muy raro que no hubiera nada para MooTools, así que he estado buscando algo para los que desarrollamos con este framework.

1. MooChart
2. TabletoChart
3. MooWheel

¿Me he dejado alguna que valga la pena conocer?

Buenas, estoy preparando un test de frameworks JS y me gustaría encontrar un gurú (o alguien que se defienda) con alguno de los siguientes frameworks:

1. MooTools 1.2.1
2. Dojo 1.2.3
3. Prototype 1.6.3
4. Ext 2.2.1

Es bastante sencillo, tengo un script en jQuery con una serie de funciones que me gustaría migrar de la forma más optima a cada uno de los frameworks indicados arriba. Si alguien puede, y quiere, echarme una mano.

He dejado un mensaje en foro.

Muchas gracias a todos!!!

Hace unos días hablamos de programación orientada a objetos en Javascript y vimos que es una técnica interesante y las diferentes opciones usadas para conseguirla. Pero ¿cual de ellas es más eficiente en cuanto a rendimiento?

En Broofa.com (y via Ajaxian) descubro que han hecho una prueba de rendimiento a las declaraciones en diferentes navegadores haciendo 100.000 llamadas al constructor de cada uno de estos métodos, ha generado subclases y ha llamado a métodos de dichas clases parada despues comparar la memoria usada en el proceso y los tiempos usados en dichos procesos.

Viendo los resultados observamos que Base2 se corona como técnica más rápida y más eficiente en cuanto a consumo de memoria seguida de la propuesta por John Resig. Por otro lado el rendimiento de Prototype llega a ser hasta 20x inferior que sus competidores.

¿Y MooTools?

Como no han incluido a MooTools en las pruebas me he tomado la libertad de añadirla yo y los resultados son realmente buenos.

Podeis ver los resultados en diferentes navegadores en este script de ejemplo.

Actualización

He tenido un fallo en la comprensión del funcionamiento de JSLitmus y di por supuesto que a menor «amarillo» mejor cuando es diferente ya que esto mide el número de operaciones por segundo y no el número de segundos en realizar N operaciones.

Desde este punto, Prototype me sorprende con la potencia que obtenemos, dejando muy atrás a MooTools y Base2 que pasarían a ser los más lentos de los mostrados. Por otro lado el script de John Resig se mentiene al frente de la comparativa.