Perjalanan Saya ke Membina Flexilla: Pustaka komponen interaktif tanpa kepala

Perjalanan mencipta perpustakaan JavaScript pertama saya telah berubah, membantu saya berkembang. Bagaimana saya boleh sampai ke sini? Jom mulakan dari awal.

Selepas melengkapkan versi beta Blok UnifyUI dan Blok Flexiwind, saya dan rakan saya menghadapi cabaran: menambahkan komponen interaktif seperti lungsur turun, runtuh dan tab.

Memandangkan UnifyUI dan Flexiwind berbeza : satu berfungsi dengan UnoCSS dan satu lagi dengan TailwindCSS, kami mula-mula menulis skrip berasingan untuk setiap satu. Tetapi tidak lama kemudian menjadi jelas bahawa ini adalah penyelesaian yang kurang ideal.

Setelah mengkaji cara Preline mengendalikan interaksi dengan pemalam JavaScript khusus yang disesuaikan untuk TailwindCSS, kami melihat keperluan untuk penyelesaian rangka kerja-agnostik CSS.

Mengapa Rangka Kerja CSS-Agnostik?

Membuat pustaka agnostik rangka kerja CSS adalah penting bagi kami kerana kami mahu Flexilla berfungsi dengan lancar dengan sebarang rangka kerja CSS atau bahkan dengan CSS Tulen. Ramai pembangun, termasuk mereka yang menggunakan UnoCSS, TailwindCSS atau bahkan Bootstrap, sepatutnya mempunyai kefleksibelan untuk meningkatkan komponen mereka tanpa had.

Dengan menjadikan Flexilla bebas daripada rangka kerja tertentu, kami boleh menyediakan alat serba boleh yang berfungsi untuk pelbagai jenis projek. Ia juga sejajar dengan kerja yang telah kami lakukan pada UnifyUI dan Flexiwind Blocks, yang fleksibiliti adalah kuncinya.

Penyelesaian

Diinspirasikan oleh pemalam Preline dan Flowbite, kami memutuskan untuk mencipta Flexilla yang merupakan sumber terbuka sepenuhnya .

Flexilla ialah perpustakaan kendiri yang direka untuk mengurus interaksi secara bebas, tanpa bergantung pada mana-mana rangka kerja CSS tertentu. Ia menawarkan fleksibiliti untuk disepadukan dengan lancar dengan TailwindCSS, UnoCSS atau mana-mana teknologi CSS yang lain.

Matlamat kami adalah untuk meningkatkan komponen dengan cara yang tidak terhad kepada persekitaran CSS tertentu.

Cabaran

Pada mulanya, saya tidak tahu dari mana hendak bermula. Patutkah saya mengklon Preline dan menyesuaikannya? Tidak, itu tidak akan membantu saya, kerana matlamat saya adalah untuk belajar melalui projek ini.

Organisasi Kod

Pada mulanya, kod saya kucar-kacir: tidak boleh dibaca dan sukar untuk diikuti.

Saya mempunyai folder "pakej", dan ia adalah bencana! Ini menyukarkan untuk menerbitkan pakej tertentu secara berasingan, jadi saya memerlukan penyelesaian.

Penyelesaian

Saya menemui satu artikel tentang Lerna, yang segera menarik minat saya. Selepas beberapa hari membaca dokumentasi dan menyusun semula kod saya, saya mempunyai organisasi yang saya banggakan. Lerna membenarkan saya menyelaraskan kemas kini saya, mengurus berbilang pakej dalam repositori mono dan menerbitkannya secara bebas.

PopperJS?

Ya, saya menghadapi dilema ini: patutkah saya menggunakan PopperJS atau tidak?

Ia adalah satu cabaran yang besar, tetapi saya akan menyimpan cerita itu untuk artikel akan datang.

Versi

Ini adalah batu penghalang utama. Saya pada mulanya menerbitkan perpustakaan dan semua pakejnya dengan versi 1.0.0… dan selepas diterbitkan, saya menyedari terdapat isu dalam beberapa pakej. Jadi untuk setiap pembetulan, saya akan menerbitkan versi baharu perpustakaan dan pakejnya. Idea buruk! Akhirnya, seorang rakan mencadangkan saya membaca artikel tentang SEMVER, dan tiba-tiba, membuat versi masuk akal—walaupun saya agak lewat ke permainan.

Begitulah saya akhirnya mempunyai perpustakaan pada versi 2.x.x. Sejak itu, saya berhenti melakukan kesilapan itu. Dengan Lerna, saya tidak perlu risau lagi tentang menukar versi pakej yang belum dikemas kini; Lerna uruskan untuk saya.

Ciri-ciri

1. Agnostikisme Rangka Kerja CSS

Flexilla tidak bergantung pada mana-mana rangka kerja CSS tertentu, menjadikannya serasi dengan TailwindCSS, UnoCSS atau bahkan CSS biasa. Fleksibiliti ini memastikan anda boleh menyepadukannya dengan projek anda tanpa mengira rangka kerja CSS yang anda gunakan.

2. Komponen Modular

Flexilla menawarkan komponen modular seperti lungsur turun, tab dan runtuh. Komponen ini dibina agar ringan dan mudah disertakan mengikut keperluan, jadi anda hanya menambah perkara yang akan anda gunakan, yang membantu dengan prestasi dan saiz himpunan.

3. API Mudah

Pustaka ini menampilkan API yang mudah digunakan yang memerlukan konfigurasi minimum. Berikut ialah contoh mudah tentang cara menyediakan komponen lungsur turun:

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

Contoh ini menunjukkan cara anda boleh memulakan lungsur turun dengan cepat dengan hanya beberapa baris kod, menjadikannya sangat mudah diakses oleh pembangun dari semua peringkat.

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!

Atas ialah kandungan terperinci Perjalanan Saya ke Membina Flexilla: Pustaka komponen interaktif tanpa kepala. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!