DNM+ Online
dotnetmania 2.0
Frameworks para Javascript
Las técnicas de desarrollo en Javascript, así como los usos que se le dan a esta tecnología, han cambiado notablemente en los últimos años. Hoy en día, nos es difícil pensar que una aplicación Web moderna pueda prescindir de esta tecnología para finalidades tan diversas como la comunicación asíncrona entre cliente y servidor, la aplicación de efectos visuales a nuestro código HTML o mantener nuestro propio sistema de caché en el lado del cliente.

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.

blog comments powered by Disqus
autor
referencias