Dise˜no, desarrollo e implementación de pureAJAX, un

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 [email protected] 2 [email protected]
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