HTMX: 웹의 미래

HTMX: HTML 중심 상호 작용을 통한 웹 개발 간소화

이 게시물에서는 Tailwind CSS(프런트엔드), Python 및 Flask(백엔드)로 구축된 SaaS 플랫폼에 HTMX를 통합한 경험을 살펴봅니다. 다른 기술에는 익숙하지만 HTMX는 내 툴킷에 새로 추가된 것입니다. 이 게시물에서는 구현에 대해 자세히 설명합니다.

JSON 기반 아키텍처: 과제

HTMX를 시작하기 전에 대상을 이해하는 것이 중요합니다. 기존의 전체 스택 애플리케이션은 JSON 기반 아키텍처에 의존하는 경우가 많습니다. 백엔드는 JSON 데이터를 보내고 프런트엔드는 이를 렌더링합니다. 이 접근 방식은 상호 작용성을 향상시키는 동시에 상당한 데이터 오버헤드로 인해 어려움을 겪습니다. JSON 페이로드는 동등한 HTML보다 10배 더 클 수 있으므로 성능이 저하될 수 있습니다.

HTMX: 패러다임 전환

HTMX는 서버가 HTML을 직접 반환하도록 옹호하여 이러한 비효율성을 해결합니다. 이렇게 하면 데이터 전송이 최소화되어 사용자 경험이 향상됩니다. HTMX는 단순한 JSON 대체 이상의 기능을 제공합니다. 서버 측 및 클라이언트 측 로직을 긴밀하게 통합하여 더 빠르고 반응성이 뛰어난 상호 작용을 제공합니다.

결정적으로 HTMX는 JavaScript를 대체하지 않습니다. (CDN 또는 로컬 파일을 통해) JavaScript를 포함해야 합니다.

다른 JavaScript 프레임워크에 비해 HTMX의 주요 장점은 HTML 속성을 통해 API와 직접 상호 작용하여 JavaScript 코드를 최소화할 수 있다는 것입니다.

예: 데이터 가져오기 및 렌더링

다음 코드는 HTMX, 클라이언트 측 템플릿 및 Nunjucks 템플릿 엔진을 사용하여 API에서 데이터를 가져오고 렌더링하는 방법을 보여줍니다.

<code class="language-html"><title>Nibodhdaware News Blog</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"></code>

이것은 HTMX 및 해당 클라이언트측 템플릿 확장(나중에 설명)을 포함하여 HTML을 설정합니다. Nunjucks는 템플릿 작성에 사용됩니다.

주요 렌더링 논리:

<code class="language-html"><h1>Nibodhdaware</h1>
<p>HTMX JSON API Test</p>
<div hx-ext="client-side-templates">
  <div hx-get="https://api.spaceflightnewsapi.net/v4/blogs/" hx-trigger="load" nunjucks-template="blogs-template">
    <template>
      <p>The `hx-ext='client-side-templates'` attribute tells HTMX to utilize the extension.  We're using the Space Flight News API. `hx-trigger="load"` sends a GET request on page load.  `nunjucks-template` identifies the template.</p>

      <p>The API response schema is:</p>
      <code>
      {
        "count": 123,
        "next": "...",
        "previous": "...",
        "results": [ /* array of blog objects */ ]
      }
      </code>

      <p>Nunjucks (similar to Jinja) uses `{% %}` for code blocks and `{{ }}` for variables.  `{% if previous %}` checks for pagination. `{% for blog in results %}` iterates through blog posts, accessing properties like `{{ blog.url }}` and `{{ blog.title }}`.</p>

      <p>The blog posts are loaded directly from the API upon page load.</p>
      <img src="/uploads/20250116/17370305576788fb9d220a3.jpg" width="800" height="400" loading="lazy">

      <p>The remarkable aspect is the direct use of API data without explicit fetch calls or JavaScript manipulation of `innerHTML`.</p>
    </template>
  </div>
</div></code>

결론

JSON API를 생성해야 할 수도 있지만 HTMX는 직접 HTML 렌더링을 허용하고 개발 복잡성을 줄이고 성능을 향상시켜 프런트엔드를 단순화합니다.

위 내용은 HTMX: 웹의 미래의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!