Concepto y aplicación de Caching

En el siguiente Post vamos a tratar el concepto de Caching. Para ello veremos un ejemplo con la aplicación de este sobre un caso real en el que mediante la utilización de caching mantendremos el estado de la página. La imagen aleatoria no se cargará pasados 5 segundos, como le indicamos nosotros mediante una serie de acciones a detallar a continuación.

¿Qué es Caching?

Para entender el concepto de caching debemos puntualizar que de manera regular es la vista (View) la que tira del controlador (controller) para funcionar, es decir, todo el tiempo la vista lee del controlador.

En el caso del caching no ocurre lo mismo. Indicando el uso de caching, la vista (view) no lee la página, sino que recupera el estado de esta.

El caching se realiza de una manera muy sencilla indicando mediante “decoración”, es decir, etiquetas en los métodos del controlador (controller) que nosotros queramos bien sea un método GET, como un método POST con la etiqueta [ OuputCache( ) ] indicamos como quiero que funcione nuestro método.

1

De igual manera [OutputCache(Duration = 5)], Duration se le indica en segundos cuanto tiempo queremos que dure el caching, es decir le indicamos el tiempo que va a mantener la aplicación el caching.

2

Caso práctico aplicación de caching

Para entender mejor el siguiente POST, explicare los objetivos y desarrollos de este.

El objetivo del post es mostrar un Random de imágenes tanto de héroes como de princesas de Disney dependiendo del enlace seleccionado en la vista.

3

El conjunto de imágenes está separado en distintas carpetas por género, por un lado, princesas, y otro, héroes.

4

Dependiendo del enlace seleccionado, el cual le pasa un dato al controlador, que determina si la imagen aleatoria será de un héroe o una princesa. Con el uso de caching pretendemos mantener el primer Random es decir la primera imagen aleatoria de héroe o princesa durante 5 segundos como indicamos con [OutputCache(Duration = 5)] y al pasarle el parámetro dato le indicamos qué imagen aleatoria queremos, héroe o princesa.

El caching nos mantiene el estado de la página durante 5 segundo por lo que hasta que no pasan estos 5 segundos el caching mantiene el estado de la página con la imagen seleccionada en un principio e indicada a través de dato. En nuestro caso dato = 1 o dato = 2 para referirnos a que mantenga el estado de la página con la imagen seleccionada del héroe o  la princesa.  

5

Con otras palabras, la aplicación no vuelve a entrar, por más que volvamos hacer click sobre el enlace en la vista, al método de mostrar imágenes aleatorias de héroes o princesas, pasados estos 5 segundos. Esto se debe a la utilización de [OutputCache(Duration = 5)], y mediante “VaryByParam = dato”, le indicamos que mantenga la imagen del Random escogido (de héroe o princesa) tras el click en uno de los dos enlaces de la vista.

6

Una vez hemos clicado en uno de los enlaces, la imagen no cambiara hasta pasados estos 5 segundos, al mantenerse el estado de la página durante ese tiempo con caching.

Para entender el funcionamiento de nuestro countdown debemos saber que el cache comienza en cuanto visualizamos la vista. 

7

Nuestro countdown se reiniciará siempre que la página vuelva a cargar de nuevo, bien sea entrando desde un enlace, como refrescando la propia página. Esto se debe a que no le hemos pasado ningún parámetro, como en el caso de las imágenes, para indicarle que mantenga el estado de la página al recibir dicho parámetro. Es por esto, por lo que el countdown se reiniciará tras volverse a cargar la vista.

8


9

Autor: Alejandro Fernandez Crespo

Curso: Microsoft MCSA Web Applications + Microsoft MCSD App Builder + Xamarin

Centro: Tajamar

Año académico: 2018-2019

Código / recursos utilizados / Otros datos de interés: https://github.com/afndezcrespo/Concepto-y-aplicacion-de-Caching

Leave a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.