Flexilla 구축을 위한 나의 여정: 헤드리스 대화형 구성 요소 라이브러리

저의 첫 번째 JavaScript 라이브러리를 만드는 여정은 변화를 가져왔고 제가 성장하는 데 도움이 되었습니다. 내가 어떻게 여기까지 왔지? 처음부터 시작해 보겠습니다.

UnifyUI Blocks 및 Flexiwind Blocks의 베타 버전을 완료한 후 친구와 저는 드롭다운, 축소, 탭과 같은 대화형 구성 요소를 추가하는 문제에 직면했습니다.

UnifyUI와 Flexiwind는 다르기 때문에 하나는 UnoCSS로 작동하고 다른 하나는 TailwindCSS로 작동하므로 처음에는 각각에 대해 별도의 스크립트를 작성했습니다. 그러나 이것이 이상적이지 않은 솔루션이라는 것이 곧 명백해졌습니다.

Preline이 TailwindCSS용으로 맞춤화된 전용 JavaScript 플러그인과의 상호 작용을 처리하는 방법을 연구한 후 CSS 프레임워크에 구애받지 않는 솔루션의 필요성을 확인했습니다.

CSS 프레임워크에 구애받지 않는 이유는 무엇입니까?

Flexilla가 모든 CSS 프레임워크 또는 순수한 CSS와 원활하게 작동하기를 원했기 때문에 CSS 프레임워크에 구애받지 않는 라이브러리를 만드는 것이 필수적이었습니다. UnoCSS, TailwindCSS 또는 Bootstrap을 사용하는 개발자를 포함한 많은 개발자는 제한 없이 구성 요소를 향상시킬 수 있는 유연성을 가져야 합니다.

Flexilla를 특정 프레임워크와 독립적으로 만들어 다양한 유형의 프로젝트에 사용할 수 있는 다목적 도구를 제공할 수 있습니다. 이는 또한 유연성이 핵심인 UnifyUI 및 Flexiwind Blocks에서 이미 수행한 작업과도 일치합니다.

해결책

Preline 및 Flowbite 플러그인에서 영감을 받아 완전한 오픈 소스인 Flexilla를 만들기로 결정했습니다.

Flexilla는 특정 CSS 프레임워크에 의존하지 않고 상호 작용을 독립적으로 관리하도록 설계된 독립형 라이브러리입니다. TailwindCSS, UnoCSS 또는 기타 CSS 기술과 원활하게 통합할 수 있는 유연성을 제공합니다.

우리의 목표는 특정 CSS 환경에 국한되지 않는 방식으로 구성요소를 향상시키는 것이었습니다.

도전과제

처음에는 어디서부터 시작해야 할지 몰랐습니다. Preline을 복제하고 적용해야 합니까? 아니요, 제 목표는 이 프로젝트를 통해 배우는 것이었기 때문에 도움이 되지 않았을 것입니다.

코드 구성

처음에는 내 코드가 엉망이어서 읽을 수도 없고 따라하기도 어려웠습니다.

"패키지" 폴더가 있었는데 정말 재앙이었습니다! 이로 인해 특정 패키지를 별도로 게시하기 어려워 솔루션이 필요했습니다.

솔루션

나는 즉시 내 관심을 끌었던 Lerna에 관한 기사를 발견했습니다. 며칠 동안 문서를 읽고 코드를 재구성한 끝에 저는 제가 자랑스러워하는 조직을 갖게 되었습니다. Lerna를 통해 업데이트를 간소화하고 모노 저장소에서 여러 패키지를 관리하며 독립적으로 게시할 수 있었습니다.

PopperJS?

예, 저는 이런 딜레마에 직면했습니다. PopperJS를 사용해야 할까요, 말아야 할까요?

큰 도전이었지만 그 이야기는 다음 기사를 위해 남겨 두겠습니다.

버전 관리

이것이 큰 걸림돌이었습니다. 처음에 라이브러리와 모든 패키지를 버전 1.0.0으로 게시했습니다. 게시한 후 일부 패키지에 문제가 있음을 깨달았습니다. 그래서 모든 수정 사항에 대해 새 버전의 라이브러리와 해당 패키지를 게시했습니다. 나쁜 생각이에요! 결국 친구가 SEMVER에 대한 기사를 읽어보라고 제안했고, 게임에 조금 늦었지만 갑자기 버전 관리가 이해가 되었습니다.

이렇게 해서 버전 2.x.x의 라이브러리가 생겼습니다. 그 시점부터 나는 그런 실수를 저지르지 않게 되었습니다. Lerna를 사용하면 더 이상 업데이트되지 않은 패키지 버전을 변경하는 것에 대해 걱정할 필요가 없습니다. Lerna가 대신 처리해 줍니다.

특징

1. CSS 프레임워크 불가지론

Flexilla는 특정 CSS 프레임워크에 의존하지 않으므로 TailwindCSS, UnoCSS 또는 일반 CSS와도 호환됩니다. 이러한 유연성 덕분에 사용 중인 CSS 프레임워크에 관계없이 프로젝트와 통합할 수 있습니다.

2. 모듈식 구성요소

Flexilla는 드롭다운, 탭, 축소와 같은 모듈식 구성 요소를 제공합니다. 이러한 구성 요소는 가볍고 필요에 따라 쉽게 포함할 수 있도록 제작되었으므로 사용할 구성 요소만 추가하면 성능 및 번들 크기

에 도움이 됩니다.

3. 간단한 API

라이브러리는 최소한의 구성만으로 사용하기 쉬운 API를 제공합니다. 드롭다운 구성 요소를 설정하는 방법에 대한 간단한 예는 다음과 같습니다.

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

이 예에서는 단 몇 줄의 코드만으로 드롭다운을 신속하게 초기화하여 모든 수준의 개발자가 쉽게 액세스할 수 있는 방법을 보여줍니다.

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!

위 내용은 Flexilla 구축을 위한 나의 여정: 헤드리스 대화형 구성 요소 라이브러리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!