Logotipo horizontal de Diego C Martín colores invertidos, blanco y naranja para findo negro

Componentes y framewoks frontend con Material Design y alternativas

Categorías:  Autor: Diego C Martin 
Componentes y frameworks frontend web

Hay un debate interesante en la actualidad en cuanto a desarrollo frontend. Mientras unos dicen que el trabajo de los desarrolladores front está advocado a la extinción en cuestión de unos años, supongo que por la proliferación de constructores y maquetadores visuales, por otro lado, vemos que ahora mismo la demanda laboral y formativa es brutal y los frameworks y librerías de componentes frontend no dejan de crecer y competir.

Sin lugar a dudas, toda una maravilla para los que desarrollamos, ya que esto nos facilita la vida, reduciendo enormemente el tiempo a invertir en desarrollo.

Front-end significa interfaz. Es la parte visible de las páginas web y apps, la que vemos los usuarios.

Con Material Design comenzó todo

inicio material design

Google publica en 2014 la versión 5 de Android, Lollipop, y posteriormente da acceso a los desarrolladores a su librería de componentes y filosofía de diseño Material Design con el objetivo de montar fácilmente apps partiendo de la base de que con el material digital, al contrario de con la tinta y el papel verdadero, podemos dar la sensación de que un elemento de puede desplazar o “clicar” mediante el uso de sombras, bordes y demás propiedades, mejorando sustancialmente la usabilidad, precisamente por esa inspiración que tiene de los métodos no digitales.

Material Design se hace popular y crece en los últimos años, llegando incluso a provocar la creación de librerías y frameworks para desarrollo web basadas en sus componentes y formas, como Materialize.

Recursos. Cómo empezar con Material Design

En la web oficial podemos ver demostraciones, documentación e interesantes funcionalidades que han agregado más recientemente como una galería a la que podemos subir los diseños y compartirlos para obtener feedback de los clientes u otros desarrolladores, sets de iconos útiles para botones similares a los de Font Awesome y un editor de temas con el que cambiar fácilmente colores, tipos de letra y demás elementos.

En las guías de Android Developers podemos encontrar información (aún en inglés) sobre cómo implementarelo en nuestras apps y en Abhi Android podemos encontrar bastantes tutoriales, también en inglés. Además, he encontrado esta podemos encontrar bastantes tutoriales.

Y por si no lo conoces, en Android Arsenal podemos encontrar gran cantidad de material ya cocinado.

Materialize, el frontend framework basado en Material Design

En la web oficial de Materialize podemos encontrar todo lo necesario para comenzar. Tienen una buena documentación con ejemplos y venden plantillas prediseñadas para ahorrarnos aún más trabajo y tiempo, que es el objetivo principal de estos entornos. Además, con estos frameworks conseguimos que todos los elementos de nuestros sitios web queden perfectamente homogéneos y con un diseño cuidado.

Las desventajas son las típicas que encontramos en cualquier otro, como que estamos importando muchas funcionalidades que no vamos a usar y ocupa espacio en la librería y, en consecuencia, tiempo de carga y que puede que el aspecto resultante sea similar al de muchos otros sitios web.

Las principales diferencias respecto a otros muy conocidos como Bootstrap o Fundation son: Que no requiere JQuery y que las guías de diseño están inspiradas en Material Design, que al ser los que emplea Google en todas sus aplicaciones, los usuarios estamos familiarizados con ellas y nos aseguramos una estupenda UX.

Cómo empezar con Materialize

  1. Incluir los archivos. Podemos descargar los archivos (CSS + JS) de la página oficial, agregar los CDN o instalarlos en el servidor con NPM.
  2. Preparar la página HTML incluyendo los archivos anteriores, la llamada a los iconos de Google y haciendo uso de la etiqueta viewport para incializar el diseño adaptable en la página.
  3. Incluir componentes mediante el uso de clases en las etiquetas HTML de nuestras páginas.
  4. Si queremos incluir efectos, habrá que hacer una llamada al elemento y agregar el evento mediante JS o JQuery.

En este artículo podemos ver algunos ejemplos explicados en español.

Y ahora…

La guerra de los frameworks y componentes frontend

Alternativas a Materialize y Bootstrap

  • MUI es otro framework CSS basado en Material Design. Se caracteriza por ser muy ligero (unos 12kb en total), no tiene dependencias externas, agrega escuchadores de eventos a los elementos del DOM automáticamente, puede cargar el JS de forma asíncrona y puede funcionar con otras plataformas como React.
  • Flat Remix es una librería CSS ligera que se caracteriza por aportar un diseño plano y bastante característico. En la web se pueden ver algunos ejemplos.
  • Grommet es un framework basado en React y usando CSS Flex y Grid, sigue una línea de diseño propia y apuesta por la accesibilidad.
  • Ant Design también es completamente independiente a Material Design, tiene una amplia documentación e implementaciones para React, Angular y Vue.

En esta página de Stack Share podemos ver muchas más alternativas.

Más sobre componentes web

La genialidad de trabajar con entornos tan modulares y a base de componentes como React, Angular o Vue es que podemos encontrar gran cantidad de material disponible. Si luego le agregamos un framework CSS para pintar el front como los que hemos visto, conseguimos velocidad de carga, diseños elegantes, homogéneos y usables y bajos costes en cuanto a tiempo de desarrollo.

En sitios como GutHub podemos encontrar componentes de lo que queramos. Por ejemplo, estos son los resultados de buscar “React calendar”.

Además existen una serie de especificaciones oficiales sobre los denominados Web Components, como podemos ver en webcomponents.org con el objetivo de asegurar la compatibilidad de los componentes que empleemos en nuestros sitios que sigan este estándar.

Existen 4 especificaciones principales:

  • Custom Elements, que sienta las bases para el diseño y el uso de nuevos tipos de elementos DOM.
  • Shadow DOM, que define cómo utilizar el estilo encapsulado y el marcado en los componentes web.
  • ES Modules, que define la inclusión y reutilización de documentos JS de una manera basada en estándares, modular y eficiente.
  • HTML Template define cómo declarar fragmentos de marcado que no se utilizan al cargar la página, pero que pueden ser instanciados más tarde en tiempo de ejecución.

Ejemplos de librerías que siguen estrictamente los estándares y con las que podemos construir web components son Polymer o Stencil.

Deja una respuesta

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

Artículos de la misma categoría

crossmenu
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram