Esta es una breve introducción sobre qué son las librerías y cómo se utilizan en la práctica. Sabemos que en internet puedes encontrar la documentación oficial y cientos de tutoriales sobre qué son las librerías y cómo se pueden implementar, pero aquí lo resumiremos desde la perspectiva de la experiencia, tras años de trabajar con librerías sin saber bien qué eran ni cómo usarlas correctamente.
Al final, resultan ser herramientas sumamente útiles y verdaderos salvavidas. ¿Qué desarrollador frontend no ha sido rescatado por un carrusel de Bootstrap para la página web de un proyecto?
Las librerías nos ofrecen una infinidad de componentes que nos facilitan el trabajo, ya que no tenemos que crear todo desde cero; podemos usarlas como base para diseñar nuestro próximo proyecto.
Entonces, ¿qué son las librerías de componentes? En resumen, son repositorios online donde puedes encontrar cientos de componentes, como banners, hero sections, carruseles, secciones de "about", testimonios de clientes, footers, navbars, y todo lo necesario para construir no solo una página, sino un sistema o una aplicación web.
Es común encontrarse con que la mayoría de las páginas y sistemas web están construidos con base en la popular librería Bootstrap. Es tan popular que el mismo WordPress la utiliza como librería principal en sus proyectos. De hecho, muchas de las páginas y proyectos web publicados actualmente usan sus componentes, por lo que es vital saber identificar cómo cada librería utiliza sus clases.
¿Qué harías si mañana te toca trabajar en un proyecto que utiliza Bootstrap como su librería principal, pero solo has aprendido HTML, CSS y JavaScript? Probablemente, al ver el código por primera vez, no lo entiendas del todo, ni sepas por qué hay un archivo en el proyecto con clases ya definidas. Pero de eso hablaremos más adelante.
Ahora que ya entiendes qué es una librería (un espacio que ofrece componentes previamente diseñados), podemos avanzar hacia la razón por la cual se implementan.
La respuesta es sencilla: utilizarlas te ahorra más de la mitad del trabajo al desarrollar un proyecto. Es por eso que son la opción número uno para los desarrolladores backend, quienes, al estar más enfocados en el funcionamiento del sistema, pueden usar componentes prediseñados para armar el frontend.
En la práctica, esto es maravilloso: colocas un componente aquí, insertas tu código backend y ¡listo!, no necesitas la ayuda de un desarrollador frontend para diseñar todo desde cero.
Sin embargo, y aunque los frameworks ofrecen componentes funcionales listos para ser implementados, estos suelen ser rígidos y poco atractivos (por eso, la página del IESS se ve tan fea…).
Los desarrolladores backend suelen usar librerías sin preocuparse mucho por el diseño, la personalidad del sitio web y la experiencia de UX, y pues bueno, este punto ya pasará a ser parte y responsabilidad más adelante de el o los encargados de front-end del proyecto.
Aquí es donde entran en juego librerías como Tailwind, que para nosotros es, si no la mejor, una de las mejores librerías para frontend jamás creadas. Para nosotros, Tailwind es todo lo que CSS siempre debió haber sido: rápido, intuitivo, se escribe como código en línea y, además, es visualmente muy atractivo en cuanto a diseño y componentes.
Además, cada día crece la comunidad que utiliza Tailwind y crea sus propias librerías de componentes, permitiéndote crear increíbles páginas web con componentes deslumbrantes que puedes editar en línea sin necesidad de abandonar tu hoja de HTML.
Es por eso que en nuestra herramienta de desarrollo frontend, Simplisiti, implementamos Tailwind para que solo te encargues de elegir los componentes que más te gusten y crear hermosas páginas web en minutos. Y, por cierto, toda la página de Simetric Software está construida con Tailwind.
Como un extra por haber llegado hasta aquí, te dejo algunas librerías de componentes Tailwind que están increíbles para que puedas crear tu primera página web:
- Flowbite
- Shuffle
- Tailbits
Por ahora, no te enseñaremos cómo implementar una librería ni cómo usarla, porque, como dije antes, hay demasiada información allá afuera y en la documentación oficial. Pero espero que te animes a probar una librería y que entiendas lo fundamentales que son para el desarrollo frontend.
Steve Acosta.
Director de marketing.