Dhtml logoNo hace mucho tiempo, finales de los años noventa, era común pagar por pequeños módulos en JavaScript que nos permitían crear un sencillo menú y poco más. Con el tiempo, aparecieron los primeros componentes aislados Open Source, calendarios, listas de selección y otros componentes de diferentes autores, lo cual implicaba diferente estética y diferente forma de interactuar con los usuarios. Afortunadamente por estás fechas muchos desarrolladores ya eran expertos programadores de páginas DHTML y añadían sus propios métodos y funciones para dar a todo el proyecto una apariencia común.

Todo cambio con la aparición de AJAX y las aplicaciones Web 2.0, JavaScript pasaba a ser el pilar de las nuevas aplicaciones Web. Pero pensándolo bien, más que mejorar las cosas, ciertamente empeoraron. El mantenimiento del código JavaScript, de por si tedioso, paso a ser algo inhumano. No había directrices o metodologías claras para el desarrollo, cada desarrollador generaba sus métodos, clases siguiendo sus propios patrones. El resultado fue aun peor: capas de presentación no estándar, difíciles de mantener, normalmente con problemas de seguridad (esta es la otra cara de AJAX, pero este es otro tema) y muchas veces sin documentar o comentarios insuficientes en el código (algo bastante común en todos los módulos .js, por varios motivos y algunos de ellos bastante lógicos).

En este artículo mostramos las diferentes soluciones que han surgido para simplificar los desarrollos AJAX. Se trata de librerías normalmente OpenSource (Hasta ahora Microsoft Atlas y EXT no lo son, o sólo lo son en parte) que nos permiten tener una base sólida y validada a partir de la cual poder construir nuestras aplicaciones. Gran parte del presente artículo proviene del artículo de Justin Silverton (Top 5 JavaScript FrameWorks) el cual he traducido, comentado y completado para crear los 12 FrameWorks para JavaScript. El orden en el que aparecen no indica que unos sean mejor que otros, de hecho muchos de ellos son muy parecidos y tienen una madurez similar. Si me he olvidado de algun FrameWork o no he considerado todas sus bondades por favor dejar un comentario para que todos lo tengamos en cuenta. Tampoco he intentado que este post sea un manual de cada uno de los FameWorks, ya hay muchos y muy buenos, el objetivo de este post es tener un recopilatorio donde encontrar las características más importantes de cada uno de ellos.

Siempre es importante estar al día sobre todo si trabajáis dentro de la sociedad de las tecnologías de la información, y creo que merece la pena dedicar un poco de nuestro tiempo revisando las diferentes librerías que existen. Escribir aplicaciones dinámicas hoy en día es bastante tedioso, la mayor parte del tiempo nos lo pasamos intentando resolver errores e intentando solventar de alguna forma las incompatibilidades entre los diferentes navegadores y plataformas. La falta de modularidad de JavaScript hace difícil y frágil el compartir, testear o reusar componentes. Usar un FrameWork JavaScript nos permite simplificar el proceso de creación de páginas Web dinámicas y ahorrarnos múltiples dolores de cabeza. Por ultimo, sólo recordaros que la integración siempre tiene un coste :-)

1.- Yahoo! User Interface Library

Yui LogoYahoo! User Interface (YUI) Library es un conjunto de utilidades y controles escritos en JavaScript para construir aplicaciones Web usando técnicas como DOM scripting, DHTML y AJAX. La librería YUI también incluye en recursos CSS. Todos los componentes en la librería YUI son Open Source bajo licencia BSD y son gratuitos para todos los usuarios.

Características

Tiene dos tipos diferentes de componentes: utilidades y controles. Las utilidades de YUI simplifican el desarrollo de soluciones válidas para diferentes navegadores, creando una capa de abstracción a base de DOM scripting y añadiendo a las aplicaciones Web un soporte DHTML y AJAX sencillo. Los controles de YUI proporcionan elementos visuales prediseñados con una alta interactividad para tus páginas Web. Estos elementos son creados y manejados totalmente en la capa cliente (browser) y no requieren que la página sea refrescada.

Utilidades disponibles:

  • Animation: Crea “efectos cinematograficos” en tus páginas a base de animar la posición, el tamaño, la opacidad u otras características de los elementos de la página. Estos efectos pueden ser usados para llamar la atención de los usuarios sobre ciertas partes de la página y permitir un interfaz mucho mas amigable e intuitivo.
  • Browser History Manager: Los desarrolladores de aplicaciones Web muchas veces necesitan tener control sobre el estado de las páginas Web, especialmente es interesante controlar el efecto que causa sobre sus aplicaciones si el usuario pulsar el botón “Atrás” de su navegador. Browser History Manager proporciona punteros a páginas (contienen todas sus variables de estado) y control sobre el botón “Atrás” del navegador para las aplicaciones Web.
  • Connection Manager: Está utilidad nos ayuda a gestionar los eventos XMLHttpRequest (normalmente conocido como AJAX). También incluye un completo soporte para realizar envíos de formularios (form posts), control de errores (error handling) y callbacks. Por último, Connection Manager también soporta el envío de ficheros.
  • DataSource Utility: Proporciona un interfaz para recibir datos desde arrays, servicios XHR y funciones personalizadas con soporte de caché e integradas con la utilidad de Connection Manager.
  • Dom Collection: Es una colección de objetos que permiten simplificar las tareas communes de DOM-scripting, incluyendo el posicionamiento de elementos y la gestión del estilo CSS.
  • Drag & Drop: Permite crear objetos “arrastrables” (“draggable”) que pueden ser cogidos y soltados en cualquier parte de la página. La utilidad permite trabajar de forma sencilla y transparente con todos los navegadores soportados.

Controles disponibles:

  • AutoComplete: Permite interactuar con el usuario al introducir valores en los campos de texto. El control proporciona una lista de valores sugeridos basados en diferentes tipos de orígenes y formatos. Soporta valores vía XMLHttpRequest.
  • Button Control: Proporciona diferentes elementos visuales (“checkbox”, “radio button”, “submit” y “menu-button”) que son mucho más visuales y además son mucho más configurables mediante programa.
  • Calendar: Es un control grafico para seleccionar la fecha.
  • Container: La familia de controles Container soporta varios patrones de ventanas DHTML incluidos Tooltip, Panel, Dialog y SimpleDialog. Los controles Module y Overlay sirven de plataforma para implementar tanto controles adicionales como patrones de ventanas DHTML personalizados.
  • DataTable Control: Añade funciones a la tabla HTML, permitiendo ordenar, redimensionar las columnas, edición de datos y varias cosas más.
  • Logger: Proporciona una manera rápida y sencilla de escribir mensajes de log en una consola de pantalla (con la extensión FireBug de Firefox, o con la consola JavaScript de Safari). El resto de módulos de librería YUI están integrados con Logger para mostrar los mensajes de error y depuración.
  • Menu: Con el control Menu y sólo unas poscas líneas de código podemos generar impactantes menús flotantes.

Descarga y más información en este enlace: http://developer.yahoo.com/yui/

2.- Prototype

Prototype logoPrototype es un JavaScript FrameWork que facilita el desarrollo de aplicaciones Web dinámicas.

Proporciona un único y sencillo conjunto de herramientas para el desarrollo de clases AJAX. La mayoría de los desarrolladores Web están empezando a seleccionar Prototype como base para todos sus desarrollos Web.

Características:

  • Desarrollo sencillo de aplicaciones AJAX: Además de las llamadas sencillas, este modulo también proporciona una forma sencilla de trabajar con el código JavaScript envíado por el servidor. También proporciona clases para facilitar las tareas de polling.
  • Extensión de DOM: Añade varios métodos a los elementos retornados con la función $(). Por ejemplo, puedes realizar la siguiente operación:
  • $(’comentarios’).addClassName(’activo’).show() para obtener el elemento con el ID ‘comentarios’, cambiar el nombre de su clase y mostrarlo (si estaba oculto)
  • Utilidades JSON (JavaScript Object Notation): JSON es una alternativa más ligera que las llamadas XML realizadas con AJAX.

Descarga y más información en este enlace: http://www.prototypejs.org/

3.- Rico

Rico LogoDiseñado para construir aplicaciones Web 2.0. Acaba de salir la versión 2.0 con interesantes novedades sobre todo en el control grid y en efectos de animación. Es OpenSource bajo licencia Apache 2.0.

Características:

  • Efectos de animación: Proporciona efectos de animación para realizar transiciones elegantes y transparentes para el usuario. Además las animaciones de Rico 2.0 pueden ser interrumpidas, pausadas, reiniciadas o incluso se aplicar otras animaciones sobre ellas.
  • Diseño: Rico permite generar de forma muy sencilla ciertos efectos cinematográficos y otros efectos visuales.
  • Drag And Drop: Rico incorpora uno de los interfaces más sencillos para incorporar capacidades de “arrastrar y soltar” en tus aplicaciones Web. Sólo con registrar un elemento HTML u objeto JavaScript como “draggable” y cualquier otro elemento HTML u objeto JavaScript como “drop zone” y Rico hará el resto.
  • Soporte AJAX: Rico incluye un sencillo interfaz para registrar controladores de peticiones AJAX y también elementos HTML u objetos JavaScript como objetos de respuesta AJAX. Varios elementos y/u objetos pueden ser actualizados con el resultado de una petición AJAX.

Descarga y más información en este enlace: http://openrico.org/rico/home.page

4.- Qooxdoo

Qooxdoo logoQooxdoo es uno de los FrameWorks JavaScript AJAX más sencillos e innovadores. Es Open Source bajo licencia dual LGPL/EPL. Incluye soporte para desarrollo profesional JavaScript, un GUI toolkit y comunicaciones cliente-servidor avanzadas.

Características:

  • Detección del cliente: qooxdoo reconoce y permite acceder a la información del navegador está siendo utilizado.
  • Capa de abstracción de navegador: Incluye una capa de abstracción que intenta abstrer las características especificas de cada navegador en una capa común. Esta característica simplifica el desarrollo en JavaScript, permitiendo acceder a estilos, posiciones (relativas a página, cliente y pantalla) y otras funciones básicas.
  • Implementación de propiedades avanzadas: qooxdoo soporta “verdaderas” propiedades para objetos. Cada clase puede definir propiedades que tendrán las instancias creadas. Con addProperty se añadirán de forma automática las funciones get y set.
  • Gestión de eventos: Integra su propia interfaz de eventos, incluyendo funciones para dar de alto y de baja eventos. En adición, incorpora la posibilidad de llamar a la función desde cualquier contexto y es independiente del navegador utilizado.

Descarga y más información en este enlace: http://qooxdoo.org/

5.- Dojo

Dojo logoEl FrameWork JavaScript Dojo permite añadir características dinámicas fácilmente a las páginas Web. Puedes utilizar los componentes que incorpora Dojo para mejorar la usabilidad y funcionabilidad. Puedes construir interfaces con degradados de color, widges y transacciones animadas de forma rápida y sencilla. También puedes usar el API de bajo nivel y capas compatibles para escribir scripts portables y simplificar aquellos que son complejos.

Dojo también proporciona un potente entorno de programación incorporando un sistema de control de eventos, un API E/S y un lenguaje estándar mejorado. Puedes usar las herramientas de Dojo para construir unidades de test para tu código JavaScript y optimizar el desarrollo.

Características:

  • Multiple Points Of Entry: Es un concepto fundamental en el diseño de Dojo. Este término significa que los usuarios pueden empezar a utilizar Dojo al nivel que ellos deseen.
  • Independencia del interpretador: Asegurar soporte para el mayor número de plataformas.
  • Unifica varios codebases: incorpora en varios FrameWorks (nWidgets, Burstlib, y f(m)).

Descarga y más información en este enlace: http://www.dojotoolkit.org/

6.- Script.aculo.us

Script.aculo.us logoRealmente es un add-on para el framewok Prototype, pero merece la pena tenerlo en cuenta. Script.aculo.us te proporciona un interfaz sencillo y multi-navegador que permite crear rápidamente aplicaciones Web mucho más atractivas.

Características:

Descarga y más información en este enlace: http://script.aculo.us/

7.- Atlas

Atlas logo Casi literalmente, según la página Web, es un FrameWork gratuito para ASP.NET, permite desarrollar rápidamente y eficientemente Web más personalizadas e interactivas a través de todos los navegadores más populares. Parece una sólida elección para los desarrolladores que usen tecnologías Microsoft ya que se integra dentro del FrameWork ASP.NET 2.0, otra cuestión es la licencia de uso y las posibilidades de ampliación que no quedan claras.Características:

  • Atlas Client Script FrameWork: Es el módulo de cliente. Podrá ejecutarse en cualquier navegador y tendrá la capacidad de establecer comunicación con cualquier servidor web.
  • ASP.NET Server Controls for Atlas: Las aplicaciones ASP.NET dispondrán de componentes con implementaciones específicas para el intercambio de datos con el módulo de cliente de Atlas.
  • ASP.NET Web Services Integration: Al igual que con las aplicaciones, los sistemas que implementen Altas podrán utilizar los servicios Web basados en XML.
  • ASP.NET Building Block Services for Atlas: Se trata de módulos predefinidos para integrar en aplicaciones ASP.NET 2.0 de forma que implementen de forma rápida y sencilla servicios comunes tales como la identificación de usuarios, gestión de perfiles, etc.
  • Client Building Block Services: De igual forma, para el lenguaje del navegador estarán disponibles aplicaciones parametrizadas que permitirán procesos como el acceso a la caché del navegador o la interconexión entre aplicaciones de cliente.

Descarga y más información en este enlace: http://ajax.asp.net/

8.- Trimpath
Trimpath logoNo es un FrameWork, simplemente son varios componentes aislados, pero muy interesantes y por eso lo incluyo en este listado. Tiene un componente JavaScript para edición de hojas de cálculo que merece la pena ver.

Descarga y más información en este enlace: http://trimpath.com/

9.- GWT
Google code logoEs muy bueno, pero todavía no tiene todos los efectos visuales que desearíamos en un buen FrameWork, pero cuidado que cuando Google se propone algo arrasa.

Google Web toolkit (GWT) es un FrameWork OpenSource para desarrollo en Java que permite escribir aplicaciones en AJAX como Google Maps o Gmail de forma sencilla para los desarrolladores, sin necesidad de tener conocimientos de las características especiales de cada navegador. Realmente, no es un FrameWork JavaScript puro, pero permite diseñar un interfaz en Java y que este sea traducido de forma transparente a JavaScript y HTML.

Características:

  • Componentes de interfaz de usuario dinámicos y reusables.
  • RPC realmente sencillo, GWT automáticamente serializa y desserializa las llamadas desde el servidor y el cliente.
  • Gestión del histórico del navegador.
  • Depuración real durante el desarrollo igual que un programa Java, en producción no es posible, el código se convierte en JavaScript.
  • Compatibilidad con los navegadores mas importantes: IE, Firefox, Mozilla, Safari y Opera.
  • Integración con JUnit.
  • I18n (internationalization), simplifica la gestión de una página Web en varios idiomas.
  • Total control, si GWT no reune todos los requisitos que necesitas, puedes incluir código JavaScript usando JSNI (JavaScript Native Interface).
  • Es Open Source (bajo licencia Apache 2.0)

Descarga y más información en este enlace: http://code.google.com/webtoolkit

10.- MooTools

Mootools logoMootools es un JavaScript FrameWork orientado a objetos, compacto, modular y diseñado para escribir código compatible y extensible de forma rápida y sencilla. MooTools permite realizar el trabajo deforma eficaz y eficiente.

Características:

  • Core: Funciones principales, basado en prototype.
  • Class: Permite la creación de clases reutilizables.
  • Native: Simplifica el trabajo y definición de arrays, funciones, tipos de datos (numéricos y cadena) y elementos DOM.
  • Element: Funciones adicionales para trabajar con elementos DOM (selección, filtros, formularios, eventos, dimensiones).
  • Window: funciones especificas para el objeto window (DomReady y cambio de dimensiones).
  • Remote: Simplifica el uso de AJAX, Cookies, Json.
  • Effects: Diferentes efectos de animación. Es parte de otro proyecto moo.fx (una librería de efectos gráficos realmente ligera, 30Kb, compatible tanto con mootolols como con prototype).
  • Drag: Funciones de drag and drop.
  • Plugins: Unas 10 utilidades adicionales (hash, scroller, sortables, tips,…)

La descarga del FrameWork, en la página del proyecto, permite incluir sólo aquellos elementos que queremos, de forma que podemos reducir drásticamente el número de ficheros .js que tendrán que bajarse los clientes.

Tanto MooTools como Moo.fx son OpenSource (MIT license).

Descarga y más información en este enlace: http://mootools.net/

11.- ExtJS

Ext logoExtJS empezó siendo un conjunto de librerías y extensiones para YUI (Yahoo! User Inteface). Con el tiempo se convirtió en un FrameWork independiente y a principios de 2007 se creo una compañía para comercializar y dar soporte del FrameWork Ext. De esta forma Ext tiene dos tipos de licencias, LGPL y comercial. Básicamente, podéis usar EXT para vuestros desarrollos, pero para obtener soporte deberéis tener una licencia comercial, podéis ver todos los detalles en aquí.

Características:

  • Ext.Element: Representa un elemento del árbol DOM. Muchas de las funciones de manipulación de los elementos tienen un parámetro opcional que permite realizar el cambio mediante un efecto de animación. El parámetro de animación puede ser un dato boleano o un objeto que incluye las opciones de la animación.
  • Ext.BorderLayout: Esta clase representa un diseño común para ser usado en aplicaciones de escritorio.
  • Ext.DomHelper: Utilidades para trabajar plantillas o DOM. Suporta el uso de DOM o fragmentos de HTML de forma transparente.
  • Ext.TabPanel: Un ligero contenedor de tabs.
  • Ext.UpdateManager: Proporciona soporte para actualización AJAX de los objetos Element.

Descarga y más información en este enlace: http://extjs.com/

12.- jQuery

jQuery logoSegún indican en la Web, jQuery es una librería JavaScript rápida y concisa que simplifica la forma de trabajar con documentos HTML, manejando eventos, realizando animaciones y añadiendo interacción AJAX en tus páginas Web. jQuery ha sido diseñado para cambiar tu forma de escribir JavaScript.

En este punto tiene sencido decir, que no por ser el último que incluyo es peor que el resto, de hecho, es posiblemente el FrameWork que más fuerza está tomando y también tiene muchas papeletas para poder ser el mejor de todos ellos. Un indicador de su importancia es el número de aplicaciones Web 2.0 que usan esté FrameWork, por ejemplo, WordPress se ha pasado a JQuery en su última versión (versión 2.2).

Características:

  • jQuery Core: Principales funciones de jQuery ($, añadir plug-ins,…)¡
  • Selectors: jQuery selectors son una combinación de CSS 1-3, XPath, junto con funciones de código especiales que permiten que funcionen conjuntamente. De forma realmente sencilla podemos seleccionar diferentes elementos del árbol DOM mediante XPath. Ejemplo, la función jQuery(‘input[@name=email]’) selecciona el campo de texto con nombre igual a “email”.
  • Attributes: Permiten seleccionar, cambiar, leer, añadir y borrar los atributos de los elementos DOM de forma sencilla.
  • Traversing: Funciones de filtrado y búsqueda.
  • Manipulation: Funciones de inserción y modificación.
  • CSS: Funciones para el cambio de estilo.
  • Events: Control de eventos para elementos DOM.
  • Effects: Sencillos efectos visuales. Sino fuera por los plugins que hay desarrollados para jQuery quedaría muy por debajo de otros FrameWorks en este punto.
  • Ajax: Impresionante!, jQuery(‘div#ejem’).load(‘hoja.html’); este código realiza la petición de la página html y la carga en el div ejem. Pero si quieres realizar algo mas complejo también puedes mediante funciones y eventos específicos (ajaxStart, ajaxComplete, ajaxError, etc…)
  • Utilities: Otras funciones genéricas adicionales, permiten referenciar objetos sin problemas de espacios de nombres.

Otras de las características importantes de jQuery que merece la pena mencionar son:

  • Mejora la gestión del espacio de nombres, evitando el uso de variables globales.
  • Multitud de plugins disponibles que se integran y amplían las funciones de jQuery. A día de hoy podéis encontrar más de 100 plugins en el directorio de plugins para jQuery.

Descarga y más información en este enlace: http://jquery.com/

Be Sociable, Share!