Glimmer DSL for Web은 Ruby 개발자들이 프론트엔드 개발에서 겪는 어려움을 해결하기 위해 고안되었습니다. 주요 내용은 다음과 같습니다.
Glimmer DSL for Web 개요
-
Ruby in the Browser: Opal Ruby(Ruby-to-JavaScript 트랜스파일러)를 통해 브라우저에서 Ruby 코드를 실행합니다. Opal Ruby는 Ruby 3.1/3.2를 지원하며 JavaScript와 유사한 성능을 제공합니다.
-
JavaScript 프레임워크 대체: React, Angular, Vue 등 기존 JavaScript 프레임워크의 드롭인(drop-in) 대체재로, Ruby를 사용하여 SPA(Single Page Application)를 구축합니다.
주요 기능 및 데모
-
TodoMVC 데모: TodoMVC 애플리케이션을 Glimmer DSL for Web으로 구현하여 Ruby로 복잡한 프론트엔드 로직을 처리하는 과정을 시연했습니다. 이는 HTML, CSS, JavaScript를 단일 Ruby 언어로 통합하여 개발하는 방식의 효율성을 보여줍니다.
-
선언적 DSL: HTML 구조를 Ruby DSL로 선언적으로 작성하며, HTML에 익숙한 개발자라면 쉽게 이해하고 사용할 수 있습니다.
div,section,input등 HTML 태그와 동일한 키워드를 사용합니다. -
데이터 바인딩: 단방향(unidirectional) 및 양방향(bidirectional) 데이터 바인딩을 지원하여 모델(Model)과 뷰(View) 간의 데이터 동기화를 자동화합니다. 이를 통해 상태 관리 코드(state management code)를 대폭 줄여줍니다.
-
컴포넌트 기반 아키텍처: 재사용 가능한 컴포넌트(예:
NewTodoForm,TodoList,TodoFilters,AddressForm)를 Ruby 클래스로 정의하고 중첩하여 복잡한 UI를 모듈화합니다. Rails의convention over configuration원칙을 따릅니다. -
CSS DSL: 선택적으로 Ruby CSS DSL을 사용하여 CSS 스타일을 Ruby 코드 내에서 정의할 수 있으며, 모델 데이터를 활용한 동적인 스타일링도 가능합니다.
Ruby 프론트엔드의 장점
-
개발 생산성 향상: 백엔드와 프론트엔드에 동일한 Ruby 언어를 사용하여 Isomorphic 애플리케이션 아키텍처를 구축, 개발자 생산성을 높입니다.
-
코드 가독성 및 유지보수성: Ruby의 블록(blocks), 연산자 오버로딩 등 고유 기능을 활용하여 JavaScript보다 훨씬 직관적이고 읽기 쉬운 코드를 작성할 수 있습니다.
-
Ruby Gem 재사용: Opal Ruby 덕분에 기존 Ruby Gem을 프론트엔드에서 재사용할 수 있으며, 백엔드 Ruby 로직을 프론트엔드에 직접 활용하여 HTTP API 호출을 줄이고 사용자 경험을 개선합니다.
-
풀스택 개발자 양성: JavaScript에 대한 학습 부담 없이 Ruby 백엔드 개발자들이 프론트엔드 개발을 수행하여 풀스택 역량을 갖출 수 있도록 지원합니다.
설계 원칙
-
The Ruby Way: 여러 가지 방법으로 목표를 달성할 수 있도록 유연성을 제공합니다.
-
Convention over Configuration: Rails처럼 스마트한 기본값과 자동화를 통해 저수준(low-level) 세부 사항을 추상화합니다.
-
최소한의 코드: 고도로 인터랙티브한 웹 페이지를 구축하기 위해 가장 간결한 구문을 추구합니다.
-
선언적/명령적 코드 혼합: 단일 언어(Ruby) 내에서 선언적(declarative) HTML DSL과 명령적(imperative) 이벤트 리스너 로직을 자연스럽게 혼합합니다.
-
엔지니어 중심: 개발자가 비즈니스 도메인과 웹 페이지 상호작용에 집중하고, 복잡한 상태 관리(React의
state hooks,effects등)에 대한 걱정을 덜도록 설계합니다. -
모듈형 소프트웨어 디자인: 컴포넌트 기반 아키텍처를 통해 모듈성을 확보합니다.
-
조기 최적화 회피: 대부분의 비즈니스 애플리케이션에서 프론트엔드 성능 이슈는 중요하지 않다는 전제하에, React와 같은 프레임워크의 불필요한 복잡성을 피하고 생산성에 집중합니다.
백엔드 연동 및 성능
-
웹 요청: Rails Resource Service를 통해 Rails RESTful CRUD 작업을 간소화하거나, Opal jQuery Gem을 활용한 HTTP 클래스, Axios, Fetch API 등 다양한 방식으로 백엔드와 통신합니다.
-
JavaScript 라이브러리 통합: jQuery, Highlight.js 등 기존 JavaScript 라이브러리를 Ruby 코드 내에서 쉽게 통합하고 사용할 수 있습니다.
-
성능: MacBook Pro 14인치(2023년 모델 기준)에서 1,000개 요소를 약 50밀리초 내에 렌더링하는 등 대부분의 비즈니스 애플리케이션에 충분히 빠른 성능을 제공합니다.