Patrón Promise y la gestión de Callback

Hoy vamos a tratar un tema muy interesante, el patrón Promise, esta metodología de programación nos facilita la administración de los callback de las ya famosas funciones asíncronas.

“Es importante que quede claro que el patrón Promise no hace que nuestro código sea asíncrono.”

En cierto modo es una nueva re interpretación del patrón observable . A los que estáis desarrollando para Windows App Store esto no os sera desconocido, ya que es uno de los pilares si desarrollas con Java Script pero hoy obviaremos este punto y nos centraremos únicamente en como lo utilizaríamos directamente en entorno web puto y duro.

Antes de nada, veamos como realizaríamos un diseño de callback en Java Script:

Imaginemos que tenemos una función que nos retorna un resultado,

var Res= DoSomething();
alert(“El resultado es:” + Res);

Patrón Callback

Bien, este mismo código se puede diseñar con Callback y quedaría algo así:

DoSomething(success);

function success(result) {
alert(“El resultado es:” + result);
}

O como a mi me gusta más:

DoSomething(function(result){

      alert(“El resultado es:” + result)

});

De esta forma, estamos dejando la gestión del resultado a la función que pasamos como parámetro  Realizando este tipo de diseño podríamos pasar tantas funciones como quisiéramos dependiendo de los tipos de resultado que pudiéramos recibir, de esta forma:

DoSomething(function (result){
      alert(“El resultado es:” + result);
},function (error){
     alert(“Error:” + result);
});
Ahora observemos como diseñaríamos la función principal:
function DoSomething(successCallback, errorCallback) {
    try {
        //do stuff
        //…
        if (typeof successCallback === “function”)
            successCallback(“Respuesta correcta”);
    } catch (ex) {
        if (typeof errorCallback === “function”)
            errorCallback(“Respuesta erronea.”);
    }
}
Pues este tipo de arquitectura se consideraría el Patrón Callback  el cual nos es muy útil para estructurar de una manera mas coherente nuestro código, pero si tenemos en cuenta que, dependiendo el grade de complejidad que tengan nuestras funciones y que posiblemente alguno de los callback tienen llamadas a otras funciones internas, nos podría resultar difícil seguir el flujo de la aplicación.
Patrón Promise

Lo que nos aporta este patrón es una estructuración y una gestión diferente de nuestras llamadas callback. Esta escrito que un Promise tiene tres tipos de estados, “Satisfecho , Insatisfecho , Fallido“. Una de las diferencias esenciales es que en el Patrón Callback es necesario pesarle por parámetro a la función principal los diferentes callback (succcess, error), en cambio con Promise tenemos una llamada mucho más natural ya que no tenemos que indicarle ninguna función en los parámetros. Veamos como:

function DoSomething() {
    var deferred = $.Deferred();
    try {
        //do stuff
       //——
        deferred.resolve(“Resultado correctp”);
    }
    catch (ex) {
        deferred.reject(ex.message);
    }
    return deferred.promise();
}
Podemos observar que creamos un objeto $.Deferred(); que es un objeto que se desprende de la librería JQuery desde la versión 1.5 (leer mas). Desde ese momento utilizaremos este objeto para cambiarle el estado y como ultimo retornarlo, daros cuenta que cambiarle el estado al objeto seria como realizar las llamadas que recibíamos por parámetros con el Callback.
Como podemos ver, con este patrón, la función principal no tienen que realizar ninguna gestión de que callback utilizar ni ninguna comprobación adicional, únicamente se preocupa de realizar su trabajo y de cambiar el estado al objeto $.Deferred() y sera JQuery quien realizara la gestión de los callback.
Ahora veamos como se consumiría esta función:
       var promise = DoSomething();
        promise.then(function(result) {
            alert(“El resultado es: ” + result);
        },
        function(error) {
            alert(“Error: ” + result);
        });
Bueno, puede parecer un poco complicado pero si realizáis algunos ejemplos veréis que todo lo contrario y sobretodo veréis que este patrón es muy importante en la actualidad.
Como siempre espero que os haya parecido interesante .
Ciao!
Anuncios

Html Helpers ( Encapsulación )

Voy a comenzar esta entrada explicando un poco el concepto de los Helpers en ASP.NET MVC.

Los Helpers son simplemente bloques de código encapsulados para facilitar la creación y configuración de controles. Estos nos aportan también la posibilidad de la reutilización en cualquiera de nuestras vistas.

Razor, nos ofrece unos cuantos Helpers muy interesantes y que nos facilitan mucho la creación de controles típicos, pero hoy no nos centraremos en los ya definidos por Razor sino, en la creación de Helpers personalizados.

Veamos cómo crear uno:

“Antes de nada comentar que vamos a crear nuestro helper de forma global para que sea accesible desde cualquier vista, de esta forma damos mucho más sentido al principio de reutilización de estas clases.”

En el siguiente ejemplo vamos a crear un Helper para listar nuestros productos, de tal manera que en cualquier página que necesitemos realizar un listado de productos únicamente tendremos que consumirlo y tendremos como respuesta una lista ya maquetada.

@helper ListadoProductos(List<Product> Productos) {

<ul id=”LPruductos”>

@foreach( var itm in Productos) {

<li>@itm.Nombre ($@itm.Precio)</li>

}

</ul>

}

Este código lo vamos a realizar en un archivo con extensión .cshtml lo llamaremos Helpers.cshtml y lo vamos a guardar en la carpeta App_Code de nuestro proyecto, de esta
manera lo vamos a globalizar .

captura1

De esta manera, cuando queramos utilizar nuestro helper únicamente deberemos llamar a nuestros métodos de la siguiente manera.

<div>

<p>Listado de nuestros productos</p>

@Helpers.ListadoProductos(Model.Productos)

</div>

Conclusión 

Bueno, hemos visto como crear un helper aprovechando la sintaxis que nos proporciona Razor y podemos ver lo interesante que nos puede resultar para realizar lógicas globales y reutilizables .

Espero que os haya parecido interesante y de ayuda.

Ciao!