Le parcours de création de ma toute première bibliothèque JavaScript a été transformateur et m'a aidé à 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 qu’il s’agissait d’une solution 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 possibilité 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 les plugins 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 facilement à 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 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 à coup, la gestion des versions 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 cadre CSS

Flexilla ne s'appuie sur aucun framework CSS spécifique, ce qui le rend compatible avec TailwindCSS, UnoCSS, ou même plain CSS. 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 tels que 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 contribue aux 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 configuration d'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. Architecture sans tête

Inspiré des bibliothèques d'interface utilisateur sans tête, Flexilla vous permet de contrôler complètement les styles, de sorte que vous n'êtes pas limité par des conceptions ou des thèmes prédéfinis. Cela facilite l'intégration dans les projets personnalisés et garantit qu'il n'entrera pas en conflit avec les styles existants.

5. Événements personnalisables

Les composants Flexilla sont livrés avec événements personnalisables. Par exemple, vous pouvez ajouter des actions pour répondre aux actions de l'utilisateur ou personnaliser les comportements pour des interactions spécifiques, comme lors de l'ouverture d'une liste déroulante ou d'un changement d'onglet.

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

Quand et où utiliser la bibliothèque ?

Utilisez Flexilla lorsque vous travaillez sur un projet dans lequel vous ne souhaitez pas utiliser de framework JavaScript mais avez besoin de composants interactifs en gardant l'accessibilité à l'esprit. (Recommandé : frameworks AstroJS, PHP et PHP, sites Web statiques)
Cela peut bien fonctionner avec VueJS, mais ce n'est pas recommandé. Avec ReactJS, n'essayez même pas !

Quelle est la prochaine étape pour Flexilla ?

Flexilla continuera d'évoluer. Je prévois d'ajouter plus de composants, d'améliorer ceux existants et d'affiner la documentation. En plus des composants existants, je prévois d'introduire d'autres composants communs tels que les notifications et les toasts. Cela permettra à Flexilla de prendre en charge un plus large éventail de besoins interactifs.

Conclusion

Selon mes besoins, Flexilla s'est avéré être un outil précieux pour créer des composants interactifs dans mes projets.
Commencer peut être effrayant. J'avais peur que personne n'apprécie mon travail, peur qu'il ne serve à rien. Mais je vous assure que ne pas essayer est la plus grosse erreur. Aujourd'hui, je ne regrette pas d'avoir créé cette bibliothèque. Cela m’a permis d’apprendre tellement de choses : organisation du code, versioning, gestion des packages npm… N’hésitez pas à partager votre solution avec le monde et soyez ouvert aux retours, qu’ils soient positifs ou négatifs. Cela vous aidera à grandir !

Si vous avez des idées, des suggestions ou des améliorations du code, n'hésitez pas à bifurquer le référentiel, à soumettre une pull request ou à ouvrir un ticket. Ensemble, nous pouvons améliorer la bibliothèque et créer une ressource précieuse pour les développeurs du monde entier.

Sur cette note, faites attention et n'oubliez pas de consulter Flexilla et de me dire ce que vous en pensez !