Material UI / Caching en React

¿Qué es Material UI?

Material-UI es una biblioteca de código abierto que implementa el lenguaje visual de «materiales» de Google en sus componentes React. Ofrece la capacidad de combinar su biblioteca de interfaz de usuario, con el marco front-end de React.js.

Con Material UI se pueden crear diseños profesionales modernos con personalización completa para aplicaciones sin las limitaciones de tiempo de iniciar CSS completo desde cero.

En el siguiente tutorial, veremos algunos elementos y componentes de Material como los cards, con React y Material-UI.

La aplicación implementará React Hooks, React Context, y mostrará los datos, que se cargarán en cards. Dichos datos se obtendrán en formato JSON, y los cuales estarán alojados en un servicio API.

Luego aplicaremos el método de diseño de cuadrículas (Grid) anidadas de Material-UI.

Resultado final

Observando la captura de pantalla anterior, nuestro ejemplo final consistirá en componentes de tarjeta «cards» de Material-UI, modificados para recibir datos de música.

Los datos se alojan en una API REST lanzada en un servidor local, creado para la ocasión mediante: JSON-Server

Implementación paso a paso

Para comenzar, creamos con el terminal una aplicación React, simplemente ejecutando el comando de script npx create-react-app para instalar los paquetes de React.

Desde el directorio de la carpeta de nuestro proyecto, instalamos la última versión de la biblioteca Material-UI con el siguiente comando:

A continuación, abrimos el proyecto usando Microsoft Visual Code, e iniciamos la aplicación en nuestro servidor local con los siguientes comandos:

Una vez instalados los paquetes de la librería base de Material UI, debemos adjuntar los enlaces de la fuente Roboto (Fuente usada por Google) y los iconos en el index.html de la aplicación React.

Entendiendo el funcionamiento del Grid

Consiste en una cuadrícula externa como contenedor y una cuadrícula interna configurada como elemento.

Si tenemos la siguiente configuración:

xs = {12} sm = {6} md = {4} lg = {4} xl = {3}

Esto personalizará nuestra tarjeta interna dentro de la cuadrícula interna a nuestro gusto, haciéndolos adaptables a varios tamaños de navegador.

El elemento de cuadrícula de Material-UI «xl» significa extragrande, mientras que «xs» es extrapequeño. De hecho, se refieren a la selección del tamaño de pantalla de nuestro navegador.

Cuando establecemos xs = {12} en la cuadrícula interna, supone que cuando el tamaño de la pantalla es extrapequeño (Dispositivos móviles por ejemplo), establecemos el elemento para que abarque 12 columnas .

12 es el valor predeterminado en nuestro diseño de cuadrícula, ya que mantiene la máxima flexibilidad sobre cualquier número posible hasta 12. (Para más información sobre cuadrícula CSS y Flexbox.

Si nuestro ancho de cuadrícula máximo es de 12 columnas, y establecemos xs en 12, el elemento de cuadrícula podrá abarcar las 12 columnas, por lo tanto, devuelve un solo elemento.

En cambio, si establecemos mi = {n} (md: tamaño de pantalla mediano) aplica la condición de que, siempre que el tamaño del navegador sea mediano, establecera que nuestro elemento abarque un mínimo de n columnas.

Es una de las ventajas de Material-UI, ya que con solo una pequeña configuración y mediante una simple expresión y cálculo, Material-UI hace que los elementos respondan adecuadamente con un diseño interno de calidad.

Estructura del Proyecto

Componente Home.js

Para usar los componentes de Material es necesario siempre importarlos de sus librerías, como cualquier otro componente React.js. Dicha importación, se puede realizar componente a componente o importarlos en una sola línea.

Cada componente se puede personalizar totalmente, a través de las propiedades de sus clases, mediante hooks o funciones y nos permitiría controlar tanto la lógica de comportamiento como el aspecto. En este tutorial tan solo nos centraremos en los aspectos básicos de algunos componentes.

Centrado de contenido en el Grid

Simplemente es una muestra utilizar el grid y el centrado en pantalla usando características de Flexbox.

Definimos la dirección, alineación horizontal y vertical:

 Probando Inputs de Texto

Como podemos observar el aspecto por defecto es minimalista y limpio siguiendo las directrices de estética de Material.

Definiendo Grid y espaciado en varios elementos

Tenemos una serie de imágenes que se repiten en la cuadrícula:

No tenemos configurado «lg» a ningún valor, así que se asigna 12 por defecto, teniendo en cuenta el espaciado de 4. Debido a esto. con el navegador con el modo de pantalla grande, ocupa todo el ancho posible de forma automática.

Al reducir la pantalla a pequeño «xs», vemos como igualmente toma el valor 12, que sí está definido, tomando todo el ancho disponible que puede, con lo que sólo muestra un elemento por columna, y apila el resto.

Ejemplo de Tabla y Card-Reproductor

En este caso estos elementos son componentes importados. Cada uno tiene su código interno en sus componentes. En el siguiente apartado sólo nos centraremos en el uso de card y su utilización para mostrar datos de forma dinámica.

MusicAPI.js

JSON-Server

JSON-Server es un proyecto de código que nos permite instalar un completo servidor REST API de forma rápida y fácil en nuestro equipo local. Los pasos para configurarlo son los siguientes:

• Instalamos JSON Server:

• Añadimos el servidor en la ruta de nuestro proyecto

• Creamos un archivo con nombre el nombre “db.json” (nombre requerido), y lo colocamos en la carpeta donde vayamos a iniciar el servidor.

• Finalmente, ejecutamos el siguiente comando para iniciar el servidor.

Como Podemos ver, por defecto, arranca en el puerto 3000 de localhost, el mismo puerto que React.

Comprobamos que podemos acceder a los datos del JSON desde el navegador.

Iniciamos el Proyecto React, y lo abrimos en el puerto 3001 al ejecutarse.

Liberías de Material UI Adicionales

Para usar el card del reproductor, es necesario instalar las librerías styles e icon de Material. Procedemos a instalarlos.

Material UI Styles.

Material UI Icons.

Implementada la interfaz de Material a los datos recibidos el resultado será el siguiente:

Generamos el componente MusicApi.js

Para ellos primero importamos todos los elementos necesarios. Esto está definido en la documentación de Material. Los hemos importado por separado para diferenciarlos de mejor forma.

Se pueden importar en una sola línea también, como cualquier otro componente React.

Usamos hooks para definir los estilos.

Accedemos a los datos de nuestro servicio con Axios, en la función cargarMusic(). Anteriormente habremos realizado su import correspondiente.

Axios

Definimos el card con todos los componentes de Material importados y mostramos los datos. Lo mostraremos en un Grid para crear un patrón de repetición en la página. Importante pasar los props de classes en el render ().

Resultado Final

Concepto de Memoria Caché

La memoria Caché o simplemente «Caché» se usa en diferentes ámbitos de la informática. El Concepto de Caché, implica el guardado de cierta información o datos en soporte hardware o software, para acelerar el acceso a los mismos en sucesivas solicitudes. Por lo tanto, el acceso a Caché, siempre es más rápido si lo comparamos con generar nuevas operaciones o peticiones.

Caché en Aplicaciones Web

El uso práctico del Caching en el contexto de una aplicación web, es minimizar el número de veces que se solicitan los datos. Debido a esto, se tiene en cuenta qué parte de la información requerida no varía en repetidas ocasiones. Por tanto, la memoria caché, nos va a permitir agilizar la obtención de información. Por ejemplo, con origen en una base de datos, y a la cual se haya accedido con anterioridad.

También es útil para el dibujado o mostrado de elementos más pesados, a los que se haya accedido con anterioridad desde el servidor. Frecuentemente, estos archivos como imágenes o videos, podrían ralentizar nuestra aplicación.

Esquema de uso de Caché en una petición web

Existen diferentes tipos de caché en el contexto de una aplicación Web según su ubicación:

Existen diferentes tipos de caché en el contexto de una aplicación Web según su ubicación:

• En el lado del servidor (cachés compartidos y pasarela)
• En el lado del cliente (tipo privados) usados en los Navegadores web)

Generalmente los archivos de estilo CSS y los de scripts de Javascript, son guardados en caché para un acceso más rápido, ya que suelen ser contenidos estáticos en una página web o aplicación.

En resumen, Caching nos permite almacenar ciertos datos o páginas en Caché, mejorando así tiempos de respuesta (latencia), liberando recursos y reduciendo el ancho de banda usado por el cliente. Todo esto se traduce en una mejor experiencia de usuario del sitio web.
 

Existen diferentes tipos de caché en el contexto de una aplicación Web según su ubicación:

• En el lado del servidor (cachés compartidos y pasarela)
• En el lado del cliente (tipo privados) usados en los Navegadores web)

Generalmente los archivos de estilo CSS y los de scripts de Javascript, son guardados en caché para un acceso más rápido, ya que suelen ser contenidos estáticos en una página web o aplicación.

En resumen, el Caching nos permite almacenar ciertos datos o páginas en Caché, mejorando así tiempos de respuesta (latencia), liberando recursos y reduciendo el ancho de banda usado por el cliente. En consecuencia, todo esto se traduce en una mejor experiencia de usuario del sitio web.

Aplicando un Sistema de Caché

Vamos a desarrollar un sistema simple para el guardado de información en Memoria Caché, sólo con la librería de React. De esta forma se va a evitar realizar excesivas peticiones al servidor para mostrar la misma información.

AppCache.js

Este componente va a ser nuestro contenedor, donde mostraremos el resto de componentes que van a participar en este ejemplo. Consta de una columna con botones y otra sección donde se mostrarán los datos.

App.js

Componente contenedor principal de cualquier aplicación en React. Contiene un navbar para acceder a las diferentes secciones, un componente Router que nos las mostrará. Obviaremos el contenido de Router.js por no ser de importancia para el ejemplo.

withCache.js

Este componente contiene toda la funcionalidad de gestión de los datos almacenados en Caché.

• Importamos axios para el acceso al servicio
• hashCode nos va a convertir la url de la petición en un hash para almacenarla en memoria.

•  Definimos un contexto React ctxDefault:

*React Context provee una forma de pasar datos a través del árbol de componentes sin tener que pasar props manualmente en cada nivel.

En una aplicación típica de React, los datos se pasan de arriba hacia abajo (de padre a hijo) a través de props, pero esto puede ser complicado para ciertos tipos de props (por ejemplo, localización, el tema de la interfaz) que son necesarios para muchos componentes dentro de una aplicación.

Context proporciona una forma de compartir valores como estos entre componentes sin tener que pasar explícitamente un prop a través de cada nivel del árbol.

• El array del caché está dentro del state, junto con otro array “data”, para almacenar los datos actuales que hay que mostrar en el inferfaz. También tenemos un booleano “isLoading” que indica si la petición está siendo extraída del servidor.

• La función updateCache() juega el papel de guardar y sacar los objetos del caché y devolver los datos del servidor.

• La función testCacheApi() representa la forma de averificar si la petición ya fue lanzada previamente, o se debe lanzar una nueva. Transforma la petición entrante en hash y busca en el caché si existe o no.

• Por último, Definimos los valores que va a tomar el Contexto anteriormente declarado, y los cuales se van a poder recoger en otros componentes sin tener que recorrer de padre a hijo.

• Devolvemos en el return la plantilla de React Context con los datos necesarios.

ListaDiscos.js y Buttons.js

En los siguientes componentes se ha usado Material UI para definir los botones y sus estilos, así como la lista de Música que usa el mismo estilo definido anteriormente, para el acceso al servicio API. También, se ha definido un mensaje de carga para detectar cuando la página realiza peticiones al servidor.

Componente Button es en el cuál se muestran unos botonesque van a llamar a la función testCacheApi. A esta función  le pasamos la url del servicio, para probar el guardado en Caché. Para ver que la página cambia se mostrarán los datos ordenados por id de forma ascendente (por defecto) y descendente.

 Comprobación del sistema de guardado de Caché

• Antes de pulsar cualquier botón no hay datos que mostrar.

• Pulsamos en el botón superior y como se observa, se realiza petición al servidor.

• Nos muestra los datos del servicio, cargando la información del JSON anteriormente definido.

• Comprobamos en cmd como se van realizando las peticiones de los respectivos botones

Depués de que hayamos pulsado al menos una vez en cada botón, no se vuelven a realizar peticiones al servidor, ya que los datos se obtienen directamente de la memoria caché. Esto es así hasta que recarguemos la página en el navegador o pulsando F5.

Conclusión

Finalmente tenemos un diseño de imagen de tarjeta personalizado y moderno. Mostramos nuestros datos con una codificación intuitiva, actualizada, y con estilo.

Como React es declarativo, Material se combina bien en su entorno. Contamos con un estado de la aplicación, y sus componentes, reaccionan ante el cambio de ese estado. Los componentes tienen una funcionalidad dada y cuando cambia una de sus propiedades ellos producen un cambio.

La combinación de los hooks y componentes anidados de React Hooks y Material Design nos brinda un enfoque actualizado, rápido e intuitivo para llevar a buen término el diseño profesional con facilidad.

Así hemos visto cómo podemos crear, desde cero, un diseño de tarjeta moderno «card» combinando las fortalezas de estas bibliotecas.

Pros de Material UI

• Implementa material design en sus componentes
• Agiliza el desarrollo del front-end
• Implementa buenas prácticas como el uso de hooks
• Documentación completa
• Es customizable

Autor: Petrus Uwaleke Mejías

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

Centro: Tajamar

Año académico: 2019-2020

Código / recursos utilizados / Otros datos de interés: https://github.com/Petrusghz/React_MaterialUI_Cache