Mon parcours vers la création de Flexilla : bibliothèque de composants interactifs sans tête

Le parcours de création de ma toute première bibliothèque JavaScript a été transformateur, m'aidant à grandir. Comment suis-je arrivé ici ? Commençons par le début.

Après avoir terminé les versions bêta d'UnifyUI Blocks et de Flexiwind Blocks, mon ami et moi avons été confrontés à un défi : ajouter des composants interactifs tels que des listes déroulantes, des réductions et des onglets.

Comme UnifyUI et Flexiwind sont différents : l'un fonctionne avec UnoCSS et l'autre avec TailwindCSS, nous avons initialement écrit des scripts séparés pour chacun. Mais il est vite devenu évident que cette solution était loin d’être idéale.

Après avoir étudié comment Preline gère les interactions avec des plugins JavaScript dédiés adaptés à TailwindCSS, nous avons constaté la nécessité d'une solution indépendante du framework CSS.

Pourquoi CSS Framework-Agnostic ?

Créer une bibliothèque indépendante du framework CSS était essentiel pour nous car nous voulions que Flexilla fonctionne de manière transparente avec n'importe quel framework CSS ou même avec Pure CSS. De nombreux développeurs, y compris ceux qui utilisent UnoCSS, TailwindCSS, ou même Bootstrap, devraient avoir la flexibilité d'améliorer leurs composants sans limitations.

En rendant Flexilla indépendant d'un framework spécifique, nous pouvons fournir un outil polyvalent qui fonctionne pour de nombreux types de projets différents. Cela correspond également au travail que nous avons déjà effectué sur UnifyUI et Flexiwind Blocks, où la flexibilité est essentielle.

Solution

Inspirés par le plugin Preline et Flowbite, nous avons décidé de créer Flexilla qui est entièrement open-source .

Flexilla est une bibliothèque autonome conçue pour gérer les interactions de manière indépendante, sans s'appuyer sur un framework CSS spécifique. Il offre la flexibilité de s'intégrer en douceur à TailwindCSS, UnoCSS ou toute autre technologie CSS.

Notre objectif était d'améliorer les composants d'une manière qui ne se limite pas à un environnement CSS particulier.

Défis

Au début, je ne savais pas par où commencer. Dois-je cloner Preline et l'adapter ? Non, cela ne m'aurait pas aidé, car mon objectif était d'apprendre grâce à ce projet.

Organisation du code

Au début, mon code était en désordre : illisible et difficile à suivre.

J'avais un dossier "packages", et c'était une catastrophe ! Cela rendait difficile la publication de certains packages séparément, j'avais donc besoin d'une solution.

Solution

J'ai trouvé un article sur Lerne, qui a immédiatement retenu mon intérêt. Après quelques jours de lecture de documentation et de restructuration de mon code, j'avais une organisation dont j'étais fier. Lerna m'a permis de rationaliser mes mises à jour, de gérer plusieurs packages dans un référentiel mono et de les publier indépendamment.

PopperJS ?

Oui, j'ai été confronté à ce dilemme : dois-je utiliser PopperJS ou non ?

C'était un grand défi, mais je garderai cette histoire pour un prochain article.

Gestion des versions

C’était une pierre d’achoppement majeure. J'ai initialement publié la bibliothèque et tous ses packages avec la version 1.0.0… et après la publication, j'ai réalisé qu'il y avait des problèmes dans certains packages. Ainsi, pour chaque correctif, je publierais une nouvelle version de la bibliothèque et de ses packages. Mauvaise idée ! Finalement, un ami m'a suggéré de lire un article sur SEMVER, et tout d'un coup, le versioning a pris du sens, même si j'étais un peu en retard.

C'est comme ça que je me suis retrouvé avec la bibliothèque en version 2.x.x. À partir de ce moment-là, j’ai arrêté de faire ces erreurs. Avec Lerna, je n'ai plus à me soucier de changer les versions de packages qui n'ont pas été mises à jour ; Lerna s'en occupe pour moi.

Caractéristiques

1. Agnosticisme du framework CSS

Flexilla ne s'appuie sur aucun framework CSS spécifique, ce qui le rend compatible avec TailwindCSS, UnoCSS, ou même CSS simple. Cette flexibilité garantit que vous pouvez l'intégrer à votre projet quel que soit le framework CSS que vous utilisez.

2. Composants modulaires

Flexilla propose des composants modulaires comme des listes déroulantes, des onglets et des réductions. Ces composants sont conçus pour être légers et faciles à inclure selon les besoins, vous n'ajoutez donc que ce que vous allez utiliser, ce qui améliore les performances et la taille du bundle.

3. API simple

La bibliothèque dispose d'une API facile à utiliser qui nécessite une configuration minimale. Voici un exemple simple de la façon de configurer un composant déroulant :

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

Cet exemple montre comment initialiser rapidement une liste déroulante avec seulement quelques lignes de code, la rendant ainsi hautement accessible aux développeurs de tous niveaux.

4. Headless Architecture

Inspired by headless UI libraries, Flexilla allows you to control the styles completely, so you’re not limited by predefined designs or themes. This makes it easy to integrate into custom-styled projects and ensures it won’t conflict with existing styles.

5. Customizable Events

Flexilla components come with customizable events. For example, you can add actions to respond to user actions or customize behaviors for specific interactions, like on dropdown open or tab change.

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")
})

When and Where to Use the Library?

Use Flexilla when you're working on a project where you don't want to use a JavaScript framework but need interactive components with accessibility in mind. (Recommended: AstroJS, PHP and PHP frameworks, Static Websites)
It can work well with VueJS, but it's not recommended. With ReactJS, don't even try!

What’s Next for Flexilla?

Flexilla will continue to evolve. I plan to add more components, improve the existing ones, and refine the documentation. In addition to existing components, I plan to introduce other common components like notifications and toasts. This will allow Flexilla to support a wider range of interactive needs.

Conclusion

According to my needs, Flexilla has proven to be a valuable tool for creating interactive components in my projects.
Starting out can be scary. I was afraid no one would appreciate my work, afraid it wouldn't serve any purpose. But I assure you, not trying is the biggest mistake. Today, I have no regrets about creating this library. It has allowed me to learn so much : code organization, versioning, managing npm packages… Don’t hesitate to share your solution with the world and be open to feedback, whether positive or negative. It will help you grow!

If you have ideas, suggestions, or code improvements, don’t hesitate to fork the repository, submit a pull request, or open an issue. Together, we can enhance the library and create a valuable resource for developers everywhere.

On that note, take care, and don’t forget to check out Flexilla and let me know what you think!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!