AJAX

7,342 views

Published on

Conceptos, comparación con Arqtuitectura Tradicional de Desarrollo Web y Aplicación de ejemplo.

Published in: Technology
2 Comments
8 Likes
Statistics
Notes
No Downloads
Views
Total views
7,342
On SlideShare
0
From Embeds
0
Number of Embeds
48
Actions
Shares
0
Downloads
0
Comments
2
Likes
8
Embeds 0
No embeds

No notes for slide

AJAX

  1. 2. Contenido Objetivos Propuestos Entendiendo AJAX Comparación Arq.Trad v/s Arq.Ajax Problemas, Ventajas y Desventajas Conclusiones Alternativas a AJAX Aplicación Web basada en AJAX Frameworks e IDE’s desarrollo AJAX
  2. 3. <ul><li>OBJETIVOS </li></ul><ul><li>V/S </li></ul><ul><li>METAS </li></ul>
  3. 4. 1 Realizar un análisis comparativo de una aplicación Web utilizando el Modelo clásico v/s el Modelo AJAX. 2 Desarrollar una aplicación Web, basada en la técnica AJAX. 3 Comprender las ventajas y desventajas del uso de la comunicación Web asincrónica utilizando la técnica AJAX.
  4. 5. <ul><li>ENTENDIENDO AJAX </li></ul>
  5. 6. <ul><li>No es ni un equipo holandés, ni un detergente, ni una tecnología. </li></ul>CSS javaSript DOM XML XHTML XMLhttpRequest AJAX
  6. 9. ¿Cómo funciona?
  7. 10. Un ejemplo básico <ul><li>Código y explicación: inSitu </li></ul>
  8. 11. Algo más sobre responseXML <ul><li>La transferencia de un XML involucra mucho “código muerto” </li></ul><ul><li>Acceder a un dato del XML utilizando los métodos del DOM puede ser costoso. </li></ul>
  9. 12. Alternativa a XML: JSON
  10. 13. <ul><li>var sJSON = ajax.responseText; </li></ul><ul><li>var aInfoclase = eval(sJASON); </li></ul><ul><li>var dato = aInfoclase[2].edad; </li></ul><ul><li>var xml = ajax.responseXML; </li></ul><ul><li>var infoclase = xml.getElementsByTagName('infoclase')[0]; </li></ul><ul><li>var estudiantes = infoclase.getElementsByTagName('estudiantes')[0]; </li></ul><ul><li>var estudiante = estudiantes.getElementsByTagName('estudiante')[2]; </li></ul><ul><li>var edad = estudiante.getElementsByTagName('edad')[0]; </li></ul><ul><li>var dato = edad.firstChild.data; </li></ul>
  11. 14. ¿Eso es todo? <ul><li>Respecto de establecer la comunicación asincrónica con el servidor, si. </li></ul><ul><li>Pero la complejidad aumenta polinomialmente si se quiere manipular la página del cliente. </li></ul>
  12. 15. … por ejemplo: <ul><li>Funcionalidades para caja de texto con Autosugerencia </li></ul>
  13. 16. Se requiere aproximadamente: .JS .CSS .PHP 500 líneas de código para los eventos antes descritos y funciones AJAX para mantener comunicación asincrónica con el servidor <ul><li>80 líneas de código para manejar entre otros, los cambios de estilos al moverse por el despliegue de sugerencias </li></ul>100 líneas de código para manejar la configuración de la BD, las respectivas consultas y el retorno de estas mediante notación XML
  14. 17. ¿Hay alguna otra alternativa? <ul><li>Afortunadamente si: el uso de librerías, frameworks y/o herramientas IDE. </li></ul>
  15. 18. <ul><li>FRAMEWORKS </li></ul><ul><li>IDE’S </li></ul>
  16. 19. FRAMEWORKS <ul><li>http:// www.infoq.com / news / ajaxian - survey </li></ul>
  17. 20. PROTOTYPE
  18. 21. <ul><li>Métodos para javaSript, por ejemplo: </li></ul>
  19. 22. <ul><li>Métodos para AJAX, por ejemplo: </li></ul>
  20. 26. RICO
  21. 31. IDE’S <ul><li>Fuente: http:// www.anieto2k . com </li></ul>
  22. 32. MX AJAX Toolbox
  23. 33. <ul><li>ARQUITECTURA TRADICIONAL </li></ul><ul><li>V/S </li></ul><ul><li>ARQUITECTURA AJAX </li></ul>
  24. 34. Metodología <ul><li>Métricas </li></ul><ul><ul><li>Total Bytes Transferidos </li></ul></ul><ul><ul><li>Total Tiempo Espera </li></ul></ul><ul><li>Procedimiento: Actualización de Datos </li></ul><ul><ul><li>Según método provisto, realizar búsqueda y selección de una persona por la inicial de su apellido. Ejemplo para: “Maria Burgos”  ”B” </li></ul></ul><ul><ul><li>Editar campo de Teléfono </li></ul></ul><ul><ul><ul><li>123 Arquitectura 1 </li></ul></ul></ul><ul><ul><ul><li>456 Arquitectura 2 </li></ul></ul></ul><ul><ul><li>Volver a ventana de inicio </li></ul></ul>
  25. 35. Arquitectura Tradicional
  26. 40. Arquitectura AJAX
  27. 46. Resultados Obtenidos <ul><li>Páginas desplegadas: </li></ul><ul><ul><li>AJAX: 1 </li></ul></ul><ul><ul><li>Tradicional: 6 </li></ul></ul><ul><li>Llamadas a BD: </li></ul><ul><ul><li>AJAX: 3 </li></ul></ul><ul><ul><li>Tradicional: 3 </li></ul></ul><ul><li>Costo desarrollo (hr.) </li></ul><ul><ul><li>AJAX: 9 </li></ul></ul><ul><ul><li>Tradicional: 2 </li></ul></ul>
  28. 47. <ul><li>APLICACIÓN WEB </li></ul><ul><li>BASADA EN AJAX </li></ul>
  29. 48. <ul><li>Aplicación orientada a las tiendas de ventas por departamento. </li></ul><ul><li>Se genero un componente tipo Accordeon </li></ul><ul><ul><li>Contiene información referente a ítems comerciales (Computación, Electro hogar, Deportes, Muebles) </li></ul></ul><ul><ul><li>Despliegue de un conjunto de productos referente al ítem solicitado </li></ul></ul><ul><ul><ul><li>Un segundo nivel de detalle más especifico puede ser obtenido por un popUp AJAX o un Tooltip AJAX </li></ul></ul></ul><ul><li>Toda la información es extraída desde una base de datos y presentada a través de técnicas AJAX. </li></ul>
  30. 49. <ul><li>Widgets Ajax Accordion para el despliegue de las 4 secciones seleccionadas. </li></ul>
  31. 50. <ul><li>Widgets Ajax Dinamic Table para el despliegue del detalle de productos. </li></ul>
  32. 51. <ul><li>Widgets Ajax tooltip como alternativa 1 para previsualizar la descripción de un </li></ul><ul><li>producto en particular. </li></ul>
  33. 52. <ul><li>Widgets Ajax Dialog Box como alternativa 2 para previsualizar la descripción de un </li></ul><ul><li>producto en particular. </li></ul>
  34. 53. <ul><li>PROBLEMAS Y DIFICULTADES </li></ul><ul><li>VENTAJAS </li></ul><ul><li>DESVENTAJAS </li></ul>
  35. 54. Problemas y Dificultades <ul><li>En la Web sobran ejemplos de pequeños script AJAX. Dificultades para encontrar algo o alguien que diera pautas de cómo construir una aplicación realmente práctica y provechosa. </li></ul><ul><li>Se invirtió mucho tiempo en la medición de la métrica de “Bytes transferidos”. Por hoy, ya se sabe que lo más idóneo habría sido el utilizar algún programa Sniffer para medir el tráfico existente entre el cliente y servidor. </li></ul><ul><li>Falta de estandarización por parte de los navegadores Web. Problemática de introducir en el desarrollo una suerte de “Programación Orientada al Navegador”. </li></ul>
  36. 55. … por ejemplo:
  37. 56. Ventajas de AJAX <ul><li>AJAX no requiere instalación de plugins, applets de Java, ni ningún otro elemento adicional a instalarse en el cliente. </li></ul><ul><li>Reducción de Tráfico entre el cliente y el servidor. </li></ul><ul><ul><li>El servidor tiene una mejor carga de trabajo. </li></ul></ul><ul><ul><li>Muchos sitios que ofrecen Hosting establecen límites y tarifas según el ancho de banda a consumir. </li></ul></ul><ul><li>Reducción en tiempo de espera </li></ul><ul><ul><li>Transacciones se resuelven más rápido. </li></ul></ul><ul><ul><li>Aplicaciones Web simulan Aplicaciones de Escritorio. </li></ul></ul>
  38. 57. <ul><li>Enriquecer la interfaz usuario </li></ul><ul><ul><li>Recursos multimedia streaming. </li></ul></ul><ul><li>La interactividad lograda dio paso a una nueva forma web: Personalización del Contenido </li></ul><ul><ul><li>Páginas de Inicio </li></ul></ul><ul><ul><li>Google Calendar </li></ul></ul><ul><li>Código público. Basado en un conjunto de lenguajes de programación de uso libre. </li></ul>
  39. 58. Desventajas de AJAX <ul><li>En algunos casos es necesario incluir señales para que el usuario se percate que el servidor ha respondido. </li></ul><ul><li>AJAX depende de javaScript </li></ul><ul><ul><li>El cliente puede tener desactivada la opción de ejecutar código javaScript. </li></ul></ul><ul><ul><li>Falta de estandarización para la ejecución de algunas funciones de javaScript. Ej. el mismo núcleo de AJAX. </li></ul></ul><ul><ul><li>Por 1 y 2, incremento de testing. </li></ul></ul>
  40. 59. <ul><li>Links pierden identidad: Un sitio Web común: {links} </li></ul><ul><ul><li>No se pueden pasar url específicas de la Web. </li></ul></ul><ul><ul><li>No se pueden añadir a los marcadores o favoritos una parte concreta de la Web. </li></ul></ul><ul><ul><li>Problema con los buscadores. Solo indexan la raíz. </li></ul></ul><ul><ul><li>Enlace Usual: </li></ul></ul><ul><ul><li><a href=“dimeHora.php&quot;>Ver Hora</a> </li></ul></ul><ul><ul><li>Enlace AJAX: </li></ul></ul><ul><ul><li><a href=&quot;javascript:&quot;onclick=“funAjax(parametros)&quot;>Ver Hora</a> </li></ul></ul><ul><li>En algunos casos deja de existir el botón Atrás del navegador. </li></ul><ul><ul><li>Solución simple: usuario debe cambiar su manera en que entiende los sitios Web. </li></ul></ul><ul><ul><li>Solución necesaria: Necesidad de proveer panel navegación. </li></ul></ul>
  41. 60. <ul><li>Sobre explotar una aplicación con excesivos recursos AJAX puede degradar el rendimiento del sistema. </li></ul><ul><li>Una mala elección de tratar múltiples conexiones asincrónicas puede ocasionar problemas. </li></ul><ul><ul><li>Grabar el mensaje en una cola y enviarlo cuando el objeto XMLhttpRequest pueda hacer nuevas peticiones (Ej. validación de formularios). </li></ul></ul><ul><ul><li>Planificar para reintentar automáticamente la petición después de un tiempo especificado y/o eliminar la petición (Ej. Auto sugerencia). </li></ul></ul><ul><ul><li>Para cada petición, crear una nueva instancia del objeto XMLhttpRequest (Caso a evitar). </li></ul></ul>
  42. 61. <ul><li>ALTERNATIVAS </li></ul><ul><li>A </li></ul><ul><li>AJAX </li></ul>
  43. 62. <ul><li>Adobe Flex </li></ul><ul><ul><li>Películas vectoriales logran una alta afinidad en RIA. </li></ul></ul><ul><ul><li>Producto comercial. Alto costo han hecho que AJAX sea una de las elecciones preferidas en aplicaciones interactivas. </li></ul></ul><ul><ul><li>Sin embargo, la capacidad de impacto multimedia que ofrece está muy lejos de conseguirse con AJAX. </li></ul></ul><ul><li>Laszlo </li></ul><ul><ul><li>“ the premier open-source platform for rich internet applications” </li></ul></ul><ul><ul><li>Desarrollo de Interfaz (UI) dinamicas, bajo el plugin FLASH </li></ul></ul><ul><li>Ambas utilizan el framework J2EE </li></ul>
  44. 63. ¿AJAX V/S FLEX? <ul><li>Reemplaza el xhtml por interfase flash </li></ul><ul><li>Basado en manipulación de animación. </li></ul><ul><li>Opera sobre sitios Web xhtml. </li></ul><ul><li>Basado en manipulación de contenido. </li></ul>Cada cual podría hacer, con más o menos costo, lo que el otro hace Ambos pueden existir sin aniquilarse
  45. 64. <ul><li>CONCLUSIONES </li></ul>
  46. 65. <ul><li>“ Arquitectura Tradicional v/s Arquitectura AJAX ” </li></ul><ul><ul><li>Los resultados obtenidos muestran que AJAX produjo una considerable optimización de optimización de recursos. </li></ul></ul><ul><ul><li>La Metodología usada fue suficiente y necesaria para el ejemplo presentado. Pero para estudios sobre comparaciones de aplicaciones Web reales, complejas y de alta demanda es necesario incluir otras métricas. </li></ul></ul><ul><ul><li>Según los resultados obtenidos es altamente aconsejable estudiar la posibilidad de incluir en los desarrollos de aplicaciones Web, técnicas provistas con el enfoque AJAX. </li></ul></ul>
  47. 66. <ul><li>“ Aplicación Web basada en AJAX” </li></ul><ul><ul><li>Ajax puede ser una técnica muy útil si se usa bien </li></ul></ul><ul><ul><ul><li>Mala utilización: foro basado completamente en Ajax, pues lo que se desea es que los temas de discusión se indexen y sirvan de ayuda a personas que tengan problemas </li></ul></ul></ul><ul><ul><ul><li>Buena utilización: formularios de registro, sugerencia en la entrada de datos, monitorización en tiempo real despliegue de catalogo de productos, aplicaciones en intranets, etc. En general, donde hay acceso restringido y/o no interesa que un robot de búsqueda registre una página en particular. </li></ul></ul></ul>
  48. 67. Referencias <ul><li>Ajax v/s Flex </li></ul><ul><li>http ://www.numtopia.com/terry/blog/archives/2006/09/flex_versus_ajax_fight_doesnt_exist.cfm </li></ul><ul><li>MX AJAX Toolbox </li></ul><ul><li>http ://www.interaktonline.com/Products/Dreamweaver-Extensions/MXAJAXToolbox/Documentation/Articles/Sneak+preview+of+MX+AJAX+Toolbox.html?id_art=42 </li></ul><ul><li>Frameworks más populares </li></ul><ul><li>http :// www.infoq.com / news / ajaxian - survey </li></ul><ul><li>Curso completo de AJAX </li></ul><ul><ul><li>http://www.programacionweb.net/cursos/curso.php?num=2 </li></ul></ul><ul><li>MiniTutorial AJAX </li></ul><ul><li>http://fisica.ciens.ucv.ve/felix/ajax/#setRH </li></ul><ul><li>Laszlo </li></ul><ul><li>http:// www.openlaszlo.org / </li></ul>
  49. 68. <ul><li>¿Algún buen ejemplo de AJAX en la Web? </li></ul><ul><li>http:// www.netvibes.com / </li></ul>

×