HTMX에서 Datastar로 전환한 이유

4 weeks ago 12

HTMX 사용 시 코드량을 약 70% 줄일 수 있었으나, UI 간 동기화 이슈와 더불어 프론트엔드 상태 관리의 복잡성 증가 경험
Datastar 도입 후, 실시간 멀티유저 애플리케이션 개발 시 WebSockets 없이 간결한 코드 구성 및 유지보수 용이성 체험
Datastar API는 속성이 적고 코드의 가독성 및 생산성이 증가함을 느낌
서버 주도 방식으로 업데이트 로직을 집중시킬 수 있어 코드의 일관성 및 확장성 강화 가능
서버센트이벤트(SSE) 활용으로 손쉬운 실시간 협업 기능 구현 및 복구 기능 덕분에 고도화된 대시보드와 실시간 도구 구축이 가능함

소개 및 동기

2022년, David Guillot가 DjangoCon Europe에서 React 기반 SaaS를 HTMX로 전환하면서 코드량을 약 70% 줄이고 기능 개선을 이룬 사례를 공유함
다수의 팀들이 단일 페이지 앱(SPA)에서 멀티페이지 하이퍼미디어 앱으로 전환 시 코드 절감 및 개발∙사용자 경험 모두 향상됨을 경험함
필자 역시 HTMX에서 Datastar로 프로젝트를 전환하면서 코드가 더 짧아지고 WebSocket이나 복잡한 상태 관리 없이 실시간 멀티유저 앱 개발 가능함을 확인함

HTMX와 AlpineJS의 한계

HTMX와 AlpineJS를 조합하여 UI를 동기화하려 했으나, 서로 통신하지 않아 컴포넌트 업데이트에 버그 발생 및 디버깅에 많은 시간 소요됨
초기화 및 이벤트 오케스트레이션 관리로 코드와 작업 시간이 증가함
이와 달리 Datastar는 두 라이브러리의 기능을 통합하면서 다운로드 용량이 작아 모바일 사용자의 페이지 로드 성능도 개선함

Datastar의 API 및 사용성

Datastar의 API는 HTMX보다 가볍고 속성(attribute) 개수가 적음
HTMX는 요청 트리거 요소에 여러 속성을 추가해야 하며, 코드 유지보수 시 부모체인까지 속성 영향 여부를 일일이 확인해야 하는 어려움 존재
Datastar에선 data-on-click="@get('/url')" 단일 속성으로 간단히 인터랙션 구현 가능해 코드 복잡성 감소 및 회고 시 가독성 향상

동작 원리의 차이

HTMX는 프론트엔드 라이브러리로 HTML 스펙 확장을 지향하며, 요청을 트리거하는 요소에 동작을 기술함(즉, 비동기 로직이 HTML 곳곳에 흩어짐)
Datastar는 서버 주도로 어떤 부분이 갱신되는지 서버에서 정의하고, 업데이트 로직을 집중시킬 수 있음
예를 들어, 버튼 클릭 시 여러 요소 동시 갱신도 가능하며, 서버는 HTML 조각을 내려 여러 컴포넌트를 한 번에 패치함

컴포넌트 단위 사고

컴포넌트 단위의 사고가 가능해져 UI의 상태 관리가 일관되며, 비정상적인 상태 진입을 예방함
Datastar로 각 상태별 HTML 구조를 서버에서 정의하고, 클릭 등 이벤트 발생 시 적절한 UI 전체를 교체하는 전략 적용 가능

실시간 협업 및 Server-Sent Events

Datastar는 Server-Sent Events(SSE) 기반으로 서버가 클라이언트에 요청 없이 변경 사항을 푸시함
웹소켓이나 폴링 코드 작성 없이 실시간 대시보드와 협업 도구 등 구축 가능
연결이 끊겼을 때 자동 재연결 및 마지막으로 수신한 이벤트 ID까지 서버에 통지해주는 내장 복구 기능 제공

Datastar 커뮤니티 및 개발 철학

Discord 커뮤니티 적극 참여 경험, Datastar는 단순 유틸 스크립트가 아니라 Web 기본 요소 활용에 초점을 둔 철학이 있음
HTML/HMTL5, CSS 뷰 트랜지션, 웹 컴포넌트 등 웹 네이티브 기능 활용에 가치를 두고, 자바스크립트를 최소화한 컴포넌트화 전략 장려함
커뮤니티에서는 컴포넌트 전체 리렌더링을 두려워 말라, 서버 중심 상태 관리 등 실전 팁을 공유함

확장 가능성과 사용 예시

Datastar 기반 고성능 예시 프로젝트 다수 존재
- 데이터베이스 모니터링 데모, 10억 개의 체크박스 렌더링, 미국 레이더 실시간 모니터링 등
- 레이더 프로젝트는 초당 80만 건 이상 초고속 UI 업데이트 및 시간 스크럽 지원
복잡한 AlpineJS 컴포넌트를 웹컴포넌트로 분리해 여러 곳에서 재사용하는 등 패턴 실험 지속 중

결론 및 경험

HTMX 사용은 큰 기쁨을 줬으나, Datastar로 전환 후 복잡성이 해소되고 더 강력한 실시간 푸시 기반 사용자 경험 구현 가능해짐
특히 프론트엔드 상태 관리 및 실시간 협업이 중요한 스타트업 및 IT 개발 환경에서 코드 심플함과 서버 주도 철학의 효용이 큼
HTMX로 얻은 기쁨을 Datastar에서 한 단계 더 경험할 수 있음

Read Entire Article