Comparación de Javascript Frameworks ~ Introducción

Hasta hace poco tiempo atrás, javascript solo se utilizaba para cosas accesorias o de poca importancia. Para validar algún formulario, para algún efecto visual, y poca cosa más que esas. Javascript era visto casi como algo que se podía ignorar y de ser posible, era mejor evitarlo.

Pero en este último tiempo, todo esto ha cambiado radicalmente y Javascript hoy en día es un pieza fundamental en el desarrollo de aplicaciones web.

En gran parte, gracias a la aparición de librerías como Prototype, Mootools y Jquery. Y a la aparición de aplicaciones web como Basecamp, Flickr o Gmail, que demostraron el enorme potencial que javascript puede ofrecer. Realmente revolucionaron la forma de pensar en lo que una aplicación web es capaz de hacer, y sin duda, revolucionaron el diseño de interfaces y a toda la web en general.

Básicamente, todas estas librerías nos ofrecen una forma simple de hacer lo que antes era imposible: Manipular y modificar una página web sin tener que recargarla.

De esta forma, podemos mostrar u ocultar contenido; modificar el comportamiento de formularios mostrando u ocultando campos extra según corresponda, traer e insertar contenido desde el servidor vía ajax, realizar acciones sobre la base de datos, en fin de todo... pero siempre evitando la necesidad de recargar la página que ya estábamos mostrando al usuario. Para lo que antes necesitábamos dos o tres pasos, ahora se puede hacer todo en 1 solo paso, y lo más importante desde el punto de vista de la usabilidad: sin sacar al usuario del contexto donde se encuentra.

En esta serie de post vamos a analizar lo más completamente posible las diferentes librerías, porque si bien son todas parecidas y sirven todas para lo mismo, lo difícil es decidirse por cual usar.

Hay muchos aspectos que hay que tener en cuenta: El peso de los archivos. La velocidad de ejecución La Documentación, la comunidad, la facilidad de uso y la curva de aprendizaje. Los Plugins disponibles, etc. En este post, nos vamos a concentrar en el peso de los archivos y en los próximos iremos viendo el resto de los puntos.

¿Que pesa más: Un kilo de plomo o un kilo de plumas?

Los archivos de javascript bloquean los downloads paralelos. Esto significa que interrumpen la descarga del resto de los archivos hasta que no han sido descargados completamente.

Mientras que las imagenes, los css, etc. pueden ser descargados por el navegador de hasta 8 al mismo tiempo, los archivos de javascript solo se descargan de a uno por ves, frenando así la descarga del resto del sitio. Por lo tanto, no es lo mismo 30k de javascript que 30k de imagenes.

Por decirlo de alguna manera: "Son de plomo" o como vos quieras llamarlo, pero lo importante es que sepas que no son tratados igual que el resto de los archivos y por lo tanto cada byte de javascript es doblemente importante.

¿Cuanto pesa cada librería?

Veamos el peso de las versiones completas de cada una, con diferentes niveles de compresión.

La versión legible: Esta es la versión original de la librería sin ningún tipo de compresión. En ella el código se mantiene legible, con comentarios y con los debidos espacios en blanco e indentaciónes. Esta versión es útil cuando estamos desarrollando o aprendiendo el uso de cada librería, pero no es adecuada para la versión de un sitio en vivo, dado que el peso es realmente excesivo.

Le versión Gzip: Gzip hace que el servidor comprima los archivos antes de enviarlos al browser de nuestros visitantes. Por lo tanto, mantenemos la versión legible en nuestra máquina, mientras que los visitantes reciben una versión comprimida del mismo. El tamaño es bastante aceptable.

La versión Minified (Con jsmin o YUI Compresor.): En esta versión, el archivo es optimizado eliminando todos los comentarios, espacios en blanco, renombrando variables para acortar sus nombres y hasta modificando el código para hacerlo más compacto. Dado estas modificaciones el archivo se torna ilegible y si quisiéremos modificarlo, deberiamos modificar el original y volver a compactarlo. Cabe aclarar que minificar no es lo mismo que ofuscar. Las versiones ofuscabas no son recomendables (y ni siquiera las hemos testado) porque necesitan ser interpretadas una ves descargadas, ralentizando más aun la velocidad de nuestros scripts y consumiendo mucha más memoria en el navegador.

La versión Minified + Gzip: Esta es la versión ideal para utilizar en nuestro sitio una ves que hemos terminado la etapa de desarrollo. Aquí no solo optimizamos el archivo, sino que también hacemos que el servidor lo comprima antes de enviarlo.

Entonces, hasta acá tenemos la comparación de las librerias base. Ahora vamos a ver cuanto pesan si incluimos sus librerías complementarias.

¿Cuanto pesa el combo completo?

En la mayoría de los casos, esas librerías son suficientes. Pero si necesitamos hacer algo un poco más complejo ya se nos quedan un poco cortas.

Por ejemplo, si queremos utilizar draggables, sortables, sliders y demas chiches en los casos de Prototype y Jquery debemos recurrir a sus librerías acompañantes (Scriptaculous y Jquery UI). Mientras que en el caso de Mootools ya vienen incluidos en la versión comparada anteriormente y en el caso de DomASS tendremos que recurrir a algún plugin o hacerla nosotros mismos.

Veamos cual es el peso del combo completo utilizando Scriptaculous y Jquery UI (Ambas en sus versiones completas).

Conclusión de esta primera parte:

Sin duda, Prototype y Scriptaculous tienen fama de ser la librería más pesada, asique ha sido toda una sorpresa ver que pesan menos "Prototype + Scriptaculous (41k)" que "Jquery + Jquery UI (53.8k)".

Mootools, que a veces es tratada como una libreria de 2da categoría, resulta realmente muy interesante porque incluye muchas de las funciones de Scriptaculous y Jquery UI pero sin la necesidad de incluir una librería adicional. Una excelente opción, dado que es realmente liviana y completa (19k).

DOMAssistant es la más liviana de todas (apenas 8.1k). Hay que aclarar que se limita únicamente a un set de funciones más reducido y de más bajo nivel que las demás. Es la elección ideal si solo buscamos una base para hacer nuestros propios scripts.

En los próximos post iremos comparando los demas puntos: La velocidad de ejecución; La documentación, la comunidad, la facilidad de uso y la curva de aprendizaje; Los Plugins disponibles, etc, etc, etc. Estate atento las proximas semanas a ver como sigue la comparativa.

Saludos
Pablo.