HTMX

1 개요

htmx는 2022년 |intercooler.js 로부터 프로젝트 명칭을 바꿔 정식 출시한 오픈 소스 프론트엔드 웹 프레임워크이다.

2 특징

• 종속성이 없는 Node.js 프론트엔드 프로젝트이다.
• 기존 AJAX 기법을 HTML 마크업 만으로 서버로부터 데이터를 불러와 부분을 바꿀 수 있다.
• CSS Transition 을 지원하여 애니메이션 대응이 가능하다.
• 기존 Ajax를 비롯하여 Server Sent Events, Websocket 통신을 지원한다.
• IE는 11을 지원한다.
• 같은 프로젝트 기준, React 대비 약 60%의 코드 양으로 구현 가능하다 주장하고 있다.
• 확장을 지원하며, 당연히 자바스크립트가 필요하지만 어렵지 않게 구현할 수 있다.

자바스크립트와 거리가 먼 Python이나 Rust 등의 언어로 이루어진 서버와 통신을 통한 컨텐츠가 주류일 경우에 이 라이브러리를 추천받는다. GitHub 엑셀러레이터에 들 정도로 웹 오픈소스에서 주목을 받고 있다.

그러나, 데이터그리드나 차트 등을 그리기에는 궁합이 좋지 않아 별도의 라이브러리를 사용하여 직접 자바스크립트로 구현해야 하는 과제가 남아 있다.

3 예시

<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<!-- 아래 버튼을 누르면, /clicked 경로를 HTML POST 방식으로 받은 응답으로 아래 내용이 교체된다. -->
<button hx-post="/clicked" hx-swap="outerHTML">
  여기를 클릭하세요!
</button>

주의사항: 서버의 응답 형식은 JSON 같은 데이터 교환 방식이 아니라, 브라우저의 내용을 표시할 수 있는 HTML이어야 한다. 예) PHP 응답 예시

<?php
// clicked.php
echo "<strong>여기를 클릭했습니다!</strong>";
?>

4 같이 보기

• HTML
• JavaScript