Ripple — новый взгляд на реактивность во фронтенде

Знакомо чувство, когда хочется взять лучшее из разных фреймворков и собрать что-то идеальное? Именно так появился Ripple — эксперимент от создателя Inferno и участника команд React и Svelte. Это не очередной «убийца React», а любопытная лаборатория идей, которая может вдохновить на переосмысление подхода к UI.

Что за зверь такой, этот Ripple?

Ripple — это TypeScript-фреймворк, который:

• Берёт реактивность из Svelte
• Компонентный подход из React
• Производительность SolidJS

И всё это упаковано в оригинальный синтаксис с собственным расширением .ripple. Автор, Доминик Ганнон (известный по работе над Inferno, React Hooks и Svelte 5), создал проект буквально за неделю как площадку для экспериментов.

Важно: Это альфа-версия, не для продакшена. Но именно в этом и прелесть — можно заглянуть «под капот» формирующегося подхода к фронтенду.

Чем интересен синтаксис?

Ripple предлагает необычный гибрид JSX и Svelte-подобного подхода. Вот как выглядит простой компонент:

component Button(props: { text: string, onClick: () => void }) {
  <button onClick={props.onClick}>
    {props.text}
  </button>
}

Обратите внимание:

1. Нет return — JSX становится частью потока выполнения
2. Собственный component вместо функций
3. Полная поддержка TypeScript

Реактивность без магии

Ripple использует сигналы (как в SolidJS), но с синтаксическим сахаром. Переменные с $ автоматически становятся реактивными:

let $count = 0;

// При изменении автоматически обновляет интерфейс
$count++; 

Есть и реактивные коллекции:

import { RippleArray } from 'ripple';

const items = new RippleArray(1, 2, 3);

// Добавление элемента реактивно обновит интерфейс
items.push(4);

Необычные фичи

1. Декораторы элементов — аналог ref в React, но с более выразительным синтаксисом:

<div {@use (node) => console.log('Элемент создан', node)}>
  Привет, мир!
</div>

2. Контроль ошибок в шаблоне — можно использовать try/catch прямо в JSX:

<div>
  try {
    <UnstableComponent />
  } catch (e) {
    <div>Ой: {e.message}</div>
  }
</div>

3. Доступ к контексту без провайдеров — минималистичный API:

const Theme = createContext('light');

component Button() {
  const theme = Theme.get(); // Получаем значение
  
  <button class={theme}>
    Кнопка в теме {theme}
  </button>
}

Для кого это?

Пока Ripple — больше исследовательский проект, чем готовое решение. Но он будет интересен:

• Любопытным разработчикам, которые следят за эволюцией фронтенда
• Авторам библиотек, ищущим вдохновение
• Тем, кто хочет понять, как работают сигналы «под капотом»

Как попробовать?

1. Клонируйте шаблон:

npx degit trueadm/ripple/templates/basic my-app

2. Или попробуйте в StackBlitz

Ripple — это свежий взгляд на реактивность с необычным синтаксисом. Пока рано говорить о его будущем, но некоторые идеи (вроде транспортируемой реактивности) действительно заслуживают внимания. Стоит заглянуть, если хотите увидеть, в каком направлении может развиваться фронтенд.

А вы готовы к экспериментам с новыми подходами?