Diseño, desarrollo e implementación de pureAJAX, un framework AJAX compacto y eficiente. Edgar Esteban Maidana Peña1 , Roberto Alfredo Demestri Rigoni2 Facultad Politécnica - UNE. Ciudad del Este - Paraguay 1 e2.maidana@gmail.com 2 rdemestri@gmail.com Resumen El presente trabajo se halla enmarcado dentro del área de tecnologı́as Web, especı́ficamente en el área de aplicaciones ası́ncronas. La evolución de la Web en los últimos años, supuso cambios, tanto en aspectos técnicos, como en la forma de interacción de usuarios con los sitios Web. Esto ha impulsado la Web 2.0, caracterizada por la reinvención de técnicas de desarrollo, implicando esencialmente, pasar del modelo de comunicación sı́ncrono al ası́ncrono; las tecnologı́as involucradas en este segundo modelo se agrupan bajo la denominación de AJAX. pureAJAX es un framework desarrollado a fin de responder a las necesidades comunes en el desarrollo de aplicaciones AJAX, compatible con todos los navegadores Web, siendo a la vez compacto y funcional. Descriptores: pureAJAX, JavaScript, framework, comunicación ası́ncrona. Abstract This work is framed within the area of Web technologies, specifically in the area of asynchronous applications. The Web evolution in recent years, marked by changes in both the technical aspects, as in the form of user interaction with websites. This has led to Web 2.0, characterized by the reinvention of development techniques, involving essentially moving from synchronous communication model to the asynchronous one; the technologies involved in this second model are grouped under the term AJAX. pureAJAX is a framework developed to meet the common needs in the development of AJAX applications, compatible with all Web browsers, being both compact and functional. Keywords: pureAJAX, JavaScript, framework, asynchronous communication. 1. Introducción. La comunicación ası́ncrona permite al navegador Web realizar llamadas HTTP al servidor en segundo plano, sin interrumpir la interacción del usuario con el sitio Web. Estas llamadas ası́ncronas se realizan a través del objeto XMLHttpRequest, presente en todos los navegadores Web modernos [1]. La utilización comunicaciones ası́ncronas es posible gracias a la unión de las tecnologı́as webHTML para la capa de presentación, DOM para la interacción dinámica con la página HTML, XMLHttpRequest como canal de comunicación, XML utilizado como formato de transferencia de datos, y JavaScript como nexo de unión de todas las anteriores; todos ellos agrupados bajo la denominación de AJAX [2]. La utilización de la técnica AJAX requiere una estricta secuencia de comandos y numerosos con- troles, que resultan tediosos sin la utilización de un framework que se encargue de las tareas de las acciones y controles de bajo nivel [1]. Los frameworks JavaScript disponibles en la actualidad, cuentan con un motor AJAX que posibilita la realización de llamadas ası́ncronas, ası́ como manejadores de eventos, selectores HTML, gestión de animaciones y efectos, entre otros. En primera instancia, esta alternativa resulta conveniente, pero cuando se presenta una situación en la que únicamente se necesita un motor AJAX, el tamaño excesivo de e stos frameworks JavaScript hace que la utilización de estos resulte inapropiado para proyectos Web móviles o aplicaciones Web en donde la velocidad de carga constituye un factor crı́tico. 2. Objetivos. − Crear un framework AJAX que contemple todas las necesidades esenciales en el desa- Diseño, desarrollo e implementación de pureAJAX, un framework AJAX compacto y eficiente. rrollo de aplicaciones Web 2.0. − Lograr que el tamaño del archivo fuente del framework sea de menos de 12 KB. − Lograr que el framework desarrollado sea compatible con las versiones más recientes de todos los navegadores Web que soportan JavaScript. − Desarrollar el framework de manera que la integración de widgets o funciones especı́ficas resulten amigables. − Crear toda la documentación relativa al framework . − Verificar y validar el algoritmo creado mediante pruebas pre- establecidas 3. Framework. Un framework es una estructura conceptual y tecnológica de soporte definida normalmente con artefactos o módulos de software concretos, con base en la cual otro proyecto de software puede ser organizado y desarrollado. Tı́picamente, puede incluir soporte de programas, bibliotecas y un lenguaje interpretado entre otros programas para ayudar a desarrollar y unir los diferentes componentes de un proyecto [3]. Son diseñados con la intención de facilitar el desarrollo de software, permitiendo a los diseñadores y programadores pasar más tiempo identificando requerimientos de software que tratando con los tediosos detalles de bajo nivel para ası́ proveer un sistema funcional. 4. pureAJAX Framework escrito completamente en el lenguaje JavaScript. Cuenta con un núcleo principal (core), el cual es extendido a través del prototipado para la inclusión de los métodos adicionales, asimismo cuenta con extensiones del lenguaje JavaScript y funciones auxiliares que brindan agilidad y consistencia al acceder a los datos. La principal diferencia entre pureAJAX y los frameworks citados previamente, es la inclusión de funciones especı́ficas para la realización de llamadas ası́ncronas junto con el tratamiento de la respuesta del servidor. Entre las funciones especı́ficas se encuentran los métodos: − Load(): que carga contenido ası́ncrono en el elemento especificado. − Select(): que actualiza el contenido de un elemento select (comboBox). − Run(): ejecuta una llamada ası́ncrona y ejecuta la respuesta como código JavaScript. − Value(): asigna la respuesta del servidor a un campo de texto. − SendForm(): envı́a los datos del formulario indicado usando las configuraciones del propio formulario, pero utilizando una llamada AJAX. En todos estos métodos se pueden especificar las acciones (a través de funciones JavaScript) que será ejecutadas una vez finalizado el tratamiento de la respuesta del servidor. 3.1 Framework AJAX Constituye una librerı́a de funciones que ayudan a desarrollar aplicaciones Web basad as en el concepto AJAX. La información es leı́da desde el servidor o enviada a éste a través de peticiones JavaScript. Sin embargo, es requerido algún procesamiento del lado del servidor para manejar peticiones, por ejemplo, para buscar o guardar información [1]. Esto es alcanzado más fácilmente con el uso de un framework dedicado a procesar peticiones AJAX. El motor AJAX pretende reducir la espera para el usuario cuando una página trata de acceder al servidor. La meta del framework es proveer este motor AJAX y funciones asociadas al servidor y del lado del cliente [6]. Existe actualmente, una gran variedad de frameworks JavaScript/AJAX, cada uno con caracterı́sticas y propósitos distintos. Entre los más utilizados se encuentran Prototype, jQuery, Dojo y MooTools [4]. 4.1 Métodos de pureAJAX El framework pureAJAX se compone de una clase principal que contiene la lógica básica para la realización de las conexiones, junto con los atributos o propiedades. Un detalle importante concerniente a la instanciación del objeto XMLHttpRequest radica en que, la forma de hacerlo puede var iar de un navegador a otro, o incluso en diferentes versiones de un mismo navegador. En JavaScript, una clase se define como una función, y la única diferencia se encuentra en la forma en que se invoca a éstos; pues para instanciar una clase, se antepone la palabra reservada “new” al nombre de la función [7]. Todas las llamadas AJAX realizadas en pureAJAX pasan a través de un método genérico denominado Request. Se puede utilizar de forma indirecta a través de métodos especı́ficos como Run, Load, Select, etc.; o directamente para realizar una llamada personalizada. 20 Diseño, desarrollo e implementación de pureAJAX, un framework AJAX compacto y eficiente. 4.1.1 Método Request 4.1.6 Método Value En él se crea un manejador del evento “onreadystatechange” del objeto XMLHttpRequest. Requiere de un único parámetro en notación JSON, el cual contendrá las configuraciones de la llamada AJAX; mı́nimamente debe contener: Realiza una llamada AJAX y asigna la respuesta del servidor a la propiedad “value” del campo de texto cuyo atributo Id es pasado por parámetro. − url: indica la dirección del documento a donde apuntará la llamada AJAX. − method: método de envı́o de la llamada (POST o GET). 4.1.7 Método Select Actualiza las opciones de un campo tipo select (comboBox) a través de una llamada AJAX cuya respuesta de l servidor debe ser un documento XML válido. − onOK: función que será ejecutada cuando se reciba la respuesta. 4.1.8 Método Run − async: true si es una llamada ası́ncrona, caso contrario false. Realiza una llamada AJAX cuya respuesta del servidor lo ejecuta como código JavaScript. Podrı́a suceder que el parámetro recibido en el método Request no contenga las configuraciones mı́nimas necesarias para realizar la llamada. Para solventar ese inconveniente, se verifica el argumento recibido en Request con el método Default cuya función es agregar las configuraciones mı́nimas, ası́ como las cabeceras POST si correspondiere. 4.1.2 Método Default A grega las configuraciones mı́nimas, ası́ como las cabeceras POST si correspondiere. Recibe un único argumento en notación JSON que contiene la configuración de la llamada que será realizada, en caso de que faltare alguna configuración obligatoria, lo agrega y retorna el argumento de entrada modificado. 4.1.3 Método Update Procesa los datos recibidos cuando la propiedad readyState del objeto AJAX cambie a 4 (completado). Por este método pasan las respuestas de todos los métodos especı́ficos de pureAJAX que realizan llamadas AJAX, excepto Img. 4.1.4 Método Load Permite realizar la carga de contenido ası́ncrono, que lu ego es asignado al contenido HTML del elemento al cual pertenece el Id especificado en el parámetro de la llamada. Este método realiza una llamada AJAX a través del método genérico Request. 4.1.9 Método Loader Gestiona la visualización de la capa indicadora de llamadas AJAX cuando el Id del elemento sea especificado. 4.1.10 Método CSS Obtiene o asigna un atributo CSS del elemento HTML cuyo Id se pasa por parámetro. Si se especifica sólo el Id y el atributo CSS, el método retorna el valor de dicho Atributo. Si además se especifica un valor, el método asigna ese valor al atributo CSS del elemento especificado. 4.1.11 Método Img Realiza la carga de una imagen en segundo plano; y una vez finalizada la carga, ésta es asignada al elemento HTML cuyo Id se especifica en los parámetros. Esta función no utiliza la pasarela XMLHttpRequest, pues por tratarse de una imagen (datos binarios) no es posible realizar el transporte vı́a AJAX. En contrapartida, los elementos HTML “img” ya poseen controladores de carga ası́ncrona de manera nativa. 4.2 Variables auxiliares Contienen información referente a la identificación navegador del cliente. También se definen algunos alias a propiedades extensas de mucho uso. 4.1.5 Método SendForm Permite efectuar en envı́o de un formulario a través de una llamada AJAX. La URL y el método utilizado corresponden a la propia configuración del formulario. Se utiliza la función Serialize() para formar la cadena de variables y valores correspondiente al formulario. 5. Pruebas Realizadas Se han ejecutado varios procedimientos, de manera a explorar las capacidades del pureAJAX, en cuanto a su funcionamiento y eficiencia. Básicamente se desglosa en cuatro aspectos, detallados a continuación: 21 Diseño, desarrollo e implementación de pureAJAX, un framework AJAX compacto y eficiente. 5.1 Tamaño final de archivo Se refiere al archivo que contiene el código fuente del framework pureAJAX, siendo clasificada en tres categorı́as de acuerdo al tipo de compresión utilizado. Las variaciones de tamaños verificados, con los resultados obtenidos son: − Normal: corresponde al archivo del código fuente original sin ninguna compresión; éste posee extensión “.js”. El framework pureAJAX tiene 11,0 KB de tamaño normal. Tabla 2. Tiempo de carga de los frameworks. − Miniaturizado: corresponde al archivo del código fuente original del cual son suprimidos los espacios innecesarios, las tabulaciones y los saltos de lı́nea; éste posee extensión “.js”, conteniendo en esta categorı́a el tamaño, 6,51 KB. De los resultados obtenidos, básicamente es posible afirmar que el framework pureAJAX utiliza menos tiempo para la carga de una llamada al archivo fuente original, en comparación que los demás frameworks AJAX. − Miniaturizado y comprimido: corresponde al archivo miniaturizado al cual se aplica una compresión en el formato gZIP; la extensión del archivo es “.js.gz”. El pureAJAX contiene 2,34 KB en esta categorı́a. 5.2.1 Tiempo de carga desde servidores remotos En este mismo punto, se realizó una comparación, en relación a los otros frameworks mencionados anteriormente, obteniendo los siguientes resultados: En este aspecto, se han ejecutado varias llamadas desde servidores remotos, con los mismos frameworks utilizados en puntos anteriores, obteniendo los siguientes resultados como promedio de las mencionadas llamadas, expresados en milisegundos. Tabla 1. Comparación de tamaños entre frameworks. Del resultado obtenido, se deduce que el pureAJAX tiene tamaño significativamente inferior a los demás frameworks, lo que mayor agilidad al realizar el tráfico desde el servidor Web hasta el cliente (navegador Web). 5.2 Mediciones de tiempo de carga Consiste en la realización de una llamada del archivo fuente original de los frameworks pureAJAX, Dojo, jQuery, MooTools y Prototype. Al realizar la llamada, se marca el tiempo de inicio y final de la solicitud a fin de obtener el tiempo transcurrido desde el inicio de la llamada hasta la carga completa del framework. Los resultados obtenidos en esta prueba son reflejados en la Tabla 2. Tabla 3. Tiempo de carga de los frameworks desde servidores remotos. Los resultados obtenidos, permiten afirmar que el pureAJAX, utiliza en promedio, entre 5 y 6 veces menos tiempo en la velocidad de carga, desde servidores remotos. 5.2.2 Tiempo de carga desde servidores locales Para medir este aspecto, se ha un utilizado las mismas técnicas y scripts utilizados para las pruebas en servidores remotos, cuyos resultados expresados en promedio son reflejados en la Tabla 4. 22 Diseño, desarrollo e implementación de pureAJAX, un framework AJAX compacto y eficiente. Tabla 4. Tiempo de carga de los frameworks desde servidores locales. Al igual que lo sucedido en las pruebas realizadas desde servidores remotos, las realizadas desde servidores locales reflejan que pureAJAX se carga, en promedio, 6 veces más rápido que los demás frameworks. Tabla 7. Tiempo medio utilizado para seleccionar elementos en Mac OS X 10.6, expresado en milisegundos. El rendimiento de pureAJAX, como el de los demás frameworks, es estable en todos los navegadores Web de las tres plataformas incluidas en el análisis. Es oportuno destacar que, el pureAJAX, a pesar de tener un tamaño mucho menor al de los demás frameworks, no pierde en eficiencia ni rendimiento. 5.4 Compatibilidad para navegadores 5.3 Desempeño en la selección de elementos HTML Se evaluó la selección de los elementos HTML definidos por los selectores “body”, “div”, “body div”, “div p”, “div, p, a”, “span”, “h1” y “p” utilizando cada uno de los cinco frameworks en su propio ambiente de ejecución. Se ha utilizado la herramienta SlickSpeed creada por el equipo de desarrollo de MooTools, disponible gratuitamente desde la Web del autor [5]. Los tiempos (expresados en milisegundos) son acumulados, ejecutándose en tres sistemas operativos: Ubuntu 11.04 x86, Windows 7 x64, Mac OS X 10.6 x64; y los resultados finales son expuestos en las siguientes tablas: La compatibilidad para con los navegadores del framework pureAJAX, al ejecutarse la evaluación de desempeño en l a selección de elementos HTML, se pudo verificar igualmente que, es totalmente funcional y compatible para los navegadores siguientes: − Safari 4+ − Internet Explorer 6+ − Mozilla Firefox 3.6+ − Google Chrome 14.0+ − Opera 9.0+ − Opera Mobile 10+ Cada uno de estos navegadores, opera sobre plataformas o sistemas operativos con los cuales son compatibles. 6. Conclusiones Tabla 5. Tiempo medio utilizado para seleccionar elementos en Ubuntu 10.11, expresado en milisegundos. El framework pureAJAX posee una serie de caracterı́sticas convenientes como lo son el tamaño reducido (tan sólo 2,3420 KB), especialización de tareas, eficiencia en la ejecución de llamadas AJAX y facilidad de uso. Los logros obtenidos, pueden deducirse en 3 aspectos: la extensibilidad de la clase principal, tiempo de carga reducido, y la compatibilidad con los distintos navegadores, en las correspondientes plataformas. 6.1 Extensibilidad Tabla 6. Tiempo medio utilizado para seleccionar elementos en Windows 7, expresado en milisegundos. El diseño modular de pureAJAX, facilita la extensión de la clase principal a fin de agregar futuras funcionalidades, sin necesidad de cambios sustanciales en el código ya existente. 23 Diseño, desarrollo e implementación de pureAJAX, un framework AJAX compacto y eficiente. 6.2 Velocidad de carga Los resultados de las pruebas realizadas demostraron que pureAJAX se carga, tanto desde servidor local como desde el servidor remoto, en prome dio, 6 veces más rápido que los demás frameworks analizados, en el presente trabajo. Si se considera el hecho de que la carga de los archivos JavaScript se realiza de forma sı́ncrona, se puede afirmar que esta ganancia en la velocidad de carga contribuye al mejoramiento de la experiencia del usuario, especialmente en dispositivos móviles en donde aún predominan las conexiones que brindan un reducido ancho de banda. EE.UU.; 2007. 627 p. ISBN: 0977762203. [2] Garrett, Jesse James, AJAX: A New Approach to Web Applications. [En lı́nea] http://adaptivepath.com/ideas/essays/ archives/000385.php [08-02-2011]. [3] DocForge: Framework. [En lı́nea] http:// docforge.com/wiki/Framework [27-06-2011]. [4] Internet and Blogging Resources: 9 Most Popular Ajax Frameworks. [En lı́nea] http://ebiznet2u.com/9-most-popularajax-frameworks-1855/ [25-06-2011]. 6.3 Compatibilidad con los navegadores En las pruebas realizadas con una gran variedad de navegadores Web en las tres plataformas de escritorio predominantes (Windows, Linux, MAC OS X) y plataformas móviles como iOS, Android, BlackBerry y Symbian; el framework pureAJAX, ha arrojado resultados satisfactorios en los tópicos velocidad de carga, funcionamiento y eficiencia. Referencias bibliográficas [1] Hinchcliffe D,Allen K: Real - World AJAX, Secrets of the Masters. SYS - CON Media. [5] MooTools, A compact JavaScript Framework: SlickSpeed Selectors Test. [En lı́nea] http:// mootools.net/slickspeed/ [15-10-2011]. [6] Ullman C, Dykes L: Beginning Ajax. John Wiley & Sons. Reino Unido: West Sussex; 2007. 498 p. ISBN: 978-0-470-10675-4. [7] Flanagan, David: JavaScript, The Definitive Guide (5ta ed.). O’Reilly & Associates. O’Reilly Media Inc.. EE.UU.; 2006. 1032 p. ISBN: 0-59610199-6. 24