El viaje de crear mi primera biblioteca de JavaScript ha sido transformador y me ha ayudado a crecer. ¿Cómo llegué aquí? Empecemos desde el principio.

Después de completar las versiones beta de UnifyUI Blocks y Flexiwind Blocks, mi amigo y yo enfrentamos un desafío: agregar componentes interactivos como menús desplegables, contracciones y pestañas.

Dado que UnifyUI y Flexiwind son diferentes: uno funciona con UnoCSS y el otro con TailwindCSS, inicialmente escribimos scripts separados para cada uno. Pero pronto se hizo evidente que ésta no era una solución ideal.

Después de estudiar cómo Preline maneja las interacciones con complementos de JavaScript dedicados diseñados para TailwindCSS, vimos la necesidad de una solución independiente del marco CSS.

¿Por qué CSS Framework-Agnostic?

Crear una biblioteca independiente del marco CSS fue esencial para nosotros porque queríamos que Flexilla funcionara perfectamente con cualquier marco CSS o incluso con CSS puro. Muchos desarrolladores, incluidos aquellos que usan UnoCSS, TailwindCSS o incluso Bootstrap, deberían tener la flexibilidad de mejorar sus componentes sin limitaciones.

Al hacer que Flexilla sea independiente de un marco específico, podemos proporcionar una herramienta versátil que funciona para muchos tipos diferentes de proyectos. También se alinea con el trabajo que ya hemos realizado en UnifyUI y Flexiwind Blocks, donde la flexibilidad es clave.

Solución

Inspirándonos en el complemento Preline y Flowbite, decidimos crear Flexilla, que es completamente de código abierto.

Flexilla es una biblioteca independiente diseñada para gestionar interacciones de forma independiente, sin depender de ningún marco CSS específico. Ofrece la flexibilidad de integrarse sin problemas con TailwindCSS, UnoCSS o cualquier otra tecnología CSS.

Nuestro objetivo era mejorar los componentes de una manera que no estuviera restringida a un entorno CSS en particular.

Desafíos

Al principio, no tenía idea de por dónde empezar. ¿Debería clonar Preline y adaptarlo? No, eso no me habría ayudado, ya que mi objetivo era aprender a través de este proyecto.

Organización del código

Al principio, mi código era un desastre: ilegible y difícil de seguir.

Tenía una carpeta de "paquetes" y ¡fue un desastre! Esto dificultaba la publicación de ciertos paquetes por separado, por lo que necesitaba una solución.

Solución

Encontré un artículo sobre Lerna, que inmediatamente me llamó la atención. Después de unos días de leer documentación y reestructurar mi código, tenía una organización de la que estaba orgulloso. Lerna me permitió optimizar mis actualizaciones, administrar múltiples paquetes en un repositorio mono y publicarlos de forma independiente.

¿PopperJS?

Sí, me enfrenté a este dilema: ¿debería usar PopperJS o no?

Fue un gran desafío, pero guardaré esa historia para un artículo futuro.

Versionado

Este fue un gran obstáculo. Inicialmente publiqué la biblioteca y todos sus paquetes con la versión 1.0.0... y después de publicarla, me di cuenta de que había problemas en algunos paquetes. Entonces, por cada solución, publicaría una nueva versión de la biblioteca y sus paquetes. ¡Mala idea! Finalmente, un amigo me sugirió que leyera un artículo sobre SEMVER y, de repente, el control de versiones tuvo sentido, aunque llegué un poco tarde al juego.

Así es como terminé con la biblioteca en la versión 2.x.x. A partir de ese momento dejé de cometer esos errores. Con Lerna, ya no tengo que preocuparme por cambiar las versiones de paquetes que no se han actualizado; Lerna se encarga de eso por mí.

Características

1. Agnosticismo del marco CSS

Flexilla no depende de ningún marco CSS específico, lo que lo hace compatible con TailwindCSS, UnoCSS o incluso CSS simple. Esta flexibilidad garantiza que pueda integrarlo con su proyecto independientemente del marco CSS que esté utilizando.

2. Componentes modulares

Flexilla ofrece componentes modulares como menús desplegables, pestañas y contracciones. Estos componentes están diseñados para ser livianos y fáciles de incluir según sea necesario, por lo que solo agrega lo que va a usar, lo que ayuda con el rendimiento y el tamaño del paquete.

3. API sencilla

La biblioteca presenta una API fácil de usar que requiere una configuración mínima. A continuación se muestra un ejemplo sencillo de cómo configurar un componente desplegable:

   import { Dropdown } from '@flexilla/flexilla';
   Dropdown.init("#myDropdown");

Este ejemplo muestra cómo puedes inicializar rápidamente un menú desplegable con solo unas pocas líneas de código, haciéndolo altamente accesible para desarrolladores de todos los niveles.

4. Arquitectura sin cabeza

Inspirado en las bibliotecas de interfaz de usuario sin cabeza, Flexilla te permite controlar los estilos por completo, para que no estés limitado por diseños o temas predefinidos. Esto facilita la integración en proyectos con estilos personalizados y garantiza que no entre en conflicto con los estilos existentes.

5. Eventos personalizables

Los componentes de Flexilla vienen con eventos personalizables. Por ejemplo, puedes agregar acciones para responder a las acciones del usuario o personalizar comportamientos para interacciones específicas, como abrir un menú desplegable o cambiar de pestaña.

const myDropdown = new Dropdown('#myDropdown', {
  onShow: () => console.log('Dropdown is shown!'),
  onHide: () => console.log('Dropdown is hidden!'),
});

const myAccordionEl = document.querySelector("#myAccordion")
const myAccordion = Accordion.init(myAccordionEl)
myAccordionEl.addEventListener("change-item",()=>{
   console.log("Accordion item changed")
})

¿Cuándo y dónde utilizar la biblioteca?

Utilice Flexilla cuando esté trabajando en un proyecto en el que no desee utilizar un marco de JavaScript pero necesite componentes interactivos teniendo en cuenta la accesibilidad. (Recomendado: AstroJS, PHP y frameworks PHP, Sitios web estáticos)
Puede funcionar bien con VueJS, pero no se recomienda. ¡Con ReactJS, ni lo intentes!

¿Qué sigue para Flexilla?

Flexilla seguirá evolucionando. Planeo agregar más componentes, mejorar los existentes y perfeccionar la documentación. Además de los componentes existentes, planeo introducir otros componentes comunes como notificaciones y brindis. Esto permitirá que Flexilla admita una gama más amplia de necesidades interactivas.

Conclusión

Según mis necesidades, Flexilla ha demostrado ser una herramienta valiosa para crear componentes interactivos en mis proyectos.
Empezar puede dar miedo. Tenía miedo de que nadie apreciara mi trabajo, de que no sirviera para nada. Pero te aseguro que no intentarlo es el mayor error. Hoy, no me arrepiento de haber creado esta biblioteca. Me ha permitido aprender muchísimo: organización del código, control de versiones, gestión de paquetes npm… No dudes en compartir tu solución con el mundo y estar abierto a recibir comentarios, ya sean positivos o negativos. ¡Te ayudará a crecer!

Si tiene ideas, sugerencias o mejoras de código, no dude en bifurcar el repositorio, enviar una solicitud de extracción o abrir una incidencia. Juntos, podemos mejorar la biblioteca y crear un recurso valioso para los desarrolladores de todo el mundo.

En ese sentido, ten cuidado y no olvides visitar Flexilla y ¡déjame saber lo que piensas!