Mon parcours pour créer Flexilla : une bibliothèque de composants interactifs.

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

Après avoir terminé les versions bêta de UnifyUI Blocks et Flexiwind Blocks, mon ami Tresor et moi avons été confrontés à un défi : ajouter des composants interactifs comme des dropdowns, des collapses et des onglets.

Étant donné qu'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 ce n'était pas une solution idéale.

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

Pourquoi une solution indépendante du framework CSS ?

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

En rendant Flexilla indépendant d'un cadre spécifique, nous pouvons fournir un outil polyvalent qui fonctionne pour de nombreux types de projets différents. Cela s'aligne également avec le travail que nous avons déjà réalisé sur UnifyUI et Flexiwind Blocks, où la flexibilité est la clé.

Solution

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

Flexilla est une bibliothèque autonome conçue pour gérer les interactions de manière indépendante, sans dépendre d'un framework CSS spécifique. Elle 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 soit pas limitée à un environnement CSS particulier.

Défis

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

Organisation du code

Au début, mon code était un désastre : illisible et difficile à suivre.
J'avais un dossier "packages", et c'était le désastre ! 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 Lerna, qui a immédiatement attiré mon attention. 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 mono repo et de les publier de manière indépendante.

PopperJS ?

Oui, j'ai été confronté à ce dilemme : devrais-je utiliser PopperJS ou pas ?
C'était un grand défi, mais je garderai cette histoire pour un futur article.

Versioning

Cela a été un obstacle majeur. 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. Donc, pour chaque correction, je publiais 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, le versioning avait du sens — même si j'étais un peu en retard sur le sujet.

C'est ainsi que j'ai fini avec la bibliothèque à la version 2.x.x. À partir de ce moment, j'ai cessé 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'occupe de cela pour moi.

Pourquoi cette librairie?

1. Indépendance par rapport aux frameworks CSS

Flexilla ne dépend d'aucun framework CSS spécifique, ce qui la rend compatible avec TailwindCSS, UnoCSS ou même du CSS pur. 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 dropdowns, des onglets et des collapses. Ces composants sont conçus pour être légers et faciles à inclure selon les besoins, vous n'ajoutant que ce que vous allez utiliser, ce qui aide à la performance et à la taille du bundle.

3. API simple

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

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

Cet exemple montre comment vous pouvez rapidement initialiser un dropdown avec seulement quelques lignes de code, le rendant très accessible pour les développeurs de tous niveaux.

4. Architecture headless

Inspirée par les bibliothèques UI headless, Flexilla vous permet de contrôler complètement les styles, vous n'êtes donc pas limité par des designs ou des thèmes prédéfinis. Cela facilite l'intégration dans des projets à style personnalisé et garantit qu'il ne rentrera pas en conflit avec les styles existants.

5. Événements personnalisables

Les composants Flexilla sont dotés d'événements personnalisables. Par exemple, vous pouvez ajouter des évènements pour répondre aux actions des utilisateurs ou personnaliser les comportements pour des interactions spécifiques, comme à l'ouverture d'un dropdown ou au changement d'onglet.

const myDropdown = new Dropdown('#myDropdown', {
  onShow: () => console.log('Le dropdown est affiché !'),
  onHide: () => console.log('Le dropdown est caché !'),
});

Quand et Où Utiliser la Librairie ?

Utilisez Flexilla lorsque vous travaillez sur un projet où vous ne souhaitez pas utiliser de framework JavaScript, mais où vous avez besoin de composants interactifs en tenant compte de l'accessibilité. (Recommandé : AstroJS, PHP et frameworks PHP, Sites Web Statistiques).

Cela peut bien fonctionner avec VueJS, mais ce n'est pas recommandé. Avec ReactJS, il ne faut même pas essayer !

La suite ?

Flexilla continuera d'évoluer. Je prévois d'ajouter plus de composants, d'améliorer ceux qui existent ainsi que la documentation. En plus des composants existants, je prévois d'introduire d'autres composants courants comme des notifications, des toasts... Cela permettra à Flexilla de répondre à un plus large éventail de besoins interactifs.

Conclusion

A mon niveau en suivant 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 que cela ne serve à rien. Mais je vous assure, ne pas essayer est la plus grande erreur. Aujourd'hui, je n'ai aucun regret d'avoir créé cette bibliothèque. Elle m'a permis d'apprendre tellement : organisation du code, versioning, gestion des packages npm… N'hésitez pas à partager votre solution avec le monde et à être ouvert aux retours, qu'ils soient positifs ou négatifs. Cela vous aidera à grandir !

Sur ce, prenez soin de vous, et n'oubliez pas de jeter un œil à Flexilla et faites-moi savoir ce que vous en pensez !