Cómo utilizar Material Web Components

5min

En sus inicios, se entendía Material Design como las guías de estilo de Google para Android. Sin embargo, se ha convertido en todo un estándar que actualmente podemos encontrar en aplicaciones de escritorio u páginas web y cuyo concepto se ha llegado a ampliar hacia los Web Components. Es lo que denominamos Material Web Components que, basados completamente en JavaScript nativo, protagonizan este artículo en el que explicamos su funcionamiento de cara a utilizarlos en cualquier proyecto y caso de uso.

Aunque existen multitud de frameworks para utilizar Material en aplicaciones y páginas web, Material Web Components tiene dos puntos muy interesantes que lo hacen diferente: está desarrollado por Google y utiliza Lit-HTML como librería para la creación de templates HTML en JavaScript, por lo que ofrece un altísimo rendimiento. En Lit-HTML, una librería JavaScript que merece la pena, explicábamos las características más destacadas de esta librería. Además,  utiliza el estándar Web Components, por lo que permite la encapsulación del entramado de los componentes y los elementos se incorporan a la aplicación a través de etiquetas HTML personalizadas.

Lo vemos mejor con estos ejemplos para colocar un botón y cuyas características complicamos progresivamente para poder entender todo el potencial de Material Web Components:

  • Con Material Web Components lo haríamos así: 
    <mwc-button>Click aquí</mwc-button>
  • Y en Materialize CSS, de la que hablamos en ¿Qué nos aporta Materialize CSS en Desarrollo Web?, lo haríamos de este modo: 
    <a class='waves-effect waves-light btn'> Click aquí </a>
  • Si la interfaz es más complicada, como permutar un botón, requeriremos un único elemento con Web Components: 
    <mwc-switch>sentiment_very_satisfied</mwc-switch>
  • Y en Materialize nos veríamos forzosamente a usar HTML específico, con CSS y, provisionalmente, JavaScript: 
    <div class='switch'>
   <label>
     <input type='checkbox'>
     <span class='lever'></span>
   </label>
 </div>

Como vemos, con Web Components es todo más liviano, agregas solo los paquetes que vas a utilizar, su mantenimiento es más sencillo y, a través de Webpack, puedes unir los ficheros en un único JavaScript optimizado.

Componentes disponibles

Dentro de la sección packages de Github, encontraremos la lista de los componentes disponibles, donde encontraremos  una enorme lista de elementos: campos de formulario, listas, iconos, tarjetas, botones, menús, navegadores colapsibles y muchos  más. Todos ellos a nuestra disposición y listos para ser implementados.

Índice

Un ejemplo práctico de Material Web Components

Aunque Material Web Components requiere de más pasos y conocimientos con respecto a otras librerías, los resultados que obtendremos serán bastante superiores. A continuación, lo explicamos con un ejemplo práctico:

  • Instalando el componente deseado.  

Lo primero será instalar el componente que queremos utilizar como dependencia en nuestro proyecto.

npm i @material/mwc-icon

Hemos instalado el componente mwc-icon, que se ocupa de crear una biblioteca de iconos Material para utilizarlos en la página con una única etiqueta.

  • Añadir el componente en una Web.  

A continuación, crearemos un archivo JavaScript donde importaremos este componente. Le llamaremos index.js y lo enlazaremos en la página:

import {Icon} from '@material/mwc-icon'
<script type='module' src='index.js'></script>

type=»module» es necesario porque usa el importado de módulos ES6.

  •  Utilizar los iconos Material.

Ya podemos utilizar la etiqueta mwc-icon con el nombre del icono que queremos incorporar:

<mwc-icon>menu</mwc-icon>

En la página de Material Icons podemos ver los nombres de los iconos.

  •  Hacer correr la web desde un servidor que permita módulos desde el nombre del paquete npm. 

Dado cómo está construido el código de los componentes, para que nos funcione tendremos que hacerlo mediante una de estas dos formas:

  • Cuando estamos en la etapa de desarrollo, tendremos que utilizar un servidor web que sea capaz de interpretar las rutas de archivos a través de los nombres de los paquetes npm, como el que dispone Polymer CLI.
  • En la etapa de producción, podremos utilizar Webpack como herramienta que comprenda las rutas de archivos a través de nombres de paquetes npm y así construir los bundles correspondientes.

Con Polymer-CLI, para la etapa de desarrollo, su instalación sería así:

npm i -g polymer-cli

Para arrancar el servidor sería con:

polymer serve

Nos arrojará un mensaje donde veremos la URL y el puerto. Algo como esto: https://125.0.0.1:8081/

Conviene subrayar que funcionará en navegadores compatibles con Web Components y que lean módulos JavaScript ES6, como Chrome, Safari y Opera. En otros, habría que hacer uso de Polyfill.

Fernán García de Zúñiga

Artículos relacionados

Productos relacionados: