Recomendaciones para la Adopcion de AJAX usando ASP.NET AJAX

Simple: “No usarlo”… (no tomarlo literalmente)

http://sergiot2.com/blogimages/2009/02Feb/18_aspnet_ajax_logo.png

Repasando: Como ya hemos comentado, la infraestructura que da soporte a las aplicaciones Web es diferente a una aplicación de escritorio. Si bien esta infraestructura es rica en acceso (acceder desde cualquier parte del mundo con una conexión a Internet), también tiene desventajas y una de ellas son los “viajes” que tienen que hacer al servidor Web. Si bien en el navegador estamos viendo una réplica de la información (en formato html), si queremos refrescar la información o hacer alguna operación, nuestro pedido (request) viaja desde nuestra PC hasta el servidor Web, que puede estar al otro lado del mundo, pero gracias al protocolo HTTP se pueden comunicar. Y cada vez que hacemos un request al servidor, tenemos que esperar que se refresque nuevamente toda la página (algunos navegadores usan Cache para los estilos y diseño) lo que da una apariencia de cargar más rápido. De ahí la siguiente necesidad de las aplicaciones Web, después de quedar la satisfecha la necesidad de que sean dinámicas (tecnologías de servidor, asp, php, jsp, etc), es la necesidad de mejorar la experiencia de usuario de las aplicaciones Web, y que puedan ser semejantes al estilo de una aplicación de escritorio, han habido muchos intentos por establecer la tecnología que permitiría mejorar la experiencia de usuario de una Aplicación Web, todos tenían que ver con el complemento del lado del cliente para lograr esto. Pero en los últimos años, los esfuerzos han estado centrados en AJAX, y en las aplicaciones RIA, considerando a estas últimas como producto: Silverlight y Flash, por que las aplicaciones AJAX también hacen una aplicación RIA.

Frameworks AJAX: Implementar AJAX usando directamente el objeto XMLHttpRequest, puede llevarnos a escribir código más limpio y más óptimo, pero el esfuerzo y tiempo invertido para lograr grandes cosas, puede ser muy alto (dependiendo del escenario). Y es por eso que existen los frameworks AJAX, para todos los gustos, sabores, y colores. Aquí hay una lista de un montón de Frameworks Ajax, también pueden verlos agrupados por lenguaje. Microsoft, también liberó para los desarrolladores .NET (y no .Net) un Framework AJAX llamado ASP.NET AJAX.

ASP.NET AJAX, tiene dos componentes: Microsoft Ajax Library (que podría ser usado con PHP, ver WebCast), y otro componente del lado del servidor llamado ASP.NET AJAX Extensions, y que es netamente para integrarse con el Page Framework de ASP.NET 2.0+ (VS2005/VS2008), pueden ver más detalles de la arquitectura de ASP.NET AJAX en el siguiente artículo. ASP.NET AJAX, puede ser una solución mágica, por que rápidamente podemos tener nuestras aplicaciones Web, usando AJAX con sólo arrastrar el control UpdatePanel, podemos tener implementando AJAX en aplicaciones existentes, ver WebCast. Si tienen un mantenedor con una barra de botones, un GridView para mostrar la lista, y un FormView para las demás operaciones, bastaría colocar los 3 controles dentro de un UpdatePanel cada uno, y mágicamente ya tenemos implementado AJAX dentro de nuestra aplicación.

Problema de la Magia, como todo producto mágico, tiene sus costos por detrás. Aunque ASP.NET AJAX maneja postbacks asíncronos con el servidor Web, la información que viaja entre cliente y servidor no es la más óptima, hombre que la magia tiene su coste. Y esto debido a que si no hacemos una buena administración del ViewState, este estará viajando entre los postbacks asíncronos, revisar este artículo para ver un ejemplo. Además de que ASP.NET AJAX es un framework centrado en el Servidor viaja información+diseño entre postbacks asíncronos, a diferencia de un framework centrado en el cliente, que sólo viaja datos entre cliente y servidor, pero hay que “actualizar el diseño” manualmente usando JavaScript y DOM. Este artículo tiene resultados muy interesantes en cuanto a comparación de frameworks de AJAX para ASP.NET.

Alternativa, Una alternativa dentro de ASP.NET AJAX es usar los PageMethods, para que desde JavaScript podamos llamar a los mismos, o también llamar desde JavaScript a Web Services. Con esto garantizamos la transferencia sólo de información, y el diseño hay que modificarlo con JavaScript. Revisar este ejemplo de JavaScript y PageMethods, y JQuery y PageMethods.

Recomendaciones, se que fue mucho floro para llegar a las recomendaciones, pero fue necesario. Si cociendo la “magia” que hay detrás de ASP.NET AJAX, hemos decidido usarlo, por que la aplicación no requiere un alto rendimiento, sólo estará disponible dentro de nuestra empresa (y no a toda la internet, ósea cantidad de usuarios limitada), o hemos visto que en el prototipo, los resultados son aceptables. Hay algunas recomendaciones básicas para usar ASP.NET AJAX:

  1. No usarlo. No usarlo hasta que la página web este funcionando al 100%. La magia de ASP.NET AJAX, a través del UpdatePanel, permite que luego de que la página este funcionando, arrastramos al control UpdatePanel, colocamos nuestros controles de ASP.NET dentro del UpdatePanel, y nuestra página aspx ya tiene AJAX, con sólo arrastrar un control, en este WebCast, se muestra como a una aplicación Web existente (de otro autor), la implementación de ASP.NET AJAX usando el UpdtePanel fue sencilla y no requirió cambiar el modelo de programación. La recomendación, que motiva a no usar ASP.NET AJAX hasta que la página este funcionando, es debido a que muchas veces suele confundirse los errores, y no se sabe si la página no funciona por que el UpdatePanel tiene un bug, o los otros controles que estamos usando tiene bug, y raras veces se piensa que el código que hemos hecho es el que tiene el bug. Por eso, si nos centramos principalmente en hacer funcionar la página al inicio, el rango de causas de errores disminuirá por que no incluye los que pueda producir el uso de ASP.NET AJAX, lo que hará más fácil identificarlos, y solucionarlos, y esto sobretodo para procesos complejos, que tienen que implementarse. En los proyectos participado o en las consultorías y mentoring que hemos impartido con 3Dev, este era un problema frecuente, se tiende a responsabilizar al UpdatePanel de cualquier error que suceda en la página, y siempre hay que hacerse esta pregunta: –la página funciona correctamente sin el UpdatePanel?, y después de remover el UpdatePanel queda claro cual es el origen del error. Un amigo (Luis B.), en tono jocoso, quería demandar a Bill Gates por que ASP.NET Ajax no funcionaba, después de remover el UpdatePanel ya no dijo nada :D.
  2. El UpdatePanel no es barita mágica. Si bien es tan sencillo agregar AJAX a nuestras aplicaciones Web usando el control UpdatePanel, tampoco se debe hacer un uso indiscriminado del mismo. Por ejemplo, dentro de un formulario Web, sólo agregar a los controles que se van actualizar dentro de un UpdatePanel, en una página de mantenimiento sólo a los controles principales como un control GridView, formView, y al menú, pero no a toda la página, la idea de AJAX es actualizar la página asíncronamente para tener una mejor experiencia del usuario, pero si vamos a actualizar toda la página no tiene sentido. Una forma de evitar tener que usar un control UpdatePanel en todo, es usar AsyncPosBackTrigger en un UpdatePanel, un ejemplo, con esto evitamos colocar todos los controles en UpdatePanels. Recuerden que un UpdatePanel se actualiza, cuando un control dentro del mismo produce un PostBack, entonces se actualiza el UpdatePanel y se produce un PostBack asíncrono, o también se actualiza cuando otro UpdatePanel se actualiza, es decir, que si una página tenemos tres UpdatePanels que no están relacionados, si actualizo uno de ellos automáticamente se actualizan los otros dos. Para solucionar este último problema, se puede actualizar el UpdatePanel manual, es decir programáticamente, un ejemplo, aunque esta un poco simple el último ejemplo un posible escenario es si es que dentro de una página aspx, tengo 3 UpdatePanels, y sólo voy actualizar dos, la forma correcta es asignar a la propiedad UpdateMode el valor de Conditional, así solo se actualizarán cuando se produzca un evento dentro de ellos, o cuando se llame explícitamente al método Update del control UpdatePanel.
  3. Cuidado con el dedo compulsivo. Uno de los detalles de usar AJAX, son que cuando se produce un postback asíncrono el usuario (ni el mismo desarrollador) sabe si se ejecuto o no el evento, y entonces vuelven hacer varios clic en el botón para asegurarse que hicieron clic. Es por eso que es necesario usar indicadores para indicarle al usuario, que su pedido se esta procesando, con ASP.NET AJAX pueden usar el control UpdateProgress, pero mucho mejor si lo hacen centrado y bloquean la pantalla.

AjaxControlToolkit (ACT), un juego de controles (ajaxcontroltoolkit.dll) liberados junto con ASP.NET AJAX, hay algunos controles útiles como el control AutoComplete, y bueno otros que se podrían mejorar. Y al igual que ASP.NET AJAX, hay que tener cuidado con el uso del ACT, evaluarlo en nuestros escenarios. Aquí pueden ver los ejemplos de los controles Online, y en algunos controles se aplican la misma regla que el UpdatePanel, primero verifiquen el funcionamiento básico de su página, antes de usar algunos controles del ACT. Ejemplos del ACT, los pueden descargar de la página del mismo en CodePlex, además de los ejemplos se encuentra el código fuente del ACT. Nota: los ejemplos son los mismo que están online, y todos los controles tienen un ejemplo, lo pendiente es revisar que CSS usa el control que vamos a probar, y eso copiarlo a nuestro sitio Web.

Destacado:

Artículos, Videos, Ejemplos:

Saludos,

Published 19/2/2009 0:13 por Sergio Tarrillo
Archivado en: ,,
Comparte este post:
http://geeks.ms/blogs/sergiotarrillo/archive/2009/02/19/143035.aspx

Comentarios

# Recomendaciones para la Adopcion de AJAX usando ASP.NET AJAX | PHP-Blog.com

PingBack desde  Recomendaciones para la Adopcion de AJAX usando ASP.NET AJAX | PHP-Blog.com

# re: Recomendaciones para la Adopcion de AJAX usando ASP.NET AJAX

Muy completa aportación Sergio ;-)

Thursday, February 19, 2009 8:37 PM por Marc Rubiño

# ASP.Net PageMethods: invocar c??digo de servidor desde JavaScript « Nathan

PingBack desde  ASP.Net PageMethods: invocar c??digo de servidor desde JavaScript « Nathan