Archivo para categoría ‘Javascript’

Minify - minimizar tamaño y número de peticiones

Lunes, Noviembre 17th, 2008

En proyectos grandes que hacen mucho uso de Javascript es muy común tener un número considerable de ficheros de Javascript. Normalmente estos se reparten en varios directorios para tenerlos organizados. Entonces, a la hora de cargar una página nos encontramos con que tarda mucho tiempo hasta estar disponible debido al gran número de ficheros Javascript a cargar. Esto se debe a que la W3 recomienda no mantener más de 2 conexiones por servidor, unido al hecho de que los navegadores paran el parseo de la página cuando se encuentran con un tag de <script> para cargar JS externo.

La solución que encontré hace tiempo se llama combine. Tras adaptarlo un poco a mis necesidades me funcionaba de gloria acelerando la carga de las páginas hasta un 400%!!. Esto lo conseguía concatenando varios scripts, comprimirlos y usando un header expire lejano.

Hoy he encontrado otro script que promete hacer lo mismo, pero mejor. Minify es mucho más complejo que Combine, pero promete copar con más situaciones de excepción y, sobre todo, está en desarrollo. Al parecer están trabajando en un sistema que usa Apache para servir los ficheros concatenados sin pasar por el PHP. Esto aceleraría la carga de las páginas muchísimo.

Aún me queda probarlo y ver si las mejoras sobre Combine me valen valen la pena, y comparar la velocidad de ambos. Os mantendré actualizados.

MooTools versión 1

Lunes, Enero 29th, 2007

Tras muchos meses de desarrollo y versiones 0.x por fina ha salido la versión 1.0 de MooTools.

Lo que más destacan sus desarrolladores (yo aún no lo he probado) es que todas sus clases usan eventos. Cuando lo leí por primera vez no entendía a que se refieren, pero tras leerlo una segunda vez me dí cuenta que las mismas clases pueden evocar eventos. Por ejemplo onStart para ejecutar código antes de inicializar un método.

También han mejorado su gestión de eventos que ahora consume menos memoria y dispone de la posibilidad de eliminar todos los eventos de un elemento o de un tipo de evento (pe onClick). Además se puede evocar eventos manualmente.

Por el lado negativo nos encontramos con que han hecho cambios en el API (en una librería tan nueva no nos debe extrañar) y si has usado una versión 0.x de MooTools tendrás que actualizar tu código antes de pasarte a la versión 1.0.

ENLACES:

Artículo original:
http://mad4milk.net/entry/mootools-version-1-official-world-release
Documentación:
http://docs.mootools.net/

Prototype saca una nueva versión (1.5) y estrena página nueva

Viernes, Enero 19th, 2007

Prototype ha visto la luz en su nueva versión 1.5. Paralelamente Sam Stephenson (el inventor de Prototype) ha publicado un nuevo website, http.//prototypejs.org, con la documentación online que tanto pidieron los usuarios. Un apartado de la página está dedicado a artículos sobre el funcionamiento de Prototype y otro a la documentación del API.

Al parecer se ha formado un núcleo de desarrolladores para Prototype que se reparte las tareas de actualizar la documentación y empujar el desarrollo de Prototype… cosa que obviamente era imposible para una sola persona.

Miguel

Firebug… está emergiendo la versión 1.0

Viernes, Diciembre 8th, 2006

Joe Hewitt ha puesto manos a la obra y ha sacado la versión beta de Firebug 1.0. Al día de hoy es la beta3 que incorpora funcionalidades que usuarios le han pedido tras haber evaluado beta1 y beta2.

Y estamos de suerte porque Joe ha decidido, tras pensarselo detenidamente y hablar con los usuarios, a seguir con el modelo OpenSource [ver su comentario]. Al parecer ha hecho bien porque los mismos usuarios se han volcado en donar importes de 20 a 100€ para que Joe pueda dedicarle recursos a esta herramienta que ya se ha vuelto indisepnsable para muchos desarrolladores.

El interfaz de Firebug está totalmente renovado y mucho más limpio… cosa que era necesaria porque tiene un sinfin de nuevas funcionalidades. Las más importantes son:

  • Poder abrir Firebug en una ventana propia
  • Editar HTML (y no solo los parámetros como en la versión 0.4)
  • Editar CSS (desde beta3 se puede editar enteramente)
  • Monitorizar tráfico de red detallando gráficamente cuando tarda cada elemento en cargarse.
  • Perfilar tiempo de ejecución

Aparte del AddOn para Firefox Joe ha creado Firebug Lite… una librería JavaScript para disponer de las funcionalidades (limitadas por momento) de Firebug en Internet Explorer, Opera y Safari. Por momento Firebug Lite está limitado al logging y ejecución de comando JS en la consola.

Happy debugging,
Miguel

Cómo diferenciar IE7 en JavaScript

Martes, Octubre 24th, 2006

Con el release de hace unos días de la nueva versión de Internet Explorer, IE7, y sus mejoras a nivel de CSS nos encontramos con que algunos workarounds que chequean el nombre del navegador dan resultados no deseados en IE7.

Abe Fettig nos recomienda un método para discernir entre IE7 e IE6-.

if (typeof document.body.style.maxHeight != "undefined") {
// IE 7, mozilla, safari, opera 9
} else {
// IE6, navegadores antiguos
}

Es muy recomendable hacerlo de esta manera y no usar el UserAgent ya que este se cambia fácilmente.

Arjan, en un comentario en ajaxian.com, dice que es más fácil usar window.XMLHttpRequest que ha sido intorducido en IE7 y es más corto.

La decisión final depende del gusto del programador :)

Comparando velocidad de Prototype y jQuery

Martes, Octubre 24th, 2006

Entrado de pleno en la guerra de las librerías DOM para JavaScript, Claudio Cicali se ha puesto a comparar la velocidad de los selectores de Prototype y jQuery. En particular las funciones que ha usado son $() para jQuery y $$() para Prototye.

El resultado de su benchmark es que las 2 librerías tienen un rendimiento muy parecido, ganando Prototype en algunas asignaturas y jQuery en otras.

Hay un patch para Prototype que mejora sensiblemente el rendimiento de la función $$() y según un comentario en el blog de Claudio usando el patch Prototype gana a jQuery en todos los campos.

Queda preguntarse porque el patch aún no forma parte del core de Prototype.

jQuery 1.0…

Lunes, Agosto 28th, 2006

John Reisig ha sacado la versión 1.0 de jQuery.

Según su blog se ha reescrito gran parte del código para solventar diversos problemillas que tenía la librería. También ha aprovechado el lanzamiento para rehacer la web (por momento solo anunciado pero aún no visible). Según el Blog de John Reisig aún tardará unos días hasta tenerla lista para el público.

Lo que si ya está disponible es la documentación actualizada de visualQuery en http://screencasts.visualjquery.com/visual/docs.xml.

Aún no tuve tiempo de probar esta versión y evaluar si me sale a cuenta cambiar de scriptaculous/prototye a jQuery…

Downloads:
jQuery 1.0
jQuery 1.0 (comprimido)

Firebug 0.4… ahora con debugger

Miércoles, Mayo 24th, 2006

Ha salido por fin la la largamente prometida versión 0.4 de Firebug. Lo más impresionante es que esta versión viene con un debugger “básico” pero muy funcional. No es tan completo (o complejo) cómo el Venkman, pero la facilidad y rápidez de uso del Firebug pronto nos hará olvidarnos de Venkman. Además con esta nueva versión el autor ha inaugurado dominio propio para la herramienta. Para la URL ha seguido el estilo de la Mozilla Foundation… www.getfirebug.com

Las funcionalidades nuevas son las siguientes:

  • Permite poner breakpoints desde la consola.
  • Inspeccionar variables locales.
  • Stacktraces en los errores… para saber en que circunstancia se dispara el error.
  • Break on error… (opcional) para para la ejecución cuando hay un error y llevarnos a la fuente del mismo.
  • console.log… ya no necesitamos la función printfire()… Firebug pone a disposición de las páginas el objeto console para ello.
  • Los mensajes de logging ahora se pueden clasificar (debug, error, warning, info)… parte del objeto log.
  • Aserciones… podemos testear aserciones con el objeto log.
  • Uso de funcionalidad tipo prinf (PHP) para los mensajes del objeto log. Esto nos permite incluir una referencia a un objeto e inspeccionarlo con un solo click.

Para un listado completo de cambios ir a los release notes.
Documentación para las nuevas funcionalidades se encuentra aquí.

Feliz debugging :)