Cuando implementamos una aplicación Web, a menudo necesitamos
escribir partes de código que han de ser ejecutadas en el
navegador. Este código debe ser escrito en Javascript, y es aquí
cuando nos puede ser útil la ayuda de una librería de código en
este lenguaje. Es por esto que en los últimos años han comenzado a
aparecer librerías que han cambiado la forma de incorporar código
Javascript a una aplicación Web: ya no necesitamos escribir todo el
código nosotros mismos, porque existen multitud de recursos que nos
ayudarán a programar más rápida y fácilmente de lo que nunca antes
había sido posible. Estas librerías son recursos que podremos
conectar a nuestros frameworks de desarrollo y que ofrecen
soluciones a los problemas más comunes con los que se encuentra un
programador Web a la hora de escribir código Javascript.
Eligiendo la librería que más nos conviene
La mayoría de las librerías Javascript más populares comparten
muchas de sus funcionalidades. Es por eso que elegir qué librería
es la que mejor se adapta a nuestras necesidades no siempre es
fácil. Estos son algunos de los criterios que no podemos dejar de
tener en cuenta a la hora de elegir nuestra librería:
• ¿Dispone de todas las funcionalidades que necesitamos?
Es importante que la librería que elijamos tenga todas las
funcionalidades que queramos utilizar. Muchas de las librerías de
Javascript comparten el mismo espacio de nombres (como $()), lo que
hace que no sea fácil combinar sus funcionalidades. Además, al
combinar librerías nos arriesgamos a tener código redundante en
nuestra aplicación.
• ¿Dispone de más funcionalidades de las que realmente
necesitamos?
Cuantas más funcionalidades tenga una librería, es de esperar que
ésta contenga más líneas de código y por tanto sea más costosa de
descargar. Muchas de las librerías actuales disponen de versiones
"ligeras" e incluso algunas están divididas en módulos, lo que nos
permite incluir en nuestra aplicación solo aquellas funcionalidades
en las que estemos realmente interesados.
• ¿Es compatible con todos los navegadores?
Las librerías Javascript suelen funcionar independientemente del
navegador en que se ejecuten. Esto es una gran ventaja, ya que
permite al programador olvidarse de las diferencias entre
navegadores y escribir el código con la certeza de que funcionará
correctamente en todos los navegadores que la librería
soporte.
• ¿Dispone de un buen soporte por parte de la comunidad?
Una comunidad de usuarios y desarrolladores activa se traduce en
menos errores y un código de mayor calidad, además de constituir un
valioso recurso al que recurrir en caso de necesitar ayuda.
• ¿Dispone de documentación?
Una buena documentación y un lugar donde encontrar ejemplos de uso
resulta fundamental para entender, y por tanto utilizar
correctamente, cualquier librería.
• ¿Tiene la licencia que nos interesa?
Que dispongamos del código fuente de una librería no significa que
podamos hacer con él lo que nosotros queramos. La mayoría de estas
librerías son libres, pero otras exigen que cualquier código que se
escriba usando alguna de sus funcionalidades se libere bajo la
misma licencia que ellas.
¿Qué tipo de funcionalidades me pueden aportar?
Existen muchas librerías, y cada una de ellas tiene sus propias
particularidades. Existen librerías con funcionalidades muy
específicas, y otras que pretenden proporcionar herramientas para
facilitar las tareas más cotidianas de un programador Web. A las
librerías de este último tipo se les llama librerías
multipropósito, y en el siguiente apartado vamos a ver cuáles son
las funcionalidades más comunes que éstas suelen incorporar.
Selección de elementos de una página
Una de las características más útiles de las librerías
multipropósito son los selectores de elementos. Estos selectores
son una potente herramienta que nos permite seleccionar elementos
de una página de forma simple y eficiente. Realizar selecciones
complejas utilizando las funciones nativas que Javascript nos
ofrece puede ser una tarea realmente tediosa. Por ejemplo, si
quisiéramos obtener todos los controles RadioButton seleccionados
en una página, primero tendríamos que obtener todos los elementos
de tipo <input> utilizando la función getElementByTagName, y
luego iterar sobre estos elementos, seleccionando los que sean de
tipo radio y que tengan el atributo checked.
En cambio, utilizando una librería como jQuery
(http://www.jquery.com), el código necesario se simplificaría
a:
Otro ejemplo: supongamos que queremos seleccionar todos elementos
de tipo párrafo que tengan en su atributo class el valor class1 y
que además contengan un elemento de tipo hiperenlace. En Javascript
tradicional, tendríamos que seleccionar todos los elementos de tipo
<p> mediante la función getElementByTagName, iterar sobre
éstos para seleccionar los que tengan el valor class1 en su
atributo class, y por último recorrer todos los nodos hijos de
estos últimos para comprobar que tengan un hijo de tipo <a>.
Utilizando jQuery, nos bastaría con escribir la siguiente
línea:
Estos dos ejemplos son una pequeña muestra de lo que los selectores
de las librerías multipropósito pueden simplificar nuestro código,
pero éstas todavía pueden ofrecernos mucho más. La combinación del
lenguaje XPath y los selectores CSS nos permiten realizar
selecciones mediante prácticamente cualquier criterio que se nos
ocurra, y esto es algo que también nos ofrecen librerías como
jQuery.
Comunicación asíncrona entre cliente-servidor (AJAX)
Resulta casi imposible hablar sobre tecnología Web sin hablar sobre
AJAX. AJAX es una combinación de tecnologías ya existentes, y
éstas, como no, tienen los mismos problemas de incompatibilidad
entre navegadores que siempre tuvieron. Las librerías Javascript
nos ayudan a solucionar estos problemas, además de simplificar
nuestras llamadas desde cliente hacia el servidor.
Probablemente el objeto AJAX más popular de entre todas las
librerías Javascript es el que nos ofrece Prototype
(http://www.prototypejs.org). Prototype.Ajax funciona en todos los
navegadores modernos y nos ofrece métodos que nos permiten trabajar
con AJAX de una forma simple:
• El método Ajax.Request realiza una petición simple al
servidor:
• Con el método Ajax.Updater podemos incrustar directamente el
contenido devuelto por la petición AJAX a un nodo de nuestra
página. La siguiente llamada insertaría el resultado de la petición
en el nodo "node":
• Ajax.PeriodicalUpdater realiza peticiones periódicas al servidor,
e inserta el contenido que obtiene en el nodo de nuestra página que
indiquemos:
El parámetro frecuency hace referencia al intervalo de tiempo
entre llamadas, mientras que el parámetro decay es el factor por el
cual se multiplica la frecuencia cada vez que el contenido de la
respuesta sea el mismo. De esta forma evitamos sobrecargar al
servidor con un número excesivo de peticiones.
Gestión de eventos
La gestión de eventos es otra de las tareas que puede resultar
complicada debido a las incompatibilidades entre navegadores:
mientras que Internet Explorer utiliza su propio método attachEvent
para asociar eventos a elementos de una página, el resto de
navegadores utiliza el método addEventListener. Las librerías
Javascript nos ahorran este tipo de problemas y nos permiten tratar
eventos de forma más intuitiva. Como ejemplo, podemos ver cómo
añadir eventos a un elemento <textarea> utilizando la
librería mootools (http://www.mootools.net).
En el ejemplo anterior vemos cómo asociar múltiples eventos a un
elemento mediante el método addEvents, cómo crear eventos propios,
y cómo lanzar eventos mediante fireEvent. Si escribimos la palabra
"hello" en el cuadro de texto se lanzará nuestro evento propio, al
que hemos llamado "burn", mientras que si escribimos la palabra
"delayed" obtendremos el mismo resultado, con la diferencia que el
evento se lanzará al cabo de 1000 ms.
Y mucho más…
La selección de elementos, AJAX y la gestión de eventos en cliente
son solo una parte de lo que las librerías Javascript nos pueden
ofrecer. Tareas tan complejas como añadir efectos visuales a
nuestra página o implementar un sistema de arrastrar y soltar se
simplifican enormemente utilizando librerías como jQuery, Prototype
o mootools. Es por esto que resulta altamente recomendable conocer
las posibilidades de estas librerías antes de embarcarse en
cualquier proyecto Web.