Der Weg zur Erstellung meiner allerersten JavaScript-Bibliothek war transformativ und hat mir geholfen, zu wachsen. Wie bin ich hierher gekommen? Fangen wir von vorne an.

Nachdem wir die Betaversionen von UnifyUI Blocks und Flexiwind Blocks abgeschlossen hatten, standen mein Freund und ich vor einer Herausforderung: dem Hinzufügen interaktiver Komponenten wie Dropdowns, Reduzieren und Tabs.

Da UnifyUI und Flexiwind unterschiedlich sind: eines funktioniert mit UnoCSS und das andere mit TailwindCSS, haben wir zunächst für jedes separate Skripte geschrieben. Es stellte sich jedoch bald heraus, dass dies keine ideale Lösung war.

Nachdem wir untersucht hatten, wie Preline Interaktionen mit dedizierten, auf TailwindCSS zugeschnittenen JavaScript-Plugins handhabt, erkannten wir die Notwendigkeit einer CSS-Framework-unabhängigen Lösung.

Warum CSS-Framework-agnostisch?

Die Erstellung einer CSS-Framework-unabhängigen Bibliothek war für uns von entscheidender Bedeutung, da wir wollten, dass Flexilla nahtlos mit jedem CSS-Framework oder sogar mit Pure CSS zusammenarbeitet. Viele Entwickler, einschließlich derjenigen, die UnoCSS, TailwindCSS oder sogar Bootstrap verwenden, sollten die Flexibilität haben, ihre Komponenten ohne Einschränkungen zu verbessern.

Indem wir Flexilla von einem bestimmten Framework unabhängig machen, können wir ein vielseitiges Tool bereitstellen, das für viele verschiedene Arten von Projekten funktioniert. Es deckt sich auch mit der Arbeit, die wir bereits an UnifyUI und Flexiwind Blocks geleistet haben, wo Flexibilität der Schlüssel zum Erfolg ist.

Lösung

Inspiriert durch das Preline- und Flowbite-Plugin haben wir uns entschieden, Flexilla zu entwickeln, das vollständig Open Source ist.

Flexilla ist eine eigenständige Bibliothek, die entwickelt wurde, um Interaktionen unabhängig zu verwalten, ohne auf ein bestimmtes CSS-Framework angewiesen zu sein. Es bietet die Flexibilität, sich reibungslos in TailwindCSS, UnoCSS oder jede andere CSS-Technologie zu integrieren.

Unser Ziel war es, Komponenten auf eine Weise zu verbessern, die nicht auf eine bestimmte CSS-Umgebung beschränkt war.

Herausforderungen

Zuerst hatte ich keine Ahnung, wo ich anfangen sollte. Soll ich Preline klonen und anpassen? Nein, das hätte mir nicht geholfen, denn mein Ziel war es, durch dieses Projekt zu lernen.

Code-Organisation

Am Anfang war mein Code ein Chaos: unlesbar und schwer zu befolgen.

Ich hatte einen Ordner „Pakete“ und es war eine Katastrophe! Dies machte es schwierig, bestimmte Pakete separat zu veröffentlichen, also brauchte ich eine Lösung.

Lösung

Ich habe einen Artikel über Lerna gefunden, der sofort mein Interesse geweckt hat. Nachdem ich ein paar Tage lang die Dokumentation gelesen und meinen Code umstrukturiert hatte, hatte ich eine Organisation, auf die ich stolz war. Lerna ermöglichte es mir, meine Updates zu optimieren, mehrere Pakete in einem Mono-Repository zu verwalten und sie unabhängig zu veröffentlichen.

PopperJS?

Ja, ich stand vor diesem Dilemma: Soll ich PopperJS verwenden oder nicht?

Es war eine große Herausforderung, aber ich werde diese Geschichte für einen zukünftigen Artikel aufheben.

Versionierung

Das war ein großer Stolperstein. Ich habe die Bibliothek und alle ihre Pakete zunächst mit Version 1.0.0 veröffentlicht … und nach der Veröffentlichung wurde mir klar, dass es bei einigen Paketen Probleme gab. Daher würde ich für jeden Fix eine neue Version der Bibliothek und ihrer Pakete veröffentlichen. Schlechte Idee! Irgendwann schlug mir ein Freund vor, einen Artikel über SEMVER zu lesen, und plötzlich machte die Versionierung Sinn – obwohl ich etwas spät dran war.

So landete ich bei der Bibliothek in Version 2.x.x. Von diesem Zeitpunkt an habe ich aufgehört, diese Fehler zu machen. Mit Lerna muss ich mir keine Gedanken mehr darüber machen, Paketversionen zu ändern, die nicht aktualisiert wurden. Lerna erledigt das für mich.

Merkmale

1. CSS-Framework-Agnostizismus

Flexilla verlässt sich nicht auf ein bestimmtes CSS-Framework und ist daher mit TailwindCSS, UnoCSS oder sogar einfaches CSS kompatibel. Diese Flexibilität stellt sicher, dass Sie es unabhängig vom verwendeten CSS-Framework in Ihr Projekt integrieren können.

2. Modulare Komponenten

Flexilla bietet modulare Komponenten wie Dropdowns, Registerkarten und Minimierungen. Diese Komponenten sind so konzipiert, dass sie leichtgewichtig sind und sich bei Bedarf einfach einbinden lassen, sodass Sie nur das hinzufügen, was Sie verwenden werden, was sich positiv auf die Leistung und die Bundle-Größe auswirkt.

3. Einfache API

Die Bibliothek verfügt über eine benutzerfreundliche API, die nur minimale Konfiguration erfordert. Hier ist ein einfaches Beispiel für die Einrichtung einer Dropdown-Komponente:

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

Dieses Beispiel zeigt, wie Sie mit nur wenigen Codezeilen schnell ein Dropdown initialisieren können, sodass es für Entwickler aller Ebenen leicht zugänglich ist.

4. Headless Architecture

Inspiriert durch Headless-UI-Bibliotheken ermöglicht Ihnen Flexilla die vollständige Steuerung der Stile, sodass Sie nicht durch vordefinierte Designs oder Themen eingeschränkt sind. Dies erleichtert die Integration in benutzerdefinierte Projekte und stellt sicher, dass es nicht zu Konflikten mit vorhandenen Stilen kommt.

5. Anpassbare Ereignisse

Flexilla-Komponenten enthalten anpassbare Ereignisse. Sie können beispielsweise Aktionen hinzufügen, um auf Benutzeraktionen zu reagieren, oder Verhaltensweisen für bestimmte Interaktionen anpassen, z. B. beim Öffnen eines Dropdown-Menüs oder beim Tab-Wechsel.

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

Wann und wo nutzen Sie die Bibliothek?

Verwenden Sie Flexilla, wenn Sie an einem Projekt arbeiten, bei dem Sie kein JavaScript-Framework verwenden möchten, sondern interaktive Komponenten unter Berücksichtigung der Barrierefreiheit benötigen. (Empfohlen: AstroJS, PHP und PHP-Frameworks, statische Websites)
Es kann gut mit VueJS funktionieren, wird aber nicht empfohlen. Versuchen Sie es mit ReactJS gar nicht erst!

Was kommt als nächstes für Flexilla?

Flexilla wird sich weiterentwickeln. Ich habe vor, weitere Komponenten hinzuzufügen, die vorhandenen zu verbessern und die Dokumentation zu verfeinern. Zusätzlich zu den vorhandenen Komponenten plane ich die Einführung weiterer gemeinsamer Komponenten wie Benachrichtigungen und Toasts. Dadurch kann Flexilla ein breiteres Spektrum interaktiver Anforderungen unterstützen.

Abschluss

Meinen Bedürfnissen entsprechend hat sich Flexilla als wertvolles Werkzeug zur Erstellung interaktiver Komponenten in meinen Projekten erwiesen.
Der Anfang kann beängstigend sein. Ich hatte Angst, dass niemand meine Arbeit wertschätzen würde, Angst, dass sie keinen Zweck erfüllen würde. Aber ich versichere Ihnen, dass es der größte Fehler ist, es nicht zu versuchen. Heute bereue ich es nicht, diese Bibliothek erstellt zu haben. Dadurch konnte ich so viel lernen: Code-Organisation, Versionierung, Verwaltung von NPM-Paketen … Zögern Sie nicht, Ihre Lösung mit der Welt zu teilen und seien Sie offen für Feedback, ob positiv oder negativ. Es wird Ihnen helfen zu wachsen!

Wenn Sie Ideen, Vorschläge oder Codeverbesserungen haben, zögern Sie nicht, das Repository zu forken, eine Pull-Anfrage einzureichen oder ein Problem zu eröffnen. Gemeinsam können wir die Bibliothek erweitern und eine wertvolle Ressource für Entwickler überall schaffen.

In diesem Sinne seien Sie vorsichtig und vergessen Sie nicht, sich Flexilla anzusehen und mir Ihre Meinung mitzuteilen!