talkDOM: DOM을 위한 작은 메시지 전달 런타임
Source: Dev.to
현대 프론트엔드 개발
현대 프론트엔드 개발은 종종 인터랙티브한 웹 인터페이스를 구축하려면 무거운 JavaScript 프레임워크가 필요하다고 가정합니다. 수년 동안 프레임워크는 점점 복잡해져서 컴포넌트, 상태 관리 시스템, 빌드 파이프라인, 그리고 큰 런타임 번들을 도입했습니다.
talkDOM은 웹이 이미 강력한 플랫폼을 가지고 있음을 보여줍니다: HTML + DOM + HTTP.
Repository:
핵심 아이디어
talkDOM에서는 요소들이 Smalltalk‑style 메시지를 사용해 통신합니다.
보내는 요소는 sender 속성을 가집니다:
<button sender="posts get:/posts | list apply:inner">
Load Posts
</button>받는 요소는 자신이 받을 수 있는 것을 선언합니다:
<div receiver="list"></div>버튼을 클릭하면:
posts에 메시지가 전송됩니다.GET /posts요청이 수행됩니다.- 응답이
list로 파이프됩니다. - 리스트의 내용이 교체됩니다.
메시지 문자열
posts get:/posts | list apply:inner은 거의 문장처럼 읽힙니다:
“Posts,
/posts를 가져오고, 그 다음 리스트에 결과를 inner 콘텐츠로 적용해라.”
메시지 파이프라인
여러 작업을 파이프 연산자 | 로 구성할 수 있습니다:
<button sender="posts get:/posts | list apply:inner">
Load Posts
</button>각 단계는 값(또는 프라미스)을 반환할 수 있으며, 그 값은 다음 단계로 전달됩니다.
이 디자인은 다음에서 영감을 받았습니다:
- Unix 파이프
- Smalltalk 키워드 메시지
- 일반 메시지‑패싱 시스템
파이프라인을 사용하면 복잡한 UI 동작을 놀라울 정도로 적은 코드로 표현할 수 있습니다.
Receivers
수신기는 receiver 속성을 가진 모든 DOM 요소를 의미합니다:
<div receiver="toast"></div>Multiple Groups
<div receiver="toast" group="info"></div>
<div receiver="toast" group="error"></div>toast에 전송된 메시지는 모든 일치하는 요소를 대상으로 합니다.
Accepted Operations
<div receiver="list" accepts="inner,append"></div>accepts 목록은 수신기가 수행할 수 있는 작업을 제한함으로써 작은 안전 계층을 추가합니다.
콘텐츠 가져오기 및 업데이트
talkDOM은 HTTP 요청 및 DOM 업데이트를 위한 내장 메서드를 제공합니다.
<button sender="load get:/data | target apply:inner">
Load
</button>지원되는 요청 메서드
get:post:put:delete:
업데이트 작업
inner–innerHTML을 교체append– 기존 콘텐츠에 추가text–textContent를 교체outer– 요소 자체를 교체
서버‑트리거 액션
서버는 응답 헤더 X‑TalkDOM‑Trigger 를 통해 클라이언트‑측 동작을 트리거할 수 있습니다.
예시 헤더:
X-TalkDOM-Trigger: toast apply:"Saved!" text서버는 JavaScript를 삽입하지 않고도 클라이언트가 UI 요소를 업데이트하도록 지시할 수 있습니다.
폴링
수신기는 엔드포인트를 자동으로 폴링할 수 있습니다:
<div receiver="posts" poll="/posts" interval="5000"></div>이것은 /posts를 5 초마다 가져와서 수신기를 업데이트합니다. 요소가 DOM에서 제거되면 폴링이 자동으로 중지됩니다.
탐색 및 기록
talkDOM은 히스토리 인식 네비게이션을 지원합니다:
<a href="/posts" sender="posts get:/posts | list apply:inner" history>
Posts
</a>클릭했을 때:
- 요청이 실행됩니다.
- 콘텐츠가 업데이트됩니다.
- URL이 브라우저 히스토리에 푸시됩니다.
뒤로/앞으로 이동하면 동일한 메시지 체인이 재생됩니다.
지속성
Receivers can persist their content in localStorage:
<div receiver="profile" persist-key="profile-data"></div>After a page reload, the content is restored automatically.
이벤트
talkDOM은 작업 후 라이프사이클 이벤트를 발생시킵니다:
talkdom:done– 작업이 성공적으로 완료됨talkdom:error– 작업이 실패함
document.addEventListener("talkdom:done", e => {
console.log("operation finished", e.detail);
});이러한 이벤트를 통해 필요할 때 런타임에 쉽게 연결할 수 있습니다.
왜 이것을 만들까?
HTMX, Unpoly, Turbo와 같은 프로젝트들은 대규모 프런트엔드 프레임워크 없이도 많은 인터랙티브 인터페이스를 구축할 수 있음을 보여주었습니다. talkDOM은 약간 다른 방향을 탐구합니다.
속성 기반 API 대신:
hx-get="/posts"
hx-target="#list"
hx-swap="inner"talkDOM은 메시지 구문을 사용합니다:
posts get:/posts apply:inner이렇게 하면 상호작용이:
- Composable → 구성 가능
- Pipeline‑friendly → 파이프라인 친화적
- Closer to a programming language → 프로그래밍 언어에 더 가깝게
HTML은 UI 동작을 위한 작은 DSL이 됩니다.
디자인 목표
- 작은 런타임 (몇 킬로바이트에 불과)
- 빌드 단계 없음 – 스크립트를 삽입하고 바로 사용
- 점진적 향상 – 모든 최신 브라우저에서 작동
- 파이프라인을 통한 구성 가능한 상호작용
- 최소한의 JavaScript – 대부분의 로직은 HTML에 존재
전체 런타임은 단일하고 가벼운 스크립트 하나이며, 이를 어떤 페이지에도 추가할 수 있습니다.
이것이 무엇이며 (그리고 무엇이 아닌가)
talkDOM은 전체 UI 프레임워크를 대체하려는 것이 아닙니다.
다음에 가장 적합합니다:
- 서버‑렌더링 애플리케이션
- 대시보드
- 관리자 패널
- 점진적으로 향상된 페이지
여기서 서버가 주요 진실 소스입니다.
마무리 생각
웹은 이미 강력한 프로그래밍 모델을 제공합니다:
- 문서
- 이벤트
- HTTP
- DOM
때때로 최고의 도구는 또 다른 추상화 레이어가 아니라 플랫폼이 스스로 말하도록 하는 작은 런타임입니다.
talkDOM은 그 방향의 실험으로, HTML을 인터랙티브 인터페이스를 구축하기 위한 작은 메시지‑전달 언어로 변환합니다.
프로젝트는 GitHub에서 확인할 수 있습니다: