Документация REEEL

REEEL — платформа, в которой интерфейс описывается текстом и доезжает до приложения и сайта без нового релиза.

С чего начать

• Проект — каталог с манифестом project.json : конфигурации, сборка, публикация, домены.
• Формат — язык разметки: элементы, параметры, выражения, данные.
• Редактор — где всё это пишется, смотрится и публикуется.
• Статьи — разборы примеров и то, что не вошло в другие разделы.

Как выглядит разметка

Каждая строка — элемент, вложенность задаётся отступом, параметры пишутся через двоеточие. Два коротких примера показывают, из чего складывается экран. Оба можно изменить прямо здесь и запустить: нажмите на код, поправьте его и нажмите «Запустить».

Бегущая волна: четыре строки

// Цикл даёт часы, выражение считает точки, примитив рисует линию.
Animated loop:true duration:4000 value:@t
  SizedBox height:160
    *Points values:{map(range(48), (i){sin(i / 5 + t * 6.2832)})} mode:line color:0xFF6938EF strokeWidth:3 cap:round join:round

• Animated loop:true — часы: t идёт от 0 до 1 за четыре секунды и начинает заново.
• value:@t объявляет переменную; всё, что ниже, её видит.
• В фигурных скобках — выражение: map(range(48), …) считает 48 точек синусоиды, и линия идёт за часами сама.
• Элемент со звёздочкой рисует прямо на холсте.

Кольцо с ползунком: отклик на действие

// Ползунок меняет значение, кольцо и число идут за ним.
State @p:0.4
  Column crossAxisAlignment:center spacing:12
    SizedBox width:160 height:160
      *Animated of:$p value:@v duration:400 curve:easeOutCubic
        *Arc cx:0.5 cy:0.5 r:0.42 startAngle:-90 value:$v strokeWidth:14 cap:round color:0xFF6938EF
    Text $"${round(p * 100)} %"
      #style fontSize:28 fontWeight:w800
    Slider value:$p onChanged:(next){p = next}

• State @p:0.4 объявляет переменную; всё, что ниже, её видит.
• Ползунок ничего не хранит: он отдаёт новое значение обработчику onChanged .
• *Animated ведёт кольцо к новому значению плавно, а не скачком.
• $"…" — строка-шаблон, #style — вложенный объект со стилем.

Пример посложнее — график функции . Как устроен запуск и что примеру недоступно — в статье «Живые примеры» .

Подробно о языке — в разделе Формат .