Foldkit: TypeScript-фреймворк на Effect и архитектуре Elm для предсказуемого состояния

Современный фронтенд в экосистеме React, Vue или Svelte предлагает потрясающую гибкость рендеринга, но оставляет архитектуру управления состоянием на усмотрение разработчика. В небольших прототипах хуки вроде useState и useEffect кажутся идеальным решением. Однако по мере роста кодовой базы распределенное локальное состояние и неявные сайд-эффекты превращаются в источник скрытых ошибок: каскадные ре-рендеры, гонки запросов (race conditions) и рассинхронизация интерфейса становятся постоянными спутниками команды.

Разработчик Девин Джеймсон (Devin Jameson) предложил альтернативный путь, выпустив фронтенд-фреймворк Foldkit для TypeScript. Проект переносит строгую дисциплину The Elm Architecture (TEA) в TypeScript, опираясь на функциональные примитивы библиотеки Effect для моделирования типов, детерминированного обновления данных и надежной изоляции побочных эффектов.

Архитектура TEA и дисциплина функциональных эффектов

Язык Elm доказал на практике, что правильная архитектурная модель способна свести количество необработанных исключений в рантайме к нулю. Классическая цепочка The Elm Architecture строится на пяти неизменных столпах:

1. Model — единое, централизованное и неизменяемое состояние всего приложения;
2. Message — строгий набор дискриминированных объединений (discriminated unions), описывающих любые события;
3. Update — чистая функция перехода, принимающая текущую модель и сообщение и возвращающая новое состояние;
4. Init — начальное состояние приложения;
5. View — декларативная функция отрисовки интерфейса на основе текущей модели.

Ключевое нововведение Foldkit — реализация этой концепции с помощью примитивов библиотеки Effect. Схема данных Model описывается через Schema.Struct, что гарантирует автоматическую валидацию и вывод точных TypeScript-типов. Сообщения объявляются через функцию defineMessageUnion, благодаря чему компилятор отслеживает исчерпывающую проверку вариантов (exhaustive matching) через метод Message.match. Пропустить обработку клика или ответа от сервера на этапе компиляции физически невозможно.

Побочные эффекты больше не прячутся в теле компонентов. Подобно тому, как в серверной разработке применяют изоляцию логики с детерминированным конвейером, Foldkit жестко разделяет побочные эффекты на четыре предсказуемые категории:

• Commands: разовые асинхронные задачи (HTTP-запросы к API, запись в LocalStorage);
• Subscriptions: длительное прослушивание внешних потоков событий (таймеры, изменение размеров окна);
• Mounts: логика, привязанная к жизненному циклу конкретных узлов DOM;
• ManagedResources: гарантированное выделение и корректное освобождение долгоживущих дескрипторов (например, WebSocket-соединений).

Практический сценарий: декларативный счетчик и точка входа

Посмотрим, как выглядит архитектура типизированного счетчика в Foldkit. В модуле src/main.ts описывается исключительно чистая бизнес-логика приложения:

import { Schema } from 'effect';
import { Runtime, Update } from 'foldkit';
import { Document, HtmlBuilder } from 'foldkit/html';
import { defineMessageUnion } from 'foldkit/message';
import { modifyFields } from 'foldkit/struct';

// 1. Единый источник истины на базе Effect Schema
export const Model = Schema.Struct({ count: Schema.Number });
export type Model = typeof Model.Type;

// 2. Исчерпывающее объединение типов сообщений
export const Message = defineMessageUnion({
  ClickedDecrement: {},
  ClickedIncrement: {},
  ClickedReset: {},
});
export type Message = typeof Message.Type;

// 3. Чистая функция перехода состояния без мутаций
export const update = (model: Model, message: Message) =>
  Message.match<Update.Return<Model, Message>>(message, {
    ClickedDecrement: () => ({
      model: modifyFields(model, { count: (c) => c - 1 }),
    }),
    ClickedIncrement: () => ({
      model: modifyFields(model, { count: (c) => c + 1 }),
    }),
    ClickedReset: () => ({
      model: modifyFields(model, { count: () => 0 }),
    }),
  });

// 4. Декларативное представление интерфейса
export const init: Runtime.ApplicationInit<Model, Message> = () => ({
  model: { count: 0 },
});

export const view = (model: Model, h: HtmlBuilder<Message>): Document => ({
  title: `Счетчик: ${model.count}`,
  body: h.div([], [
    h.p([], [`Текущее значение: ${model.count}`]),
    h.button([h.OnClick(Message.ClickedDecrement())], ['-1']),
    h.button([h.OnClick(Message.ClickedReset())], ['Сброс']),
    h.button([h.OnClick(Message.ClickedIncrement())], ['+1']),
  ]),
});

Вся браузерная обвязка и монтирование в DOM вынесены в отдельный изолированный файл src/entry.ts:

import { Runtime } from 'foldkit';
import { Model, init, update, view } from './main';

// Инициализация рантайма приложения Foldkit
const application = Runtime.makeApplication({
  Model,
  init,
  update,
  view,
  container: document.getElementById('root'),
});

// Запуск цикла обработки событий
Runtime.run(application);

Такое разделение позволяет тестировать любые сценарии поведения приложения как простые вызовы чистой функции update(model, message): для модульных тестов больше не нужно эмулировать браузер, разворачивать jsdom или мокать хуки жизненного цикла.

Совместимость с ИИ-агентами и границы применимости

Любопытная деталь архитектуры Foldkit — встроенный модуль DevTools MCP (foldkit.dev/ai/mcp), поддерживающий Model Context Protocol. Поскольку всё состояние сосредоточено в единой структуре Model, а любые действия выражаются через типизированные Message, внешние ИИ-агенты могут напрямую инспектировать граф состояния и модифицировать код без риска разрушить неявные зависимости.

Однако за предсказуемость приходится платить: Foldkit требует более высокого порога входа, уверенного владения примитивами библиотеки Effect и готовности писать больше декларативного шаблонного кода по сравнению с быстрыми компонентами React. Кроме того, проект находится на стадии pre-1.0 с небольшим сообществом.

Для быстрого прототипирования посадочных страниц Foldkit может показаться избыточным, но для сложных клиентских систем, финансовых интерфейсов и корпоративных панелей с сотнями взаимосвязанных состояний такой строгий архитектурный каркас экономит недели отладки.