Meine Reise zum Bau von Flexilla: Headless interaktive Komponentenbibliothek

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, Minimierungen 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 reinem 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 einer reibungslosen Integration mit TailwindCSS, UnoCSS oder jeder anderen CSS-Technologie.

Unser Ziel war es, Komponenten so zu verbessern, dass sie nicht auf eine bestimmte CSS-Umgebung beschränkt sind.

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; Das übernimmt Lerna für mich.

Merkmale

1. CSS-Framework-Agnostizismus

Flexilla ist nicht auf ein bestimmtes CSS-Framework angewiesen und ist daher mit TailwindCSS, UnoCSS oder sogar einfachem 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, Tabs und Minimierungen. Diese Komponenten sind so konzipiert, dass sie leichtgewichtig sind und sich bei Bedarf einfach integrieren lassen, sodass Sie nur das hinzufügen, was Sie verwenden möchten, was sich positiv auf die Leistung und die Bündelgröß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

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!

Das obige ist der detaillierte Inhalt vonMeine Reise zum Bau von Flexilla: Headless interaktive Komponentenbibliothek. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!