Многие разработчики, впервые открывшие инструменты разработчика (F12) в браузере при работе с веб-клиентом «1С:Предприятия», испытывают легкий шок. Вместо привычного структурированного кода они видят огромные файлы со сложной, практически нечитаемой структурой на JavaScript. Возникает закономерный вопрос: как именно встроенный язык 1С превращается в инструкции, понятные веб-браузеру? Действительно ли происходит прямая трансляция «1С в JS», или за этим скрывается более сложная инженерная архитектура? Давайте подробно разберем этот процесс, изучим историю развития технологии и заглянем во внутреннее устройство веб-клиента.
Рассмотрим, как развивалась технология веб-клиента с момента её зарождения в районе 2006–2009 годов. В самых первых тестовых сборках разработчики платформы действительно пытались реализовать прямую трансляцию (компиляцию) исходного кода 1С в чистый JavaScript. Предполагалось, что каждая строчка кода на встроенном языке будет превращаться в аналогичную конструкцию на JS.
Однако этот подход быстро зашел в тупик по нескольким важным причинам:
Чтобы решить эти проблемы, архитектуру кардинально переработали. Выясним, как это устроено сейчас. Тонкий клиент компилирует встроенный язык 1С в промежуточный собственный байт-код. На стороне клиента этот байт-код интерпретируется и выполняется виртуальной машиной, написанной на C++. По этому же пути решили направить и веб-клиент.
В современном веб-клиенте схема работы выглядит следующим образом:
Такой подход позволил разработчикам платформы обеспечить 100% идентичность выполнения кода на любом клиенте. Виртуальная машина в браузере оперирует теми же абстракциями, типами данных и правилами, что и нативный тонкий клиент.
Проанализируем структуру JS-кода, который загружается в браузер. Тот хаос, который виден в отладчике, — это результат глубокой оптимизации, минификации и обфускации кода самой платформы 1С, а вовсе не сгенерированный код вашей конфигурации.
Изначально фирма 1С использовала собственный обфускатор, но размер загружаемого JS-кода оставался огромным (около 1,5 МБ), что негативно сказывалось на скорости первой загрузки веб-клиента. Впоследствии платформа перешла на промышленное решение — компилятор Google Closure Compiler в связке с библиотекой Google Closure Library.
Использование инструментов от Google дает несколько мощных преимуществ:
a или b). Более того, он производит inline-оптимизацию (встраивание мелких функций в место их вызова) и удаляет неиспользуемый код (dead code elimination).Обратной стороной такой оптимизации является полная нечитаемость кода для человека. Попытка отлаживать этот код напрямую через F12 без исходных Source Maps не имеет практического смысла.
Посмотрим на внутреннее устройство веб-клиента. Это не единый монолитный файл, а сложнейшая модульная система, структурированная аналогично крупным приложениям на Java или .NET. Вся клиентская JavaScript-часть платформы разделена на четыре масштабных проекта:
Внутри самого веб-клиента можно выделить несколько ключевых логических подсистем:
Структура, Массив, Соответствие, настройки компоновки данных, условное оформление и метаданные, доступные на клиенте.Разберем по шагам, как происходит интерактивное взаимодействие пользователя с системой. Общение веб-клиента с сервером 1С строится по стандартному протоколу HTTP/HTTPS через веб-сервер (например, IIS или Apache), на котором опубликована информационная база.
Примечательно, что тонкий клиент при подключении через интернет (по HTTP) и веб-клиент используют абсолютно одинаковый набор веб-сервисов платформы для обмена данными. Данные форм, командный интерфейс и прикладные объекты сериализуются в оптимизированные JSON-подобные структуры данных, передаются в браузер и там разбираются клиентским JS-движком.
Современный веб-клиент также поддерживает технологии PWA (Progressive Web Apps). Благодаря этому пользователи могут «установить» базу 1С из браузера на рабочий стол компьютера или экран мобильного телефона, получая полноценное приложение с быстрым доступом.
Если необходимо встроить веб-клиент 1С в сторонний сайт, разработчики могут использовать специальный Embedded WebClient API. С его помощью база 1С запускается внутри тега <iframe> на внешнем ресурсе, а обмен данными и командами между сайтом и 1С происходит через безопасный стандартный механизм postMessage в JavaScript и специализированный объект 1С ОкноВнешнегоСайта.
Понимание архитектуры виртуальной машины объясняет ключевое правило разработки под управляемые формы: минимизируйте сложные вычисления на клиенте.
Выясним причину этого ограничения. Когда вы запускаете сложный алгоритм (например, большой цикл обработки данных или тяжелый расчет) в тонком клиенте, он выполняется виртуальной машиной, скомпилированной в быстрый нативный машинный код (C++). Когда тот же самый код запускается в веб-клиенте, он работает по принципу «двойной интерпретации»:
Движок браузера (JS) -> Интерпретирует виртуальную машину 1С (JS) -> Которая интерпретирует байт-код 1С.
Такой "сэндвич" из интерпретаторов снижает скорость математических расчетов и работы с коллекциями в веб-клиенте в несколько раз по сравнению с тонким клиентом. Именно поэтому стандарты разработки фирмы 1С требуют переносить любые сложные расчеты на сервер с помощью директив &НаСервере или &НаСервереБезКонтекста, оставляя клиентскому коду только интерактивные функции: открытие форм, вопросы пользователю, простейшие визуальные изменения и проверку заполнения реквизитов.
Посмотрим на классический пример обработки изменения данных на клиенте. Допустим, у нас есть простая процедура пересчета суммы при изменении количества в строке табличной части:
&НаКлиенте
Процедура ТоварыКоличествоПриИзменении(Элемент)
СтрокаТаблицы = Элементы.Товары.ТекущиеДанные;
Если СтрокаТаблицы <> Неопределено Тогда
СтрокаТаблицы.Сумма = СтрокаТаблицы.Количество * СтрокаТаблицы.Цена;
КонецЕсли;
КонецПроцедуры
Давайте проанализируем, что происходит под капотом веб-клиента при выполнении этой процедуры:
change перехватывается подсистемой элементов управления веб-клиента.Элементы.Товары.ТекущиеДанные виртуальная машина обращается к клиентской объектной модели, написанной на JS, которая находит нужный элемент в DOM-дереве страницы и возвращает структуру данных текущей строки.Сумма клиентской модели данных.input на экране пользователя без отправки запроса на сервер.Благодаря такой сложной, но детально продуманной архитектуре, разработчики 1С могут писать код один раз, будучи уверенными, что он запустится и на Windows-компьютере в тонком клиенте, и на планшете iPad в Safari, и на смартфоне под управлением Android.