jquery

Webshims: Polyfill para JavaScript

Webshims Lib es una biblioteca polyfill modular centrada en implementaciones preciosas de las características ya estables de HTML5, de manera que los desarrolladores puedan escribir código moderno, interoperable y robusto para todos los navegadores. Funciona sobre jQuery y Modernizr.

¿Pero qué es un polyfill?

Es un término acuñado por Remy Sharp que define una porción de código (o un plugin) que proporciona la base tecnológica que tú, como programador, esperas que ofrezca nativamente el navegador.

Por ejemplo, el propio Remy Sharp colgó un gist con un ejemplo de polyfill que permite que navegadores antiguos ofrezcan soporte a localStorage y a sessionStorage mediante las cookies. Fue a partir de este gist desde el que hace dos años comenzó el desarrollo de Webshims Lib.

Webshims Lib

Actualmente funciona sobre la mayoría de navegadores (incluso IE6), y su funcionamiento es vergonzosamente sencillo:

<!-- dependencies: jQuery + Modernizr with yepnope -->
<script src="js/jquery-1.7.1.js"></script>
<script src="js/modernizr-yepnope-custom.js"></script>

<!-- reference the base script -->
<script src="js-webshim/minified/polyfiller.js"></script>
<script>
   // implement all unsupported features || call polyfill
   // before DOM-Ready to implement everything as soon and
   // as fast as possible
   $.webshims.polyfill();

   // or load only specific features you need
   // $.webshims.polyfill('forms json-storage');

   $(function(){
      //use all implemented API-features on DOM-ready
   });
</script>

Características:

Ámbitos en eventos JavaScript

Últimamente mi buen amigo Álex me está animando a que dé una oportunidad a CoffeeScript, el preprocesador de JavaScript que más está triunfando. Hablando de todo un poco, hemos comentado que JavaScript tiene algunas peculiaridades que, cuando uno empieza a trabajar con él, le descoloca un poco. Por ejemplo, el hecho de que su orientación a objetos esté basada en prototipos. Otra de esas peculiaridades que han salido a relucir es el cómo se manejan los ámbitos en eventos JavaScript. O dicho de otra forma: ¿Dónde debería apuntar this cuando estamos en la función manejadora de un evento?

Mejorar el rendimiento de javascript con timers

Uno de mis últimos encargos consiste en una aplicación financiera para el navegador. En resumen, se trata de “traducir” una serie de hojas en Excel a javascript. El cómo lo he implementado da para otro artículo.

Básicamente el funcionamiento es el siguiente:

  • Creamos un campo de texto por cada celda del fichero Excel.
  • Muchas celdas tienen valores dinámicos, es decir, se generan a partir del valor de otras.
  • Definimos la fórmula que genera el valor de cada celda dinámica, y esa fórmula la añadimos a la pila de callbacks del evento ‘change’ de todas las celdas de las que depende.

Problema: Hay miles de celdas, prácticamente todas dinámicas. Esto implica que a menudo, al cambiar un sólo valor, se generan cientos o miles de cálculos. Javascript es single threaded, es decir, sólo se ejecuta una única hebra (para realizar cálculos, modificar el árbol DOM, gestionar eventos, o redibujar la pantalla). Si una operación muy costa en cálculos conlleva 8 segundos, la interfaz de usuario se quedará bloqueada hasta que finalice. Mal asunto.

El experto en usabilidad Jakob Nielsen dijo:

0,1 segundos es el límite para que el usuario perciba que el sistema responde inmediatamente.

Historial y botón volver en JavaScript

Cada día son más frecuentes las aplicaciones web que hace un uso extensivo de JavaScript, relegando una mayor carga computacional al cliente, dentro de la arquitectura cliente-servidor, lo que habitualmente se conoce como cliente pesado. Con ello, entre otras cosas, se logra una interfaz de usuario mucho mas rica en prestaciones.

Algunos ejemplos de webs que hacen uso de esto es el cliente de correo de Google Gmail, o las famosas redes sociales como Facebook o Tuenti. En estas aplicaciones, toda la interfaz está gobernada por JavaScript. Cuando accedemos a un enlace, generalmente no conlleva una nueva petición HTTP sino que, en su lugar, el documento actual se actualiza con nuevo contenido (AJAX).