cerrar-sesion editar-perfil marker video calendario monitor periodico fax rss twitter facebook google-plus linkedin alarma circulo-derecha abajo derecha izquierda mover-vertical candado usuario email lupa exito mapa email2 telefono etiqueta

400410404. AJAX: Elección de la plataforma que encaje

Escrito por Redacción en Tema de portada
no hay comentarios Haz tu comentario
Imagen de logotipo de facebook Imagen de logotipo de Twitter Imagen de Logotipo de Google+ Imagen de logotipo de Linkedin

En el 2006, la compañía de servicios financieros T. Rowe Price concibió un nuevo lanzamiento de su sitio web para planes de jubilación financiados por la empresa. Como miles de participantes accedían cada hora al sitio web, la principal característica del nuevo lanzamiento era poner los datos más importantes a disposición de los “dedos” de los usuarios.

No obstante, los requisitos también indicaban claramente que el funcionamiento de la página no podía degradarse, y que los componentes de presentación visual adicionales se añadirían más adelante. En resumen, se tenía que crear un diseño nuevo y compacto que presentara más información financiera en una página de inicio del mismo tamaño que antes.

Nuestro equipo de desarrollo decidió que AJAX podría resolver la cuestión de las inmobiliarias. AJAX carga componentes de páginas web de forma asincrónica sin recargar a la vez toda la página. Esta carga dinámica se logra mediante CSS, DHTML, y los métodos XMLHttpRequest o ActiveXObject de JavaScript. Estas funciones se pueden usar directamente, o mediante plataformas AJAX, que proporcionan widgets listos para usar y que funcionan en la mayoría de los navegadores.


Había varias plataformas AJAX disponibles y teníamos que elegir la más adecuada para nuestro proyecto – un proceso que necesitaba una importante cantidad de investigación y comprobación. Por ejemplo, entre nuestros requisitos se incluía soporte permanente para una variedad de navegadores y una capacidad de uso que se tenía que mantener.

Nos documentamos, examinamos varias bibliotecas AJAX y realizamos comprobaciones de navegador y carga durante todo el proyecto. El nuevo sitio web para planes de jubilación basado en AJAX se desplegó para su producción a mediados de diciembre de 2006. Hasta la fecha, hemos recibido excelentes comentarios y confiamos en que el lector pueda beneficiarse del proceso que empleamos para evaluar las bibliotecas AJAX y desarrollar nuestra primera aplicación capacitada para AJAX.

Evaluación de plataformas AJAX

Para iniciar nuestro proceso de evaluación, seleccionamos para evaluar cinco plataformas AJAX Open-Source:
– Dojo 0.3.1 (www.dojotoolkit.org).
– Prototype y Scriptaculous 1.4 (www.prototypejs.org/script.aculo.us).
– Direct Web Reporting 1.0 (www.getahead.org/dwr).
– Yahoo! User Interface Library 0.11.1 (developer.yahoo.com/yui).
– Google Web Toolkit 1.0 (code.google.com/webtoolkit).

A continuación, limitamos las plataformas a aquellas que encajan sin fisuras en nuestro desarrollo y nuestros entornos de despliegue. El sitio web del plan de jubilación es alimentado por un servidor de gestión de contenidos con WebSphere Application Server de IBM (www-306.ibm.com/software/webservers/appserv/was) para reproducir Páginas de Servidor de Java. Los ficheros estáticos, incluido el de JavaScript, las hojas de estilos, y las imágenes están servidas por el servidor de gestión de contenidos.

Entre las cinco plataformas AJAX , Dojo, Prototype/Scriptaculous, y YUI (Yahoo User Interface) eran puras bibliotecas JavaScript y funcionaban bien en nuestro entorno.

(Andrew Turner es arquitecto de aplicaciones con T. Rowe Price; Chao Wang es asesor de Sogeti USA LLC, que actualmente trabaja para T. Rowe Price. Se puede contactar con ellos en: [andrew_turner@troweprice.com )]

DWR es una plataforma AJAX de Java que genera de forma dinámica JavaScript basado en clases Java desde el servidor de aplicaciones. Los métodos Java se invocan desde páginas web. Por desgracia esto no encajaba en nuestra arquitectura de servidor para la gestión de contenidos. Como se necesitaba un parche a medida para hacerlo funcionar en nuestro entorno, decidimos que DWR no era una buena solución.

GWT es una plataforma AJAX basada en Java que nos permite escribir componentes de IU front-end, y a continuación usar el compilador GWT para convertirlos en ficheros HTML y JavaScript.

El modelo de programación de GWT tampoco encajaba bien con nuestro entorno de desarrollo porque nuestro equipo estaba dividido entre desarrolladores de IU y desarrolladores de back-end de Java. Además, el código HTML/JavaScript que se generase sería difícil de cambiar si nos surgían problemas con el navegador. Por último, para compilar la aplicación con GWT teníamos que aprender nuevas API de Java – lo que no era nada conveniente teniendo en cuenta nuestras limitaciones de tiempo y presupuesto.

La compilación de prototipos

Una vez que restringimos nuestro campo de acción a tres bibliotecas AJAX de JavaScript puro (Dojo, Prototype/Scriptaculous, and YUI), nuestro siguiente paso fue crear prototipos de trabajo con cada una de las bibliotecas.

Nuestro objetivo primordial en la creación de dichos prototipos era obtener experiencia propia con cada una de las plataformas para así entender cómo satisfacían nuestras necesidades para el proyecto en cuestión. Un segundo objetivo era tener demos de trabajo para así poder realizar pruebas de navegador y de funcionamiento.

Básicamente, el diseño de la nueva página de inicio necesitaba dos componentes visuales:
– Hubs, que son bloques HTML dinámicos con barras de títulos (Figura 1)
– Paneles de Etiquetas, que muestran múltiples áreas de visualización mediante un menú de etiquetas (Figura 2).

Como ninguna de las tres plataformas contenía el código exacto para un widget hub, tuvimos que escribir código a medida. Por suerte, Dojo sí tiene un widget denominado TitlePane que puede ser personalizado para cargar contenido de forma dinámica. Además, sólo queríamos el icono (no toda la barra de títulos) para poder expandir y comprimir. TitlePanel.js y titlePanel.html (disponibles online, en www.ddj.com) son módulos de código Dojo personalizados que hacen justamente eso.

((DWR es una plataforma AJAX de Java que genera de forma dinámica JavaScript basado en clases Java desde el servidor de aplicaciones. Los métodos Java se invocan desde páginas web))

Para YUI, inicialmente consideramos la posibilidad de extender el objeto Module, pero al final decidimos no hacerlo por el aumento en tamaño y complejidad del fichero JavaScript. Una vez más, escribimos un objeto Hub a medida; véase Hub_YUI.js (disponible online). Por último, Prototype necesitaba una actualización similar a la de YUI (véase Hub_prototype.js)

El widget TabContainer de Dojo estaba más próximo a lo que necesitábamos y sólo requería de actualizaciones en el estilo. Sin embargo, ni YUI ni Prototype tenían el artilugio exacto de Panel de Etiquetas que necesitábamos. Por tanto, añadimos funciones de JavaScript para implementar el panel de Etiquetas mediante el Hub. En este punto, teníamos un código común entre YUI y Prototype, así que el código escrito para soportar el Panel de Etiquetas de YUI también soportaba la demo de Prototype.

Otras cuestiones

Las tecnologías AJAX nos permiten cargar de forma asincrónica datos XML, JSON o HTML en una página web. Elegimos cargar HTML (JSP en nuestro entorno) en parte porque es la forma más sencilla de empezar con AJAX.

En los tres prototipos, JavaScript se comprimió para reducir el tamaño de la descarga. Utilizamos la herramienta de compresión Dojo para crear una compilación a medida, que incluía widgets específicos y código dependiente. YUI proporciona una versión comprimida de ficheros JavaScript listos para su despliegue. Comprimimos nuestra biblioteca Prototype con la herramienta de compresores de Dojo.

La comprobación de navegadores es un aspecto importante de la comprobación general. Nosotros preferimos completar la comprobación de navegadores en la primera parte del proceso, antes de tomar la decisión final sobre la biblioteca AJAX que íbamos a utilizar.


Con este objetivo, nos asociamos con nuestro Servicio de Ayuda para completar las pruebas de navegadores en cada uno de los tres prototipos de página. La prueba de navegadores incluía una larga lista de navegadores – IE, Netscape, Firefox, y Safari, entre otros – tanto para Windows como para Mac. Conviene observar que nuestra lista incluía algunos navegadores que no estaban en la lista de los aprobados para cada biblioteca AJAX. Al cabo de un tiempo, logramos resolver cada problema que encontrábamos durante la prueba con un navegador, y el proceso de comprobaciones resultó más bien una actividad de aprendizaje.

La comprobación del funcionamiento es un ingrediente clave para el éxito del sitio web. Los clientes vienen a nuestra web para lograr un objetivo con eficacia, no para explorar unas atractivas tecnologías. Para medir el funcionamiento, empleamos un sistema comercial de comprobación de funcionamiento de webs. A menudo completamos la comprobación del funcionamiento del sitio web cuando un nuevo lanzamiento afecta por primera vez la garantía de calidad. No obstante, para este proyecto, realizamos pruebas de funcionamiento al principio, para ayudarnos a seleccionar la biblioteca AJAX adecuada.

((La prueba de navegadores incluía una larga lista de navegadores – IE, Netscape, Firefox, y Safari, entre otros – tanto para Windows como para Mac))

En primer lugar, utilizamos el sistema de comprobación del funcionamiento para registrar la ruta de un usuario a través del sitio web que estamos comprobando. Definimos la ruta primaria como carga de la página de inicio sin abrir ninguna etiqueta o pinchar en ningún enlace. A continuación, utilizamos el sistema de comprobación de prestaciones para volver a probar la navegación por el sitio web mediante distintas velocidades de conexión. Por último, se compararon los tiempos medios de respuesta.

Cuanto más pequeña es la huella de la plataforma utilizada, menor es la degradación de las prestaciones. Los tamaños totales de los ficheros JavaScript comprimidos que necesitaban YUI (22K) y Prototype (32K) son mucho más pequeños que el único fichero JavaScript de Dojo, que es de unos 200K. Las tres bibliotecas funcionaron bien con una conexión de gran velocidad; no obstante, los prototipos de YUI y de Prototype/ Scriptaculous funcionaron de forma más rápida con conexiones de marcado de 56K.

((Nuestro equipo de desarrollo decidió que AJAX podría resolver la cuestión de las inmobiliarias. AJAX carga componentes de páginas web de forma asincrónica sin recargar a la vez toda la página))

Los resultados de esta prueba nos dieron una idea aproximada de cómo afectaba la tecnología de AJAX al funcionamiento de un sitio. Al final, dudábamos sobre si usar o no Dojo por el impacto en los usuarios de marcado. Dicho lo cual, es probable que otras versiones más recientes de estas bibliotecas puedan producir resultados diferentes. Más aún, nuestros resultados se vieron afectados por nuestra selección de widgets y técnica de compresión.

En una etapa posterior del ciclo de vida del software realizamos otras pruebas de funcionamiento y navegador en el lanzamiento durante el proceso de garantía de calidad. Dado el trabajo que habíamos realizado antes, nos satisfizo ver que no teníamos que abordar ningún problema con el funcionamiento o el navegador durante la ronda final de comprobaciones.

Comparación de la facilidad de desarrollo

A lo largo del proceso de compilación y comprobación de prototipos con cada una de las plataformas AJAX, fuimos consiguiendo una buena comprensión sobre cómo trabajar con cada plataforma, y los puntos fuertes y los débiles de cada una de ellas.

En términos generales, Dojo ofrece más características y widgets HTML que YUI y Prototype. No obstante, la personalización del widget de Dojo requiere algo de esfuerzo. Cada widget requiere uno o más ficheros JavaScript y posiblemente un fichero de plantillas HTML, imágenes y una hoja de estilos. Los estilos van de alguna forma ligados a las plantillas de JavaScript y HTML. Si la plantilla para compilar el widget es distinta al diseño del que partíamos, es probable que lleve algo de tiempo personalizarlo. Esto nos ocurrió cuando usamos el widget TabContainer de HTML.

((Como desarrolladores, también estábamos preocupados por la facilidad de uso con cada una de las plataformas AJAX))

A ninguno de nuestros desarrolladores de Java se les da bien la hoja de estilos, y tuvimos que recurrir a nuestro diseñador gráfico para cambiar el estilo por defecto para que el widget se adecuara a nuestras necesidades. Esto no es problema con YUI o Protptype porque sus estilos están separados del comportamiento dinámico del hub.

Como desarrolladores, también estábamos preocupados por la facilidad de uso con cada una de las plataformas AJAX. Esto tiene relación con lo bien que esté documentada la plataforma, si hay ejemplos que se pueden probar inmediatamente, y lo sencillo que resulte entender el código fuente. Las tres demos necesitaron de toda nuestra experiencia sobre JavaScript. Los conocimientos sobre JavaScript es algo a considerar cuando los equipos empiezan con su primera implementación de AJAX.

Nosotros echamos una ojeada al código fuente de cada plataforma y nos pareció que YUI era más fácil de entender porque tiene un código bien documentado y tiene unas guías prácticas bien detalladas desde el sitio web de Yahoo. Cuando estábamos realizando este proyecto de desarrollo, tanto Dojo como Prototype carecían de documentación completa y tuvimos que intentar compilar nuestros propios prototipos. Al final, YUI destaca como la más fácil para trabajar con ella.

La decisión final

Con varios criterios en la mano, la tarea siguiente era decidir qué biblioteca AJAX usar. Para garantizar una decisión objetiva, utilizamos la matiz de decisiones de la Tabla 1. Los criterios incluían disponibilidad de widgets, mantenibilidad tanto por el especialista de la IU como por el desarrollador de Java, tamaño de la descarga al navegador, y documentación. Recomendamos que cada cual elabore su lista, ya que los criterios pueden ser distintos. Nuestro equipo de desarrollo se decantó por la Biblioteca Interfaz de Usuario de Yahoo! Y a la larga, nuestra decisión funcionó bien con este y otros proyectos. DDJ

||
|Criterios
|Peso (5 a 1)
|Puntuación (5 a 1)
|Puntuaciones ponderadas
|
|
|
|Disponibilidad de Widgets
|3
|D 5
|D 15
|
|
|
|Y 4
|Y 12
|
|
|
|P 3
|P 9
|
|Facilidad de mantenimiento
|4
|D 3
|D12
|
|
|
|Y 5
|Y 20
|
|
|
|P 4
|P 16
|
|Tamaño de descarga al cliente
|5
|D 3
|D 15
|
|
|
|Y 5
|Y 25
|
|
|
|P 4
|P 20
|
|Documentación
|4
|D 3
|D 12
|
|
|
|Y 5
|Y 20
|
|
|
|P 3
|P 12|

Tabla 1. Matriz de decisiones Dojo=54, YUI=77, y Prototype=57.

Etiquetas

Noticias relacionadas

Comentarios

No hay comentarios.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Debes haber iniciado sesión para comentar una noticia.