Entre los múltiples frameworks disponibles en la actualidad para los desarrolladores web, Boostrap sigue siendo el preferido del gremio. Sin embargo, en la actualidad hay múltiples frameworks que compiten por el amor de los front-end developers y algunos, como Semantic-UI, han hecho sus pininos y cada vez tienen a más seguidores.

Empecemos conociendo un poco sobre la historia y las características de Bootstrap y Semantic UI, para después revisar los pros y contras de cada uno.

¿Qué es Bootstrap?

Bootstrap es el framework que está detrás de varios de los sitios web populares, como Netflix, Espn.com y CNN.com. Esta herramienta permite a los desarrolladores web crear proyectos que, sin él, podrían tomar varios días o semanas. 

Desarrollado por Mark Otto y Jacob Thornton en las oficinas de Twitter, Bootstrap buscaba ahorrarles tiempo a los diseñadores web de la red social mientras aseguraba que el sitio web mantuviera un estilo similar en todos los sitios. 

La comunidad de Bootstrap

En la actualidad, este framework cuenta con una de las comunidades más amplias y activas. Al momento en que escribo este artículo, existen cerca de cien mil preguntas en StackOverflow etiquetadas como twitter-bootstrap, de la cuales más del 70% están resueltas.  Sobre la última versión de Bootstrap (Bootstrap 4), existen 20 mil preguntas, el 85% de ellas resueltas.

Además de la imprescindible ayuda de la comunidad de StackOverflow, Bootstrap mantiene comunicación con los desarrolladores a través de su blog oficial, cuenta de Twitter y chats de Slack e IRC en Freenode. 

En definitiva, Bootstrap es el framework más popular. Pero también Windows y el teclado QWERTY son los más populares en sus respectivas áreas y, no por eso, son los mejores. Veamos a continuación algunos de sus puntos fuertes.

Ventajas de Boostrap como framework

Para conservar el título del framework más popular, debes hacer al menos una o dos cosas bien. En caso contrario, la comunidad de desarrolladores rápidamente buscará otras soluciones o bien, las desarrollará ella misma.

Estas son algunas de las ventajas que los desarrolladores señalan de Bootstrap:

1. Menos errores multiplataforma. Una ventaja de tener una amplia comunidad, es que es más fácil detectar un error y corregirlo. Las soluciones para el diseño web que ofrece Bootstrap funcionan en la mayoría de los exploradores.
2. Un framework consistente que considera la mayoría de los problemas de compatibilidad. El diseño se ve genial en tu última versión de Chrome, pero no en el Internet Explorer 7 de tu cliente. Con Bootstrap, es posible evitar la mayoría de estos problemas.
3. Ligero y personalizable. Ya sea que lo utilices de manera externa o dentro de tu proyecto, Bootstrap optimiza los recursos y permite que hagas tus propios cambios en el diseño.
4. Estilos y estructuras responsiva. Esta característica es una de las preferidas por los desarrolladores, que cada vez deben tomar más en serio que hacen páginas web para múltiples plataformas. Con Boostrap, es posible hacer sitios responsivos desde el inicio.
5. Plugins de JavaScript que usan jQuery. Hacer sitios dinámicos es más sencillo incluso para los desarrolladores front-end con poca experiencia en JavaScript. 
6. Soporte bien documentado y una comunidad activa. Lo mencionamos antes, pero vale la pena volver a mencionarlo. Si existe algún problema en Bootstrap, probablemente alguien ya tiene una solución.
7. Cientos de plantillas profesionales y gratuitas, temas de WordPress y plugins. Otra consecuencia de contar con una comunidad activa es la gran cantidad de recursos libres que existen hechos con el framework.. 
8. Un sistema de rejilla fácil de implementar. Esta característica de Bootstrap ha sido ahora mejorada en su versión 4 gracias a la incorporación de flexbox. 

Desventajas de Bootstrap

Pero si Bootstrap fuera perfecto, no habría espacio para otros frameworks como Foundation, Bulma o Semantic UI, del cuál se hablará más adelante.

Estas son algunas de las características de Bootstrap que te podrán causar dolor de cabeza:

1. Alejarse del diseño predefinido de Bootstrap puede ser un fastidio. Para hacer cambios en el diseño base del framework, probablemente deberás de sobreescribir estilos o reescribir algunos archivos, lo que puede tomarte tanto tiempo como haber hecho el proyecto desde cero.
2. Deberás tomar pasos extras para personalizar un sitio. Si no, corres el riesgo de que todos los sitios se vean iguales.
3. Los estilos pueden ser muy ampulosos, lo que causa mucho output innecesario para el HTML.
4. Al estar ligado JavaScript a JQuery, pueden haber muchos plugins que no serán usados.
5. HTML poco agradable. La gran cantidad de clases que en ocasiones son necesarias pueden hacer que el HTML utilizado no sea muy agradable de revisar posteriormente. Además, el nombre de las clases puede ser poco intuitivo.

¿Dónde puedo aprender a utilizar Bootstrap?

Si quieres aprender a utilizar Bootstrap, puedes encontrar tutoriales en español aquí y aquí. También puedes encontrar cursos completos de Bootstrap en YouTube, como este:

Por supuesto, en inglés encontrarás más información. Uno de mis sitios favoritos es w3schools, que tiene tutoriales tanto para Bootstrap 3 y Bootstrap 4. Lo mejor es aprender a utilizar la versión cuatro, ya que pronto se dejará de dar soporte a Bootstrap 3.

¿Qué es Semantic UI?

Semantic UI es un framework para CSS, como Bootstrap. El full-stack developer Jack Lukic creó este framework con base en los principios de lenguaje natural, convirtiéndose en uno de los principales proyectos con JavaScript en GitHub.

Semantic UI tiene una comunidad pequeña, pero muy fiel y entusiasta. En poco tiempo logró crecer rápidamente. En 2015, la comunidad ya había creado más de tres mil temas para el framework, además de más de 50 componentes para interfaz de usuario y realizado 3,800 commits en GitHub.

Ventajas de Semantic UI

1. Muy fácil de utilizar. Esta razón es una de las principales para los desarrolladores. Semantic UI es muy intuitivo. ¿Quieres tres columnas? Escribe “three columns”. Quieres un “dropdown”. Escribe “dropdown”.
2. Menor tiempo para diseñar una página. Nombrar a las clases de Semantic UI con nombres significativos no solo permite que la curva de aprendizaje sea menor, sino que también permite que desarrollar proyectos sea un trabajo más intuitivo y rápido.
3. Gran variedad de temas disponibles. La variedad de diseños es un punto débil de Bootstrap y un punto fuerte para Semantic UI. Probablemente podrás encontrar un tema para los proyectos que estás desarrollando.

Desventajas de Semantic UI

1. Menor compatibilidad con exploradores. Semantic UI no da soporte para Internet Explorar 7, lo que Bootstrap sí hace. Al ser una versión muy antigua, probablemente este no sea un problema mayor.
2. Diseño menos responsivo. A diferencia del punto anterior, este sí puede ser un problema mayor, si consideramos que los diseñadores web están cada vez más obligados a pensar en una gran variedad de dispositivos. Habrá que esperar que el desarrollo crezca para encontrar mejores soluciones a estos temas.
3. Comunidad más pequeña. En GitHub, Bootstrap cuenta con más de 50 mil seguidores, mientras que Semantic UI no alcanza los mil. Mientras tanto, en StackOverflow solo hay 2 500 preguntas sobre Semantic UI, con cerca del 25% de las preguntas sin resolver.
4. Pocas actualizaciones recientes. Quizá este sea el punto más preocupante sobre Semantic UI y que provocó inquietud entre sus seguidores hace poco más de un año. El desarrollo de Semantic UI pareció abandonarse por mucho tiempo, pasando más de un año sin ningún commit entre 2018 y 2019. Esta situación hizo que la misma comunidad creara algunos forks para Semantic UI, como es el caso de Fomantic-UI. Sin embargo, los desarrolladores comentaron el año pasado que la nueva versión estaba tomando más tiempo, pero que ya estaba casi lista.

Parte del retraso que ha mostrado Semantic UI se debieron a las diferencias que tuvieron Jack Lukic con Levi Thomason, uno de los principales colaboradores del proyecto, sobre los cambios necesarios. Thomason considera que CSS in JS es el futuro del desarrollo web e insistió en dirigir el proyecto en ese camino.

En la actualidad, Semantic UI continua en desarrollo y ahora con otros forks como alternativa para quienes no estén completamente de acuerdo con los cambios de los principales colaboradores. En su página web, el framework cuenta con una detallada documentación y ya hay algunos materiales para aprender a usarlo en español, como este video:

La documentación en español todavía puede mejorarse. Esperamos que pronto haya más material en nuestro idioma.

¿Cuál es mejor: Bootstrap o Semantic UI?

Esta pregunta cliché amerita una respuesta cliché: depende del proyecto. Si un diseño único no es lo principal, tienes tiempo de sobra y prefieres tener una gran cantidad de recursos disponibles en línea para resolver problemas, Bootstrap puede ser la alternativa más confiable. En cambio, Semantic UI puede ser una alternativa que vale la pena probar para un proyecto que deba terminarse en poco tiempo y que requiere de un diseño único, pero hay que tomar en cuenta que, el hecho de que la comunidad sea aún pequeña, puede causar problemas si uno se atora en alguna parte.