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.
Índice de contenidos del artículo
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.
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.
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.
En este artículo podemos ver algunos ejemplos explicados en español.
Y ahora…
En esta página de Stack Share podemos ver muchas más alternativas.
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:
Ejemplos de librerías que siguen estrictamente los estándares y con las que podemos construir web components son Polymer o Stencil.