부르마 블레이드 UI

Bulma Blade UI라는 이름으로 잠시 작업한 새로운 Laravel 패키지를 소개합니다. Bulma html 구조 및 CSS 클래스가 있는 재사용 가능한 Blade 구성 요소 세트와 Laravel Fortify와 함께 사용하기 위한 기본 인증 보기를 제공하여 최소한의 설정으로 바로 사용할 수 있습니다.

Bulma Blade UI

약간의 개인 역사

인정합니다. Blade 구성 요소가 도입되었을 때 사용하는 이점을 이해하는 데 오랜 시간이 걸렸습니다. 나는 많은 html을 작성하고 필요할 때 Blade 포함을 사용하는 데 너무 익숙해졌습니다. 매번 html을 모두 작성하지 않으면 속임수를 쓰고 진정한 개발자가 아닌 것처럼 느껴졌습니다.
<x-component></x-component> 와 같은 표준 Blade 스타일 태그와 비교하여 @include() 스타일 태그가 있는 구문도 약간 이상했습니다.

보는 것은 믿는 것이다

그러나 최근에 동료가 프로젝트에서 구성 요소를 사용하는 방법을 보았고 구성 요소를 사용하여 보기를 훨씬 깔끔하고 읽기 쉽게 만들었습니다. 반복되는 html의 방대한 덩어리 대신 구성 요소에 대한 한 줄이 있었습니다.

전에

<div class="field">
    <label class="label" for="username">Username</label>
    <div class="control">
        <input id="username" name="username" type="text" class="input " value="myusername">
    </div>
</div>

후에

<x-bbui::input label="Username" name="username" value="myusername"></x-bbui::input>

이 모닝콜에 대해 동료에게 큰 감사를 표합니다!

이제 구성 요소가 글을 적게 쓰고 보기를 훨씬 더 간결하고 읽기 쉽게 만들어 생산성을 크게 높일 수 있는 가능성을 볼 수 있었습니다.

부르마 블레이드 UI

Tailwind는 널리 사용되는 프론트엔드 프레임워크이며 Blade UI Kit 이라는 훌륭한 구성 요소 패키지가 있습니다. 나는 Tailwind에 대해 나쁘게 말할 것이 없고 왜 그렇게 많은 개발자들이 그것을 사용하는 것을 좋아하는지 알지만 개인적으로 Bulma를 사용하는 것을 선호합니다.

"Bulma Fortify"를 검색하여 Bulma 및 Laravel에 대한 인증 보기를 제공하는 패키지가 몇 개 있지만 재사용 가능한 Bulma 구성 요소가 포함된 패키지가 없는 것 같습니다. 처음에는 양식 입력 구성 요소를 만들려고 했지만 카드, 메시지 및 알림과 같은 추가 구성 요소를 추가하는 것도 유용할 것이라고 생각했습니다.

이 모든 구성 요소를 갖고 나면 패키지에서 일부 Laravel 인증 보기를 빌드하는 데 사용했습니다.

초판

저는 이제 GitHub에 Laravel 패키지를 알파 릴리스로 릴리스했습니다. 그것은 일련의 단위 테스트를 가지고 있으며 새 프로젝트에서 직접 테스트했지만 이제 패키지를 사용해 보고 피드백을 제공하고 패키지에 대한 문제를 제기할 다른 개발자를 찾고 있습니다.

Bulma와 Laravel을 사용하는 개발자라면 피드백에 감사드리며 개선 방법을 알려주세요!