Bootstrap vs Materialize

Es poco frecuente hoy en día la realización de un proyecto web sin la ayuda de frameworks o librerías. Cada lenguaje tiene los suyos propios. En Php existen, por ejemplo, Symfony (del que no hay mucho más que hablar, dado que está todo dicho), un framework completo y pesado, o alternativas como Silex que , aunque basado en Symfony, es considerado un micro-framework por ser ligero y recortar en ciertas funcionalidades. Y cómo estos hay decenas más.

Al meternos en la órbita de Css ocurre más o menos lo mismo. Existen muchísimas posibilidades a la hora de emplear un framework en nuestros proyectos. 

Presentaremos a continuación aquellos que van a hacer de contrincantes en esta entrada.

         

Uno de los frameworks más conocido es Bootstrap, que ahora marcha por su versión 3. Este framework ha sido empleado desde en Twitter hasta en proyectos de la NASA, y hasta el momento es el proyecto más popular de Github.

Otro framework a tener en cuenta (y el antagonista de Bootstrap en esta exposición) es Materialize. Este conjunto de librerías posee, como Bootstrap, la finalidad de agilizar y automatizar la programación de estilos. Asimismo, su diseño está basado en Material Design de Google, lo que genera páginas muy visuales con relativamente poco esfuerzo.

Tanto Bootstrap como Materialize tienen en común el ya estandarizado diseño en grid, muy popular estos últimos años debido a su flexibilidad y su comodidad a la hora de generar plantillas. Ambos poseen una rejilla estándar de 12 columnas, y son, por supuesto, adaptables a móviles.

Del mismo modo, poseen ambos, a la hora de descargarlos o importarlos, dos ficheros principales, un .css y un .js. Bootstrap posee un .css adicional con los contenidos de un tema (el tema oficial de Bootstrap). A ambos se les puede añadir, como es obvio, nuevos contenidos adicionales, como pueden ser fuentes o imágenes.

En cuanto a sus diferencias, vamos a presentar, a nuestro juicio, las principales. No entraremos aquí en temas de funcionalidad interna, principalmente porque ni viene al caso ni sabríamos cómo hacerlo. Estás diferencias surgen pues, principalmente en base al uso de estos dos frameworks.

1. Material Design

Mientras que Materialize está basado en Material Design (de ahí su nombre), Bootstrap no. ¿Qué implica esto? Principalmente que al importar o descargar Materialize estamos ya incluyendo los patrones de Material Design, lo que ahorrará mucho tiempo en buscar a instalar plugins y librerías secundarias. En Bootstrap, por otro lado, será necesario a menudo hacer búsquedas para encontrar librerías secundarias que no se encuentran incluidas (lo que nos lleva al segundo punto).

2. Plugins y librerías

Como comentábamos, Materialize no requiere del uso de librerías ajenas tanto como Bootstrap. Esto conlleva una gran cantidad de librerías para Bootstrap que no podrán encontrarse para Materialize, que en este sentido está mucho más restringido a su propio código. 

3. Documentación y comunidad

Bootstrap se encuentra ya muy arraigado en la mente de la comunidad de desarrolladores. Por este motivo una simple búsqueda en Google puede revelar cientos de plugins, librerías, plantillas y toneladas de documentación sobre cómo realizar unas u otras cosas. 

Materialize, por su lado, siendo mucho menos conocido, posee estas cosas en mucho menos medida (a esto también se suma que la mayor autonomía que comentábamos no incita a programar algo que ya existe).

4. Sintaxis

Por regla general los frameworks Css hacen uso de las clases para aplicar sus estilos. En este punto el claro ganador es Materialize. Su sintaxis es, con una funcionalidad similar, bastante más sencilla que la de Bootstrap. Los nombre de las clases tienden a ser más cortos e incluso suelen requerirse menos líneas de código html para conseguir un efecto homólogo.

Esto beneficia también a la curva de aprendizaje de Materialize sobre la de Bootstrap.

5. Apartado Visual

Otra victoria para Materialize. Desde el principio uno se da cuenta de que está muy enfocado a la belleza de las aplicaciones (así como Bootstrap parece más enfocado a una buena estructura). Su estilo queda bastante patente desde practicamente el principio. Aunque cabe comentar que a muchos desarrolladores probablemente el estilo predeterminado de Materialize les parecerá demasiado "pasteloso", y podría requerir un poco de esfuerzo extra adaptarlo a una estética más mundana. Asímismo, su manejo de los espacios y los colores es más versatil que el de Bootstrap.

6. Popularidad

Aunque pueda parecer frívolo, es un aspecto a tener en cuenta. Cómo hemos comentado antes, Bootstrap tiene una comunidad de desarrolladores enorme de la que Materialize carece. Del mismo modo, es mucho más común, estadísticamente hablando, que si retomamos un proyecto de alguien se encuentre diseñado empleando Bootstrap, o que si comenzamos a trabajar en una empresa de desarrollo web se nos pida que empleemos Bootstrap en los proyectos que llevemos a cabo.

En conclusión.

Es complicado asignar la victoria a uno o otro frameworks. Ambos presentan sus puntos fuertes y débiles en campos distintos. Bootstrap se muestra más versátil en cuanto a personalización y Materialize, por su lado, podría no necesitar demasiado trabajo en ese ámbito.

Sea como sea, nada nos impide emplear ambos, tanto en distintos proyectos como, incluso, en el mismo (aunque sea importando únicamente algunas clases o efectos determinados), haciendo uso de cada uno de ellos en lo que mejor se le da. 

Hemos obviado muchos otros frameworks para este artículo, desde luego, pues la idea era mostrar las muchas posibilidad es base a una pareja que, desde la mayoría de puntos de vista, es bastante opuesta.