HTML 중심 동적 UI 라이브러리 인 HTMX 소개-JS 튜토리얼-php.cn

An Introduction to htmx, the HTML-focused Dynamic UI Library 최신 웹 사용자는 매끄럽고 역동적 인 단일 페이지 응용 프로그램 (SPA) 경험을 기대합니다. 그러나 스파를 만드는 경우 종종 반응 및 각도와 같은 복잡한 프레임 워크가 필요하며 학습 및 사용을 복잡 할 수 있습니다. HTMX가 시작되었습니다.이 라이브러리는 AJAX 및 CSS 전환과 같은 기능을 HTML에서 직접 활용하여 동적 웹 경험을 구축 할 수있는 새로운 관점을 제공하는 라이브러리입니다.

이 안내서는 HTMX의 기능, 동적 웹 개발을 단순화하는 방법 및 웹 개발 프로세스를 향상시킬 수있는 잠재력을 활용할 수있는 방법을 살펴 봅니다.

키 포인트

HTMX 기본 사항 : HTMX는 HTML을 활용하여 동적 웹 경험을 달성함으로써 일반적으로 JavaScript 집약적 인 스파와 관련된 복잡성을 줄입니다.

<:> 쉬운 설치 : HTMX는 CDN을 통해 프로젝트에 쉽게 통합 될 수 있으므로 복잡한 설정없이 신속하게 통합 할 수 있습니다.

단순화 AJAX :이 라이브러리를 사용하면 특정 속성을 사용하여 HTML 요소에서 직접 간단한 AJAX 요청을 허용하여 많은 JavaScript 코드없이 사용자 상호 작용을 향상시킵니다.

동적 컨텐츠 로딩 : HTMX는 특정 요소에 대한 컨텐츠 업데이트를 지원하고 새로운 컨텐츠를 삽입하는 여러 가지 방법을 제공하여 웹 페이지를보다 대화식으로 만들 수 있습니다.

강화 된 사용자 경험 : HTMX에는 CSS 전환 및 실험 뷰 전환 API가 내장되어있어 콘텐츠를 업데이트 할 때 부드러운 시각적 효과를 허용합니다.

양식 처리 및 검증 : HTMX는 HTML5 검증과 통합되어 양식이 예상대로 실행되도록하여 유용성 및 기능을 향상시킵니다.

htmx는 무엇입니까? 어떻게 작동합니까?

개발자는 전통적으로 대화 형 웹 경험을 구축 할 때 각각 자체 트레이드 오프를 제공합니다. 한편으로, 사용자가 상호 작용할 때마다 전체 페이지를 새로 고치는 다중 페이지 응용 프로그램 (MPA)이 있습니다. 이 접근법은 서버가 서버가 응용 프로그램 상태를 제어하고 클라이언트가이를 충실하게 표현하도록합니다. 그러나 전체 페이지로로드하면 느리고 서투른 사용자 경험이 생깁니다.

반면에 SPA (Single Page Applications)는 브라우저에서 실행되는 JavaScript에 의존하여 응용 프로그램 상태를 관리합니다. 데이터를 일반적으로 JSON 형식으로 반환하는 API 호출을 사용하여 서버와 통신합니다. 그런 다음 SPA는이 데이터를 사용하여 페이지 새로 고침없이 사용자 인터페이스를 업데이트하여 기본 데스크톱 또는 모바일 앱과 다소 유사한 더 부드러운 사용자 경험을 제공합니다. 그러나이 접근법도 완벽하지 않습니다. 클라이언트가 크게 높아서 클라이언트가 더 높아질 수 있습니다. 클라이언트는 먼저 큰 JavaScript 패키지를 다운로드하고 구문 분석해야합니다.

htmx는 두 가지 극단적 인 상황에 대한 타협을 제공합니다. MPA의 서버 측 단순성을 유지하면서 전체 페이지 재 장전없이 SPA의 사용자 경험 이점을 제공합니다. 이 모델에서 서버는 클라이언트가 해석하고 렌더링 해야하는 데이터를 반환하지 않고

이지만 html 조각 입니다. 그런 다음 HTMX는이 스 니펫을 대체하여 사용자 인터페이스를 업데이트합니다. 이 접근법은 클라이언트 복잡성을 최소화하고 SPA가 일반적으로 사용하는 많은 JavaScript 종속성을 최소화하여 개발 프로세스를 단순화합니다. 복잡한 설정이 필요하지 않으며 매끄럽고 반응이 좋은 사용자 경험을 제공합니다.

설치 htmx

프로젝트에 HTMX를 포함시키는 여러 가지 방법이 있습니다. 프로젝트의 github 페이지에서 직접 다운로드하거나 node.js를 사용하는 경우 npm install htmx.org를 사용하여 NPM을 통해 설치할 수 있습니다.

그러나 가장 쉬운 방법 (이 안내서에 사용되는 방법)은 CDN (Content Delivery Network)을 통해이를 포함시키는 것입니다. 이를 통해 설정 또는 설치 프로세스없이 HTMX 사용을 시작할 수 있습니다. HTML 파일에 다음 스크립트 태그를 포함시키기 만하면됩니다.

이 스크립트 태그는 버전 1.9.4를 가리 키지만 최신 버전을 사용할 수있는 경우 "1.9.4"를 최신 버전으로 바꿀 수 있습니다.

htmx는 매우 가벼우 며 최소 및 GZIP 버전의 무게는 약 14KB입니다. 의존성이 없으며 IE11을 포함한 모든 주요 브라우저와 호환됩니다.

프로젝트에 HTMX를 추가 한 후 올바르게 작동하는지 확인할 수 있습니다. 다음 간단한 예제로 테스트 할 수 있습니다.

버튼을 클릭 할 때 HTMX가 제대로 작동하면 API에 GET 요청을 보내어 서버의 응답으로 바꿉니다. 태그의 내용.

<🎜>

로그인 후 복사

<<>

AJAX 요청 : HTMX 메서드 <🎜

HTMX의 주요 판매 포인트 중 하나는 개발자가 다른 속성 세트를 활용하여 HTML 요소에서 직접 AJAX 요청을 보낼 수 있다는 것입니다. 각 속성은 다른 HTTP 요청 방법을 나타냅니다

hx-get : 지정된 URL에 GET 요청을합니다.

hx-post : 지정된 URL에 대한 사후 요청.

hx-put : 지정된 URL에 풋 요청을 게시합니다.

hx-patch : 지정된 URL에 패치 요청을 지정하십시오.

<button hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode&type=single"
        hx-target="#joke-container">
  Make me laugh!
</button>

<p id="joke-container">Click the button to load a joke...</p>

로그인 후 복사

hx-delete : 지정된 URL에 삭제 요청을 지정하십시오.

이 속성은 Ajax 요청을 보낼 URL을 수락합니다. 기본적으로 AJAX 요청은 HTML 요소의 "자연적인"이벤트 (예 : 버튼의 경우 클릭 이벤트 또는 입력 필드의 경우 변경 이벤트)에 의해 트리거됩니다.

<:> 다음을 고려하십시오

위의 예에서 버튼 요소에는 HX-Get 속성이 할당됩니다. 버튼을 클릭 한 후 /API /Resource URL에 GET 요청이 이루어집니다.

서버가 데이터를 반환 한 후에는 어떻게됩니까? 기본적으로 HTMX는이 응답을 시작 요소 (예 : 버튼)에 직접 주입합니다. 그러나 HTMX는이 동작에만 국한되지 않으며 응답 데이터를 대상 요소로 지정하는 기능을 제공합니다. 다음 섹션에서는이 기능을 더 심도있게 탐색 할 것입니다. An Introduction to htmx, the HTML-focused Dynamic UI Library htmx

로 요청을 트리거합니다 htmx는 특정 요소에서 발생하는 특정 이벤트에 대한 응답으로 Ajax 요청을 시작합니다.

<,> 입력, Textarea 및 Select 요소의 경우 변경 사항입니다.

양식 요소의 경우 제출 이벤트입니다.

다른 모든 요소의 경우 클릭 이벤트입니다.

위의 농담 예를 확장하여이를 시연하여 사용자가 특정 단어가 포함 된 농담을 검색 할 수 있습니다.

검색을 트리거하려면 변경 이벤트를 트리거해야합니다.

요소의 경우 요소의 값이 변경되고 초점이 손실 될 때 발생합니다. 따라서 상자에 무언가를 입력하고 (예 : "bar") 페이지의 다른 곳을 클릭하면 농담이

요소에 나타납니다. 이것은 좋지만 일반적으로 사용자는 입력 할 때 검색 결과를 업데이트하려고합니다. 이렇게하려면 <🎜 🎜> 요소에 HTMX 트리거 속성을 추가 할 수 있습니다.

결과는 이제 즉시 업데이트됩니다. 이것은 좋지만 새로운 문제를 소개합니다. 이제 모든 키 프레스와 함께 API 통화를 사용하고 있습니다. 이를 피하기 위해 수정자를 사용하여 트리거의 동작을 변경할 수 있습니다. HTMX는 다음을 제공합니다

한 번 : 요청을 한 번만 수행하려면이 수정자를 사용하십시오.

<🎜>

로그인 후 복사

변경 :이 수정자는 요소의 값이 변경된 경우에만 요청이 이루어 지도록합니다.

지연 : <🎜 🎜> :이 수정자는 요청을하기 전에 대기 시간 (예 : 1 초)을 설정합니다. 이 대기 기간 동안 이벤트가 다시 트리거되면 카운트 다운이 재설정됩니다. <input> <<> <: :> 스로틀 : <div> :이 수정자를 사용하면 요청을하기 전에 대기 시간 (예 : 1 초)을 설정할 수도 있습니다. 그러나 지연과 달리 새 이벤트가 정해진 시간 내에 트리거되면 이벤트가 무시되어 정의 된 기간 후에 만 요청이 트리거되도록합니다. <input> <<>

from : <🎜 🎜> :이 수정자를 사용하면 원래 요소가 아닌 다른 요소의 이벤트를들을 수 있습니다.

<button hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode&type=single"
        hx-target="#joke-container">
  Make me laugh!
</button>

<p id="joke-container">Click the button to load a joke...</p>

로그인 후 복사

<<>

<,>이 경우 지연이 필요한 것 같습니다

이제 상자에 무언가를 입력 할 때 ( "개발자"와 같은 더 긴 단어를 사용하려고 시도), 유형을 일시 중지하거나 완료하는 경우에만 요청이 트리거됩니다.

보시다시피, 이것은 몇 줄의 클라이언트 코드만으로 활성 검색 상자 패턴을 구현할 수 있습니다.

<<> 요청 표시기

<,,> 웹 개발에서 사용자 피드백은 특히 완료하는 데 많은 시간이 걸릴 수있는 작업 (예 : 네트워크 요청 발행)에서 중요합니다. 이 피드백을 제공하는 일반적인 방법은 요청 표시기, 즉 조작이 진행 중임을 나타내는 시각적 프롬프트입니다.

HTMX는 요청 표시기에 대한 지원을 통합하여 사용자 에게이 피드백을 제공 할 수 있습니다. HX-Indicator 클래스를 사용하여 요청 표시기로 사용 된 요소를 지정합니다. 이 클래스의 모든 요소의 불투명도는 기본값이 0으로 표시되어 보이지 않지만 DOM에는 존재합니다.

htmx가 ajax 요청을 할 때 HTMX-Request 클래스를 시작 요소에 적용합니다. HTMX-Request 클래스는 요소 (또는 HTMX-Indicator 클래스가있는 자식 요소)가 1의 불투명도로 전환하게됩니다.

예를 들어 로드 스피너를 요청 표시기로 사용하는 요소를 고려하십시오.

hx-get 속성이있는 버튼이 클릭되고 요청이 시작되면 버튼은 HTMX-Request 클래스를 수신합니다. 이로 인해 요청이 완료되고 클래스가 삭제 될 때까지 이미지가 표시됩니다.

HTMX-Indicator 속성을 사용하여 HTMX- 요청 클래스를 수신 해야하는 요소를 나타냅니다.

<🎜>

로그인 후 복사

농담 API 예제 :

로 이것을 시연합시다

<<> 참고 : CSS 로더 및 스피너에서 스피너의 CSS 스타일을 얻을 수 있습니다. 선택할 수있는 사람이 많습니다.

<<> 요청이 진행 중일 때로드 스피너가 나타납니다.

네트워크가 빠르면 요청이 이루어질 때 스피너가 간단히 깜박입니다. 존재하는지 확인하려면 브라우저의 개발 도구를 사용하여 네트워크 연결 속도를 제한 할 수 있습니다.

또는 단지 재미를 위해 (즉, 실제 응용 프로그램 에서이 작업을 수행하지 마십시오), 일부 네트워크 대기 시간을 시뮬레이션하도록 HTMX를 구성 할 수 있습니다.

<button hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode&type=single"
        hx-target="#joke-container">
  Make me laugh!
</button>

<p id="joke-container">Click the button to load a joke...</p>

로그인 후 복사

이것은 HTMX의 이벤트 시스템을 활용하여 동작을 수정하고 향상시키는 데 사용할 수 있습니다. 여기서 우리는 Ajax onload가 완료된 후 발사되는 HTMX : AfterOnload 이벤트를 사용합니다. 또한 Sitepoint 기사에서 동일한 주제에 대한 수면 기능을 사용했습니다.

이것은 완성 된 데모입니다. 상자에 무언가를 입력 한 다음 요청을 시작한 후로드 표시기를 관찰하십시오. 보시다시피, 이것은 몇 줄의 클라이언트 코드만으로 활성 검색 상자 패턴을 구현할 수 있습니다. 대상 요소 및 컨텐츠 교환

<,> 경우에 따라 요청을 시작하는 요소와 다른 요소를 업데이트 할 수도 있습니다. HTMX를 사용하면 HX-Target 속성을 사용하여 AJAX 응답에 대한 특정 요소를 찾을 수 있습니다. 이 속성은 HTMX가 업데이트 할 요소를 찾는 데 사용할 CSS 선택기를 사용할 수 있습니다. 예를 들어, 블로그에 새 의견을 게시하는 양식이있는 경우 양식 자체를 업데이트하는 대신 주석 목록에 새 의견을 첨부 할 수 있습니다.

우리는 실제로 첫 번째 예에서 이것을 보았습니다 : <🎜 🎜>

버튼은 자체 컨텐츠를 대체하지 않지만 HX-Target 속성은 응답이 요소의 내용을 ID "Joke-Container"로 바꿔야한다고 선언합니다.