MooTools vs jQuery



Existen dos tipos de personas: los que usan MooTools y los que usan jQuery, y en este post voy a realizar una comparativa entre ambas librerías (MooTools vs jQuery).

Antes de entrar en materia, es necesario que tengas nociones de JavaScript, y sepas bien de lo que estamos hablando. Si crees que aún no lo tienes muy claro, te recomiendo que escuches este episodio del Podcast.

Episodio 4: Hablemos de JavaScript

Obviamente, lo primero que debemos hacer es definir que son MooTools y jQuery: ambas son librerías de JavaScript que permiten hacer cosas como animar objetos, seleccionar elementos, simplificar tareas al trabajar con formularios, etc. en cada página donde se ejecuten, es decir que en la práctica lo que hacen es entregarnos funciones pre-hechas para realizar las tareas de JavaScript y así permitir, entre otras cosas, simplificarnos la vida y compatibilizar los navegadores. Ambas librerías sirven para lo mismo y de hecho funcionan de manera bastante similar.

MooTools es mucho menos conocido que jQuery, y como generalmente se ven más sitios o ejemplos hechos con jQuery, la mayoría de las personas creen que “es mejor”, o incluso creen que es capaz de hacer cosas que van más allá de las capacidades de JavaScript. Al menos en mi caso, NUNCA he visto algo que se pueda hacer en jQuery y que no se pueda hacer en MooTools, y en teoría no tendría porqué jQuery ser mejor que MooTools, ya que ambos están basados en JavaScript y por lo tanto están limitados a lo que se pueda hacer con este lenguaje de programación. Con esto no quiero decir que jQuery sea malo, sino que pretendo hacerte ver que, si vas a leer el texto que viene a continuación, lo hagas sin prejuicios ni preferencias.

Mientras re-escribía este post (lo tenía anteriormiente en mi sitio web personal), busqué en Google y encontré la siguiente definición, en el sitio jQuery vs MooTools, la cual encontré muy acertada:

La descripción de jQuery’s de si mismo habla sobre HTML, eventos, animaciones, Ajax, y desarrollo web. MooTools habla sobre orientación a objetos y sobre escribir codigo potente y flexible. jQuery aspira a “cambiar la forma que tu escribes JavaScript” mientras que MooTools está diseñado para el programador JavaScript intermedio y avanzado.

El gran plus de jQuery: su documentación

Me he encontrado que cuando quiero buscar algo relacionado a jQuery me es bastante fácil encontrar una solución o ejemplos, a diferencia de MooTools, que su documentación es bastante pobre (sólo lo justo y necesario)

Por su parte jQuery ofrece cosas mucho más simples como jQueryUI o su listado de plugins, los cuales ofrecen ejemplos bastante claros, concretos y simples. Quizás por eso es tan popular jQuery, porque es mucho más fácil encontrar una librería que se ajuste a las necesidades de algún proyecto, la cual puedes implementar incluso con poco conocimiento. De todas formas MooTools no se queda atrás y ofrece MooTools Forge (que en la práctica es un repositorio de plugins, aunque es muy pobre en comparación a jQuery) y existen sitios como el blog de David Walsh (en inglés) que tiene muchos ejemplos realmente útilies y que le “salvan el pellejo”.

De todas formas, jQuery se lleva los aplausos en cuanto a documentación, ejemplos y plugins.

El gran plus de MooTools: su funcionalidad

Explicado en lenguaje para personas comunes y corrientes (no programadores), jQuery hace algo así como “convertir” los elementos con que trabajará a “idioma jQuery”. Si tengo un DIV y quiero cambiarle el innerHTML, me veré forzado a hacer algo como lo siguiente:

$('#idDeMiDiv').html('Este será el innerHTML de este elemento');

Lo cual se ve bien, sin embargo, lo que sucedió realmente acá es que: jQuery seleccionó el elemento, le “eliminó” todas las funciones nativas de JavaScript, y creó una nueva función para reemplazar a cada una de esas funciones nativas. Por lo mismo, ya no funcionará esto:

$('#idDeMiDiv').innerHTML="Este será el innerHTML de este elemento";

MooTools es diferente, ya que no “destruye” el código nativo y por lo tanto, me premite cualquiera de estas dos formas:

$('idDeMiDiv').set('html','Este será el innerHTML de este elemento');
$('idDeMiDiv').innerHTML="Este será el innerHTML de este elemento";

Lo importante, y lo que es más valioso para quienes son programadores, es que MooTools es más flexible. Es bastante fácil de implementar y tiene métodos muy simples.

Un ejemplo (el mismo) en MooTools y jQuery

//jQuery
$(document).ready(function () {
	$('.hover').each(function(i,el){
		$(el).mouseover(function(){
			$(this).addClass("hover");
		});
		$(el).mouseout(function(){
			$(this).removeClass("hover");
		});
		$(el).removeClass("hover");
	});
});

//MooTools
window.addEvent('domready', function() {
	$$('.hover').each(function(el){
		el.addEvent('mouseover', function(){
			this.addClass("hover");
		});
		el.addEvent('mouseout', function(){
			this.removeClass("hover");
		});
		el.removeClass("hover");
	});
});

Si se fijan, las diferencias son pocas, pues hay funciones que son iguales en ambas librerías (como addClass y removeClass), y otras que se implementan distintas, a pesar de que cumplen la misma tarea (como la primera línea para el DOM Ready).

Mi opinión personal

Por mi parte recomiendo, al menos, darle una vuelta a Mootools. Personalmente no me gusta mucho jQuery, pues encuentro que es un poco más engorroso de entender y programar, aunque debo admitir que ambos sirven para lo mismo y que es solamente un tema de gustos.

Personalmente uso un archivo que contiene TODO MooTools (ya que hay un MooTools “básico” y un “core” que tiene más funcionalidades) y con eso puedo hacer prácticamente cualquier cosa que necesite. Como los archivos .js se cargan una sola vez y luego se toman del caché (si no sabes como habilitar el caché con el .htaccess, te recomiendo que escuches este episodio del Podcast) el impacto que esto produce es imperceptible y además de esa manera no se llama a tantos archivos (como sucede en jQuery, donde generalmente se carga la base y luego se van cargando librerías para efectos, desplegables, carruseles, etc.), sino que se carga sólo uno, lo cual optimiza bastante la carga de la página.

¿Y tú cuál prefieres? (comenta el porqué)

Originally posted 2016-01-18 12:29:31.

MooTools vs jQuery

4 pensamientos en “MooTools vs jQuery

  • 12/02/2016 a las 20:16
    Enlace permanente

    Hola

    Jqueryy no destruye el dom, lo que hace es con $(selector) devolver un elemento de tipo Jquery, con el cual puedes acceder a elemto html y aplciarle alguna funcion. En este caso .html() es el equivalente para hacer un getbyId(id).innerHTML. pero no destruye el dom. Si quisieras seguir usando las bondades de Jquery, pero quieres acceder al elemento/objeto nativo del dom, para t ejemplo podrias usar $(selector).get(0).innerHTML con get() obtienes el Objeto nativo al cual le peudes hacer modificaciones con javascript nativo.

    me gustan mucho tus post, y sobre todo tus podcast, pero hoy noe stoy de acuerdo con bvarias cosas.

    PS: se que es un ejemeplo, pero a dia de hoy ya no seria recomendable usar ready, ya que las web son demasiado dinamicas a punta de ajax y json. Simplemente prefiero que los script se cargue y/o ejecuten cuando sepa que deben hacer (elementos existentes, variables existentes, etc)

    Saludos,
    John.

    Responder
    • 13/02/2016 a las 12:45
      Enlace permanente

      Gracias por los comentarios John. Buen aporte lo del get(0), no lo sabia, asique lo probaré. Uso jQuery bastante bien pero no lo uso hace mucho, asique mis impresiones son a nivel de usuario y no de programador.
      Lo de no usar domready creo que es buena idea pero depende del caso igual. Me he dado cuenta, eso si, que las personas que están comenzando con javascript no entienden el concepto de domready y no entienden la lógica de como se procesa y renderea una página web al ejecutarse y eso genera muchos problemas, y por eso pienso que, al menos hasta que uno no entienda bien ese funcionamiento, debería usar el domready para ejecutar código js, aunque no sea siempre lo óptimo.
      Un abrazo!, y si quieres aportar más al blog/podcast, te estaré muy agradecido 🙂

  • 21/02/2016 a las 13:38
    Enlace permanente

    El contenido del post y la fecha de publicación me chocan parece un post de 2007

    Mootools hace muchos años que murió incluso jQuery va a menos con frameworks como React.js y similares.

    Hay muchas tecnologías poco conocidas mejores que otras pero luego a la hora de elegir, la comunidad o gente que conoce la tecnología es ( que otros puedan mantener y colaborar en tu código ) es de los factores más importantes.

    Saludos!

    Responder

Deja un comentario

¿Quieres recibir el contenido V.I.P de Preceptos Digitales?

¿Quieres recibir el contenido V.I.P de Preceptos Digitales?

Ingresa tu correo y te enviaremos contenidos especiales para quienes escuchan el Podcast!



Te has suscrito exitosamente! Nos hablamos!