Material Design se ha incorporado en nuestro día a día. Inicialmente eran las guías de estilo de Google, para las aplicaciones Android, pero actualmente lo podemos encontrar en muchos ambientes, como aplicaciones de escritorio y por supuesto webs.

En el artículo que estás leyendo vamos a hablar y explicar el funcionamiento de una serie de componentes "Material", que podrás utilizar en cualquier proyecto, creados por el propio equipo de Google y basados en el estándar de Web Components, por lo que están escritos solamente con código Javascript nativo.

Este proyecto lo encuentras en Github en la URL: https://github.com/material-components/material-components-web-components

¿Un nuevo framework para diseño Material Design?

Si estás al día en el mundo del desarrollo web sabrás que existen muchas alternativas para incorporar diseño "Material" en sitios y aplicaciones web. Además son alternativas de todos los tipos: Basadas en frameworks como "Angular Material", "Paper elements" (Polymer) o "Material-UI" (Para React), basadas en CSS y Javascript como "Materialize", "MUI", "Material Design Lite", etc.

Es un poco desconcertante! Quienes estamos en el mundo frontend hasta lo podemos entender, pues no es más que un reflejo de la situación actual en el ecosistema Javascript. Sin embargo, aunque podríamos pensar que "Material Web Components" no viene a dar más que una alternativa más, quizás innecesaria, tenemos algunos puntos importantes que lo hacen diferente.

• Lo desarrolla el propio equipo de Google
• No usa ningún framework.
• Actualización: Hace pocos días lo han publicado cambios en los componentes y ahora usan Lit-Element, que es una librería de Google ultra-rápida para producir templates HTML en archivos Javascript.

La diferencia de Web Components

Alguien Podría decirme que el competidor "Materialize" reúne también estas condiciones, ya que usa solamente CSS y JS nativo. Pero la diferencia son los "web components". "Material Web Components" está realizado a base del estándar Custom Elements, por lo que permite encapsulación de la mayoría de las complejidades de los componentes.

Material Web Components usa el estándar Web Components V1. Eso quiere decir que los elementos material que vas a usar serán incorporados en tu aplicación por medio de etiquetas HTML personalizadas.

Por ejemplo, así colocas un botón:

<mwc-button>Haz clic</mwc-button>

Mientras que así se colocaría un botón en MaterializeCSS:

<a class="waves-effect waves-light btn">Haz clic</a>

Cuando la interfaz es un poco más compleja, como un botón interruptor on/off, seguimos necesitando un único elemento con Web Components:

<mwc-switch>sentiment_very_satisfied</mwc-switch>

Mientras que en un framework CSS como Materialize estaríamos obligados a trabajar con un marcado HTML específico, junto con las reglas CSS y eventualmente de Javascript.

<div class="switch">
  <label>
    <input type="checkbox">
    <span class="lever"></span>
  </label>
</div>

A medida que el elemento Material es más complejo, puede requerir un marcado HTML compuesto por un árbol de etiquetas más abundante, mientras que el Web Component puede seguir siendo una única etiqueta. En resumen, la complejidad del elemento se queda encapsulada dentro del web component y el HTML de nuestra aplicación será mucho más expresivo, sencillo, con mayor facilidad de mantenimiento, etc.

Otra de las ventajas es que, al trabajar con Web Components, tú eliges qué componentes quieres agregar a tu paquete de componentes, ya que cada uno está en un archivo por separado. Piensa que quizás solamente necesitas el juego de iconos material, botones y campos de texto. El problema de los frameworks CSS es que generalmente viene todo el paquete completo de componentes y se quedan ocupando espacio en tu proyecto aunque no los uses.

A través de herramientas como Webpack puedes unir los ficheros de todos los componentes que necesites en un único archivo Javascript optimizado. Aunque no es un proceso complicado cuando lo sabes hacer, aprender a crear tu entorno de Webpack no es trivial. Quizás esta sea la desventaja fundamental de Material Web Components: requiere del desarrollador conocimientos extra, en comparación con otras librerías como Materialize CSS.

Componentes disponibles

Los componentes material son una lista enorme de elementos como campos de formulario, botones, iconos, tarjetas, menús, listas, navegadores colapsibles y mucho más.

En el repositorio de Github en la sección packages puedes ver una lista de los componentes que están disponibles. En el momento de escribir este artículo muchos están en desarrollo, pero ya permite se pueden usar algunos de ellos y hacernos una idea del potencial de este proyecto.

Probar un web component Material

Como decía, la necesidad de conocimientos extra para producir tu entorno de trabajo y configurar las herramientas para llevar a producción un proyecto, puede ser considerada una desventaja de Web Components en relación a un framework CSS como Materialize, que es más sencillo de integrar en una web.

Es decir, usar Material Web Components requiere de más pasos y conocimientos, con respecto a otras librerías. Pero eso no es una desventaja, una vez que lo sabes hacer, puesto que los resultados sí podemos afirmar que son bastante más optimizados, básicamente porque puedes escoger qué componentes instalar en un proyecto, creando archivos para llevar a producción con tamaños más ajustados.

Mientras que instalar Materialize requiere colocar un par de etiquetas en la página (una para instalar el script Javascript y otra para instalar el archivo CSS, que puedes traer desde un CDN), un Material Web Component requiere lo mismo, pero necesitas crear todo un flujo para instalar los archivos en la etapa de desarrollo y para generar el código para llevar a producción.

La parte complicada de los Web Components es justamente crear ese flujo, para además asegurarnos la compatibilidad con todo tipo de navegadores. Esa parte es materia de estudio de un artículo aparte, pero ahora vamos a dar una vía de instalación de los componentes que te permite realizar este test en pocos pasos.

Instalar el componente deseado

Primero tenemos que instalar el componente que deseamos usar como dependencia en nuestro proyecto. Esto lo hacemos gracias a npm.

npm i @material/mwc-icon

En este caso hemos instalado el componente "mwc-icon", que sirve para crear toda una biblioteca de "iconos Material" que puedes usar en la página con una única etiqueta.

Incorporar el componente en una web

Luego tenemos que crear un archivo Javascript donde importemos este componente. El archivo le puedes llamar "index.js", por ejemplo. Tendrá este código:

import {Icon} from "@material/mwc-icon"

Luego tienes que enlazar el archivo Javascript, que hemos llamado index.js, en la página web.

<script type="module" src="index.js"></script>

Fíjate que lo importamos con type="module", algo necesario porque este archivo usa el importado de módulos ES6.

Usar los iconos material

Hecho esto, ya puedes usar el componente para incorporar iconos. Es una única etiqueta, de nuestro elemento personalizado, llamada "mwc-icon". Como contenido de esa etiqueta colocas el nombre del icono que quieres usar, por ejemplo:

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

Eso es el típico icono de menú "hamburguesa". Pero hay cientos de iconos, por ejemplo:

<mwc-icon>home</mwc-icon>

Arrancar la web desde un servidor que acepte módulos a partir del nombre del paquete npm

Tal como está construido el código de los componentes, si abres la página haciendo un doble click sobre el archivo, no funcionará. Tampoco funcionará si lo haces desde un servidor web común como Apache. Para que funcione tienes que hacer una de estas dos alternativas:

• Para la etapa de desarrollo, usar un servidor web que sea capaz de entender las rutas de archivos por medio de los nombres de los paquetes npm, como el que viene con Polymer CLI.
• Para la etapa de producción, usar una herramienta como Webpack que sea capaz de entender las rutas de archivos por medio de nombres de paquetes npm y construir los bundles correspondientes, donde tendremos en un único fichero, o varios, todo el código importado.

De momento para hacer las cosas rápidamente, nos vamos a conformar con poner esta página en funcionamiento con el Polymer-CLI, que sería válido para la etapa de desarrollo. Si no sabes cómo instalarlo es muy sencillo:

npm i -g polymer-cli

Luego arrancas el servidor con el comando:

polymer serve

Entonces te aparecerá un mensaje donde está la URL y el puerto donde tienes corriendo el servidor web arrancado. Será algo como http://127.0.0.1:8081/

Eso es todo! ahora podrás ver los iconos material que hayas usado. Si ves los nombres de los iconos, entonces es que en el proceso has realizado algún paso mal.

Conclusión

Hay que seguir los pasos a esta librería de Google, pues todavía está en fase de desarrollo. Yo ya he usado componentes como los iconos o botones en algún proyecto, pero no están todos los componentes todavía disponibles.

Lo que nos ha faltado por ver es cómo integrar estos componentes en aplicaciones que podamos llevar a producción de una manera optimizada, materia de estudio de un próximo artículo.