03 febrero, 2011

Deconstruyendo jQuery, MooTools y Prototype

Hola de nuevo. Después de poco más de un año de parón por temas personales me he propuesto continuar con el blog. No sé si estaré en condiciones de asegurar artículos extensos y con la calidad que han tenido durante los meses anteriores, pero la forma de comprobarlo será publicando de nuevo para ver hacia dónde derivan.

Este primer artículo quiero dedicarlo a una herramienta que me ha parecido extremadamente interesante. JS Libs Deconstructed es un proyecto que muestra de forma visual e interactiva el código interno de tres de las librerías JavaScript más usadas: jQuery, MooTools y Prototype. Cada librería se muestra en principio como un conjunto de bloques cerrados que muestra la jerarquía del código y que pueden abrirse para mostrar el código fuente concreto que implementa cada parte. Pero también considero interesante el rápido resumen que muestra las ventajas e inconvenientes de cada una:



jQuery es una rápida y concisa colección de JavaScript que simplifica atravesar documento HTML, el control de eventos, animación, y las interacciones Ajax para el desarrollo web rápido.

Resumen

Se centra en la expresividad, rápida y fácil codificación, y los plugins

Ventajas

  • Optimizado para la manipulación del DOM
  • Opera con varios elementos sin una sintaxis especial
  • Dirigido por selectores CSS
  • Método de encadenamiento que hace fácil escribir código
  • API y sintaxis intuitiva
  • Arquitectura de plugins modulares mantiene el núcleo ligero
  • El rendimiento más rápido en selección
  • Espacio único de nombres

Desventajas

  • Orientado a DOM en lugar de a JavaScript
  • Algunos desarrolladores tienen problemas en torno a "this" en las funciones de callback


MooTools es un compacto, modular, orientada a objetos JavaScript marco diseñado para los desarrolladores de JavaScript intermedio y avanzado. Te permite escribir potente, flexible, y el código de cross-browser con su elegante y bien documentado, y coherente de la API.

Resumen

Se centra en la extensión, la herencia, la legibilidad, la reutilización y facilidad de mantenimiento

Ventajas

  • API concisa
  • Elegante sintaxis orientada a clases
  • Extiende clases nativas con nuevos métodos
  • Núcleo ligero
  • Puede ampliar la funcionalidad con plugins y mixins

Desventajas

  • Sintaxis y API más pesadas que jQuery
  • No es tan fácil como jQuery para actualizar el DOM


Prototype es un Framework de JavaScript que tiene como objetivo de facilitar el desarrollo de aplicaciones web dinámicas, con una única y fácil caja de herramientas para el desarrollo dirigido por clases y la librería de Ajax más atractiva.

Resumen

Se centra en la extensión de las clases nativas, la herencia, la legibilidad

Ventajas

  • Amplia API
  • Elegante sintaxis orientada a clases
  • Amplía clases nativas y el DOM con nuevos métodos
  • Útiles nuevos tipos de objetos

Desventajas

  • Sintaxis y API más pesadas que jQuery
  • Demasiados métodos triviales en el núcleo
  • No es tan fácil como jQuery para actualizar el DOM
  • Más lento de los 3 en el rendimiento del selector
  • Necesita script.aculo.us para los efectos
  • Ensucia el espacio de nombres global
Nota: en el momento de la publicación, la API de Mootools todavía no ha sido "deconstruida".

7 comentarios:

andres descalzo vazquez dijo...

Hola, disculpame, no entiendo el item en la desventaja de jQuery "Orientado a DOM en lugar de a JavaScript".

Àl dijo...

Andrés, te explico. jQuery es una cáscara muy optimizada para tapar la complejidad del DOM (de la estructura de información que el navegador pone a disposición de JavaScript para modificar elementos). Es decir, jQuery se centra principalmente en trabajar fácilmente con elementos HTML de una página. Gran parte del rechazo que arrastra JavaScript se debe a que el DOM es extremadamente incómodo e ineficiente de utilizar. Y por ello mismo, jQuery es la librería más usada: esconde lo que muchos consideran peor de JavaScript (aunque en realidad el DOM no forma parte del lenguaje).

El objetivo de otras muchas librerías es distinto. Por ejemplo, MooTools incluye métodos para trabajar con el DOM, menos trabajados que jQuery, pero por otro lado incluye muchas herramientas para programación (especialmente relacionadas con las clases y la orientación a objetos, pero también muchas otras) que jQuery no aporta.

Quiero decir que el objetivo de jQuery es distinto de muchas otras librerías. Y cumple ese objetivo a la perfección. Por ello una comparativa entre ambas no tiene demasiado sentido (ver http://jqueryvsmootools.com/ ). Dependiendo de lo que vayas a hacer, jQuery se te puede quedar corta y puede adaptarse como un guante...

Espero haberme sabido explicar...

andres descalzo vazquez dijo...

si, gracias

Anónimo dijo...

Entiendo el artículo, pero ¿no te parece que el problema de todas estas pilas de librerías que uno debe aprenderse sale más de querer meterle capas y capas (especificaciones, protocolos, interfaces, etc) a los lenguajes de marcas? ¿Conocés algún sistema de representación visual no basado en el paradigma de tags y documentos-páginas?

Àl dijo...

No entiendo a lo que te refieres. ¿Puedes explicarte mejor?

Las librerías no "debes" aprendértelas. En todo caso resultan convenientes, sobre todo, para pelearte con el DOM del navegador para trabajar con los tags que dices; o bien si vas a crear aplicaciones grandes, para ayudar a gestionar el código (orientado a objetos normalmente).

Leidra dijo...

En referencia a la consulta hecha por anónimo, es posible que una aproximación a lo que preguntas sería utilizar XML + XSLT (http://en.wikipedia.org/wiki/XSLT), sé que se trata de lenguajes de marcado pero con ellos puedes crear los resultados que desees a partir de una única fuente, sin tener que limitarte a entornos web, de paso y para relacionar el tema con el artículo http://think2loud.com/reading-xml-with-jquery/

Javier dijo...

Hace 6 meses que tengo la web en favoritos y aveces entro a ver si decontruyeron MooTools.. Pero parace que no tienen intenciones de hacerlo.. Una lastima :(

Publicar un comentario en la entrada

Últimos links en indiza.com