Ultimos Posts:

Trucos de guerrilla: Como mejorar sitios desarrollados con ASP .net AJAX

Fecha entrada: Jan 2008

Palabras Clave: ASP .net; AJAX ASP .net; GridView; Validation; Performance; Session; Viewstate; Hosting; .net framework 3.0; Java Script; JSON; Web Services; Networking; HTML; DHTML; DOM; UpdatePanel; Partial Rendering; ScriptManager;

Resumen post:

Siempre que sale una nueva tecnología, nosotros los desarrolladores tendemos a aprender como hacer las cosas bien y evitar problemas a base de cabezazos... los bueno frikis (como yo :-)), estamos tan ansisios de jugar con nuevas cosas que estamos tentados a decirles a nuestros jefes/clientes, cosas como... "Tu aplicacíon irá el doble de rapido", "Vamos a poder entregar en la mitad de tiempo"... y olvidamos cosas como que las nuevas tecnologías siempre son un desafio nuevo, que hay una curva de aprendizaje...

Este post intenta ahorrarte unos cuantos cafes a las tantas de la mañana, contandote unos trucos / pistas aprendidos de la experienca en proyecto reales (2 de la mañana, ojos inyectados en sangre... :-)).

Post:

Vamos con las pistas:

--> No te fies de localhost: Es muy importante tener un servidor remoto para probar tus desarrollos desde el primer día, idealmente tendría que ser un sistema y entorno parecido al que vayas a tener en producción, en caso de no ser posible, es buena idea contratar un hosting barato ASP .net y protegerlo con un usuario y clave (es vital realizar builds diarios a dicho servidor y chequear que tal se porta la aplicación, nos llevaremmos desagradables sorpresas, mejor ahora que cuando el sistema este en producción y sea demasiado tarde).
--> Updatepanel no es el anticristo… pero no es la solución a todos tus problemas (y puede ser el origen de otros).
--> Utiliza UpdatePanel para operaciones en las que el usuario espera que haya un retraso, por ejemplo refrescar / filtrar un GridView. No lo uses para cosas como: hacer una validación en servidor, llamar a un código de servidor cuando haya un cambio de selección en un combo o checkbox... (cosas en las que el usuario espera una respuesta en tiempo real).
--> Script services (llamadas a servicios web via librerías AJAX) más actualizaciones de la página utilizando DHTML, es el camino a seguir, pero... en algunos casos puede ser complicado de implementar, tienes que poner en una balanza el presupuesto que tienes, el tiempo que tienes para entregar el proyecto, las capacidades de los recursos que tienes disponibles, y la ganancia que vas a tener (mayor velocidad, usabilidad....) comparado con unsar partial rendering / UpdatePanels. Unos sitios en los que encajan muy bien los script services son: en validaciones de servidor (nos ahorramos un postback), o si tenemos que actualizar datos de sólo lectura (ponemos un DIV, enviamos una petición a un servicio web, dicho serivicio devuelve un trozo de HTML y dicho fragmento lo utilizamos como inner HTML del DIV que tenemos en la página).
--> Por defecto todos los UpdatePanel de un página se actualizan en cada post parcial: Configura el atributo updateMode a Condicional y sólo se actualizaran los paneles que se necesiten en cada llamada (tenemos que manualmente añadir llamadas del tipo MiPanel.Update en el código de servidor). más información
--> Crea Update Panels tan pequeños como sea posible: Cada vez que el script manager envia una petición toda la página (ViewState, ...) se envía en la misma (la petición tiene el mismo tamaño que un post normal), pero la respuesta que tu obtienes de vuelta depende del tamaño del UpdatePanel que tienes que actualizar, para páginas de complejidad media/alta no uses un sólo UpdatePanel para toda la página.
--> Puedes refrescar más de un UpdatePanel en una llamada parcial: No necesitas ajustar tu layout de la página a los UpdatePanel que tengas, puede tener un UpdatePanel en una esquina y otro en otra (por ejemplo, EsquinaArribaPanel, EsquinaAbajoPanel), una vez que se envía un petición de actualización parcial de por ejemplo EsquinaAbajoPanel, podemos indicar en código de servidor que también se actualize EsquinaAbajoPanel, o los dos, por ejemplo:
EsquinaArribaPanel.Update()
EsquinaAbajoPanel.Update()
--> Page request manager es un singleton: Esto quiere decir que sólo puede procesar una petición a la vez, imaginemos que tenenemos una pagina con dos botones que está dentro de un UpdatePanel (botonA actualiza el textBox txA, BotonB actualiza el textbox txB), si el usuario hace click en el botonA y mientras la petición se está enviando al servidor, el usuario pulsa en BotonB, la primera petición se cancela y sólo tendríamos txB actualizado. Normalmente no te das cuenta de este problema ya que te la información la sueles mostras en los controles HTML (si la petición se cancel, la nueva tiene los datos para ejecutar el código de servidro en algún control HTML), pero esto depende de la lóica de tu página, tenlo en cuenta, dos workarounds para resolver esto son: usa script services y actualiza tu página utilizando DHTML, ó deshabilita el interfaz de usuario mientras la petición se envía al servidor y es procesada (puedes optar por deshabilitar sólo los controles que hace post partial).
--> Los servicios web que vas a consumir en tu sitio AJAX son "especiales": Cuando utilizas script services, llamas a unos serivicios web "especiales", qué sólo van a ser consumidos por tu sitio web, para mejorar el rendimiento, hacer que tu sitio vaya como una moto y no complicar el código Javascript, no uses SOAP XML, utiliza JSON ( sólo tienes que añadir el atributo "scriptable" a tu servicio web, y la librería AJAX hará casí todos el trabajo de serialización por ti). Otro punto a tener en cuenta es que normalmente los servicios web no tienen estado, en nuestro caso es buena idea habilitar la sesión para los que vayamos a desarrollar (de esta forma puedes compartir con tu aplicacíon web un montón de datos, por ejemplo que usuario esta logado, sin tener que meterte en berenjenales como WSE, ...) más información
--> El ViewState te puede crear graves problemas de rendimiento: Recuerda que cuando utilizas partial rendering (UpdatePanel...), el ViewState viaja en cada petición que realizes, si tu página tiene un viewstate enorme, puedes tener problemas de rendimiento, intenta ir deshabilitando el viewstate control por control (el más crítico suele ser el GridView). Tener un ViewState que pesa 1 Mb te puede significar un problema serio (otro truco para reducir el tamaño de una página es mantener los ID's de los naming containers cortos, ya que estos se repiten y concatenan en cada control de tu página).
--> Los validadores de Asp .net 2.0 estándar no funcionan bien al 100 % cuando utilizas Partial Rendering (UpdatePanel): Scott Guthrie ha publicado un parche que arregla esto, para tenerlo funcionando sólo tienes que bajarte una DLL y cambiar unas entradas en el web.config, más información
--> Utilizar AJAX toolkit es de gran ayuda, pero asegurate de que los controles que vas a usar cubren la funcionalidad que esperas: Las librerías AJAX toolkit tienen controles magníficos, que te ahorrara escribir un montón de código así como tiempo, controles como: AutoCompleteExtender, ModalPopup, Accordions, Cascading dropdowns..., pero no siempre se ajustarán 100 % a la funcionalidad que tu necesites, a esto hay que sumarle que modificar su comportamiento no es algo directo, antes de prometerle nada a tu jefe o cliente, haz una pruebe de concepto que te asegure que el control cubre lo que esperas.
--> Antes de usar ningún patrón MVP, MVC pattern o Web Client Software Factory: Mira que tal encaja con AJAX y partial rendering, por ejemplo: alguna de las implementaciones disponibles no soportan UpdatePanels.
--> El control AutcompleteExtender: Es una excelente alternativa a tener combos con miles de entradas (y te va extrayendo los datos utilizando script services, con lo que obtienes un rendimiento excelente).
--> No pienses en usar AJAX para todo: Hay veces en las que ponemos el chip de "hacerlo con AJAX", y nos olvidamos que alguna funcionalidad se puede implementar utilizando sólo código en cliente javascript (por ejemplo cargar un conjunto peuqeño de valores de una combo dependiendo de algunos checks). Las soluciones javascript puras suelen ser más rápidas que las soluciones AJAX (no hay viaje extra al servidor).
--> La instancia de script manager puede ser accedida desde una página hija o un user control: Perfectamente, puedes definir el scriptmanager en tu master page, y después acceder a él desde cualquier página hija o user control, sólo tienes que usar: ScriptManagerProxy en el ASPX o ScriptManager.GetCurrent(this.Page) en el code behind, utilizando esto puedes hacer cosas como hacer includes de ficheros javascript desde un user control.
--> Puedes forzar a un botón que este dentro de un UpdatePanel a hacer un post commpleto No te hace falta ajustar el aspecto de tu página para que encaje con tus UpdatePanel, puedes forzar un postback completo cuando un usuario pulse un botón, llamando en el pageload ScriptManager.RegisterAsyncPostBack(yourControlID), más información
--> Como hacer que RegisterStartupScript vuelva a funcionar (ejecutar javascript cuando una página se cargue): Tienes un método muy parecido en el ScriptManager, scriptManager.RegisterStartupScript.
--> Te puedes suscribir a eventos javascript para detectar cuando se recibe un respuesta de un partial post o cuando han habido errores, o incluso puedes cancelar la petición que está en ejecución. Es fácil hacer cosas como hacer un que un UpdatePanel parpadee cuando se reciba la actualización del mismo. Más información

Puedes encontrar una selección de artículos sobre AJAX ASP .net aquí

Page (1) Of 1