-
React·Solid·Svelte의 장점을 한데 모아 JS/TS-우선 설계와 자체
.ripple 모듈 언어로 컴포넌트를 구축하는 타입 안전 UI 프레임워크
-
$ 접두어를 이용한 반응형 변수/프로퍼티, JSX 유사 템플릿, 세밀한 렌더링으로 높은 성능과 메모리 효율을 지향
- VS Code 익스텐션, Prettier, TypeScript 통합을 제공하고, 리액티브 배열·맵·셋,
effect 기반 사이드이펙트, 데코레이터(@use) 등 현대적 DX를 포함함
- 현재 초기 알파로 SSR 미지원과 타입 미비 같은 제한이 있으며, 아이디어 실험과 피드백 공유를 목적으로 오픈됨
-
Svelte 5의 시그널 기반 런타임과 유사한 철학을 바탕으로, JS/TS-first 접근과 LLM 친화적 문법을 실험한다는 점에서 프런트엔드 프레임워크 진화의 흐름을 읽을 수 있음
What is Ripple?
- Ripple은 React·Solid·Svelte에서 영감을 받은 TypeScript-우선 UI 프레임워크로, 자체
.ripple 확장자를 사용하는 슈퍼셋 언어 위에 구성됨
- JSX와 잘 어울리는 문법으로 컴포넌트 본문 안에서만 템플릿을 사용하고, 반환식(JSX 리턴) 대신 문(statement)형 템플릿을 채택함
- 저자는 Inferno·React Hooks·Lexical·Svelte 5 등에서의 경험을 바탕으로 아이디어를 실험적 형태로 구현했음
- 현재는 초기 개발 단계로 버그와 TODO가 많으며, 프로덕션 사용 비권장임
- 목적은 아이디어 공유와 인큐베이션, 다른 프레임워크로의 환류 가능성 탐색임
-
JS/TS-first 설계가 사람과 LLM 모두에 좋은 DX를 제공한다는 가설을 검증하려는 시도임
Features
-
Reactive State Management:
$ 접두를 사용한 변수·객체 프로퍼티 반응성 제공, 파생 값도 $ 변수로 자연 표기함
-
Component-Based Architecture:
component 키워드로 명시적 컴포넌트 선언, props/children 지원 및 JSX 유사 템플릿 결합
-
Performance: 세밀한(fine-grained) 렌더링으로 업계 최고 수준 성능·메모리 효율 지향
-
Tooling: TypeScript 통합, VS Code IntelliSense/진단/하이라이팅, Prettier 포맷팅 지원
-
DX 강화: JS/TS-first 철학, LLM 친화 문법, SPA 기본 구조 제공
Missing Features
-
SSR 부재: 현재는 SPA 전용, SSR은 아직 작업하지 않았음
-
타입 미비: 코드베이스의 타입 정의가 제한적, 개선 예정임
Getting Started / Try Ripple
- 기본 템플릿을 StackBlitz에서 열거나
degit로 복제하여 Vite 개발 서버로 실행 가능함
- 명령 예시:
npx degit trueadm/ripple/templates/basic my-app → npm i → npm run dev 흐름
- 온라인 플레이그라운드는 추가 예정이며, 레포의
playground 폴더로 로컬 실험 가능임
VSCode Extension
-
Ripple for VS Code 익스텐션 제공,
.ripple 파일에 문법 하이라이트, 실시간 진단, TS 통합, 오토컴플리션(IntelliSense) 지원
- 마켓플레이스 배포본과 수동 설치용
.vsix 패키지 링크 제공
Mounting your app
- 엔트리에서
mount(App, { props, target }) 형태로 루트 컴포넌트 장착 지원
-
target에 DOM 노드를 지정하고, props로 초기 속성 주입하는 간결한 API 제공
Key Concepts
-
Components
-
component 키워드로 함수 유사 시그니처의 선언적 컴포넌트 정의, 본문 안에서 JSX-유사 템플릿을 직접 기술함
-
프로퍼티 단축 표기(
{onClick}), 스프레드({...props}) 등 익숙한 문법 지원
-
Reactive Variables
-
$ 접두의 변수·프로퍼티가 자동 반응성을 가짐, 증가/대입만으로 재렌더링 유발함
-
파생 상태는
$double = $count * 2 같은 직관적 표기로 선언하며 연쇄 파생 가능함
-
untrack 으로 초기화 시점 등 특정 구간에서 반응성 전파 차단 가능함
-
전역/모듈 최상위에서는 반응 변수 금지, 반드시 활성 컴포넌트 컨텍스트에서 생성해야 함
-
Transporting Reactivity
- 배열·객체 래핑으로 반응성을 경계 너머로 운반하여 합성 및 공존 가능함
- 팩토리 함수가
$ 값을 받아 내부에서 파생/effect 를 만들고 $ 값을 다시 반환하는 패턴 권장임
-
Reactive Arrays / Set / Map
-
RippleArray/Set/Map은 표준 컬렉션을 확장한 반응형 컬렉션으로, 길이/크기는 $length/$size 로 접근해야 반응적임
- 메서드 결과를 직접 사용하거나
$has처럼 반응 변수에 대입하여 템플릿에서 활용 가능함
-
Effects
-
effect(() => { ... })로 의존한 $ 값 변경 시 실행되는 사이드이펙트 선언, 트래킹 자동화 제공
-
Control flow
- 템플릿은 컴포넌트 본문 내부에서만 허용, 일반 함수·변수 할당식으로 JSX 자체를 반환하지 않음
- 템플릿 안에서 변수 선언/함수 호출/
debugger 사용 가능, 문(statement) 중심 제어 흐름 제공
-
문자열 리터럴은
{ "…" } 로 명시하여 코드와 구분하는 규칙 채택
-
If / For / Try statements
-
if/else를 템플릿 블록 내부에서 사용하여 가독성 높은 제어 흐름 구성
-
for...of로 컬렉션 렌더링, key prop 불필요한 간결한 반복 지원
-
try/catch 블록으로 에러 경계(fallback UI) 구성, catch에서 로깅·리포팅 후 대체 UI 렌더 가능
-
Props
-
반응형 prop은
$ 접두 사용, DOM 속성도 $class, $id 처럼 접두를 붙여야 반응 업데이트됨
-
Children
- 암시적
$children 컴포넌트 슬롯 제공, <$children /> 로 컴포지션 구현
- 명시적 슬롯 컴포넌트 선언도 가능하여 가독성과 제어력 확보
-
Events
-
React 유사 이벤트 API(
onClick, onKeyDown, …Capture) 지원, 일부 이벤트는 위임(delegate) 최적화됨
-
Decorators
-
데코레이터 구문
{@use fn}으로 실 DOM 노드 참조를 획득하고 마운트/언마운트 훅 반환 가능
-
인라인 함수/팩토리를 통한 반응 값 전달 패턴 및 합성 컴포넌트에의 전달을 지원함
-
Styling
- 컴포넌트 로컬 범위 CSS를
<style> 최상위 블록에 작성, 캡슐화된 스타일링 제공
-
Context
-
createContext로 상하위 트리 공유값을 설정하고, 컴포넌트 내부에서만 get/set 허용하여 예측 가능성 확보
Playground
- 레포를 클론한 뒤
pnpm i && cd playground && pnpm dev로 로컬 플레이그라운드 실행 가능
- Vite 플러그인을 사용해
playground/src에서 .ripple 문법 실험을 손쉽게 수행 가능함
Why it matters
-
JS/TS-first·** statement-style 템플릿**·$-prefixed 반응성 등은 LLM-친화적 코드 구조와 가독성/정적 분석 용이성을 동시에 모색하는 실험임
-
세밀한 렌더링·** 컬렉션 반응성**·데코레이터로 DOM 후킹 같은 조합은 미세 최적화와 DX를 양립시키려는 시도임
- 아직 알파 단계이지만, Svelte 5의 신호 기반 흐름과 React 생태계의 개발 경험을 교차 검증하며 차세대 프레임워크 설계에 참고점을 제공함