HMPL이란?

HMPL은 풀 프론트엔드 프레임워크의 오버헤드 없이 서버 기반 사용자 인터페이스를 구축할 수 있는 경량 JavaScript 라이브러리입니다. 복잡한 클라이언트 측 로직을 전송하는 대신 서버에서 템플릿을 정의하고 HMPL이 렌더링을 처리하도록 합니다. 블록 기반 구문, 사용자 정의 가능한 fetch 요청, 폼, 이벤트 및 시간 기반 동기화를 위한 기본 지원을 제공하며, 모두 몇 킬로바이트에 불과합니다. 또한 HMPL은 표현력이 풍부한 객체 구문을 위한 JSON5와 안전한 HTML 렌더링을 위한 DOMPurify와 통합되어, 무거운 종속성 없이 동적 인터페이스를 원하는 개발자에게 실용적인 선택지를 제공합니다.

대상 사용자

• 백엔드 중심 개발자: 방대한 클라이언트 측 JavaScript를 작성하지 않고 서버에서 UI 로직을 제어하려는 개발자.
• 경량 웹 앱을 구축하는 팀: 전체 SPA 프레임워크를 채택하지 않고 동적 콘텐츠 업데이트, 폼 처리 및 이벤트 기반 상호작용이 필요한 팀.
• 성능 최적화를 원하는 개발자: 최소한의 클라이언트 측 공간을 선호하며, 반응형 인터페이스를 제공하면서 번들 크기를 줄이려는 개발자.

주요 기능

블록 기반 템플릿 구문

HMPL은 깔끔하고 읽기 쉬운 블록 구문을 사용하여 서버에서 렌더링된 HTML에 재사용 가능한 UI 구성 요소를 직접 정의할 수 있습니다. 이 접근 방식은 템플릿을 체계적으로 유지하고 클라이언트 측 코드를 건드리지 않고도 콘텐츠를 쉽게 업데이트할 수 있게 해줍니다.

사용자 정의 가능한 fetch 요청

HMPL이 서버에서 데이터를 가져오는 방식을 완전히 제어할 수 있습니다. 템플릿 블록별로 헤더, 메서드 및 엔드포인트를 구성하여 페이지의 각 부분이 필요에 따라 다른 소스나 API에서 데이터를 가져올 수 있습니다.

기본 폼 및 이벤트 처리

HMPL은 추가 라이브러리 없이도 기본적으로 폼 제출 및 사용자 이벤트를 처리합니다. 클릭, 제출 또는 사용자 정의 이벤트에 작업을 바인딩하고 라이브러리가 서버와의 통신을 관리하도록 할 수 있습니다.

시간 기반 동기화

일정에 따라 UI를 서버와 동기화 상태로 유지합니다. HMPL은 간격 기반 업데이트를 지원하므로 대시보드, 라이브 피드 또는 시간이 지남에 따라 변경되는 콘텐츠에 유용하게 페이지의 특정 부분을 자동으로 새로 고칠 수 있습니다.

차별화 포인트

HMPL은 프레임워크 비용 없이 서버 기반 UI를 제공합니다.

대부분의 서버 기반 인터페이스 솔루션은 무거운 클라이언트 측 라이브러리나 복잡한 빌드 프로세스를 수반합니다. HMPL은 클라이언트를 단 몇 킬로바이트로 가볍게 유지하면서도 폼 처리, 이벤트 바인딩 및 예약된 업데이트와 같은 기능을 제공하여 이와 반대되는 접근 방식을 취합니다. 또한 JSON5를 통합하여 더 깔끔한 객체 구문을 제공하고 DOMPurify로 보안을 강화하므로 추가 도구를 덧붙일 필요가 없습니다. 그 결과, 방해받지 않고 동적 페이지를 구축할 수 있는 실용적이고 간결한 접근 방식이 탄생했습니다.

다음의 경우 확인해 볼 가치가 있습니다…

무거운 프론트엔드 프레임워크에 얽매이지 않고 동적이고 서버 기반의 인터페이스를 구축하려는 경우입니다. HMPL은 특히 백엔드에서 UI 로직을 제어하는 데 익숙하고 최소한의 클라이언트 측 공간을 선호하는 경우에 유용합니다. 풍부한 클라이언트 측 구성 요소 생태계보다 성능과 단순성이 더 중요한 프로젝트에 적합한 선택입니다.