AJAX un nuevo acercamiento a Aplicaciones Web

Hace un tiempo AJAX parece ser la palabra de moda en el “mundo” del desarrollo de aplicaciones Web; de hecho muchos lo escuchan nombrar pero pocos saben que es realmente y, menos aún, saben en donde buscar información clara sobre que es esta nueva “maravilla” de la tecnología que Jesse James Garret publicó en un artículo en Inglés excelente que vale la pena traducir por completo.

¿Porque es tan interesante AJAX? Porque en realidad AJAX no es una tecnología, sino la unión de varias tecnologías que juntas pueden lograr cosas realmente impresionantes como GoogleMaps, Gmail el Outlook Web Access (ref) o algunas otras aplicaciones muy conocidas: AJAX, en resúmen, es el acrónimo para Asynchronous JavaScript + XML y el concepto es: Cargar y renderizar una página, luego mantenerse en esa página mientras scripts y rutinas van al servidor buscando, en background, los datos que son usados para actualizar la página solo re-renderizando la página y mostrando u ocultando porciones de la misma.

La traducción completa a continuación:

Ajax: Un Nuevo acercamiento a las Aplicaciones Web
Por Jesse James Garrett
February 18, 2005
Si algo del actual diseño de interacción puede ser llamado glamoroso, es crear Aplicaciones Web. Después de todo, ¿cuando fue la ultima vez que escuchaste a alguien hablar de diseño de interacción de un producto que no esté en la Web? (Okay, dejando de lado el iPod). Todos los nuevos proyectos cool e innovadores están online.

Dejando de lado esto, los diseñadores de interacción Web no pueden evitar sentirse envidiosos de nuestros colegas que crean software de escritorio. Las aplicaciones de escritorio tienen una riqueza y respuesta que parecía fuera del alcance en Internet. La misma simplicidad que ha permitido la rápida proliferación de la Web también crea una brecha entre las experiencias que podemos proveer y las experiencias que los usuarios pueden lograr de las aplicaciones de escritorio.

Esa brecha se está cerrando. Échenle una mirada a las Google Suggest. Mira la forma en que los términos sugeridos se van actualizando a medida que uno tipea casi instantáneamente. Ahora mire Google Maps. Hace zoom. Usen el cursor para agarrar el mapa y navegarlo un poco. Otra vez, todo sucede casi instantáneamente, sin esperar que las paginas se recarguen.

Google Suggest y Google Maps son dos ejemplos de un nuevo acercamiento a las aplicaciones Web, que nosotros en Adaptative Path hemos denominado AJAX. El nombre es una abreviación o acrónimo para Asynchronous JavaScript + XML, y ello representa un cambio fundamental en que es posible en la Web.

Definiendo Ajax
Ajax no es una tecnología. Es realmente muchas tecnologías, cada una floreciendo por su propio mérito, uniéndose en poderosas nuevas formas. AJAX incorpora:

– presentación basada en estándares usando XHTML y CSS;
– exhibición e interacción dinámicas usando el Document Object Model;
– Intercambio y manipulación de datos usando XML and XSLT;
– Recuperación de datos asincrónica usando XMLHttpRequest;
– y JavaScript poniendo todo junto.

El modelo clásico de aplicaciones Web funciona de esta forma: La mayoría de las acciones del usuario en la interfaz disparan un requerimiento HTTP al servidor web. El servidor efectúa un proceso (recopila información, procesa números, hablando con varios sistemas propietarios), y le devuelve una pagina HTLM al cliente. Este es un modelo adaptado del uso original de la Web como un medio hipertextual, pero como fans de “The Elements of User Experience” sabemos, lo que hace a la Web buena para el hipertexto, no la hace necesariamente buena para las aplicaciones de software.

Figura 1: El modelo tradicional para las aplicaciones Web (izq.) comparado con el modelo de AJAX (der.).

Este acercamiento tiene mucho sentido a nivel técnico, pero no lo tiene para una gran experiencia de usuario. Mientras el servidor esta haciendo lo suyo, que esta haciendo el usuario? Exacto, esperando. Y, en cada paso de la tarea, el usuario espera por mas.

Obviamente, si estuviéramos diseñando la Web desde cero para aplicaciones, no querríamos hacer esperar a los usuarios. Una vez que la interfaz esta cargada, porque la interacción del usuario debería detenerse cada vez que la aplicación necesita algo del servidor? De hecho, porque debería el usuario ver la aplicación yendo al servidor?

Como es diferente AJAX
Una aplicación AJAX elimina la naturaleza “arrancar-frenar- arrancar-frenar” de la interacción en la Web introduciendo un intermediario -un motor AJAX- entre el usuario y el servidor. Parecería que sumar una capa a la aplicación la haría menos reactiva, pero la verdad es lo contrario.

En vez de cargar un pagina Web, al inicio de la sesión, el navegador carga al motor AJAX (escrito en JavaScript y usualmente “sacado” en un frame oculto). Este motor es el responsable por renderizar la interfaz que el usuario ve y por comunicarse con el servidor en nombre del usuario. El motor AJAX permite que la interacción del usuario con la aplicación suceda asincrónicamente (independientemente de la comunicación con el servidor). Así el usuario nunca estará mirando una ventana en blanco del navegador y un icono de reloj de arena esperando a que el servidor haga algo.

Figura 2: El patrón de interacción sincrónica de una aplicación Web tradicional (arriba) comparada con el patrón asincrónico de una aplicación AJAX (abajo).

Cada acción de un usuario que normalmente generaría un requerimiento HTTP toma la forma de un llamado JavaScript al motor AJAX en vez de ese requerimiento. Cualquier respuesta a una acción del usuario que no requiera una viaje de vuelta al servidor (como una simple validación de datos, edición de datos en memoria, incluso algo de navegación) es manejado por su cuenta. Si el motor necesita algo del servidor para responder (sea enviando datos para procesar, cargar código adicional, o recuperando nuevos datos) hace esos pedidos asincrónicamente, usualmente usando XML, sin frenar la interacción del usuario con la aplicación.

Quien está usando Ajax
Google está haciendo una significativa inversión en el acercamiento Ajax. Todos los grandes productos que Google ha introducido en el ultimo año (Orkut, Gmail, la última versión de Google Groups, Google Suggest, y Google Maps ) son aplicaciones Ajax. (Para datos más técnicos de estas implementaciones Ajax, lean estos excelentes análisis de Gmail, Google Suggest, y Google Maps.) Otros están siguiendo la tendencia: muchas de las funciones que la gente ama en Flickr dependen de Ajax, y el motor de búsqueda de Amazon A9.com aplica tecnologías similares.

Estos proyectos demuestran que Ajax no es solo técnicamente importante, sino también prácticos para aplicaciones en el mundo real. Esta no es otra tecnología que solo trabaja en un laboratorio. Y las aplicaciones Ajax pueden ser de cualquier tamaño, de lo más simple, funciones simples como Google Suggest a las muy complejas y sofisticadas como Google Maps.

En Adaptive Path, estuvimos haciendo nuestro propio trabajo con Ajax en los últimos meses, y estamos descubriendo que solo raspamos la superficie de la rica interacción y respuesta que que las aplicaciones Ajax puede proveer. Ajax es un desarrollo importante para las aplicaciones Web, y su importancia solo va a crecer. Y como hay tantos desarrolladores que ya conocen como usar estas tecnologías, esperamos ver mas empresas y organizaciones siguiendo el liderazgo de Google en explotar la ventaja competitiva que Ajax provee.

Mirando adelante
Los mayores desafíos al crear aplicaciones Ajax no son técnicas. Las tecnologías centrales son maduras, estables y bien conocidas. En cambio, los desafíos son para los diseñadores de estas aplicaciones: olvidar lo que creemos saber sobre las limitaciones de la Web, y comenzar a imaginar un rango más amplio y rico de posibilidades.
Va a ser divertido.

---

Ajax Q&A
Marzo 13, 2005: Desde la primera publicación del ensayo de Jesse, recibimos una cantidad enorme de correspondencia de nuestros lectores con preguntas sobre AJAX. En este Q&A, Jesse responde algunas de las más comunes:

P: Fue Adaptive Path quien inventó Ajax? Fue Google? Ayudó Adaptive Path a construir las aplicaciones Ajax de Google?
R: Ni Adaptive Path ni Google inventaron Ajax. Los nuevos productos de Google son simplemente los ejemplos de más alto perfil de Aplicaciones Ajax. Adaptive Path no estuvo involucrado en el desarrollo de las Aplicaciones Ajax de Google, pero está haciendo Ajax para algunos de sus clientes.

P: Está Adaptive path vendiendo componentes Ajax o registrando el nombre? Donde puedo descargarlos?
R: Ajax no es algo que uno puede descargar. Es un acercamiento (una manera de pensar la arquitectura de las aplicaciones Web usando ciertas tecnologías. Ni el nombre Ajax ni el acercamiento son propietarios de Adaptive Path.

P: Es Ajax solo otro nombre para XMLHttpRequest?
R: NO. XMLHttpRequest es solo una parte de la ecuación Ajax. XMLHttRequest es el componente técnico que hace las comunicaciones asincrónicas con el servidor. Ajax es nuestros nombre para el acercamiento total descripto en el artículo, que se basa no solo en XMLHttpRequest sino en CSS, DOM y otras tecnologías.

P: Porque la necesidad de darle un nombre?
R: Porque necesitaba algo más corto que “Asynchronous JavaScript+CSS+DOM+XMLHttpRequest” para usar cuando discutía este acercamiento con los clientes.

P: Las técnicas para comunicaciones asincrónicas con servidores existen hace años. ¿Qué hace a Ajax tan nuevo como acercamiento?
R: Lo nuevo es el uso prominente de estas técnicas en aplicaciones reales para cambiar el modelo fundamental de la interacción en la red. Ajax está tomando envión ahora porque estas tecnologías y el conocimiento de la industria sobre como implementarlas efectivamente ha tenido tiempo de desarrollarse.

P: Es Ajax una plataforma tecnológica o es un estilo de arquitectura?
R: Ambos. Ajax es un set de tecnologías usadas en conjunto en una forma particular.

P: Para que tipo de aplicaciones está mejor preparado Ajax?
R: No sabemos aún. Porque es un acercamiento relativamente nuevo, nuestro entendimiento sobre donde puede Ajax ser mejor aplicacdo está aún en su infancia. Algunas veces el modelo tradicional de aplicaciones Web es la mejor solución para un problema.

P: Esto significa que Adaptive Path es anti-flash?
R: Para nada. Macromedia es un cliente de Adaptive Path y apoyamos Flash hace mucho tiempo. Al madurar Ajax esperamos que algunas veces sea una mejor solución a un problema particular y a veces, Flash será la mejor solución. También estamos interesados en ver como pueden ambas tecnologías ser mezcladas (Como en el caso de flick que usa ambas)

P: Tiene Ajax limitaciones en accesibilidad o compatibilidad de browsers? Las aplicaciones Ajax “rompen” el botón de “volver”? Es compatible con REST? Hya consideraciones de seguridad referidas al desarrollo con Ajax? Pueden estas aplicaciones ser hechas para trabajar con usuarios que tienen JavaScript desactivado?
R: La respuesta a todas esas prguntas es “tal vez”. Muchos desarrolladores están trabajando actualmente para ocuparse de esas preocupaciones. Pensamos que hay mas trabajo para ser hecho y determinar las limitaciones de Ajax, y esperamos que la comunidad de desarrolladores descubra otros asuntos como estos a lo largo del camino.

P: Algunos de los ejemplos de Google que citan no usan XML para nada. Tengo que usar XML y/o XSLT en una aplicación Ajax?
R: No. XML es el medio más desarrollado para mover data desde y hacia un cliente Ajax, pero no hay razón para que no puedas lograr los mismos resultados con una tecnología como JavaScript Object Notation o algun medio similar de estructurar data para el intercambio.

P: Las aplicaciones Ajax son más simples de desarrollar que las tradicionales?
R: No necesariamente. Las Aplicaciones Ajax inevitablemente incluyen complejo código JavaScript en el cliente. Hacer ese código eficiente y sin errores (bug-free) no es algo para ser tomado livianamente, y van a ser necesarias mejores herramientas de desarrollo y frameworks para completar ese desafío.

P: Las aplicaciones Ajax siempre entregan una mejor experiencia que las aplicaciones tradicionales?
R: No necesariamente. Ajax brinda a los diseñadores de interacción mayor flexibilidad. Pero como siempre, más poder tenemos, mayor precaución debemos tener al aplicarlo. Debemos ser cuidadosos al usar Ajax para mejorar la experiencia de los usuarios de nuestras aplicaciones y no degradarla.

Para recibir estos ensayos en tu correo electrónico, suscribite al newsletter por mailTo get essays like this one delivered directly to your inbox, subscribe to our email newsletter.

Jesse James Garrett es uno de los fundadores de Adaptive Path. En 2005, llevará el seminario de día completo “The Elements of User Experience” a Boulder, Sydney, Seattle and other cities around the globe.

Nota: Esta traducción fue autorizada por JJG, si encuentran errores o cosas a mejorar envíenme un email a marianoARROBAuberbinPUNTOnet. Actualización: Las imagenes fueron traducidas por Oscar Islas. Gracias.