htmx

htmx는 하이퍼미디어 시스템을 지향하는 프론트엔드 웹 프레임워크다. htmx는 모던 웹이 요구하는 사용자 경험을 HTML이 충분히 지원하지 못했다는 문제의식을 바탕으로 HTML을 확장한다는 목표를 가지고 있다. htmx는 (1) 웹 앱을 구축하는 매우 간단한 방법을 제공하고, (2) 콘텐츠와 API의 변경에 관대하며, (3) 캐싱과 같은 브라우저의 검증된 기능을 활용할 수 있다는 하이퍼미디어의 장점을 살리고자 한다.

htmx가 지향하는 하이퍼미디어 시스템은 서버가 모든 주도권을 갖고, 클라이언트는 그저 서버로부터 받은 HTML을 렌더링하는 역할만 한다. 복잡한 상태를 관리해야 웹 앱에는 하이퍼미디어 시스템이 어울리지 않지만, '비선형적 탐색이 가능한 매체’로서 웹을 사용하고자 한다면 하이퍼미디어는 여전히 최고의 아이디어라고 할 수 있다.

지난 몇 달간 htmx로 웹 앱을 만들면서 느낀 점은, 골디락스 존의 하위 50% 애플리케이션에만 htmx가 적합하다는 것이다. 클라이언트 상태를 조금이라도 다뤄야 하는 순간이 오면 불행이 시작된다. 하이퍼미디어 시스템의 철학에 동의하는데, 그 구현은 아일랜드 아키텍처의 접근법이 더 나을 수도 있겠다는 생각이 든다.

관련문서

• 『Hypermedia Systems』

이 문서를 인용한 문서

• 주제문서
• Simonpedia 규칙

  • 문서 트리는 심페시스로 빌드하며, Hono와 htmx를 이용해 웹 사이트를 서빙한다.

• 『Hypermedia Systems』

  • htmx는 하이퍼미디어 지향 라이브러리다.

  • htmx는 MPA가 아니다.

  • 권장하지는 않지만, htmx로 SPA를 만들 수 있기 때문이다.

  • htmx는 웹의 하이퍼미디어 시스템을 대체하는 대신, 확장한다.

  • htmx의 간단한 예시를 살펴보자:

  • 이제 htmx로 이 웹 앱을 개선해보자.

  • htmx는 사용자에게 자바스크립트 작성을 요구하지 않고 HTML을 확장한다.

• 리액트 서버 컴포넌트

  • 물론 서버 컴포넌트와 htmx의 문제의식은 서로 다르고, 서버 컴포넌트가 하이퍼미디어의 고도화를 위해 만들어진 것도 아니지만, 서버에서 화면을 렌더링한다는 핵심 개념은 같지 않은가. 다양한 프레임워크의 아이디어가 서로 달라보이지만, 한 지점으로 수렴하고 있다.