# Ripple - 우아한 TypeScript UI 프레임워크 > Clean Markdown view of GeekNews topic #22983. Use the original source for factual precision when an external source URL is present. ## Metadata - GeekNews HTML: [https://news.hada.io/topic?id=22983](https://news.hada.io/topic?id=22983) - GeekNews Markdown: [https://news.hada.io/topic/22983.md](https://news.hada.io/topic/22983.md) - Type: news - Author: [neo](https://news.hada.io/@neo) - Published: 2025-09-09T10:34:01+09:00 - Updated: 2025-09-09T10:34:01+09:00 - Original source: [github.com/trueadm](https://github.com/trueadm/ripple) - Points: 11 - Comments: 3 ## Summary React, Svelte, Solid의 강점을 결합한 **Ripple**은 **JS/TS-우선 설계**와 자체 `.ripple` 언어로 **타입 안전·반응형 UI 컴포넌트**를 구현하는 **신규 프레임워크**입니다. `$` 접두로 관리하는 **반응 변수**와 **세밀한(fine-grained) 렌더링** 구조, 그리고 **VS Code 익스텐션**·** TypeScript 통합** 같은 **현대적 DX**를 지원하여 개발자 생산성과 코드 이해도를 높입니다. 아직 **SSR 미지원**·** 타입 미비** 등 알파 단계의 한계가 있으나, **JS/TS-first**와 **LLM 친화적 문법** 실험을 통해 **차세대 프런트엔드 아키텍처와 개발 경험**의 미래를 엿볼 수 있습니다. ## Topic Body - **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 생태계의 개발 경험**을 교차 검증하며 **차세대 프레임워크 설계**에 참고점을 제공함 ## Comments ### Comment 43553 - Author: aabb2467 - Created: 2025-09-09T18:45:16+09:00 - Points: 1 좋은거같기도 하고 아닌거같기도 하고 ### Comment 43549 - Author: ng0301 - Created: 2025-09-09T14:55:42+09:00 - Points: 1 뭔가 스벨트스럽다 라는 느낌이 강하게 드네요. 돌고돌아 나중에는 ReactLike로 가지 않을지 ㅋㅋ ### Comment 43541 - Author: click - Created: 2025-09-09T11:20:43+09:00 - Points: 1 AI에 학습된 분량이 적어서 다들 새로운 프레임워크를 꺼리는 추세가 생긴 것 같아요 스벨트가 막차 탔다고 생각해요. 스벨트조차 프롬프트 잘 써주지 않으면 자꾸 rune 안쓰고 $ 문법으로 덤벼들어서 곤란합니다.