Наконец-то игры на 1С! О новом подходе к интерфейсу
Три месяца без кода
Последние три месяца я практически не пишу код руками. При этом делаю намного больше, чем раньше, и берусь за задачи, за которые раньше бы не взялся.
Особенно это заметно в работе с формами. Сложные подборы, многоуровневые таблицы, рабочие столы, дашборды. Всё то, где стандартный интерфейс 1С упирается в свои ограничения, а на HTML с JavaScript можно сделать практически что угодно. Раньше это означало долгую ручную вёрстку и отладку, а сейчас я формулирую, что мне нужно, смотрю на результат, поправляю, и ИИ переделывает. И всё чаще я просто разговариваю с ИИ через микрофон без клавиатуры.
В этой статье расскажу, почему я к этому пришёл, и что из этого получается. А в качестве демонстрации — обработка с тремя ретро-играми и полноценным обменом данными с формой 1С. Вся обработка, включая дизайн, была сделана за 4–5 часов чистого времени. Код лично я не писал, ни одной строчки, ни в 1С, ни в JS, ни в HTML. В основном время потратилось на дизайн. Получилось 9,5 тысяч строк JavaScript, 1С — 1000 строк, HTML и CSS — ещё 3500 строк. Конечно, такой объём человек написать за такое время не способен.
Мой стенд
Сначала о том, чем я пользуюсь.
Я работаю с Claude Code и ChatGPT Codex — оба с полным доступом к файловой системе, к проекту в 1С EDT. Это полноценные среды, где ИИ может читать файлы, запускать команды, делать скриншоты в браузере и анализировать результат.
К Claude Code я подключил два мной написанных (хотя уже трудно сказать, что мной или ИИ) MCP-сервера для работы с 1С. Первый получает данные и структуру из информационной базы: метаданные, реквизиты, структуру форм, содержимое модулей, может делать запросы к 1С. ИИ видит конфигурацию и данные в базе так же, как видит её разработчик в конфигураторе. Второй MCP-сервер умеет писать код и работать с метаданными через EDT: добавлять реквизиты, создавать объекты, модифицировать формы. Об этих серверах расскажу подробнее в отдельной статье. Также обязательно использую Playwright MCP для того, чтобы ИИ мог работать с браузером Chrome и делать в нём тесты и отладку, в том числе 1С Web-клиента. Дополнительно различные скиллы, которые методом проб и ошибок были сделаны так, чтобы код был практически всегда сгенерирован работающим с первой попытки.
В итоге получается стенд, где ИИ может самостоятельно: посмотреть, как устроена конфигурация, написать код на 1С и на JavaScript, собрать HTML-макет, загрузить его в браузер, сделать скриншот, проанализировать результат, провести тесты, исправить ошибку и попробовать снова. Весь цикл — без моего прямого участия. Я подключаюсь, когда нужно принять решение или скорректировать направление.
Демонстрация: обработка
Чтобы показать, на что это способно, я сделал обработку, которая демонстрирует взаимодействие HTML и формы 1С в реальном времени.
Суть простая. Есть внешняя обработка с формой. На форме — ПолеHTMLДокумента, куда загружаются HTML-макеты. HTML-страница живёт своей жизнью: обрабатывает ввод пользователя, отрисовывает интерфейс, выполняет логику. При этом она постоянно обменивается данными с формой 1С: отправляет события, получает состояние, записывает данные в табличные части.
Чтобы демонстрация была наглядной и нескучной, в качестве HTML-интерфейсов я использовал игры. Три штуки, каждая в своём макете. Но обработка показывает не только игры. Она автоматически переключается каждые 10 секунд между семью вариантами отображения одних и тех же данных:
- Стандартные реквизиты и таблицы 1С — как есть, нативные элементы формы 1С 8.3
- HTML в стиле 8-bit — неоновый synthwave, пиксельные шрифты, анимации
- HTML в современном стиле — минималистичный корпоративный дизайн по гайдам Apple и Google
- HTML в стиле 1С — выглядит как форма 1С 8.2, но с нюансами.
- HTML в цветном стиле — с изменением цветов.
- HTML в лёгком стиле — немного 3D, светлая тема
- HTML в хакерском стиле — DOS, CMD, terminal
Данные во всех семи вариантах идентичные — очки, уровень, жизни, журнал событий, рекорды. Всё обновляется в реальном времени. Тот же подход работает и для серьёзных задач — форм подбора, форм элементов справочников, документов. HTML отвечает за представление и ввод данных, а записи в регистры и справочники делаются стандартными средствами 1С. Стили в обработке не претендуют на правильность и удобность, это просто демонстрация возможностей.
Как построен обмен данными
Обмен двусторонний, и в обоих направлениях устроен просто.
HTML → 1С
На стороне JavaScript создаётся невидимая ссылка. Когда нужно передать данные в 1С, в эту ссылку записываются data-атрибуты с действием и параметрами, после чего ссылка программно «кликается»:
function action1C(action, params) {
// Создаём скрытую ссылку (один раз)
if (!transportLink) {
var link = document.createElement('a');
link.href = '#';
link.style.cssText = 'position:absolute;left:-9999px;';
document.body.appendChild(link);
transportLink = link;
}
// Записываем действие и параметры в data-атрибуты
transportLink.setAttribute('data-action', action);
for (var key in params) {
transportLink.setAttribute('data-' + key, params[key]);
}
// Кликаем — 1С перехватит
transportLink.click();
}
// Пример вызова
action1C('updateStats', {
score: '1200',
level: '3',
levelName: 'МАРТ',
lives: '4',
status: 'В игре'
});
На стороне 1С клик перехватывается в обработчике ПриНажатии. Из ДанныеСобытия.Anchor.attributes достаём атрибуты и маршрутизируем по действию:
&НаКлиенте
Процедура ПолеHTMLПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
СтандартнаяОбработка = Ложь;
Атрибуты = ДанныеСобытия.Anchor.attributes;
Действие = "";
ПараметрыHTML = Новый Структура;
Для Каждого Атрибут Из Атрибуты Цикл
Если Атрибут.name = "data-action" Тогда
Действие = Атрибут.value;
ИначеЕсли СтрНачинаетсяС(Атрибут.name, "data-") Тогда
ПараметрыHTML.Вставить(Сред(Атрибут.name, 6), Атрибут.value);
КонецЕсли;
КонецЦикла;
// Маршрутизация: updateStats, logEvent, saveGame, switchGame...
ОбработатьДействиеHTML(Действие, ПараметрыHTML);
КонецПроцедуры
Почему именно так, а не через v8: протокол? Начиная с платформы 8.3.9, «Защита от опасных действий» блокирует навигацию по v8: ещё ДО срабатывания события, показывая предупреждение пользователю. Клик по ссылке с data-атрибутами эту проблему обходит полностью.
1С → HTML
В обратную сторону ещё проще. Через defaultView вызываем любую JS-функцию и передаём ей JSON-строку:
&НаКлиенте
Процедура ВызватьJSФункцию(ИмяФункции, Аргумент)
ОкноHTML = Элементы.ПолеHTML.Документ.defaultView;
Если ОкноHTML = Неопределено Тогда Возврат; КонецЕсли;
Если ИмяФункции = "onInit" Тогда
ОкноHTML.onInit(Аргумент);
ИначеЕсли ИмяФункции = "updateData" Тогда
ОкноHTML.updateData(Аргумент);
КонецЕсли;
КонецПроцедуры
Почему ИИ так хорош в HTML и JavaScript
Языковые модели, такие как Claude и ChatGPT, обучались на огромном объёме кода. Но распределение этого кода неравномерно. HTML, CSS и JavaScript — это три самых массовых технологии в истории программирования. Каждый сайт, каждое веб-приложение, каждый фронтенд за последние тридцать лет были частью обучающей выборки. Миллионы разработчиков и сотни миллиардов строк кода, бесчисленные решения одних и тех же задач в разных контекстах. ИИ впитал весь этот накопленный опыт, и, когда ты просишь его сделать интерфейс на HTML, он работает с тем, что для него наиболее знакомо.
С 1С ситуация принципиально другая. Объём кода на 1С в мировом масштабе на порядки меньше. Документация, примеры, обсуждения на форумах существуют, но по объёму несопоставимы с тем, что есть по веб-технологиям. Поэтому ИИ с 1С работает заметно медленнее и чаще ошибается, а с HTML выдаёт результат, который зачастую не нуждается в правке.
Но дело не только в визуале. Красивый интерфейс — это, конечно, прекрасно, но это лишь часть истории. Гораздо важнее то, что в связке HTML и JavaScript алгоритм и его отображение — это одно целое. Ты описываешь ИИ задачу: «вот такие данные, покажи их вот так, при наведении мыши подсвечивай вот это, при клике пересчитывай вот то». И он реализует всё в одном флаконе, логику обработки и визуальное представление, и реакцию на действия пользователя. Цветные подсветки, интерактивные графики, контролы в любом месте страницы неразрывно связаны с алгоритмом, который за ними стоит. ИИ с JavaScript на ты, он реализует сложные алгоритмы обработки и вывода данных быстро и качественно, и тут же превращает результат в то, что видит пользователь на экране.
В 1С так не получается. Логика формы живёт отдельно, элементы управления отдельно, возможности их настройки ограничены платформой. Чтобы добиться нестандартного поведения, приходится изобретать обходные пути, а часть вещей просто нереализуема.
Именно поэтому связка «1С + HTML» оказывается настолько эффективной: каждая сторона делает то, в чём сильна. 1С занимается хранением данных, и здесь ей нет равных: регистры накопления и сведений, документы, справочники, механизмы проведения — всё это продумано и удобно. А отображение данных и логику вывода на экран берут на себя HTML и JavaScript, где возможности практически не ограничены, а ИИ чувствует себя как рыба в воде.
И это касается не только игровых демонстраций. Сложные формы подбора с фильтрами и поиском, интерактивные дашборды с графиками, многоуровневые рабочие столы — всё то, что на стандартных управляемых формах делается с трудом или невозможно, на HTML реализуется в разы быстрее. Я описываю, что должен видеть пользователь, как должны выглядеть фильтры, что происходит при клике, — и через несколько итераций получаю готовый результат. На стандартных формах те же задачи потребовали бы в разы больше времени, а часть из них была бы просто нереализуема.
Скрины некоторых примеров.
Смотреть, конечно, лучше через обработку в динамике. И в целом, как я говорил, границ особо нет. Можно делать абсолютно любой интерфейс, какой придёт в голову.
Про 8.5
В версии 8.5 разработчики 1С ближе подошли к веб-технологиям. Но на текущий момент возможности, которые реализуются через JavaScript и HTML в ПолеHTMLДокумента, шире того, что предлагает платформа.
И дело не только в самих возможностях HTML, которые были и раньше. Дело в том, что ИИ ускорил веб-разработку до такой степени, что разрыв в скорости и удобстве разработки между HTML-интерфейсом и стандартным интерфейсом 1С не сокращается, а растёт с ускорением. Во-вторых, ИИ, конечно, может помочь с кодом модуля формы, но создать принципиально новый визуальный опыт в рамках управляемых форм он пока не может, потому что там просто технически нет такой свободы. А в HTML она есть.
Проблема поддержки
Раньше HTML-макет в 1С был экзотикой. И главная причина — это не сложность разработки, а сложность поддержки. Кто-то один сделает красивый макет с JavaScript, а потом ни один другой программист 1С, особенно если он не знает JS, не может в этом разобраться. Баг найти невозможно, доработать — тем более. Поэтому все и сидели на стандартных формах, хотя возможности HTML были доступны всегда.
Сейчас ситуация другая. ИИ разбирает любой HTML-макет за секунды. Это обмен данными, вот тут рендеринг, вот тут обработка событий. Можно с ходу продолжить чужую разработку, быстро менять алгоритмы, визуал, исправлять баги. Аргумент «а кто потом это будет поддерживать?» раньше был железным. Сейчас проблема отпала. ИИ разберётся в чужом HTML быстрее, чем большинство из нас в привычном 1С.
Ещё один плюс, о котором стоит упомянуть: HTML-страницы, разработанные для ПолеHTMLДокумента, отлично работают и в обычном браузере. А значит, их можно подключить к HTTP-сервисам 1С с теми же JSON-пакетами, что и в форме обработки. Получается полноценный веб-интерфейс с минимальными доработками.
Производительность
С обычными HTML-формами — таблицами, подборами, дашбордами — проблем с производительностью нет вообще. 1С рендерит HTML-страницы без ощутимых задержек, данные обновляются в реальном времени, всё работает гладко.
С играми интереснее. Здесь нагрузка совсем другого порядка, и стоит рассказать, что именно происходит под капотом, потому что цифры довольно любопытные.
Все три игры работают на одном <canvas> 480×360 пикселей, контекст 2D. Никакого WebGL, никаких внешних библиотек — чистый Canvas API, то, что доступно в WebKit 1С из коробки. Каждый кадр — это полная перерисовка всего экрана с нуля, до 60 раз в секунду.
Что именно рисуется за один кадр, зависит от игры. В «Арканоиде» это порядка 200 объектов: 84 блока с бликами и тенями, мерцающие звёзды, перспективная сетка, мячи со шлейфом, частицы и неоновое свечение на всём подряд. В «Космической обороне» нагрузка выше. До 300–400 draw-вызовов: шесть типов врагов с индивидуальным рендером, девять уникальных боссов (от конверта и серверной стойки до пиксельного лица Марии Ивановны из бухгалтерии), кодовый дождь из фрагментов 1С-синтаксиса, автонаведение пуль с расчётом тригонометрии. Финальный босс — золотая голова с короной. Борис Георгиевич, если вы это читаете, ничего личного, просто геймдизайн так потребовал. В «Закрытии месяца» — 300 клеток лабиринта, девять типов офисной мебели, от столов и шкафов до кофемашины и кулера, четыре врага с собственным AI, 80 собираемых предметов с пульсацией и подпрыгиванием.
Главный потребитель ресурсов в этих играх — shadowBlur. Это гауссово размытие для эффекта неонового свечения, и в программном рендере без GPU оно стоит дорого. В активных сценах shadowBlur вызывается 40–80 раз за кадр. Поэтому в каждой игре есть автоматический LIGHT_MODE: если FPS падает ниже 28, отключается свечение, снижается лимит частиц, убираются декоративные анимации — и нагрузка падает в 3–5 раз. Когда FPS восстанавливается выше 45, эффекты включаются обратно.
На нормальном рабочем компьютере всё идёт нормально. На слабых машинах игры могут подтормаживать, так как это всё-таки реальная графика с физикой и постобработкой, а не формочка с кнопками. Но для задач, ради которых всё это затевалось, — HTML-интерфейсы для форм 1С, запаса производительности более чем.
О скорости разработки и иллюзиях
Есть ещё одно наблюдение, которым хочется поделиться, хотя оно не совсем про HTML.
Прямо сейчас у меня параллельно работают три-четыре агента в разных окнах. Один пишет рабочий проект, другой доделывает домашний, третий тестирует то, что написал второй. Я переключаюсь между ними, контролирую, направляю, принимаю решения. Тестирование тоже в основном делает ИИ.
И вот что я понял для себя в последнее время. Иллюзия о том, что ИИ поможет работать меньше, — это именно иллюзия. Работать придётся намного больше. Скорость разработки выросла настолько, что очень скоро все будут ожидать именно такой скорости. То, на что раньше закладывали две-три недели, будут требовать за день-два. И ручного программирования в прежнем темпе уже никто ждать не будет.
Легче не стало. Стало, если честно, сложнее. Казалось бы, опыт управления командой должен помогать, и он помогает, но только отчасти. Когда руководишь живыми программистами, у тебя есть время. Ты раздал задачи, с каждым поговорил, кто-то ушёл думать, кто-то придёт завтра с результатом, ты спокойно двигаешь задачи на доске, перераспределяешь приоритеты. Нормальный рабочий ритм. А здесь ты не успел договорить, а он уже сделал. И в 95% случаев сделал так, как было задумано. И надо сразу идти дальше в этом быстром ритме. И так по кругу, без отдыха.
И вот тут тормозом оказываешься ты сам. Не ИИ — он-то пишет быстро. А ты, как руководитель этой разработки. Ты не успеваешь думать с той скоростью, с которой он программирует. Три-четыре одновременно идущих проекта — это примерно мой предел. Дальше начинаешь терять контекст, путать цепочки решений, забывать, что уже обсуждал, и что ещё нет. Просто перестаёшь удерживать всё в голове.
Может, это только у меня. Может, кто-то сможет вести десять потоков одновременно. Но пока ощущение такое: потолок сдвинулся с «я не успеваю писать код» на «я не успеваю думать за кодом». И это совсем другой тип нагрузки.
Что дальше
Обработки из этой статьи и проект можно скачать, ссылки внизу, вытащить из неё HTML-макеты и прогнать через свою модель Claude, OpenAI Codex, Google Gemini или любую другую хорошую ИИ. Посмотрите, кому интересно, как устроен обмен данными между HTML и формой, как работают стили, как передаются события. Это рабочая основа, от которой можно отталкиваться при разработке собственных форм подборов, дашбордов, рабочих столов. Без тех граблей и костылей, через которые я прошёл, пока искал подход.
Сейчас я довожу до ума MCP-серверы, через которые ИИ работает с 1С напрямую. В ближайшие неделю-полторы планирую выложить их в доступ и описать весь flow, как выглядит процесс от идеи до готовой реализации. Чтобы можно было взять и повторить.
Вайб-кодинг — это уже совсем не шутки и не игрушки. Всё действительно меняется невероятно быстро. Всем удачного программирования и удовольствия от процесса, сейчас для этого самое время.
Обработка протестирована на платформе 8.3.25+. Управляемые формы, ПолеHTMLДокумента. Внешних зависимостей нет.
О MCP-серверах для 1С, которые позволяют ИИ работать с метаданными и информационной базой напрямую и правильно, расскажу в следующей статье.
Ссылки на GitHub где можно скачать все файлы напрямую
Ссылка на GitHub с проектом (EDT плюс HTML и JS)
Полный архив проекта: проект 1С для EDT и блок разработки HTML/JS со всеми исходниками.
Каждая игра в отдельной папке, разбита по файлам так, чтобы ИИ (Claude Code, ChatGPT Codex) легко ориентировался в структуре и мог продолжить разработку. Структура проекта показала свою эффективность на практике: JS-скрипты, CSS и HTML функционально разделены на отдельные блоки. Логика обмена данными, рендеринг, обработка событий, стили. Такая же структура подходит и для разработки обычных форм 1С, подборов, дашбордов, рабочих столов — не только игровых интерфейсов. В комплекте — скрипт сборки, который собирает исходники в готовые HTML-файлы для загрузки в макеты 1С EDT.
Демо-внешняя обработка, с полной демонстрацией интерфейсов таблиц и реквизитов в разных стилях
Проверено на следующих конфигурациях и релизах:
- 1С:ERP Управление предприятием 2, релизы 2.5.25.112
Вступайте в нашу телеграмм-группу Инфостарт