ReActionView 이니셔티브는 Rails 뷰 레이어의 가능성을 탐색하며, ActionView와 호환되는 실용적인 발전 경로를 제시합니다. 핵심은 Herb::Engine으로, 이는 Herb 파서를 기반으로 구축된 새로운 ERB 엔진입니다. 기존 .html.erb 파일과 완벽하게 호환되면서도 HTML 유효성 검사, 개선된 오류 피드백, 반응형 업데이트(예정), 내장 도구 등의 기능을 제공합니다.
주요 발표 내용
- ReActionView 이니셔티브: 뷰 레이어를 위한 실용적이고 ActionView 호환 가능한 발전 경로.
- Herb v0.7: 린터, 포매터, 언어 서버, VS Code 확장 전반의 업데이트.
- Herb::Engine: HTML 인식, 프레임워크 독립적인 ERB 렌더링 엔진.
- 브라우저용 개발 도구: 개발 중 뷰/부분/컴포넌트 개요, 소스 점프, ERB 출력 호버, 해제 가능한 유효성 검사 오버레이.
- 새로운 린터 규칙: 18개 규칙 추가(9개는 접근성 관련), 총 32개 규칙.
- Stimulus Lint: Stimulus LSP에서 추출된 진단 도구 (Herb 기반).
- Tailwind 클래스 재작성기: (예정)
- Phoenix LiveView 스타일 반응성 초기 실험: ERB를 위한 반응형 기능 도입.
Herb 개발 도구 업데이트
- Herb Linter: 18개의 새로운 규칙(총 32개), GitHub Pull Request 주석 기능을 위한
--github플래그 지원, 고급 제어 흐름 분석. - Herb Formatter: 안정성과 예측 가능성 향상, Tailwind CSS 클래스 정렬 기능 추가 (새로운
@herb-tools/tailwind-class-sorter패키지 활용). - Stimulus Lint: Stimulus LSP의 진단 기능을 독립적인 패키지로 추출, Herb Linter 인프라를 기반으로 HTML 및 HTML+ERB 문서 모두에서 작동, CI/pre-commit 훅에서 사용 가능.
- Stimulus LSP 업데이트: Herb 및 Stimulus Lint 통합으로 구현 간소화, Action View Tag Helpers에 대한 진단 기능 제공.
Rails 뷰 레이어의 비전: ReActionView
ReActionView는 ActionView를 2025년 이후를 위해 재구상하는 이니셔티브입니다. Erubi와 같은 문자열 템플릿 엔진에서 벗어나, 유효하지 않은 HTML을 생성할 수 없고 구문 오류를 정확히 알려주는 HTML 템플릿 엔진으로의 전환을 목표로 합니다. 이를 통해 개발자 경험을 개선하고, 최신 웹 표준 및 브라우저 기능을 적극적으로 수용하며, 궁극적으로 ActionView를 반응형으로 만들어 JavaScript 사용을 최소화하면서도 풍부한 UI를 구축할 수 있도록 합니다.
Herb::Engine의 작동 방식
Herb::Engine은 Herb Parser를 사용하여 템플릿을 구문 분석하고 구문 트리를 생성합니다. 이 트리를 순회하며 add_text(), add_expression(), add_code() 등의 메서드를 호출하여 컴파일된 템플릿을 생성합니다. Erubi::Engine이 정규식을 사용하는 것과 달리, Herb::Engine은 구문 트리를 통해 정확한 오류 메시지와 위치를 제공하며, 토큰 압축을 통해 효율성을 유지합니다.
개발 환경 개선
Herb::Engine은 Rails에 쉽게 통합되어 향상된 오류 페이지와 해제 가능한 유효성 검사 오버레이를 제공합니다. 또한, 개발 모드에서 뷰 파일 이름 대신 HTML 요소에 디버그 데이터 속성을 주입하여 시각적인 뷰 개요(view outlines)를 제공하고, 클릭 시 소스 코드로 바로 이동하는 ‘점프 투 소스’ 기능을 구현합니다. ERB 출력 태그에 대해서도 동일한 기능을 제공하여 동적 콘텐츠의 출처를 쉽게 파악할 수 있도록 돕습니다.
ReActionView 로드맵 (채택 수준)
- 레벨 1 & 2 (현재):
reactionviewGem을 통해 로컬에서 기능 체험 가능. Herb Dev Tools 오버레이, 개선된 오류 페이지, 해제 가능한 유효성 검사, 디버그 뷰 주석 기능 포함. - 레벨 3 (Action View 최적화): 부분 렌더링 호출 인라인화, 태그 헬퍼 인라인화, 불필요한 공백 최소화 등 성능 최적화.
- 레벨 4 (반응형 ERB 뷰): 템플릿 변경 사항을 감지하여 필요한 부분만 다시 렌더링하는 반응형 기능 (Phoenix LiveView와 유사).
- 레벨 5 (클라이언트 측 템플릿): 서버와 클라이언트 모두에서 렌더링 가능한 ‘ERB 클라이언트 컴포넌트’ 도입 (React Server Components와 유사).
- 레벨 6 (외부 컴포넌트): React, Vue, Svelte 등 외부 UI 컴포넌트를 *.html.herb 템플릿 내에 직접 마운트하여 사용 가능하게 함.
추가 아이디어
- 일회성 Stimulus 컨트롤러: Alpine.js나 Svelte처럼 파일 내에 스크립트 태그를 사용하여 일회성 JavaScript를 작성하는 방식.
- 뷰 파일 범위 지정 CSS: Vue.js의
<style scoped>와 같이 특정 파일에만 적용되는 CSS 스타일링. - 선택적 렌더링: Turbo Frames와 결합하여 템플릿의 특정 부분만 미리 컴파일하고 렌더링하여 성능 최적화.