¿Por qué usar UpdatePanels de AJAX en ASP.NET no es muy efectivo?

Hola que tal! en esta ocasión les comentare, sobre el uso de los UpdatePanels de AJAX en los desarrollo de aplicaciones web de ASP.Net, les diré que si eres como yo de las personas que les gusta el desarrollo rápido de aplicaciones .Net, esto es bueno saberlo a la hora de desarrollar aplicaciones, pues bien, cuando estamos realizando aplicaciones y descubres lo grande que pude ser el Uso de ScriptManager y Updapanels tanto así que todas nuestras aplicaciones del ponemos una infinidad de UpdaPanel, ya que nos facilita el desarrollo y lo hacemos de una manera impresionante, incluso sin conocimiento de lo que realmente está pasando detrás.

Pero desafortunadamente al no tener el conocimiento de lo que sucede de la mecánica que hay en la arquitectura Cliente-Servidor, bueno posiblemente ya estés familiarizado con el siguiente código, incluso harto de ver, pero esto lo hago para ejemplificar:

   <form id="form1" runat="server">
        <div>
            <asp:scriptmanager id="ScriptManager1" runat="server" />
            <asp:updatepanel id="upPanel" runat="server">
                <contenttemplate>
                    <asp:label id="lblFecha" runat="server" text="Fecha" /><br />
                    <asp:button onclick="btnAceptar_Click" id="btnAceptar" runat="server" text="Postback Actualizar" />
                </contenttemplate>
            </asp:updatepanel>
        </div>
    </form>
 protected void btnAceptar_Click(object sender, EventArgs e)
 {
     lblFecha.Text = DateTime.Now.ToLongDateString();
 }

image

Tan simple como se ve, no hay nada de complejidad de hacerlo, pero ahora echar un vistazo en la parte real de la respuesta necesaria para lograr la devolución parcial de datos de HTTP:

image 

image

Para esto vamos usar los WebMethods, como ya lo he publicado en mi post sobre estos y llamarlos con JQuery y haciendo uso de JSON, pero para terminar con la comparativa de usar los UpdatePanels y los WebMethods, voy  a llamar el WebMethod con JavaScript.

Los métodos de la página permiten a las páginas de ASP.NET permiten ejecutar directamente métodos estáticos de la página, usando JSON(JavaScript Object Notation), JSON es básicamente es una versión minimalista de la versión de SOAP, el cual es perfecto para la respuestas ligeras con la comunicación entre el cliente y el servidor, pero bueno seguimos con nuestra comparativa.

En el código de C# agregamos la siguiente referencia:

using System.Web.Services;

Agregamos el “[WebMethod]” siguiente que obtendrá la fecha actual, lo mismo que se obtenía a través del evento del botón pero ahora en la llamada de este método por medio de JQuery:

[WebMethod]
public static string GetActualFecha()
{
   return DateTime.Now.ToLongDateString();
}

Cambiamos nuestro cuerpo de nuestra pagina como sigue:

y habilitamos enablepagemethods="true"- en el ScriptManager

<form id="form1" runat="server">
        <div>
            <asp:scriptmanager id="ScriptManager1" runat="server" enablepagemethods="true" />
            <script language="javascript">
                function ActualizarFecha() {
                    PageMethods.GetActualFecha(OnSucceeded, OnFailed);
                }

                function OnSucceeded(result, userContext, methodName) {
                    $get('lblFecha').innerHTML = result;
                }

                function OnFailed(error, userContext, methodName) {
                    $get('lblFecha').innerHTML = "Un error Ocurrido.";
                }
            </script>
            <asp:label id="lblFecha" runat="server" text="Update Me!" /><br />
            <input onclick="ActualizarFecha();" id="Button2" type="button" value="WebMethod Actualizar" />
        </div>
    </form>

Presionamos el Boton  y veremos que es el mismo resultado que obtuvimos con anterioridad:

image

A través de este método eliminamos por completo los datos HTTP POST que estaba presente en la solicitud UpdatePanel, y como podemos notar se redujo la respuesta con solo los datos que estamos interesados en solicitar:

image

En el uso de JSON toda la respuesta HTTP es de 40 bytes, en comparación con 816 bytes para el UpdatePanel. Esto es una mejora más del 3000% que solo seguir aumentando la complejidad de la página.

Esto ha reducido de manera significativa la cantidad de datos que viajan a través de la red, pero elimina la necesidad de que el servidor para crear instancias de los controles del UpdatePanel y llevarlos a través de su ciclo de vida para crear el HTML devuelto al navegador.

Después de hacer este pequeño análisis pues espero que les haya quedado más claro el uso del UpdatePanel, aunque para mí como desarrollador de aplicaciones sigo utilizando el UpdatePanel con moderación y prudencia, en cualquier situación donde no se tenga una gran carga de información así como el número de clientes que accedan, pero tengan en cuenta cuando se haga en uso intensivo ya que muy rara vez sea la mejor solución.

Bueno esto ha sido todo hasta la próxima!.

Deja un comentario