GN⁺: htmz - 초소형 HTML 프레임워크
(leanrada.com)- plain HTML과 같은 단순한 방식으로 모듈식 & 동적인 웹 사용자 인터페이스를 만들 수 있는 미니멀리스트 HTML 마이크로프레임워크
- 딱 하나의 동작만 함 : 페이지상의 모든 요소에서 HTML 리소스 로드 가능
- 페이지의 일부만을 업데이트하는 것을 가능하게 함으로써, 페이지 조각을 교체할 수 있게 해줌
- 총 166바이트 크기로, 순수한 HTML만 사용하며, 의존성이 없으며 JS 번들이나 백엔드, 특별한 속성이나 DSL, 사용자 정의 요소가 필요 없음
- 실제 DOM과 상호작용을 사용하며, VDOM이나 클릭 리스너, AJAX, fetch 등을 사용하지 않음
- iframe으로 된 인라인 HTML 스니펫만 추가하면 끝
<iframe hidden name=htmz onload="setTimeout(()=>document.querySelector(this.contentWindow.location.hash||null)?.replaceWith(...this.contentDocument.body.childNodes))"></iframe>
기본 사용법
- htmz를 사용하기 위해서는, 자원 URL을 가리키는 href 속성(또는 form의 action)과 목적지 ID 선택자를 가진 하이퍼링크(또는 form)가 필요함.
- URL 조각을 목적지 ID 선택자로 재사용하는 것처럼 보이지만, 이 컨텍스트에서 URL 조각을 다른 용도로 사용하지 않으므로 재사용됨.
정확히 무엇을 하는가?
- htmz는 페이지 내의 어떤 요소 내에서도 HTML 자원을 로드할 수 있게 하는 단일 기능을 제공함.
- 이 아이디어는 새로운 것이 아니며, 웹 페이지를 독립적으로 리로딩하는 부분으로 나누는 것은 1990년대 중반부터 있었음.
- htmz는 HTML 프레임의 일반화로, 페이지 내의 어떤 요소에서든 HTML 자원을 로드할 수 있음.
고급 사용법
- 현재 HTML5에서는 와 요소만이 htmz를 대상으로 지정하고 호출할 수 있음.
- 요소를 사용하여 모든 상대 링크에 대해 htmz를 기본 대상으로 설정할 수 있음.
- 실제 대상 값을 사용하는 것을 선호한다면, 대상 ID 선택자를 target 속성 자체에 작성할 수 있는 해킹을 사용할 수 있음.
스크립팅 / 상호작용
- 더 상호작용이 필요한 경우, htmz의 동반 스크립팅 언어인 JavaScript를 사용할 수 있음.
- htmz는 JS 작성이나 UI 라이브러리 사용을 배제하지 않으며, htmz로 정규 HTTP 폼으로 여전히 폼 값을 제출할 수 있음.
확장성
- 고급 선택자, 오류 처리, 다중 대상 등이 필요한 경우, 개발자가 필요에 따라 확장할 수 있음.
FAQ
- htmz는 이름이 "htmz"인 iframe으로, iframe을 통해 URL을 로드함으로써 htmz를 호출함.
- htmz는 프록시 대상으로서, 지정된 대상으로 응답을 전달함.
- htmz는 DOM을 지속적으로 파싱하거나 특별한 속성이나 구문을 검색하거나 DOM에 리스너를 부착하지 않음.
- htmz는 HTML 마이크로프레임워크로, 최소한의 JS만 사용함.
- htmz는 스니펫이며, 'Html with Targeted Manipulation Zones'의 약자임.
- 이 프로젝트는 htmx에 대한 반응으로 시작되었으며, htmx를 사용하지 않고 현재 웹으로 로드-링크-대상 기능을 구현할 수 있는지에 대한 실험이었음.
- htmz는 그 작은 크기에도 불구하고 강력한 느낌을 주며, 주된 제한은 응답 당 하나의 목적지만 가질 수 있다는 것임.
GN⁺의 의견
- 혁신적인 접근: htmz는 웹 개발에서 프레임워크의 복잡성을 줄이고, 순수 HTML을 사용하여 웹 인터페이스를 구축하는 혁신적인 접근을 제공함. 이는 초급 소프트웨어 엔지니어에게도 쉽게 접근할 수 있는 웹 개발 방식을 의미함.
- 성능과 단순성의 조화: 166바이트의 극도로 가벼운 크기와 의존성이 없는 구조는 웹 페이지의 성능을 크게 향상시킬 수 있음. 또한, 복잡한 자바스크립트 프레임워크를 배우지 않고도 효과적인 웹 페이지를 만들 수 있는 단순성을 제공함.
- 웹 개발의 미래: htmz는 웹 개발의 미래에 대한 흥미로운 시각을 제공함. 이는 웹 표준과 기술의 진화가 어떻게 개발자들에게 더 간단하고 효율적인 도구를 제공할 수 있는지를 보여줌.
고급 사용법: 현재 HTML5에서는 와 요소만이 -> 현재 HTML5에서는 <a>와 <form> 요소만이
HTML 이스케이핑이 적용되지 않은 것 같습니다
Hacker News 의견
-
첫 번째 댓글 요약:
- 서버 렌더링 페이지와 스타일 범위가 지정된 위젯을 위해 명명된 iframes과 타겟이 지정된 폼을 사용하는 아이디어에 대한 긍정적인 반응.
- htmz가 이 아이디어를 잘 구현한 것으로 보임.
- 좋은 아이디어를 포기하지 말고, 완성도와 우수성에 집중하며, 아이디어를 잘 전달할 것을 강조.
- 브라우저가 SPA를 기본적으로 제공할 수 있음을 보여주는 훌륭한 해킹으로 평가.
- 플랫폼을 잘 이해하고 있는 누군가의 멋진 시연.
- 바닐라 웹이 간단하고 강력해야 한다는 의견.
- 웹의 주어진 재료를 최대한 활용하는 것에 대한 긍정적인 평가.
- 창작자의 커뮤니케이션 및 마케팅 기술에 대한 칭찬.
-
두 번째 댓글 요약:
- 브라우저가 SPA를 기본적으로 제공할 수 있음을 보여주는 해킹.
- iframe을 피하기 위해 몇 가지 속성만 필요함.
- 실제 도구보다는 포인트를 증명하는 데 더 유용할 수 있음.
- htmx가 제공하는 것에 비해 너무 복잡함을 지적.
-
세 번째 댓글 요약:
- 2001년경 HTML 기반 이메일 클라이언트 개발 경험 공유.
- 숨겨진 iframe을 사용하여 서버에서 데이터를 로드하고 DOM을 조작함.
- 당시에는 브라우저 지원이 충분하지 않았지만, 기본 메커니즘은 동일함.
- 라이브러리가 많이 필요 없이 간결한 패키지로 구현된 것에 대한 긍정적인 평가.
- 현재 많이 사용되는 React 등의 프론트엔드 프레임워크에 비해 대부분의 사용 사례에 적합할 수 있음.
-
네 번째 댓글 요약:
- DOM을 응답으로 대체하는 행위가 플랫폼의 일부가 되어야 한다는 강력한 주장.
- 외부 콘텐츠를 선언적으로 페이지에 로드할 수 있는 요소에 대한 첫 번째 단계 제안.
- HTML이 링크의 대상이 될 수 있는 요소를 지원해야 함을 언급.
-
다섯 번째 댓글 요약:
- 플랫폼을 정말로 이해하는 사람의 멋진 시연에 대한 칭찬.
- 실제로 사용할 가능성은 낮지만, 훌륭하다고 평가.
-
여섯 번째 댓글 요약:
- 인라인 이벤트 리스너에서
this.를 제거하여 코드 크기를 더 줄일 수 있는 제안. - 스니펫에서 10바이트를 절약할 수 있는 팁 제공.
- 인라인 이벤트 리스너에서
-
일곱 번째 댓글 요약:
-
target을 사용함으로써 JS가 비활성화되었을 때 htmx처럼 우아하게 저하되지 않을 수 있음을 지적. - JS 비활성화 상황에 대한 이상주의적인 관점 표현.
-
-
여덟 번째 댓글 요약:
-
<slot>요소를 이런 식으로 재사용하는 것은 나쁜 아이디어라고 지적. - 브라우저에서
<slot>은 매우 특정한 동작을 하며, 라이브러리가 무엇을 하든 호스트 요소의 자식으로 대체됨. - 이와 같은 상황에는
<output>요소가 이미 존재함을 언급.
-
-
아홉 번째 댓글 요약:
- 데모 섹션에 대한 개선 필요성 지적.
- "탭"을 클릭하여 예제 코드를 변경하면 히스토리 이벤트는 추가되지만 URL은 업데이트되지 않음.
- "단순히 HTML"을 주장하는 것에 대해 웹/UX의 기본 규칙을 어기고 있음을 비판.
-
열 번째 댓글 요약:
- pjax와 유사한 점을 상기시키는데, pjax는 iframe 대신 XHR을 사용하고 기본적으로 pushState를 사용하여 뒤로 가기 버튼이 작동하도록 함.