YUI, JQuery y JavaScript en general


Me he equivocado. Llevo toda la vida diciendo que JavaScript era una mierda pinchá en un palo... Y resulta que es algo completamente necesario.

Es así de simple. El servidor lo puedes hacer como te dé la gana: Java, Ruby, Python, C, C++, JavaScript, BrainFuck,... No importa. Pero cuando hay que escribir el cliente, sólo hay una elección.

Así que me puse al lío y descubrí que no soy el único que se ha dado cuenta de todo esto, sino que hay gente que ha visto lo mierda que era JavaScript y ha comenzado a transformarlo en algo más que usable.

Esta gente ha creado entornos de desarrollo que permiten una mayor legibilidad y mantenibilidad del código.

Este artículo va de uno de estos entornos, YUI.

Qué es YUI

YUI es la Yahoo User Interface, el equivalente a JQuery creado por Yahoo.

YUI es ése gran desconocido. Todo el mundo usa JQuery. Pero claro, todo el mundo usa Windows y eso no significa que sea lo mejor.

Hace tiempo que estoy trasteando con JQuery y JQuery-UI, y me parecen unas librerías magníficas. Así que comencé a utilizarlas para un pequeño proyecto que tengo en mente. Se me ocurrió comentárselo a unos amigos... Y me recomendaron YUI. No os podéis imaginar cómo se lo agradezco.

JQuery es una librería que facilita el manejo del DOM y se abstrae del navegador donde se ejecuta. YUI también.

JQuery-UI es una librería de widgets o elementos gráficos tipo calendario, barra de menú, ventanas de aviso, etc. YUI también.

[QUnit] es un entorno de pruebas que utiliza JQuery. YUI tiene su propio entorno de pruebas.

Pero YUI es mucho más:

  • Dispone de un entorno MVC. Si quieres usarlo con JQuery, tienes que cargar otras librerías o creártelo tú mismo.
  • Ofrece un sistema de eventos dinámico y fácil de utilizar.
  • Dispone de un sistema de carga modular.
  • Añade herramientas de desarrollo, tales como un compresor y optimizador de JavaScript.
  • Ofrece distintos tipos de optimizaciones, como la obtención de los archivos JavaScript mediante un combo, que aumenta el rendimiento de los navegadores.

Pero... Siendo esto tan maravilloso... ¿Por qué el 95% de la gente usa JQuery? ¿Por qué sólo el 1% de la gente usa YUI?

La curva de aprendizaje de JQuery es nula. Cualquiera puede hacer una tontá en JQuery, pero hacer algo en YUI requiere algo más de tiempo. Aprender a manejar tantas herramientas es complicado.

Hay muchas maravillas hechas en JQuery, pero es difícil encontrarlas entre tantos montones de auténtica mierda. En YUI resulta mucho más complejo realizar una mierda, y mucho más sencillo sustituirla por algo que funcione.

En este artículo explicaré cómo usar YUI básico, y en próximos me meteré un poco más en detalle.

Principios básicos

En YUI todo debe estar en un módulo. Esto es así para gestionar algo parecido a los espacios de nombres.

Además, como en todo lo que sea web, necesitaremos una página HTML para mostrarlo. La página que usaremos será algo así:

<html>
  <head>
    <title>Testing YUI</title>
    <!-- Si usamos YUI en remoto -->
    <script src="http://yui.yahooapis.com/3.12.0/build/yui/yui-min.js"></script>
    <!-- Si usamos YUI en local: -->
    <script src="/yui/yui/yui-min.js"></script>
  </head>
  <body class="yui3-skin-sam">
    <div class="content">
    </div>
    <script>
    YUI().use(function (Y) {
    });
    </script>
  </body>
</html>

Para abreviar toda esta parafernalia, a partir de ahora sólo escribiré lo que va dentro del bloque body.

Por cierto... veréis que al body le he añadido la clase yui3-skin-sam. Eso es para tener un estilo por defecto (en este caso el básico). YUI, tratando de optimizar rendimiento, no nos carga ninguna CSS por defecto y suele ser recomendable, sobre todo al principio, utilizar la por defecto, que es ésta.

Modificando el DOM

¡Pues ya está! Manos a la obra.

Como dije, YUI está compuesto por módulos. Es muy difícil realizar algo sin hacer uso de ellos. Hasta lo más básico, como es gestionar el DOM requiere de un módulo: node. Vamos al código:

<div class="content">
</div>
<script>
  YUI().use('node', function(Y) {
      Y.one('.content').setHTML('<p>Hello World!</p>');
  });
</script>

Como vemos, tenemos que crearnos una instancia de YUI (deberíamos crear sólo una para toda la página, salvo contadas excepciones), y llamamos a su método use. Este método admite como parámetros todos los módulos que se deseen cargar, y finalmente, el programa principal. En nuestro caso, cargamos sólo node.

El programa principal recibe como argumento Y, que es la instancia de YUI que usaremos para realizar nuestras operaciones. Es algo así como el $ de JQuery.

node nos proporciona muchas cosas, pero quizá lo más importante sean los métodos one y all. Ambas reciben como argumento un selector CSS. one devuelve el primer elemento que encaje con el selector CSS y all, devuelve una lista con todos los elementos.

YUI embebe todos los elementos del DOM en elementos propios. Así, tanto one como all devuelven wrappers que contienen los elementos del DOM. Esto permite añadirles operaciones como setHTML que permite cambiar el contenido. También podríamos haber usado append para realizar la misma operación.

Calendarios

Vamos a ver un ejemplo de cómo añadir un calendario a nuestra página web:

```javascript

Seleccione una fecha:


Comentarios

Comments powered by Disqus