Открыть сервис

Frenkit: библиотека для проверки типов данных

Frenkit — это библиотека с открытым исходным кодом на языке программирования JavaScript/TypeScript, предназначенная для проверки и валидации структуры данных, а также для создания пользовательских интерфейсов на основе декларативных описаний. Инструмент сочетает в себе функции рантайм-валидатора (схемы типов) и кодогенератора, позволяя разработчикам описывать модель данных один раз и использовать её как для проверки корректности входных данных, так и для автоматической генерации форм и таблиц в веб-приложениях.

История и происхождение

Проект Frenkit был создан в начале 2020-х годов как ответ на усложнение задач, связанных с обработкой данных в клиентских веб-приложениях. Разработчики стремились объединить разрозненные инструменты — библиотеки валидации (такие как Zod или Yup) и библиотеки для работы с формами (например, Formik или React Hook Form) — в единое целое. Первый публичный релиз Frenkit состоялся в 2022 году на платформе npm. Название библиотеки является комбинацией слов «framework» (каркас) и «kit» (набор), что подчёркивает её предназначение как комплексного набора инструментов для построения интерфейсов, управляемых данными.

Несмотря на относительно небольшое сообщество по сравнению с гигантами экосистемы JavaScript, Frenkit привлёк внимание разработчиков, работающих над внутренними корпоративными системами и административными панелями, где важна типобезопасность и скорость разработки типовых CRUD-интерфейсов (Create, Read, Update, Delete).

Основные характеристики

Библиотека Frenkit построена на нескольких ключевых принципах, отличающих её от аналогов.

Декларативное описание схем

Центральным элементом Frenkit является функция f (или frenkit), которая позволяет создавать объект схемы. В отличие от многих других валидаторов, где схема описывает только типы полей, Frenkit позволяет добавлять метаданные для UI. Например, для поля можно указать не только то, что это строка, но и то, что в форме оно должно отображаться как текстовое поле с подсказкой.

Двойное назначение: валидация и генерация UI

Схема Frenkit может быть использована двумя способами. Во-первых, как обычный валидатор: функция validate проверяет объект данных на соответствие схеме и возвращает объект с ошибками. Во-вторых, как источник метаданных для функции createRenderer, которая генерирует конфигурацию для рендеринга формы или таблицы. Это позволяет избежать дублирования кода: изменения в схеме автоматически приводят к обновлению как логики проверки, так и внешнего вида интерфейса.

Поддержка TypeScript

Библиотека написана на TypeScript и обеспечивает вывод типов. Разработчик может получить статический тип данных, соответствующий схеме, используя оператор typeof. Это обеспечивает безопасность на этапе компиляции и снижает количество ошибок, связанных с несоответствием типов.

Устройство и ключевые модули

Архитектурно Frenkit разделён на несколько модулей, которые можно подключать независимо.

Ядро (Core)

Модуль ядра отвечает за базовые примитивы типов: string, number, boolean, array, object, enum, literal, union. Каждый примитив реализован в виде объекта с методами для настройки правил валидации (например, .min(), .max(), .regex()) и UI-параметров (например, .label(), .placeholder()).

Модуль интеграции с фреймворками

Для использования сгенерированных конфигураций в реальных приложениях Frenkit предоставляет адаптеры для популярных библиотек. Наиболее зрелой является интеграция с React (пакет @frenkit/react), которая включает в себя компоненты-обёртки для рендеринга полей ввода на основе конфигурации. Также существуют экспериментальные адаптеры для Vue.js и Svelte.

Генератор типов

Отдельный модуль @frenkit/codegen позволяет генерировать статические TypeScript-интерфейсы на основе схемы, определённой в JSON-файле. Эта функция полезна для проектов, где схемы хранятся отдельно от кода (например, в бэкенд-репозитории).

Сравнение с аналогами

На рынке JavaScript-библиотек Frenkit занимает нишу между валидаторами и библиотеками управления формами. В отличие от Zod (библиотека валидации), Frenkit предоставляет встроенные средства для описания пользовательского интерфейса. В отличие от Formik (библиотека форм), Frenkit не управляет состоянием формы напрямую, а лишь генерирует конфигурацию, которую разработчик может использовать по своему усмотрению. Это делает Frenkit более гибким, но требует от разработчика написания дополнительного клея для связи конфигурации с состоянием приложения.

Основным недостатком Frenkit считается сложность кривой обучения: разработчику необходимо изучить не только API валидации, но и систему метаданных для UI. Кроме того, проект развивается медленнее, чем конкурирующие решения, из-за небольшого числа контрибьюторов.

Применение

Наиболее часто Frenkit используется при разработке:

  • Административных панелей — для быстрого создания форм редактирования сущностей.
  • Конструкторов отчётов — где пользователю необходимо динамически задавать параметры выборки.
  • Прототипов интерфейсов — для проверки гипотез без написания большого объёма кода.

Пример использования

Ниже приведён упрощённый пример описания схемы и её применения на JavaScript:

```javascript const { f, validate } = require('frenkit');

const userSchema = f.object({ name: f.string().min(2).label('Имя').placeholder('Введите имя'), age: f.number().min(18).max(99).label('Возраст') });

const result = validate(userSchema, { name: 'Иван', age: 25 }); // result.valid === true ```

В этом примере схема userSchema содержит информацию о том, что поле name является строкой с минимальной длиной 2, а поле age — числом в диапазоне от 18 до 99. Методы .label() и .placeholder() добавляют метаданные для будущего рендеринга формы.

Экосистема и будущее развитие

Проект Frenkit распространяется под лицензией MIT, что позволяет использовать его в коммерческих проектах без ограничений. Исходный код доступен на GitHub, где ведётся основная разработка. В дорожной карте проекта заявлены планы по улучшению интеграции с серверными фреймворками (в частности, с Node.js и NestJS), а также по созданию визуального редактора схем, который позволил бы проектировать интерфейсы без написания кода.

BFOmetr — база данных и аналитика по компаниям России.

На главную BFOmetr →